@burh/nuxt-core 1.0.89 → 1.0.90

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

@@ -1,351 +1,351 @@
-<template>
-    <modal
-        :show.sync="openModal"
-        modalContentClasses="container-fluid"
-        headerClasses="row px-4 pt-5"
-        bodyClasses="row px-4"
-        v-on:close="$emit('close-modal')"
-        size="lg"
-        class="modal"
-    >
-        <template slot="header">
-            <div class="pl-3">
-                <h2 class="display-4">{{ title }}</h2>
-            </div>
-        </template>
-
-        <validation-observer ref="appConfigModal" tag="div">
-            <validation-provider
-                tag="div"
-                class="col-12"
-                :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>
-
-            <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"
-                            :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"
-                    >{{ configAppButton }}
-                </base-button>
-            </div>
-        </validation-observer>
-    </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
-                };
-                console.log(config);
-            } 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;
-    }
-}
-</style>
+<template>
+    <modal
+        :show.sync="openModal"
+        modalContentClasses="container-fluid"
+        headerClasses="row px-4 pt-5"
+        bodyClasses="row px-4"
+        v-on:close="$emit('close-modal')"
+        size="lg"
+        class="modal"
+    >
+        <template slot="header">
+            <div class="pl-3">
+                <h2 class="display-4">{{ title }}</h2>
+            </div>
+        </template>
+
+        <validation-observer ref="appConfigModal" tag="div">
+            <validation-provider
+                tag="div"
+                class="col-12"
+                :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>
+
+            <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"
+                            :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"
+                    >{{ configAppButton }}
+                </base-button>
+            </div>
+        </validation-observer>
+    </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
+                };
+                console.log(config);
+            } 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;
+    }
+}
+</style>