@burh/nuxt-core 1.0.404 → 1.0.406

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

@@ -1,349 +1,393 @@
-<template>
-	<el-dialog
-		:visible.sync="isModalOpen"
-		width="54%"
-		custom-class="position-relative"
-		@close="$emit('close')"
-	>
-		<basics :isLoading="loading" v-if="loading"/>
-		<template>
-			<div class="ml-5 mr-5">
-				<basics :isLoading="loading" v-if="loading"/>
-
-				<div class="row send send-test mx-0">
-					<h5>Insira o e-mail que deseja enviar o teste</h5>
-				</div>
-
-				<div class="row mt-3 send send-form">
-					<div class="col-6">
-						<label for="teste">Selecione a vaga</label>
-						<badge 
-							rounded
-							size="md"
-							type="primary"
-							class="ml-auto badge-bg-color badge-font">
-							opcional
-						</badge>
-						<el-select
-							filterable
-							clearable
-							no-match-text="Nenhuma vaga encontrada"
-							no-data-text="Nenhuma vaga encontrada"
-							placeholder="Escolha a vaga"
-							v-model="jobid"
-							class="w-100"
-						>
-							<el-option
-								v-for="job in allJobs"
-								class="select-danger"
-								:value="job.id"
-								:label="job.name"
-								:key="job.id"
-							></el-option>
-						</el-select>
-					</div>
-
-					<div class="col-6">
-						<label for="teste">Selecione o teste</label>
-						<el-select
-							clearable
-							filterable
-							no-match-text="Nenhuma teste encontrado"
-							no-data-text="Nenhum teste encontrado"
-							placeholder="Escolha o teste"
-							v-model="testid"
-							class="w-100"
-						>
-							<el-option
-								v-for="test in allTests"
-								class="select-danger"
-								:value="test.id"
-								:label="test.name"
-								:key="test.id"
-								:disabled="
-									!categoryIsAllowedToSend(
-										test.category_test_id
-									)
-								"
-							></el-option>
-						</el-select>
-					</div>
-				</div>
-
-				<hr />
-
-				<validation-observer ref="sendTest">
-					<div
-						class="row mt-3 send send-form"
-						v-for="(slot, idx) in slots"
-						:key="idx"
-					>
-						<!-- <label for="name">Nome</label> -->
-						<div class="col-6">
-							<validation-provider
-								tag="div"
-								:vid="`send-name-${idx}`"
-								name="Nome"
-								rules="required"
-								v-slot="{ errors }"
-							>
-								<label for="email">Nome</label>
-								<base-input
-									v-model="slot.name"
-									:error="errors[0]"
-									:valid="errors.length ? true : false"
-									class="w-100"
-									placeholder="Nome do usuário/candidato"
-									id="name"
-								/>
-							</validation-provider>
-						</div>
-
-						<div class="col-6">
-							<validation-provider
-								tag="div"
-								:vid="`send-email-${idx}`"
-								name="Email"
-								rules="required|email"
-								v-slot="{ errors }"
-							>
-								<label for="email">E-mail</label>
-								<base-input
-									v-model="slot.email"
-									:error="errors[0]"
-									:valid="errors.length ? true : false"
-									class="w-100"
-									id="email"
-									placeholder="E-mail do usuário/candidato"
-								/>
-								<div class="send send-icon">
-									<i
-										v-if="idx !== slots.length - 1"
-										class="fa fa-trash pointer"
-										@click="removeSlot(slot.id)"
-									></i>
-									<i
-										v-else
-										class="fa fa-plus pointer"
-										@click="addSlot"
-									></i>
-								</div>
-							</validation-provider>
-						</div>
-					</div>
-				</validation-observer>
-
-				<div class="col text-center mt-1">
-					<button class="send send-button" @click="sendTest">
-						Enviar teste
-					</button>
-				</div>
-			</div>
-
-			<span class="tool tool-close" @click="closeModal">
-				Fechar
-				<font-awesome-icon
-					:icon="['fas', 'times']"
-					class="text-white ml-1"
-				/>
-			</span>
-		</template>
-	</el-dialog>
-</template>
-
-<script>
-import Basics from '../Loadings/Basics';
-import { Dialog, Select, Option } from 'element-ui';
-import Badge from '../../argon-core/Badge.vue';
-
-export default {
-	name: 'send-test',
-	components: {
-		[Select.name]: Select,
-		[Option.name]: Option,
-		[Dialog.name]: Dialog,
-		Basics
-	},
-	props: {
-		hasEnableBadge: Boolean,
-		allTests: Array,
-		allJobs: Array,
-		isModalOpen: {
-			type: Boolean,
-			default: false
-		},
-		selectedTest: Number,
-		categoriesAllowedToSend: {
-			type: Object,
-			default: () => ({})
-		}
-	},
-	methods: {
-		closeModal(e) {
-			this.$emit('closemodal', e);
-		},
-		removeSlot(id) {
-			this.slots = this.slots.filter(slot => slot.id !== id);
-		},
-		addSlot() {
-			const newSlot = {
-				id: new Date().getTime(),
-				name: '',
-				email: '',
-				selected: 8
-			};
-
-			this.slots = [...this.slots, newSlot];
-		},
-		async sendTest() {
-			this.loading = true;
-			const pass = await this.$refs.sendTest.validate();
-			if (!pass) {
-				this.loading = false;
-				return;
-			}
-			const filterSlots = slot => slot.email !== '';
-			const formatRequest = slot => ({
-				...slot,
-				jobid: this.jobid,
-				testid: this.testid
-			});
-			const testRequest = this.slots
-				.filter(filterSlots)
-				.map(formatRequest);
-		   	setTimeout(() => {
-				this.$emit('send-test', testRequest);
-				this.$emit('closemodal');
-				this.loading = false;
-			}, 2000 );
-		},
-		categoryIsAllowedToSend(categoryId) {
-			const categoryIsAllowToSend = Object.values(
-				this.categoriesAllowedToSend
-			).find(id => id == categoryId);
-			return categoryIsAllowToSend ? true : false;
-		}
-	},
-	watch: {
-		selectedTest(newValue) {
-			this.testid = newValue;
-		},
-		isModalOpen(newValue) {
-			!newValue && this.closeModal();
-		}
-	},
-	data() {
-		return {
-			loading: false,
-			jobid: null,
-			testid: this.selectedTest,
-			slots: [
-				{
-					id: 'first',
-					name: '',
-					email: ''
-				}
-			]
-		};
-	}
-};
-</script>
-<style lang="scss" scoped>
-@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
-
-/deep/ .el-dialog__header {
-    display: none;
-}
-
-/deep/ .el-dialog {
-    overflow: hidden;
-    border-radius: 10px;
-    padding-bottom: 25px;
-    max-width: 734px;
-}
-
-/deep/ .mt-2,
-.my-2 {
-    margin-top: 0.7rem !important;
-}
-
-.badge-font {
-    font-size: 10px !important;
-}
-
-.send {
-    &-test {
-        h5 {
-            font-family: Poppins;
-            font-style: normal;
-            font-weight: 600;
-            font-size: 20px;
-            line-height: 30px;
-            color: #32325d;
-        }
-    }
-
-    &-form {
-        label {
-            font-style: normal;
-            font-weight: normal;
-            font-size: 14px;
-            line-height: 21px;
-
-            color: #525f7f;
-        }
-    }
-
-    &-line {
-        width: 668px;
-        height: 0px;
-
-        border: 1px solid #e9ecef;
-    }
-
-    &-icon {
-        margin-top: 2.5rem;
-        position: absolute;
-        right: -15px;
-        top: 2px;
-    }
-
-    &-button {
-        width: 299px;
-        height: 33px;
-
-        background: #1f8ceb;
-        border-radius: 46px;
-        color: #fff;
-
-        border: none;
-        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>
+	<el-dialog
+		:visible.sync="isModalOpen"
+		width="54%"
+		custom-class="position-relative"
+		@close="$emit('close')"
+	>
+		<basics :isLoading="loading" v-if="loading"/>
+		<template>
+			<div class="ml-5 mr-5">
+				<basics :isLoading="loading" v-if="loading"/>
+
+				<div class="row send send-test mx-0">
+					<h5>Insira o e-mail que deseja enviar o teste</h5>
+				</div>
+				<validation-observer ref="sendTest">
+
+					<div class="row mt-3 send send-form">
+						<div class="col-6">
+							<label for="teste">Selecione a vaga</label>
+							<badge
+								rounded
+								size="md"
+								type="primary"
+								class="ml-auto badge-bg-color badge-font">
+								opcional
+							</badge>
+							<el-select
+								filterable
+								clearable
+								no-match-text="Nenhuma vaga encontrada"
+								no-data-text="Nenhuma vaga encontrada"
+								placeholder="Escolha a vaga"
+								v-model="jobid"
+								class="w-100"
+							>
+								<el-option
+									v-for="job in allJobs"
+									class="select-danger"
+									:value="job.id"
+									:label="job.name"
+									:key="job.id"
+								></el-option>
+							</el-select>
+						</div>
+
+						<div class="col-6">
+							<validation-provider
+								tag="div"
+								name="Teste	"
+								rules="required"
+								v-slot="{ errors }"
+							>
+								<label for="teste">Selecione o teste</label>
+								<el-select
+									filterable
+									required
+									clearable
+									no-match-text="Nenhuma teste encontrado"
+									no-data-text="Nenhum teste encontrado"
+									placeholder="Escolha o teste"
+									:class="{'is-invalid': errors[0]}"
+									rules="required"
+									v-model="testid"
+									class="w-100"
+								>
+									<el-option
+										v-for="test in allTests"
+										class="select-danger"
+										:value="test.id"
+										:label="test.name"
+										:key="test.id"
+										:disabled="
+											!categoryIsAllowedToSend(
+												test.category_test_id
+											)
+										"
+									></el-option>
+								</el-select>
+								<div
+									class="invalid-feedback"
+									style="display: block;">
+									{{ errors[0] }}
+								</div>
+							</validation-provider>
+						</div>
+					</div>
+
+					<hr />
+
+					<div
+						class="row mt-3 send send-form"
+						v-for="(slot, idx) in slots"
+						:key="idx"
+					>
+						<!-- <label for="name">Nome</label> -->
+						<div class="col-6">
+							<validation-provider
+								tag="div"
+								:vid="`send-name-${idx}`"
+								name="Nome"
+								rules="required"
+								v-slot="{ errors }"
+							>
+								<label for="email">Nome</label>
+								<base-input
+									v-model="slot.name"
+									:error="errors[0]"
+									:valid="errors.length ? true : false"
+									class="w-100"
+									placeholder="Nome do usuário/candidato"
+									id="name"
+								/>
+							</validation-provider>
+						</div>
+
+						<div class="col-6">
+							<validation-provider
+								tag="div"
+								:vid="`send-email-${idx}`"
+								name="Email"
+								rules="required|email"
+								v-slot="{ errors }"
+							>
+								<label for="email">E-mail</label>
+								<base-input
+									v-model="slot.email"
+									:error="errors[0]"
+									:valid="errors.length ? true : false"
+									class="w-100"
+									id="email"
+									placeholder="E-mail do usuário/candidato"
+								/>
+								<div class="send send-icon">
+									<i
+										v-if="idx !== slots.length - 1"
+										class="fa fa-trash pointer"
+										@click="removeSlot(slot.id)"
+									></i>
+									<i
+										v-else
+										class="fa fa-plus pointer"
+										@click="addSlot"
+									></i>
+								</div>
+							</validation-provider>
+						</div>
+					</div>
+				</validation-observer>
+
+				<div class="col text-right">
+					<base-button
+						class="ml-auto"
+						type="primary"
+						@click="sendTest"
+						:disabled="loading"
+						:class="{'is-loading': loading}"
+					>
+						{{ loading ? 'Enviando' : 'Enviar Teste' }}
+
+					</base-button>
+				</div>
+
+			</div>
+
+			<span class="tool tool-close" @click="closeModal">
+				Fechar
+				<font-awesome-icon
+					:icon="['fas', 'times']"
+					class="text-white ml-1"
+				/>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+import Basics from '../Loadings/Basics';
+import { Dialog, Select, Option } from 'element-ui';
+import Badge from '../../argon-core/Badge.vue';
+
+export default {
+	name: 'send-test',
+	components: {
+		[Select.name]: Select,
+		[Option.name]: Option,
+		[Dialog.name]: Dialog,
+		Basics
+	},
+	props: {
+		hasEnableBadge: Boolean,
+		allTests: Array,
+		allJobs: Array,
+		isModalOpen: {
+			type: Boolean,
+			default: false
+		},
+		selectedTest: Number,
+		categoriesAllowedToSend: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	methods: {
+		closeModal(e) {
+			this.$emit('closemodal', e);
+		},
+		removeSlot(id) {
+			this.slots = this.slots.filter(slot => slot.id !== id);
+		},
+		addSlot() {
+			const newSlot = {
+				id: new Date().getTime(),
+				name: '',
+				email: '',
+				selected: 8
+			};
+
+			this.slots = [...this.slots, newSlot];
+		},
+		async sendTest() {
+			this.loading = true;
+			const pass = await this.$refs.sendTest.validate();
+			if (!pass) {
+				this.loading = false;
+				return;
+			}
+			const filterSlots = slot => slot.email !== '';
+			const formatRequest = slot => ({
+				...slot,
+				jobid: this.jobid,
+				testid: this.testid
+			});
+			const testRequest = this.slots
+				.filter(filterSlots)
+				.map(formatRequest);
+			setTimeout(() => {
+				this.$emit('send-test', testRequest);
+				this.resetSlots();
+				this.$emit('closemodal');
+				this.loading = false;
+			}, 2000 );
+		},
+		categoryIsAllowedToSend(categoryId) {
+			const categoryIsAllowToSend = Object.values(
+				this.categoriesAllowedToSend
+			).find(id => id == categoryId);
+			return categoryIsAllowToSend ? true : false;
+		},
+		resetSlots(){
+			this.$refs.sendTest && this.$refs.sendTest.reset();
+			this.jobid = '',
+			this.testid = '';
+			this.slots = [
+				{
+					id: 'first',
+					name: '',
+					email: ''
+				}
+			];
+		}
+	},
+	watch: {
+
+		selectedTest(newValue) {
+			this.testid = newValue;
+		},
+		isModalOpen(newValue) {
+			!newValue && this.closeModal();
+			this.resetSlots();
+		}
+	},
+	data() {
+		return {
+			loading: false,
+			jobid: null,
+			testid: this.selectedTest,
+			slots: [
+				{
+					id: 'first',
+					name: '',
+					email: ''
+				}
+			]
+		};
+	}
+};
+</script>
+<style lang="scss" scoped>
+@import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
+
+/deep/ .el-dialog__header {
+    display: none;
+}
+
+/deep/ .el-dialog {
+    overflow: hidden;
+    border-radius: 10px;
+    padding-bottom: 25px;
+    max-width: 734px;
+}
+
+/deep/ .mt-2,
+.my-2 {
+    margin-top: 0.7rem !important;
+}
+
+.is-invalid {
+    /deep/ input {
+        border-color: #de214b!important;
+    }
+}
+
+.badge-font {
+    font-size: 10px !important;
+}
+
+.send {
+    &-test {
+        h5 {
+            font-family: Poppins;
+            font-style: normal;
+            font-weight: 600;
+            font-size: 20px;
+            line-height: 30px;
+            color: #32325d;
+        }
+    }
+
+    &-form {
+        label {
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            line-height: 21px;
+
+            color: #525f7f;
+        }
+    }
+
+    &-line {
+        width: 668px;
+        height: 0px;
+
+        border: 1px solid #e9ecef;
+    }
+
+    &-icon {
+        margin-top: 2.5rem;
+        position: absolute;
+        right: -15px;
+        top: 2px;
+    }
+
+    &-button {
+        width: 299px;
+        height: 33px;
+
+        background: #1f8ceb;
+        border-radius: 46px;
+        color: #fff;
+
+        border: none;
+        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>