@burh/nuxt-core 1.0.404 → 1.0.405

package/components/burh-ds/Modals/AppConfigModal.vue

@@ -1,390 +1,390 @@
-<template>
-    <modal
-        :show.sync="openModal"
-        modalContentClasses="container-fluid"
-        headerClasses="row px-4 pt-5"
-        bodyClasses="row px-4"
-        size="lg"
-        class="modal"
-    >
-        <template slot="">
-            <div class="pl-3 mt-5 text-right">
-                <h2 class="display-4">{{ title }}</h2>
-            </div>
-        </template>
-
-        <validation-observer ref="appConfigModal" tag="div">
-            <validation-provider
-                tag="div"
-                class="col-12 mt-5"
-                :vid="`name`"
-                name="name"
-                rules="required"
-                v-slot="{ errors }"
-            >
-                <base-input
-                    :label="name"
-                    :placeholder="inputPlaceholders.firstInput"
-                    required
-                    v-model="configInfo.title"
-                    :error="errors[0]"
-                    :valid="errors.length ? true : false"
-                >
-                </base-input>
-            </validation-provider>
-
-            <div class="col-12 mb-4">
-                <label for="description" class="form-control-label">{{
-                    textAreaTitle
-                }}</label>
-                <textarea
-                    id="description"
-                    class="form-control"
-                    :placeholder="inputPlaceholders.secondInput"
-                    v-model="configInfo.textarea"
-                ></textarea>
-            </div>
-
-            <div
-                class="col-12 mb-4 d-flex flex-column"
-                v-if="!isCourse && categories && categories.length"
-            >
-                <label for="category" class="form-control-label"
-                    >Categoria</label
-                >
-                <el-select
-                    filterable
-                    class="select-danger"
-                    id="category"
-                    :empty="'Nenhuma categoria foi encontrada'"
-                    v-model="configInfo.category"
-                    :placeholder="''"
-                >
-                    <el-option
-                        v-for="(category, index) in categories"
-                        :key="category.id"
-                        :label="category.name"
-                        :value="category.id"
-                        :selected="index == 0 && configInfo.category == null"
-                    >
-                    </el-option>
-                </el-select>
-            </div>
-
-            <div class="col-12 mb-4" v-if="isCourse">
-                <base-input
-                    v-mask="['##:##:##']"
-                    :label="'Carga horária'"
-                    :placeholder="inputPlaceholders.thirdInput"
-                    v-model="configInfo.workload"
-                ></base-input>
-            </div>
-
-            <slot name="testes"></slot>
-
-            <slot name="nota"></slot>
-
-            <slot name="email"></slot>
-
-            <div class="col-12 mb-4">
-                <label class="mb-0 form-control-label mb-3">{{
-                    buttonAreaTitle
-                }}</label>
-
-                <div class="row">
-                    <div
-                        class="col-6 col-lg-3"
-                        v-for="(buttons, index) in buttons"
-                        :key="index"
-                    >
-                        <button
-                            role="button"
-                            class="tag tag-outline-primary d-block w-100 buttons"
-                            :id="'button-' + buttons.id"
-                            :value="buttons.value"
-                            :class="
-                                buttons.id == currentSelectedButton
-                                    ? 'active'
-                                    : ''
-                            "
-                            @click="timeSelection(buttons.id)"
-                        >
-                            <i
-                                v-if="buttons.id == currentSelectedButton"
-                                class="fas fa-check mr-1"
-                            ></i>
-                            <small>{{ buttons.time }}</small>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="col-12 d-flex pb-4">
-                <base-button
-                    size="md"
-                    type="primary"
-                    role="button"
-                    @click="sendConfig()"
-                    class="ml-auto"
-                    :disabled="!configInfo.title"
-                    >{{ configAppButton }}
-                </base-button>
-            </div>
-        </validation-observer>
-
-        <span class="tool tool-close" @click="$emit('close-modal')">
-            Fechar
-            <font-awesome-icon
-                :icon="['fas', 'times']"
-                class="text-white ml-1"
-            />
-        </span>
-    </modal>
-</template>
-<script>
-import { mask } from 'vue-the-mask';
-import { Select, Option } from 'element-ui';
-export default {
-    components: {
-        [Select.name]: Select,
-        [Option.name]: Option
-    },
-    directives: { mask },
-    data() {
-        return {
-            configInfo: {
-                title: this.titleValue,
-                textarea: this.textAreaValue,
-                selectedTime: '',
-                workload: this.workloadValue,
-                category: this.testCategories
-            },
-            currentSelectedButton: String,
-            value: ''
-        };
-    },
-    model: {
-        prop: 'show'
-    },
-    props: {
-        isCourse: {
-            type: Boolean,
-            default: false
-        },
-        inputPlaceholders: {
-            type: Object,
-            default: () => ({
-                firstInput: 'Insira o nome do teste',
-                secondInput: 'Insira a descrição do teste',
-                thirdInput: 'Insira a carga horária do curso'
-            })
-        },
-        show: {
-            type: Boolean,
-            default: false
-        },
-        name: {
-            type: String,
-            default: 'Nome'
-        },
-        defaultButtonSelected: {
-            type: Number,
-            default: 6
-        },
-        testId: {
-            type: Number,
-            default: null
-        },
-        buttons: {
-            type: Array,
-            default: () => [
-                { id: '1', time: '5 minutos', value: '00:05:00' },
-                { id: '2', time: '10 minutos', value: '00:10:00' },
-                { id: '3', time: '15 minutos', value: '00:15:00' },
-                { id: '4', time: '30 minutos', value: '00:30:00' },
-                { id: '5', time: '45 minutos', value: '00:45:00' },
-                { id: '6', time: '60 minutos', value: '01:00:00' },
-                { id: '7', time: '2 horas', value: '02:00:00' },
-                { id: '8', time: '8 horas', value: '08:00:00' }
-            ],
-            description: 'Botoes de tempo'
-        },
-        title: {
-            type: String,
-            default: 'Criar Teste',
-            description: 'Titulo do Modal'
-        },
-        workloadTitle: {
-            type: String,
-            default: 'Carga horária',
-            description:
-                'Carga horária do curso, apenas se o modal for usado para a pagina de cursos'
-        },
-        textAreaTitle: {
-            type: String,
-            default: 'Descrição',
-            description: 'Titulo da text area'
-        },
-        buttonAreaTitle: {
-            type: String,
-            default: 'Tempo Limite',
-            description: 'Titulo da area de botões'
-        },
-        configAppButton: {
-            type: String,
-            default: 'Salvar',
-            description: 'Botão de envio'
-        },
-        titleValue: {
-            type: String,
-            default: ''
-        },
-        textAreaValue: {
-            type: String,
-            default: ''
-        },
-        workloadValue: {
-            type: String,
-            default: '00:00:00'
-        },
-        time: {
-            type: String,
-            default: ''
-        },
-        testCategories: {
-            type: Number,
-            default: null
-        },
-        categories: {
-            type: Array,
-            default: () => []
-        }
-    },
-    watch: {
-        titleValue(newValue) {
-            this.configInfo.title = newValue;
-        },
-        textAreaValue(newValue) {
-            this.configInfo.textarea = newValue;
-        },
-        workloadValue(newValue) {
-            this.configInfo.workload = newValue;
-        },
-        time(newValue) {
-            this.configInfo.selectedTime = newValue;
-        },
-        testCategories(newValue) {
-            this.configInfo.category = newValue;
-        },
-        show(value) {
-            const isCategoryInitialized = this.configInfo.category
-                ? true
-                : false;
-            if (value && !this.isCourse && !isCategoryInitialized) {
-                this.configInfo.category = this.categories[0].id;
-            }
-        }
-    },
-    mounted() {
-        this.loadTime();
-    },
-    computed: {
-        openModal: {
-            get() {
-                return this.show;
-            },
-            set(show) {
-                this.$emit('input', show);
-            }
-        }
-    },
-    methods: {
-        loadTime() {
-            let time = this.buttons.find(e => e.value === this.time);
-            if (time != null) {
-                this.currentSelectedButton = time.id;
-                this.configInfo.selectedTime = this.time;
-            } else {
-                time = this.buttons.find(
-                    e => e.id == this.defaultButtonSelected
-                );
-                this.currentSelectedButton = time.id;
-                this.configInfo.selectedTime = time.value;
-            }
-        },
-        timeSelection(buttonId) {
-            let btn = document.getElementById('button-' + buttonId);
-            this.configInfo.selectedTime = btn.value;
-            this.currentSelectedButton = buttonId;
-        },
-        async sendConfig() {
-            const pass = await this.$refs.appConfigModal.validate();
-            if (!pass) {
-                return;
-            }
-            let config;
-            if (!this.isCourse) {
-                config = {
-                    title: this.configInfo.title,
-                    textarea: this.configInfo.textarea,
-                    selectedTime: this.configInfo.selectedTime,
-                    category: this.configInfo.category
-                };
-            } else if (this.isCourse) {
-                config = {
-                    title: this.configInfo.title,
-                    textarea: this.configInfo.textarea,
-                    selectedTime: this.configInfo.selectedTime,
-                    workload: this.configInfo.workload
-                };
-            }
-            this.$emit('send-config-info', config);
-            this.openModal = false;
-        }
-    }
-};
-</script>
-<style lang="scss">
-@import 'node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-.fixed-button {
-    .btn {
-        font-size: 0.775rem;
-        @media screen and (max-width: 992px) {
-            &:last-child {
-                margin-right: 1rem !important;
-            }
-        }
-        width: 10rem;
-    }
-}
-
-.buttons:focus {
-    outline: 0;
-}
-
-.tool {
-    position: absolute;
-    top: 1rem;
-    z-index: 10;
-    color: $primary;
-    cursor: pointer;
-
-    &-close {
-        position: absolute;
-        width: 88px;
-        height: 27px;
-        right: 7px;
-        top: 7px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        font-size: 11px;
-
-        font-weight: 500;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 17.5px;
-        color: #fff;
-    }
-}
-</style>
+<template>
+    <modal
+        :show.sync="openModal"
+        modalContentClasses="container-fluid"
+        headerClasses="row px-4 pt-5"
+        bodyClasses="row px-4"
+        size="lg"
+        class="modal"
+    >
+        <template slot="">
+            <div class="pl-3 mt-5 text-right">
+                <h2 class="display-4">{{ title }}</h2>
+            </div>
+        </template>
+
+        <validation-observer ref="appConfigModal" tag="div">
+            <validation-provider
+                tag="div"
+                class="col-12 mt-5"
+                :vid="`name`"
+                name="name"
+                rules="required"
+                v-slot="{ errors }"
+            >
+                <base-input
+                    :label="name"
+                    :placeholder="inputPlaceholders.firstInput"
+                    required
+                    v-model="configInfo.title"
+                    :error="errors[0]"
+                    :valid="errors.length ? true : false"
+                >
+                </base-input>
+            </validation-provider>
+
+            <div class="col-12 mb-4">
+                <label for="description" class="form-control-label">{{
+                    textAreaTitle
+                }}</label>
+                <textarea
+                    id="description"
+                    class="form-control"
+                    :placeholder="inputPlaceholders.secondInput"
+                    v-model="configInfo.textarea"
+                ></textarea>
+            </div>
+
+            <div
+                class="col-12 mb-4 d-flex flex-column"
+                v-if="!isCourse && categories && categories.length"
+            >
+                <label for="category" class="form-control-label"
+                    >Categoria</label
+                >
+                <el-select
+                    filterable
+                    class="select-danger"
+                    id="category"
+                    :empty="'Nenhuma categoria foi encontrada'"
+                    v-model="configInfo.category"
+                    :placeholder="''"
+                >
+                    <el-option
+                        v-for="(category, index) in categories"
+                        :key="category.id"
+                        :label="category.name"
+                        :value="category.id"
+                        :selected="index == 0 && configInfo.category == null"
+                    >
+                    </el-option>
+                </el-select>
+            </div>
+
+            <div class="col-12 mb-4" v-if="isCourse">
+                <base-input
+                    v-mask="['##:##:##']"
+                    :label="'Carga horária'"
+                    :placeholder="inputPlaceholders.thirdInput"
+                    v-model="configInfo.workload"
+                ></base-input>
+            </div>
+
+            <slot name="testes"></slot>
+
+            <slot name="nota"></slot>
+
+            <slot name="email"></slot>
+
+            <div class="col-12 mb-4">
+                <label class="mb-0 form-control-label mb-3">{{
+                    buttonAreaTitle
+                }}</label>
+
+                <div class="row">
+                    <div
+                        class="col-6 col-lg-3"
+                        v-for="(buttons, index) in buttons"
+                        :key="index"
+                    >
+                        <button
+                            role="button"
+                            class="tag tag-outline-primary d-block w-100 buttons"
+                            :id="'button-' + buttons.id"
+                            :value="buttons.value"
+                            :class="
+                                buttons.id == currentSelectedButton
+                                    ? 'active'
+                                    : ''
+                            "
+                            @click="timeSelection(buttons.id)"
+                        >
+                            <i
+                                v-if="buttons.id == currentSelectedButton"
+                                class="fas fa-check mr-1"
+                            ></i>
+                            <small>{{ buttons.time }}</small>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 d-flex pb-4">
+                <base-button
+                    size="md"
+                    type="primary"
+                    role="button"
+                    @click="sendConfig()"
+                    class="ml-auto"
+                    :disabled="!configInfo.title"
+                    >{{ configAppButton }}
+                </base-button>
+            </div>
+        </validation-observer>
+
+        <span class="tool tool-close" @click="$emit('close-modal')">
+            Fechar
+            <font-awesome-icon
+                :icon="['fas', 'times']"
+                class="text-white ml-1"
+            />
+        </span>
+    </modal>
+</template>
+<script>
+import { mask } from 'vue-the-mask';
+import { Select, Option } from 'element-ui';
+export default {
+    components: {
+        [Select.name]: Select,
+        [Option.name]: Option
+    },
+    directives: { mask },
+    data() {
+        return {
+            configInfo: {
+                title: this.titleValue,
+                textarea: this.textAreaValue,
+                selectedTime: '',
+                workload: this.workloadValue,
+                category: this.testCategories
+            },
+            currentSelectedButton: String,
+            value: ''
+        };
+    },
+    model: {
+        prop: 'show'
+    },
+    props: {
+        isCourse: {
+            type: Boolean,
+            default: false
+        },
+        inputPlaceholders: {
+            type: Object,
+            default: () => ({
+                firstInput: 'Insira o nome do teste',
+                secondInput: 'Insira a descrição do teste',
+                thirdInput: 'Insira a carga horária do curso'
+            })
+        },
+        show: {
+            type: Boolean,
+            default: false
+        },
+        name: {
+            type: String,
+            default: 'Nome'
+        },
+        defaultButtonSelected: {
+            type: Number,
+            default: 6
+        },
+        testId: {
+            type: Number,
+            default: null
+        },
+        buttons: {
+            type: Array,
+            default: () => [
+                { id: '1', time: '5 minutos', value: '00:05:00' },
+                { id: '2', time: '10 minutos', value: '00:10:00' },
+                { id: '3', time: '15 minutos', value: '00:15:00' },
+                { id: '4', time: '30 minutos', value: '00:30:00' },
+                { id: '5', time: '45 minutos', value: '00:45:00' },
+                { id: '6', time: '60 minutos', value: '01:00:00' },
+                { id: '7', time: '2 horas', value: '02:00:00' },
+                { id: '8', time: '8 horas', value: '08:00:00' }
+            ],
+            description: 'Botoes de tempo'
+        },
+        title: {
+            type: String,
+            default: 'Criar Teste',
+            description: 'Titulo do Modal'
+        },
+        workloadTitle: {
+            type: String,
+            default: 'Carga horária',
+            description:
+                'Carga horária do curso, apenas se o modal for usado para a pagina de cursos'
+        },
+        textAreaTitle: {
+            type: String,
+            default: 'Descrição',
+            description: 'Titulo da text area'
+        },
+        buttonAreaTitle: {
+            type: String,
+            default: 'Tempo Limite',
+            description: 'Titulo da area de botões'
+        },
+        configAppButton: {
+            type: String,
+            default: 'Salvar',
+            description: 'Botão de envio'
+        },
+        titleValue: {
+            type: String,
+            default: ''
+        },
+        textAreaValue: {
+            type: String,
+            default: ''
+        },
+        workloadValue: {
+            type: String,
+            default: '00:00:00'
+        },
+        time: {
+            type: String,
+            default: ''
+        },
+        testCategories: {
+            type: Number,
+            default: null
+        },
+        categories: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        titleValue(newValue) {
+            this.configInfo.title = newValue;
+        },
+        textAreaValue(newValue) {
+            this.configInfo.textarea = newValue;
+        },
+        workloadValue(newValue) {
+            this.configInfo.workload = newValue;
+        },
+        time(newValue) {
+            this.configInfo.selectedTime = newValue;
+        },
+        testCategories(newValue) {
+            this.configInfo.category = newValue;
+        },
+        show(value) {
+            const isCategoryInitialized = this.configInfo.category
+                ? true
+                : false;
+            if (value && !this.isCourse && !isCategoryInitialized) {
+                this.configInfo.category = this.categories[0].id;
+            }
+        }
+    },
+    mounted() {
+        this.loadTime();
+    },
+    computed: {
+        openModal: {
+            get() {
+                return this.show;
+            },
+            set(show) {
+                this.$emit('input', show);
+            }
+        }
+    },
+    methods: {
+        loadTime() {
+            let time = this.buttons.find(e => e.value === this.time);
+            if (time != null) {
+                this.currentSelectedButton = time.id;
+                this.configInfo.selectedTime = this.time;
+            } else {
+                time = this.buttons.find(
+                    e => e.id == this.defaultButtonSelected
+                );
+                this.currentSelectedButton = time.id;
+                this.configInfo.selectedTime = time.value;
+            }
+        },
+        timeSelection(buttonId) {
+            let btn = document.getElementById('button-' + buttonId);
+            this.configInfo.selectedTime = btn.value;
+            this.currentSelectedButton = buttonId;
+        },
+        async sendConfig() {
+            const pass = await this.$refs.appConfigModal.validate();
+            if (!pass) {
+                return;
+            }
+            let config;
+            if (!this.isCourse) {
+                config = {
+                    title: this.configInfo.title,
+                    textarea: this.configInfo.textarea,
+                    selectedTime: this.configInfo.selectedTime,
+                    category: this.configInfo.category
+                };
+            } else if (this.isCourse) {
+                config = {
+                    title: this.configInfo.title,
+                    textarea: this.configInfo.textarea,
+                    selectedTime: this.configInfo.selectedTime,
+                    workload: this.configInfo.workload
+                };
+            }
+            this.$emit('send-config-info', config);
+            this.openModal = false;
+        }
+    }
+};
+</script>
+<style lang="scss">
+@import 'node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+.fixed-button {
+    .btn {
+        font-size: 0.775rem;
+        @media screen and (max-width: 992px) {
+            &:last-child {
+                margin-right: 1rem !important;
+            }
+        }
+        width: 10rem;
+    }
+}
+
+.buttons:focus {
+    outline: 0;
+}
+
+.tool {
+    position: absolute;
+    top: 1rem;
+    z-index: 10;
+    color: $primary;
+    cursor: pointer;
+
+    &-close {
+        position: absolute;
+        width: 88px;
+        height: 27px;
+        right: 7px;
+        top: 7px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-size: 11px;
+
+        font-weight: 500;
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 17.5px;
+        color: #fff;
+    }
+}
+</style>