@burh/nuxt-core 1.0.501 → 1.0.503

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

@@ -1,643 +1,643 @@
-<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"
-					>
-						<div v-if="haveCustomTime">
-							<button
-								v-if="buttons.id != 8"
-								role="button"
-								class="tag tag-outline-primary-teste-online d-block w-100 buttons"
-								:value="buttons.value"
-								:class="
-									buttons.id == currentSelectedButton
-										? 'active-teste-online'
-										: ''
-								"
-								@click="timeSelection(buttons.id)"
-							>
-								<i
-									v-if="buttons.id == currentSelectedButton"
-									class="fas fa-check mr-1"
-								></i>
-								<small>{{ buttons.time }}</small>
-							</button>
-							<div :class="
-								buttons.id == currentSelectedButton
-									? 'active-time'
-									: ''" class="custom-time-div">
-								<i
-									v-if="buttons.id == currentSelectedButton && buttons.value"
-									class="fas fa-check mr-1"
-									:class="[currentSelectedButton == 8 ? 'custom-icon': 'custom-time-icon']"
-								></i>
-								<div v-if="buttons.id == 8" @click="setInitValue(buttons.id)">
-									<el-time-picker
-										format="HH:mm:ss"
-										value-format="HH:mm:ss"
-										v-model="buttons.value"
-										@change="setValueChange()"
-										:class="currentSelectedButton == buttons.id ? 'active-custom': 'not-active-custom' "
-										class="w-100"
-										placeholder="Tempo personalizado"
-									/>
-								</div>
-							</div>
-						</div>
-						<div v-else-if="!haveCustomTime">
-							<button
-								role="button"
-								class="tag tag-outline-primary d-block w-100 buttons"
-								: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>
-			<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
-			<i class="fas fa-times text-white ml-1"/>
-		</span>
-	</modal>
-</template>
-<script>
-import { mask } from 'vue-the-mask';
-import swal from 'sweetalert2';
-import { Select, Option, TimePicker } from 'element-ui';
-import lang from 'element-ui/lib/locale/lang/pt-br';
-import locale from 'element-ui/lib/locale';
-
-locale.use(lang);
-
-export default {
-	components: {
-		[Select.name]: Select,
-		[Option.name]: Option,
-		[TimePicker.name]: TimePicker,
-	},
-	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'
-			})
-		},
-		haveCustomTime:{
-			type:Boolean,
-			default:false
-		},
-		deadLineTime:{
-			type:Number,
-			default:0
-		},
-		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', custom: false },
-				{ id: '2', time: '10 minutos', value: '00:10:00', custom: false },
-				{ id: '3', time: '15 minutos', value: '00:15:00', custom: false },
-				{ id: '4', time: '30 minutos', value: '00:30:00', custom: false },
-				{ id: '5', time: '45 minutos', value: '00:45:00', custom: false },
-				{ id: '6', time: '60 minutos', value: '01:00:00', custom: false },
-				{ id: '7', time: '2 horas', value: '02:00:00', custom: false },
-				{ id: '8', time: 'Outro', value: null, custom: true }
-			],
-			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;
-		},
-		deadLineTime(){
-			this.loadTime();
-		},
-		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: {
-		setInitValue(id){
-			this.currentSelectedButton = id;
-			let getIndex = this.buttons.findIndex((e)=>e.custom == true);
-			if(!this.buttons[getIndex].value){
-				this.buttons[getIndex].value = null;
-			}
-		},
-		setValueChange(){
-			this.configInfo.selectedTime = this.buttons.find((e)=>e.custom == true).value;
-		},
-		loadTime() {
-			let time = null;
-			let deadLineTime = null;
-			if(this.deadLineTime == 0){
-				deadLineTime = this.buttons.find(e => e.value == 'null');
-			}
-			if(this.deadLineTime){
-				deadLineTime = this.buttons.find(e => e.value == this.deadLineTime);
-			}
-			if(deadLineTime != null){
-				this.currentSelectedButton = deadLineTime.id;
-				this.configInfo.selectedTime = this.deadLineTime;
-				return;
-			}
-			if(this.time && this.time != 'null'){
-				time = this.buttons.find(e => e.value === this.time);
-				if(!time){
-					time = this.buttons.find(e => e.custom === true);
-					time.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 = this.buttons.find((e)=>e.id == buttonId);
-			if(this.haveCustomTime && buttonId){
-				if(buttonId != 8 ){
-					this.buttons[7].value = null;
-				}
-			}
-			this.configInfo.selectedTime = btn.value;
-			this.currentSelectedButton = buttonId;
-		},
-		async sendConfig() {
-			let customButton = this.buttons.find((e) => e.custom == true);
-			const pass = await this.$refs.appConfigModal.validate();
-			if (!pass) {
-				return;
-			}
-			let config;
-			if(this.haveCustomTime && this.currentSelectedButton == customButton.id){
-				if(!customButton.value){
-					return this.showMessage('É necessário selecionar um tempo');
-				}
-				let timeReplaced = customButton.value.replaceAll(':', '');
-
-				if(timeReplaced == '000000' || timeReplaced.length < 6){
-					return this.showMessage('Tempo inválido');
-				}
-				if(timeReplaced > 240000){
-					return this.showMessage('O tempo não pode ser maior que 24 horas');
-				}
-			}
-			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;
-		},
-		showMessage(title, type = 'error'){
-			const Toast = swal.mixin({
-				toast: true,
-				position: 'top-end',
-				showConfirmButton: false,
-				timer: 3100,
-			});
-
-			return Toast.fire({
-				type: type,
-				title: title
-			});
-		}
-	}
-};
-</script>
-<style lang="scss">
-@import 'node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-.el-time-panel{
-    width: 161px;
-    .el-scrollbar__view:not(.el-autocomplete-suggestion__list) {
-        border: 1px solid #fff;
-        border-radius: 0.25rem;
-    }
-    .el-time-panel__btn.cancel{
-        display: none;
-    }
-    .el-time-panel__btn.confirm {
-        font-weight: 200;
-        color: #00B388;
-    }
-    .el-scrollbar__wrap{
-        margin-bottom:  0 !important;
-        overflow-x: hidden;
-    }
-}
-.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>
-<style lang="scss" scoped>
-.tag-outline-primary-teste-online:active{
-	background-color: #00b388;
-	color: #fff;
-	border: #00b388;
-	height: 51.39px;
-}
-.tag-outline-primary-teste-online{
-	background-color: #fff;
-	color: #00b388;
-	border: 2px solid #00b388;
-	height: 51.39px;
-}
-.active-teste-online{
-	background-color: #00b388;
-	color: #fff;
-	border: #00b388;
-	height: 51.39px;
-	i{
-		color:#fff;
-	}
-	small{
-		color: #fff;
-	}
-}
-.custom-time::placeholder{
-    font-size: 80%;
-    color:#00b388;
-}
-/deep/
-.custom-time:hover::placeholder{
-    color: #fff;
-}
-.active-time{
-    background-color:#00B388;
-}
-.custom-time-div{
-    position: relative;
-    .custom-time-icon{
-        position:absolute;
-        top:1rem;
-        left:1.5rem;
-        color:#fff;
-    }
-    .custom-icon{
-        position:absolute;
-        top:1rem;
-        z-index: 3;
-        left:1.5rem;
-        color:#fff;
-    }
-}
-/deep/  .active-custom{
-    .el-time-panel{
-        width: 15.5%;
-    }
-    .el-input__inner{
-        background-color: #00b388;
-        border: 2px solid #00b388;
-        display: block;
-        height: 51.39px;
-        color:#fff;
-        text-align: center;
-        &::placeholder{
-            color:#fff;
-        }
-    }
-    .el-input__prefix{
-        .el-icon-time:before{
-           display: none;
-        }
-    }
-    .el-input__suffix{
-        .el-input__suffix-inner{
-            .el-icon-circle-close{
-               display: none;
-            }
-        }
-    }
-}
-/deep/ .not-active-custom{
-    .el-time-panel{
-        width: 15.5%;
-    }
-    .el-input__inner{
-        border: 2px solid #00b388;
-        display: block;
-        height: 51.39px;
-				font-size: 0.8rem;
-				padding: 0;
-        color:#00b388;
-        text-align: center;
-        &::placeholder{
-            color:#00b388;
-        }
-        &:hover{
-            border: 2px solid #00b388;
-            background-color: #00b388;
-            &::placeholder{
-                color:#fff;
-            }
-        }
-    }
-    .el-input__prefix{
-        .el-icon-time:before{
-            display: none;
-        }
-    }
-    .el-input__suffix{
-        .el-input__suffix-inner{
-            .el-icon-circle-close{
-              display: none;
-            }
-        }
-    }
-}
-</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"
+					>
+						<div v-if="haveCustomTime">
+							<button
+								v-if="buttons.id != 8"
+								role="button"
+								class="tag tag-outline-primary-teste-online d-block w-100 buttons"
+								:value="buttons.value"
+								:class="
+									buttons.id == currentSelectedButton
+										? 'active-teste-online'
+										: ''
+								"
+								@click="timeSelection(buttons.id)"
+							>
+								<i
+									v-if="buttons.id == currentSelectedButton"
+									class="fas fa-check mr-1"
+								></i>
+								<small>{{ buttons.time }}</small>
+							</button>
+							<div :class="
+								buttons.id == currentSelectedButton
+									? 'active-time'
+									: ''" class="custom-time-div">
+								<i
+									v-if="buttons.id == currentSelectedButton && buttons.value"
+									class="fas fa-check mr-1"
+									:class="[currentSelectedButton == 8 ? 'custom-icon': 'custom-time-icon']"
+								></i>
+								<div v-if="buttons.id == 8" @click="setInitValue(buttons.id)">
+									<el-time-picker
+										format="HH:mm:ss"
+										value-format="HH:mm:ss"
+										v-model="buttons.value"
+										@change="setValueChange()"
+										:class="currentSelectedButton == buttons.id ? 'active-custom': 'not-active-custom' "
+										class="w-100"
+										placeholder="Tempo personalizado"
+									/>
+								</div>
+							</div>
+						</div>
+						<div v-else-if="!haveCustomTime">
+							<button
+								role="button"
+								class="tag tag-outline-primary d-block w-100 buttons"
+								: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>
+			<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
+			<i class="fas fa-times text-white ml-1"/>
+		</span>
+	</modal>
+</template>
+<script>
+import { mask } from 'vue-the-mask';
+import swal from 'sweetalert2';
+import { Select, Option, TimePicker } from 'element-ui';
+import lang from 'element-ui/lib/locale/lang/pt-br';
+import locale from 'element-ui/lib/locale';
+
+locale.use(lang);
+
+export default {
+	components: {
+		[Select.name]: Select,
+		[Option.name]: Option,
+		[TimePicker.name]: TimePicker,
+	},
+	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'
+			})
+		},
+		haveCustomTime:{
+			type:Boolean,
+			default:false
+		},
+		deadLineTime:{
+			type:Number,
+			default:0
+		},
+		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', custom: false },
+				{ id: '2', time: '10 minutos', value: '00:10:00', custom: false },
+				{ id: '3', time: '15 minutos', value: '00:15:00', custom: false },
+				{ id: '4', time: '30 minutos', value: '00:30:00', custom: false },
+				{ id: '5', time: '45 minutos', value: '00:45:00', custom: false },
+				{ id: '6', time: '60 minutos', value: '01:00:00', custom: false },
+				{ id: '7', time: '2 horas', value: '02:00:00', custom: false },
+				{ id: '8', time: 'Outro', value: null, custom: true }
+			],
+			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;
+		},
+		deadLineTime(){
+			this.loadTime();
+		},
+		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: {
+		setInitValue(id){
+			this.currentSelectedButton = id;
+			let getIndex = this.buttons.findIndex((e)=>e.custom == true);
+			if(!this.buttons[getIndex].value){
+				this.buttons[getIndex].value = null;
+			}
+		},
+		setValueChange(){
+			this.configInfo.selectedTime = this.buttons.find((e)=>e.custom == true).value;
+		},
+		loadTime() {
+			let time = null;
+			let deadLineTime = null;
+			if(this.deadLineTime == 0){
+				deadLineTime = this.buttons.find(e => e.value == 'null');
+			}
+			if(this.deadLineTime){
+				deadLineTime = this.buttons.find(e => e.value == this.deadLineTime);
+			}
+			if(deadLineTime != null){
+				this.currentSelectedButton = deadLineTime.id;
+				this.configInfo.selectedTime = this.deadLineTime;
+				return;
+			}
+			if(this.time && this.time != 'null'){
+				time = this.buttons.find(e => e.value === this.time);
+				if(!time){
+					time = this.buttons.find(e => e.custom === true);
+					time.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 = this.buttons.find((e)=>e.id == buttonId);
+			if(this.haveCustomTime && buttonId){
+				if(buttonId != 8 ){
+					this.buttons[7].value = null;
+				}
+			}
+			this.configInfo.selectedTime = btn.value;
+			this.currentSelectedButton = buttonId;
+		},
+		async sendConfig() {
+			let customButton = this.buttons.find((e) => e.custom == true);
+			const pass = await this.$refs.appConfigModal.validate();
+			if (!pass) {
+				return;
+			}
+			let config;
+			if(this.haveCustomTime && this.currentSelectedButton == customButton.id){
+				if(!customButton.value){
+					return this.showMessage('É necessário selecionar um tempo');
+				}
+				let timeReplaced = customButton.value.replaceAll(':', '');
+
+				if(timeReplaced == '000000' || timeReplaced.length < 6){
+					return this.showMessage('Tempo inválido');
+				}
+				if(timeReplaced > 240000){
+					return this.showMessage('O tempo não pode ser maior que 24 horas');
+				}
+			}
+			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;
+		},
+		showMessage(title, type = 'error'){
+			const Toast = swal.mixin({
+				toast: true,
+				position: 'top-end',
+				showConfirmButton: false,
+				timer: 3100,
+			});
+
+			return Toast.fire({
+				type: type,
+				title: title
+			});
+		}
+	}
+};
+</script>
+<style lang="scss">
+@import 'node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+.el-time-panel{
+    width: 161px;
+    .el-scrollbar__view:not(.el-autocomplete-suggestion__list) {
+        border: 1px solid #fff;
+        border-radius: 0.25rem;
+    }
+    .el-time-panel__btn.cancel{
+        display: none;
+    }
+    .el-time-panel__btn.confirm {
+        font-weight: 200;
+        color: #00B388;
+    }
+    .el-scrollbar__wrap{
+        margin-bottom:  0 !important;
+        overflow-x: hidden;
+    }
+}
+.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>
+<style lang="scss" scoped>
+.tag-outline-primary-teste-online:active{
+	background-color: #00b388;
+	color: #fff;
+	border: #00b388;
+	height: 51.39px;
+}
+.tag-outline-primary-teste-online{
+	background-color: #fff;
+	color: #00b388;
+	border: 2px solid #00b388;
+	height: 51.39px;
+}
+.active-teste-online{
+	background-color: #00b388;
+	color: #fff;
+	border: #00b388;
+	height: 51.39px;
+	i{
+		color:#fff;
+	}
+	small{
+		color: #fff;
+	}
+}
+.custom-time::placeholder{
+    font-size: 80%;
+    color:#00b388;
+}
+/deep/
+.custom-time:hover::placeholder{
+    color: #fff;
+}
+.active-time{
+    background-color:#00B388;
+}
+.custom-time-div{
+    position: relative;
+    .custom-time-icon{
+        position:absolute;
+        top:1rem;
+        left:1.5rem;
+        color:#fff;
+    }
+    .custom-icon{
+        position:absolute;
+        top:1rem;
+        z-index: 3;
+        left:1.5rem;
+        color:#fff;
+    }
+}
+/deep/  .active-custom{
+    .el-time-panel{
+        width: 15.5%;
+    }
+    .el-input__inner{
+        background-color: #00b388;
+        border: 2px solid #00b388;
+        display: block;
+        height: 51.39px;
+        color:#fff;
+        text-align: center;
+        &::placeholder{
+            color:#fff;
+        }
+    }
+    .el-input__prefix{
+        .el-icon-time:before{
+           display: none;
+        }
+    }
+    .el-input__suffix{
+        .el-input__suffix-inner{
+            .el-icon-circle-close{
+               display: none;
+            }
+        }
+    }
+}
+/deep/ .not-active-custom{
+    .el-time-panel{
+        width: 15.5%;
+    }
+    .el-input__inner{
+        border: 2px solid #00b388;
+        display: block;
+        height: 51.39px;
+				font-size: 0.8rem;
+				padding: 0;
+        color:#00b388;
+        text-align: center;
+        &::placeholder{
+            color:#00b388;
+        }
+        &:hover{
+            border: 2px solid #00b388;
+            background-color: #00b388;
+            &::placeholder{
+                color:#fff;
+            }
+        }
+    }
+    .el-input__prefix{
+        .el-icon-time:before{
+            display: none;
+        }
+    }
+    .el-input__suffix{
+        .el-input__suffix-inner{
+            .el-icon-circle-close{
+              display: none;
+            }
+        }
+    }
+}
+</style>