@burh/nuxt-core 1.0.409 → 1.0.411

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

@@ -1,346 +1,346 @@
 <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>
+	<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>
+		<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">
+				<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 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>
+			<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="testes"></slot>
 
-            <slot name="nota"></slot>
+			<slot name="nota"></slot>
 
-            <slot name="email"></slot>
+			<slot name="email"></slot>
 
-            <div class="col-12 mb-4">
-                <label class="mb-0 form-control-label mb-3">{{
-                    buttonAreaTitle
-                }}</label>
+			<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>
+				<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>
+		<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:
+	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;
-        }
-    }
+		},
+		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">