diary-app/src/screens/lessons/AddLessonScreen.vue

<template>
    <nb-container>
        <Header
            title="Добавить"
            :navigation="this.props.navigation"
            :left-button="{
                show: true,
                icon: 'md-arrow-back',
                action: () => this.props.navigation.goBack()
            }"
            :right-button="{
                show: false
            }"
            :right-second-button="{
                show: false
            }"
        />

        <nb-content>
            <nb-form>
                <nb-separator bordered>
                    <nb-text>Информация о предмете</nb-text>
                </nb-separator>

                <nb-content padder>
                    <nb-item stackedLabel :disabled="setNull">
                        <nb-label>Название предмета</nb-label>
                        <nb-input :disabled="setNull" v-model="lesson.name" />
                    </nb-item>
                </nb-content>

                <nb-content padder>
                    <nb-item stackedLabel :disabled="setNull">
                        <nb-label>Номер аудитории</nb-label>
                        <nb-input :disabled="setNull" v-model="lesson.audience" />
                    </nb-item>
                </nb-content>

                <nb-list-item
                    class="checkbox-wrapper"
                    last
                    :onPress="toggleNullableLesson"
                >
                    <nb-left>
                        <nb-text>Нет занятия</nb-text>
                    </nb-left>

                    <nb-right>
                        <nb-checkbox
                            class="checkbox"
                            :checked="setNull"
                            :onPress="toggleNullableLesson"
                        />
                    </nb-right>
                </nb-list-item>

                <nb-separator bordered>
                    <nb-text>День недели</nb-text>
                </nb-separator>

                <nb-item class="picker" picker last>
                    <nb-picker
                        mode="dropdown"
                        :style="{ width: 350 }"
                        placeholder="День недели"
                        placeholderStyle="{ color: '#bfc6ea' }"
                        placeholderIconColor="#007aff"
                        :iosIcon="getIosIcon()"
                        :selectedValue="lesson.day"
                        :onValueChange="selectDay"
                    >
                        <item label="Понедельник" value="monday" />
                        <item label="Вторник" value="tuesday" />
                        <item label="Среда" value="wednesday" />
                        <item label="Четверг" value="thursday" />
                        <item label="Пятница" value="friday" />
                        <item label="Суббота" value="saturday" />
                    </nb-picker>
                </nb-item>

                <nb-separator bordered>
                    <nb-text>Выбор недели</nb-text>
                </nb-separator>

                <nb-list-item
                        :selected="lesson.week_type === 1"
                        :onPress="() => lesson.week_type = 1"
                        last
                >
                    <nb-left>
                        <nb-text>Нечетная неделя</nb-text>
                    </nb-left>

                    <nb-right>
                        <nb-radio :selected="lesson.week_type === 1" />
                    </nb-right>
                </nb-list-item>

                <nb-list-item
                    :selected="lesson.week_type === 2"
                    :onPress="() => lesson.week_type = 2"
                    last
                >
                    <nb-left>
                        <nb-text>Четная неделя</nb-text>
                    </nb-left>

                    <nb-right>
                        <nb-radio :selected="lesson.week_type === 2"/>
                    </nb-right>
                </nb-list-item>
            </nb-form>

            <nb-content padder>
                <nb-button
                    class="button"
                    block
                    primary
                    :onPress="addLesson"
                >
                    <nb-spinner v-if="loading" color="#fff"></nb-spinner>
                    <nb-text v-if="!loading">Добавить</nb-text>
                </nb-button>
            </nb-content>
        </nb-content>
    </nb-container>
</template>

<script>
    import React from "react";
    import { Picker, Icon, Toast } from "native-base";

    import Header from "../../components/Header";

    import store from "../../store";

    export default {
        name: 'AddLesson',
        components: {
            Header,
            Item: Picker.Item
        },
        data() {
            return {
                lesson: {
                    name: "",
                    audience: "",
                    day: "monday",
                    week_type: 1,
                },
                validationError: {
                    name: false,
                    audience: false
                },
                setNull: false,
                loading: false
            }
        },
        methods: {
            selectDay(value) {
                this.lesson.day = value;
            },
            toggleNullableLesson() {
                this.setNull = !this.setNull;

                this.lesson.name = (this.setNull) ? 'Нет занятия' : '';
                this.lesson.audience = '';
            },
            getIosIcon() {
                return <Icon name="ios-arrow-down-outline" />;
            },
            async addLesson() {
                this.loading = true;

                let response = await this.$plugins.f(
                    'lesson',
                    'POST',
                    store.state.userObj.api_token,
                    JSON.stringify(this.lesson),
                    true
                );

                if (response.body.status) {
                    Toast.show({
                        text: "Предмет успешно добавлен",
                        buttonText: "ОК",
                        type: "success",
                        duration: 3000
                    });
                } else {
                    Toast.show({
                        text: "Произошла ошибка, проверьте правильность заполнения полей!",
                        buttonText: "Закрыть",
                        type: "danger",
                        duration: 3000
                    });
                }

                this.loading = false;
            },
        }
    }
</script>

<style scoped>
    .picker {
        border-bottom-width: 0;
    }

    .checkbox {
        margin-right: 2px;
    }

    .button {
        margin-top: 20px;
    }
</style>