@burh/nuxt-core 1.0.500 → 1.0.502

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

@@ -1,448 +1,448 @@
-<template>
-	<modal :show="isModalOpen" v-on:close="closeModal" size="xl" class="modal">
-		<basics :isLoading="isLoading" v-if="isLoading"/>
-		<template slot="header">
-
-			<h2 class="display-4 px-2">
-				Insira os e-mail que deseja enviar o treinamento <br>
-
-			</h2>
-		</template>
-		<validation-observer ref="sendCourse">
-			<div class="switch-position">
-				<el-switch
-					v-model="switchSingle"
-					active-color="#5865F2"
-					inactive-text="Enviar para novos usuários"
-					active-text="Enviar por setor">
-				</el-switch>
-
-			</div>
-
-			<div class="content-1">
-				<div v-if="!switchSingle" style="min-height:100px">
-					<div class="row px-4">
-						<div class="col-4">
-							<label for="name">Nome Completo</label>
-						</div>
-						<div class="col-4">
-							<label for="email">E-mail</label>
-						</div>
-						<div class="col-4">
-							<label for="setor">Setor</label>
-						</div>
-					</div>
-					<div class="row px-4" v-for="(slot, idx) in payload.users" :key="idx">
-
-						<validation-provider
-							tag="div"
-							class="col-4"
-							style="height: 50px"
-							:vid="`send-name-${idx}`"
-							name="Nome"
-							rules="required|regex:\w+\s+\w+"
-							v-slot="{ errors }"
-							:disabled="payload.all_users ? true : false"
-						>
-							<base-input
-								:disabled="payload.all_users ? true : false"
-								v-model="slot.name"
-								:error="errors[0]"
-								:valid="errors.length ? true : false"
-								placeholder="Nome Completo"
-							/>
-						</validation-provider>
-
-						<validation-provider
-							tag="div"
-							class="col-4"
-							style="height: 50px"
-							:vid="`send-email-${idx}`"
-							name="Email"
-							rules="required|email"
-							v-slot="{ errors }"
-							:disabled="payload.all_users ? true : false"
-						>
-							<base-input
-								type="email"
-								:disabled="payload.all_users ? true : false"
-								v-model="slot.email"
-								:error="errors[0]"
-								:valid="errors.length ? true : false"
-								placeholder="E-mail"
-							/>
-						</validation-provider>
-
-						<validation-provider
-							tag="div"
-							class="col-3"
-							style="height: 50px"
-							name="Setor"
-							:vid="`send-role-${idx}`"
-							rules="required"
-							v-slot="{ errors }"
-						>
-							<el-select
-								filterable
-								clearable
-								no-match-text="Nenhum setor encontrado"
-								no-data-text="Nenhum setor encontrado"
-								class="select-danger"
-								required
-								:class="{'is-invalid': errors[0]}"
-								v-model="slot.access_level_id"
-								placeholder="Escolha o setor"
-								:disabled="payload.all_users ? true : false"
-							>
-								<el-option
-									v-for="role in corporativeRole"
-									:key="role.id"
-									:label="role.level"
-									:value="role.id"
-								>
-								</el-option>
-							</el-select>
-							<div
-								class="invalid-feedback"
-								style="display: block;">
-								{{ errors[0] }}
-							</div>
-						</validation-provider>
-
-						<div class="col-1">
-							<i
-								v-if="idx !== payload.users.length - 1"
-								class="fa fa-trash pointer"
-								@click="removeSlot(idx)"
-							></i>
-							<i v-else class="fa fa-plus pointer" @click="addSlot"></i>
-						</div>
-
-					</div>
-
-				</div>
-				<!-- envio em massa -->
-				<div v-else style="height:100px">
-					<div class="px-4">
-						<label for="setor2">Setor</label>
-					</div>
-					<div class="row px-4" v-for="(slot, idx) in payload.users" :key="idx">
-						<validation-provider
-							tag="div"
-							class="col-12"
-							style="height: 50px"
-							name="Setor"
-							:vid="`send-roleall-${idx}`"
-							rules="required"
-							v-slot="{ errors }"
-							:disabled="payload.all_users ? true : false"
-						>
-							<el-select
-								filterable
-								clearable
-								no-match-text="Nenhum setor encontrado"
-								no-data-text="Nenhum setor encontrado"
-								class="select-danger w-100"
-								multiple
-								required
-								:class="{'is-invalid': errors[0]}"
-								v-model="selectedRole"
-								placeholder="Escolha o setor"
-								:disabled="payload.all_users ? true : false"
-
-							>
-								<el-option
-									v-for="role in corporativeRole"
-									:key="role.id"
-									:label="role.level"
-									:value="role.id"
-								>
-								</el-option>
-							</el-select>
-							<div
-								class="invalid-feedback"
-								style="display: block;">
-								{{ errors[0] }}
-							</div>
-						</validation-provider>
-					</div>
-				</div>
-				<el-checkbox
-					v-if="switchSingle"
-					class="checkbox-user"
-					v-model="payload.all_users"
-				>  Enviar para todos
-				</el-checkbox>
-			</div>
-
-			<hr />
-
-			<div class="row px-4 mb-2">
-				<div class="col-12 d-flex align-items-center justify-content-between">
-					<label for="courses" class="mb-0">Acesso aos Treinamentos</label>
-					<span class="text-primary pointer user-select-none" @click="handleSelectAllCourses">{{ !isAllCoursesSelected ? 'Selecionar todos' : 'Limpar' }}</span>
-				</div>
-			</div>
-			<div class="row px-4">
-				<validation-provider
-					tag="div"
-					class="col-12"
-					style="height: 50px"
-					name="Treinamento"
-					vid="send-training"
-					rules="required"
-					v-slot="{ errors }"
-				>
-					<el-select
-						v-model="coursesToSend"
-						multiple
-						collapse-tags
-						no-match-text="Nenhum Treinamento encontrado"
-						no-data-text="Nenhum Treinamento encontrado"
-						class="w-100"
-						required
-						:class="{'is-invalid': errors[0]}"
-						placeholder="Treinamentos"
-						name="courses"
-					>
-						<el-option
-							v-for="item in courses"
-							:key="item.id"
-							:label="item.name"
-							:value="item.id"
-						>
-						</el-option>
-					</el-select>
-					<div
-						class="invalid-feedback"
-						style="display: block;">
-						{{ errors[0] }}
-					</div>
-				</validation-provider>
-			</div>
-
-			<div class="row">
-				<base-button
-					class="mx-auto"
-					type="primary"
-					@click="sendTest"
-					:disabled="isLoading"
-					:class="{'is-loading': isLoading}"
-				>
-					{{ isLoading ? 'Enviando' : 'Enviar' }}
-				</base-button>
-			</div>
-		</validation-observer>
-	</modal>
-</template>
-
-<script>
-import { Select, Option, Switch, Checkbox } from 'element-ui';
-import Basics from '../Loadings/Basics';
-
-export default {
-	name: 'send-course',
-	components: {
-		[Select.name]: Select,
-		[Option.name]: Option,
-		[Switch.name]: Switch,
-		[Checkbox.name]: Checkbox,
-		Basics,
-	},
-	props: {
-		isModalOpen: {
-			type: Boolean,
-			default: false
-		},
-		selectedCourse: Number,
-		corporativeRole: null,
-		courses: Array,
-		isLoading: {
-			type: Boolean,
-			default: false,
-			description: 'Loading to send course'
-		}
-	},
-	watch: {
-		selectedCourse(newValue) {
-			this.coursesToSend = newValue ? [newValue] : [];
-		},
-		switchSingle(){
-			this.resetSlots();
-		},
-		isModalOpen(to) {
-			if (to) {
-				this.resetSlots();
-			}
-		}
-	},
-	data() {
-		return {
-			payload: {
-				users: [
-					{
-						idx: '',
-						name: '',
-						email: '',
-						access_level_id: this.selectedRole
-					}
-				],
-				courses: [{ id: '' }],
-				access_levels:[{ id: '' }],
-				all_users : false
-			},
-			selectedRole: '',
-			switchSingle: false,
-			coursesToSend: [],
-		};
-	},
-	computed: {
-		isAllCoursesSelected() {
-			return ((this.coursesToSend && this.coursesToSend.length) && (this.courses && this.courses.length)) && this.coursesToSend.length === this.courses.length;
-		}
-	},
-	methods: {
-		handleSelectAllCourses() {
-			if (!this.isAllCoursesSelected) {
-				if (this.courses && this.courses.length) {
-					this.coursesToSend = this.courses.map(course => course.id);
-				}
-			} else {
-				this.coursesToSend = [];
-			}
-		},
-		closeModal(e) {
-			this.$emit('closemodal', e);
-		},
-
-		removeSlot(idx) {
-			this.payload.users.splice(idx, 1);
-		},
-
-		addSlot() {
-			const newSlot = {
-				idx: '',
-				name: '',
-				email: '',
-				access_level_id: this.selectedRole,
-			};
-
-			this.payload.users = [...this.payload.users, newSlot];
-		},
-
-		async sendTest() {
-			const pass = await this.$refs.sendCourse.validate();
-
-			if (!pass) {
-				return;
-			}
-
-			const filterUsers = user => user.email !== '';
-			let formattedCourses = this.coursesToSend.map(id => ({
-				id
-			}));
-			let  allUsers = this.payload.all_users;
-
-			if(this.switchSingle === false) {
-				const formatRequest = () => {
-					let formattedSlots = this.payload.users
-						.filter(filterUsers)
-						.map(user => ({
-							name: user.name.substring(user.name.indexOf(' '), 0),
-							last_name: user.name.substring(
-								user.name.indexOf(' ') + 1
-							),
-							email: user.email,
-							access_level_id: user.access_level_id
-						}));
-
-					return {
-						...formattedSlots
-
-					};
-				};
-
-				let params = {
-					users: formatRequest(),
-					courses: formattedCourses,
-					all_users: allUsers
-				};
-				this.resetSlots();
-				this.$emit('send-course', params);
-			} else {
-				let params = {
-					courses: formattedCourses,
-					access_levels: Object.values(this.selectedRole).map(id => {
-						return { id };
-					}),
-					all_users: allUsers
-
-				};
-				this.resetSlots();
-				this.$emit('send-course', params);
-			}
-		},
-		resetSlots() {
-			this.$refs.sendCourse.reset();
-			this.payload.users = [
-				{
-					idx: '',
-					name: '',
-					email: '',
-					access_level_id: ''
-				},
-			];
-			this.selectedRole = '';
-			this.coursesToSend = [];
-			this.payload.all_users = false;
-		}
-	},
-
-};
-</script>
-<style lang="scss" scoped>
-.is-invalid {
-    /deep/ input {
-        border-color: #de214b!important;
-    }
-}
-.content-1{
-    min-height: 130px !important;
-}
-.send-test-modal {
-    position: fixed;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    width: 60%;
-    height: 50%;
-    background-color: #ffffff;
-    z-index: 999 !important;
-    top: 20% !important;
-    left: 20% !important;
-    box-sizing: border-box;
-}
-
-.pointer {
-    cursor: pointer;
-}
-.switch-position{
-	padding: 16px 0;
-	margin-bottom: 16px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-/deep/ .el-switch__label{
-		/* height: 13.5px !important; */
-			&.is-active{
-				color: #5865F2 !important;
-			}
-		}
-
-.is-loading {
-	opacity: 0.3;
-}
-.checkbox-user{
-    margin-left: 24px;
-}
-</style>
+<template>
+	<modal :show="isModalOpen" v-on:close="closeModal" size="xl" class="modal">
+		<basics :isLoading="isLoading" v-if="isLoading"/>
+		<template slot="header">
+
+			<h2 class="display-4 px-2">
+				Insira os e-mail que deseja enviar o treinamento <br>
+
+			</h2>
+		</template>
+		<validation-observer ref="sendCourse">
+			<div class="switch-position">
+				<el-switch
+					v-model="switchSingle"
+					active-color="#5865F2"
+					inactive-text="Enviar para novos usuários"
+					active-text="Enviar por setor">
+				</el-switch>
+
+			</div>
+
+			<div class="content-1">
+				<div v-if="!switchSingle" style="min-height:100px">
+					<div class="row px-4">
+						<div class="col-4">
+							<label for="name">Nome Completo</label>
+						</div>
+						<div class="col-4">
+							<label for="email">E-mail</label>
+						</div>
+						<div class="col-4">
+							<label for="setor">Setor</label>
+						</div>
+					</div>
+					<div class="row px-4" v-for="(slot, idx) in payload.users" :key="idx">
+
+						<validation-provider
+							tag="div"
+							class="col-4"
+							style="height: 50px"
+							:vid="`send-name-${idx}`"
+							name="Nome"
+							rules="required|regex:\w+\s+\w+"
+							v-slot="{ errors }"
+							:disabled="payload.all_users ? true : false"
+						>
+							<base-input
+								:disabled="payload.all_users ? true : false"
+								v-model="slot.name"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+								placeholder="Nome Completo"
+							/>
+						</validation-provider>
+
+						<validation-provider
+							tag="div"
+							class="col-4"
+							style="height: 50px"
+							:vid="`send-email-${idx}`"
+							name="Email"
+							rules="required|email"
+							v-slot="{ errors }"
+							:disabled="payload.all_users ? true : false"
+						>
+							<base-input
+								type="email"
+								:disabled="payload.all_users ? true : false"
+								v-model="slot.email"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+								placeholder="E-mail"
+							/>
+						</validation-provider>
+
+						<validation-provider
+							tag="div"
+							class="col-3"
+							style="height: 50px"
+							name="Setor"
+							:vid="`send-role-${idx}`"
+							rules="required"
+							v-slot="{ errors }"
+						>
+							<el-select
+								filterable
+								clearable
+								no-match-text="Nenhum setor encontrado"
+								no-data-text="Nenhum setor encontrado"
+								class="select-danger"
+								required
+								:class="{'is-invalid': errors[0]}"
+								v-model="slot.access_level_id"
+								placeholder="Escolha o setor"
+								:disabled="payload.all_users ? true : false"
+							>
+								<el-option
+									v-for="role in corporativeRole"
+									:key="role.id"
+									:label="role.level"
+									:value="role.id"
+								>
+								</el-option>
+							</el-select>
+							<div
+								class="invalid-feedback"
+								style="display: block;">
+								{{ errors[0] }}
+							</div>
+						</validation-provider>
+
+						<div class="col-1">
+							<i
+								v-if="idx !== payload.users.length - 1"
+								class="fa fa-trash pointer"
+								@click="removeSlot(idx)"
+							></i>
+							<i v-else class="fa fa-plus pointer" @click="addSlot"></i>
+						</div>
+
+					</div>
+
+				</div>
+				<!-- envio em massa -->
+				<div v-else style="height:100px">
+					<div class="px-4">
+						<label for="setor2">Setor</label>
+					</div>
+					<div class="row px-4" v-for="(slot, idx) in payload.users" :key="idx">
+						<validation-provider
+							tag="div"
+							class="col-12"
+							style="height: 50px"
+							name="Setor"
+							:vid="`send-roleall-${idx}`"
+							rules="required"
+							v-slot="{ errors }"
+							:disabled="payload.all_users ? true : false"
+						>
+							<el-select
+								filterable
+								clearable
+								no-match-text="Nenhum setor encontrado"
+								no-data-text="Nenhum setor encontrado"
+								class="select-danger w-100"
+								multiple
+								required
+								:class="{'is-invalid': errors[0]}"
+								v-model="selectedRole"
+								placeholder="Escolha o setor"
+								:disabled="payload.all_users ? true : false"
+
+							>
+								<el-option
+									v-for="role in corporativeRole"
+									:key="role.id"
+									:label="role.level"
+									:value="role.id"
+								>
+								</el-option>
+							</el-select>
+							<div
+								class="invalid-feedback"
+								style="display: block;">
+								{{ errors[0] }}
+							</div>
+						</validation-provider>
+					</div>
+				</div>
+				<el-checkbox
+					v-if="switchSingle"
+					class="checkbox-user"
+					v-model="payload.all_users"
+				>  Enviar para todos
+				</el-checkbox>
+			</div>
+
+			<hr />
+
+			<div class="row px-4 mb-2">
+				<div class="col-12 d-flex align-items-center justify-content-between">
+					<label for="courses" class="mb-0">Acesso aos Treinamentos</label>
+					<span class="text-primary pointer user-select-none" @click="handleSelectAllCourses">{{ !isAllCoursesSelected ? 'Selecionar todos' : 'Limpar' }}</span>
+				</div>
+			</div>
+			<div class="row px-4">
+				<validation-provider
+					tag="div"
+					class="col-12"
+					style="height: 50px"
+					name="Treinamento"
+					vid="send-training"
+					rules="required"
+					v-slot="{ errors }"
+				>
+					<el-select
+						v-model="coursesToSend"
+						multiple
+						collapse-tags
+						no-match-text="Nenhum Treinamento encontrado"
+						no-data-text="Nenhum Treinamento encontrado"
+						class="w-100"
+						required
+						:class="{'is-invalid': errors[0]}"
+						placeholder="Treinamentos"
+						name="courses"
+					>
+						<el-option
+							v-for="item in courses"
+							:key="item.id"
+							:label="item.name"
+							:value="item.id"
+						>
+						</el-option>
+					</el-select>
+					<div
+						class="invalid-feedback"
+						style="display: block;">
+						{{ errors[0] }}
+					</div>
+				</validation-provider>
+			</div>
+
+			<div class="row">
+				<base-button
+					class="mx-auto"
+					type="primary"
+					@click="sendTest"
+					:disabled="isLoading"
+					:class="{'is-loading': isLoading}"
+				>
+					{{ isLoading ? 'Enviando' : 'Enviar' }}
+				</base-button>
+			</div>
+		</validation-observer>
+	</modal>
+</template>
+
+<script>
+import { Select, Option, Switch, Checkbox } from 'element-ui';
+import Basics from '../Loadings/Basics';
+
+export default {
+	name: 'send-course',
+	components: {
+		[Select.name]: Select,
+		[Option.name]: Option,
+		[Switch.name]: Switch,
+		[Checkbox.name]: Checkbox,
+		Basics,
+	},
+	props: {
+		isModalOpen: {
+			type: Boolean,
+			default: false
+		},
+		selectedCourse: Number,
+		corporativeRole: null,
+		courses: Array,
+		isLoading: {
+			type: Boolean,
+			default: false,
+			description: 'Loading to send course'
+		}
+	},
+	watch: {
+		selectedCourse(newValue) {
+			this.coursesToSend = newValue ? [newValue] : [];
+		},
+		switchSingle(){
+			this.resetSlots();
+		},
+		isModalOpen(to) {
+			if (to) {
+				this.resetSlots();
+			}
+		}
+	},
+	data() {
+		return {
+			payload: {
+				users: [
+					{
+						idx: '',
+						name: '',
+						email: '',
+						access_level_id: this.selectedRole
+					}
+				],
+				courses: [{ id: '' }],
+				access_levels:[{ id: '' }],
+				all_users : false
+			},
+			selectedRole: '',
+			switchSingle: false,
+			coursesToSend: [],
+		};
+	},
+	computed: {
+		isAllCoursesSelected() {
+			return ((this.coursesToSend && this.coursesToSend.length) && (this.courses && this.courses.length)) && this.coursesToSend.length === this.courses.length;
+		}
+	},
+	methods: {
+		handleSelectAllCourses() {
+			if (!this.isAllCoursesSelected) {
+				if (this.courses && this.courses.length) {
+					this.coursesToSend = this.courses.map(course => course.id);
+				}
+			} else {
+				this.coursesToSend = [];
+			}
+		},
+		closeModal(e) {
+			this.$emit('closemodal', e);
+		},
+
+		removeSlot(idx) {
+			this.payload.users.splice(idx, 1);
+		},
+
+		addSlot() {
+			const newSlot = {
+				idx: '',
+				name: '',
+				email: '',
+				access_level_id: this.selectedRole,
+			};
+
+			this.payload.users = [...this.payload.users, newSlot];
+		},
+
+		async sendTest() {
+			const pass = await this.$refs.sendCourse.validate();
+
+			if (!pass) {
+				return;
+			}
+
+			const filterUsers = user => user.email !== '';
+			let formattedCourses = this.coursesToSend.map(id => ({
+				id
+			}));
+			let  allUsers = this.payload.all_users;
+
+			if(this.switchSingle === false) {
+				const formatRequest = () => {
+					let formattedSlots = this.payload.users
+						.filter(filterUsers)
+						.map(user => ({
+							name: user.name.substring(user.name.indexOf(' '), 0),
+							last_name: user.name.substring(
+								user.name.indexOf(' ') + 1
+							),
+							email: user.email,
+							access_level_id: user.access_level_id
+						}));
+
+					return {
+						...formattedSlots
+
+					};
+				};
+
+				let params = {
+					users: formatRequest(),
+					courses: formattedCourses,
+					all_users: allUsers
+				};
+				this.resetSlots();
+				this.$emit('send-course', params);
+			} else {
+				let params = {
+					courses: formattedCourses,
+					access_levels: Object.values(this.selectedRole).map(id => {
+						return { id };
+					}),
+					all_users: allUsers
+
+				};
+				this.resetSlots();
+				this.$emit('send-course', params);
+			}
+		},
+		resetSlots() {
+			this.$refs.sendCourse.reset();
+			this.payload.users = [
+				{
+					idx: '',
+					name: '',
+					email: '',
+					access_level_id: ''
+				},
+			];
+			this.selectedRole = '';
+			this.coursesToSend = [];
+			this.payload.all_users = false;
+		}
+	},
+
+};
+</script>
+<style lang="scss" scoped>
+.is-invalid {
+    /deep/ input {
+        border-color: #de214b!important;
+    }
+}
+.content-1{
+    min-height: 130px !important;
+}
+.send-test-modal {
+    position: fixed;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    width: 60%;
+    height: 50%;
+    background-color: #ffffff;
+    z-index: 999 !important;
+    top: 20% !important;
+    left: 20% !important;
+    box-sizing: border-box;
+}
+
+.pointer {
+    cursor: pointer;
+}
+.switch-position{
+	padding: 16px 0;
+	margin-bottom: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+/deep/ .el-switch__label{
+		/* height: 13.5px !important; */
+			&.is-active{
+				color: #5865F2 !important;
+			}
+		}
+
+.is-loading {
+	opacity: 0.3;
+}
+.checkbox-user{
+    margin-left: 24px;
+}
+</style>