@burh/nuxt-core 1.0.410 → 1.0.411

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

@@ -1,236 +1,221 @@
 <template>
-    <el-dialog
-        :visible.sync="isActive"
-        width="45%"
-        custom-class="position-relative"
-        @close="$emit('close')"
-    >
-        <template>
-            <div class="modal-request">
-                <h3>Requisição de Vagas</h3>
-
-                <validation-observer ref="sendTest">
-                    <section>
-                        <label for="job">Escolha a vaga desejada</label>
-                        <el-select
-                            filterable
-                            no-match-text="Nenhuma vaga encontrada"
-                            no-data-text="Nenhuma vaga encontrada"
-                            placeholder="Escolha"
-                            v-model="jobs.job"
-                            class="w-100"
-                        >
-                            <el-option
-                                v-for="(job, index) in allJobs"
-                                class="select-danger"
-                                :value="job.id"
-                                :label="job.title"
-                                :key="index"
-                            ></el-option>
-                        </el-select>
-
-                        <label for="reason" class="mt-4">Motivo</label>
-                        <el-select
-                            filterable
-                            no-match-text="Nenhum dado encontrado"
-                            no-data-text="Nenhum dado encontrado"
-                            placeholder="Escolha"
-                            v-model="jobs.reason"
-                            class="w-100"
-                        >
-                            <el-option
-                                v-for="(reas, index) in allReasons"
-                                class="select-danger"
-                                :value="reas.value"
-                                :label="reas.label"
-                                :key="index"
-                            ></el-option>
-                        </el-select>
-
-                        <validation-provider
-                            tag="div"
-                            name="Salário"
-                            rules="required"
-                            v-slot="{ errors }"
-                        >
-                            <base-input
-                                v-model="jobs.salary"
-                                class="w-100 mt-4"
-                                id="salary"
-                                :error="errors[0]"
-                                :valid="errors.length ? true : false"
-                                label="Salário"
-                                v-on:input="setSalary($event)"
-                                placeholder="R$ 1.500,00"
-                            />
-                        </validation-provider>
-
-                        <el-checkbox v-model="jobs.confidential">
-                            Confidencial
-                        </el-checkbox>
-
-                        <label for="observations" class="mt-4"
-                            >Observações</label
-                        >
-                        <textarea
-                            id="observations"
-                            class="form-control"
-                            v-model="jobs.observations"
-                        ></textarea>
-
-                        <button
-                            type="button"
-                            @click="sendRequest"
-                            class="btn btn-primary"
-                            :disabled="!jobs.job || !jobs.reason"
-                        >
-                            Solicitar Abertura
-                        </button>
-                    </section>
-                </validation-observer>
-            </div>
-
-            <span class="tool tool-close" @click="$emit('close')">
-                Fechar
-                <font-awesome-icon
-                    :icon="['fas', 'times']"
-                    class="text-white ml-1"
-                />
-            </span>
-        </template>
-    </el-dialog>
+	<modal
+		:show.sync="isActive"
+		:size="'lg'"
+		@close="$emit('close')"
+	>
+		<template>
+			<div class="modal-request">
+				<h3>Requisição de Vagas</h3>
+
+				<validation-observer ref="sendTest">
+					<section>
+						<label for="job">Escolha a vaga desejada</label>
+						<el-select
+							filterable
+							no-match-text="Nenhuma vaga encontrada"
+							no-data-text="Nenhuma vaga encontrada"
+							placeholder="Escolha"
+							v-model="jobs.job"
+							class="w-100"
+						>
+							<el-option
+								v-for="(job, index) in allJobs"
+								class="select-danger"
+								:value="job.id"
+								:label="job.title"
+								:key="index"
+							></el-option>
+						</el-select>
+
+						<label for="reason" class="mt-4">Motivo</label>
+						<el-select
+							filterable
+							no-match-text="Nenhum dado encontrado"
+							no-data-text="Nenhum dado encontrado"
+							placeholder="Escolha"
+							v-model="jobs.reason"
+							class="w-100"
+						>
+							<el-option
+								v-for="(reas, index) in allReasons"
+								class="select-danger"
+								:value="reas.value"
+								:label="reas.label"
+								:key="index"
+							></el-option>
+						</el-select>
+
+						<validation-provider
+							tag="div"
+							name="Salário"
+							rules="required"
+							v-slot="{ errors }"
+						>
+							<base-input
+								v-model="jobs.salary"
+								class="w-100 mt-4"
+								id="salary"
+								:error="errors[0]"
+								:valid="errors.length ? true : false"
+								label="Salário"
+								v-on:input="setSalary($event)"
+								placeholder="R$ 1.500,00"
+							/>
+						</validation-provider>
+
+						<el-checkbox v-model="jobs.confidential">
+							Confidencial
+						</el-checkbox>
+
+						<label for="observations" class="mt-4"
+						>Observações</label
+						>
+						<textarea
+							id="observations"
+							class="form-control"
+							v-model="jobs.observations"
+						></textarea>
+
+						<button
+							type="button"
+							@click="sendRequest"
+							class="btn btn-primary"
+							:disabled="!jobs.job || !jobs.reason"
+						>
+							Solicitar Abertura
+						</button>
+					</section>
+				</validation-observer>
+			</div>
+
+			<span class="tool tool-close" @click="$emit('close')">
+				Fechar
+				<font-awesome-icon
+					:icon="['fas', 'times']"
+					class="text-white ml-1"
+				/>
+			</span>
+		</template>
+	</modal>
 </template>
 
 <script>
-import { Dialog, Select, Option, Checkbox } from 'element-ui';
+import { Select, Option, Checkbox } from 'element-ui';
 
 export default {
-    name: 'request-modal',
-    components: {
-        [Dialog.name]: Dialog,
-        [Select.name]: Select,
-        [Option.name]: Option,
-        [Checkbox.name]: Checkbox
-    },
-    props: {
-        isActive: Boolean,
-        allJobs: Array,
-        userId: String,
-        allReasons: Array
-    },
-    data() {
-        return {
-            jobs: {
-                job: '',
-                reason: '',
-                salary: 'R$ 0,00',
-                confidential: false,
-                observations: ''
-            }
-        };
-    },
-    methods: {
-        async sendRequest() {
-            const pass = await this.$refs.sendTest.validate();
-            if (!pass || !this.jobs.job || !this.jobs.reason) {
-                return;
-            }
-
-            let salary = this.jobs.salary;
-            salary = this.replaceAll(salary, '.', '');
-            salary = salary
-                .replace(',', '.')
-                .replace('R$', '')
-                .trim();
-
-            let payload = {
-                job_id: this.jobs.job,
-                user_id: parseInt(this.userId),
-                reason: this.jobs.reason,
-                salary: parseInt(salary),
-                private: this.jobs.confidential,
-                note: this.jobs.observations
-            };
-
-            this.$emit('send-request', payload);
-            this.$emit('close');
-
-            let field = {};
-            for (field in this.jobs) this.jobs[field] = '';
-            this.jobs.salary = 'R$ 0,00';
-        },
-        setSalary(e, onlyMasking = false) {
-            let value = e
-                .replace(/\s/g, '')
-                .replace('R$', '')
-                .replace('.', '')
-                .replace(',', '');
-
-            if (value.trim() == '') {
-                this.jobs.salary = 'R$ 0,00';
-                return;
-            }
-
-            if (value.length > 2) {
-                let position = value.length - 2;
-                value = [
-                    value.slice(0, position),
-                    '.',
-                    value.slice(position)
-                ].join('');
-            } else {
-                value = '0.' + value;
-            }
-
-            while (value.charAt(0) === '0' && value.length >= 5) {
-                value = value.substr(1);
-            }
-
-            if (!onlyMasking) {
-                this.jobs.salary = parseFloat(value).toLocaleString('pt-BR', {
-                    style: 'currency',
-                    currency: 'BRL'
-                });
-            } else {
-                return parseFloat(value).toLocaleString('pt-BR', {
-                    style: 'currency',
-                    currency: 'BRL'
-                });
-            }
-        },
-        replaceAll(str, find, replace) {
-            return str.replace(
-                new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'),
-                replace
-            );
-        }
-    },
-    watch: {
-        isActive(newValue) {
-            !newValue && this.$emit('close-modal');
-        }
-    }
+	name: 'request-modal',
+	components: {
+		[Select.name]: Select,
+		[Option.name]: Option,
+		[Checkbox.name]: Checkbox
+	},
+	props: {
+		isActive: Boolean,
+		allJobs: Array,
+		userId: String,
+		allReasons: Array
+	},
+	data() {
+		return {
+			jobs: {
+				job: '',
+				reason: '',
+				salary: 'R$ 0,00',
+				confidential: false,
+				observations: ''
+			}
+		};
+	},
+	methods: {
+		async sendRequest() {
+			const pass = await this.$refs.sendTest.validate();
+			if (!pass || !this.jobs.job || !this.jobs.reason) {
+				return;
+			}
+
+			let salary = this.jobs.salary;
+			salary = this.replaceAll(salary, '.', '');
+			salary = salary
+				.replace(',', '.')
+				.replace('R$', '')
+				.trim();
+
+			let payload = {
+				job_id: this.jobs.job,
+				user_id: parseInt(this.userId),
+				reason: this.jobs.reason,
+				salary: parseInt(salary),
+				private: this.jobs.confidential,
+				note: this.jobs.observations
+			};
+
+			this.$emit('send-request', payload);
+			this.$emit('close');
+
+			let field = {};
+			for (field in this.jobs) this.jobs[field] = '';
+			this.jobs.salary = 'R$ 0,00';
+		},
+		setSalary(e, onlyMasking = false) {
+			let value = e
+				.replace(/\s/g, '')
+				.replace('R$', '')
+				.replace('.', '')
+				.replace(',', '');
+
+			if (value.trim() == '') {
+				this.jobs.salary = 'R$ 0,00';
+				return;
+			}
+
+			if (value.length > 2) {
+				let position = value.length - 2;
+				value = [
+					value.slice(0, position),
+					'.',
+					value.slice(position)
+				].join('');
+			} else {
+				value = '0.' + value;
+			}
+
+			while (value.charAt(0) === '0' && value.length >= 5) {
+				value = value.substr(1);
+			}
+
+			if (!onlyMasking) {
+				this.jobs.salary = parseFloat(value).toLocaleString('pt-BR', {
+					style: 'currency',
+					currency: 'BRL'
+				});
+			} else {
+				return parseFloat(value).toLocaleString('pt-BR', {
+					style: 'currency',
+					currency: 'BRL'
+				});
+			}
+		},
+		replaceAll(str, find, replace) {
+			return str.replace(
+				new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'),
+				replace
+			);
+		}
+	},
+	watch: {
+		isActive(newValue) {
+			!newValue && this.$emit('close-modal');
+		}
+	}
 };
 </script>
 
 <style lang="scss" scoped>
 @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
 
-/deep/ .el-dialog__body {
-    padding: 2rem 5rem 2rem;
-}
-
-/deep/ .el-dialog__header {
-    display: none;
-}
-
-/deep/ .el-dialog {
-    overflow: hidden;
-    border-radius: 0.625rem;
-    padding-bottom: 3.125rem;
-    max-width: 38.375rem;
-    min-width: 38.375rem;
-    margin-top: 5vh !important;
+/deep/ .modal-body {
+    margin: 1rem 2rem;
 }
 
 .modal-request {
@@ -252,30 +237,4 @@ export default {
         }
     }
 }
-
-.tool {
-    position: absolute;
-    top: 1rem;
-    z-index: 10;
-    color: $primary;
-    cursor: pointer;
-
-    &-close {
-        position: absolute;
-        width: 5.5rem;
-        height: 1.687rem;
-        right: 7px;
-        top: 7px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        font-size: 0.687rem;
-
-        font-weight: 500;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 1.09rem;
-        color: #fff;
-    }
-}
 </style>

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

@@ -1,8 +1,7 @@
 <template>
-	<el-dialog
-		:visible.sync="isModalOpen"
-		width="54%"
-		custom-class="position-relative"
+	<modal
+		:show.sync="isModalOpen"
+		:size="'lg'"
 		@close="$emit('close')"
 	>
 		<basics :isLoading="loading" v-if="loading"/>
@@ -171,20 +170,18 @@
 				/>
 			</span>
 		</template>
-	</el-dialog>
+	</modal>
 </template>
 
 <script>
 import Basics from '../Loadings/Basics';
-import { Dialog, Select, Option } from 'element-ui';
-import Badge from '../../argon-core/Badge.vue';
+import { Select, Option } from 'element-ui';
 
 export default {
 	name: 'send-test',
 	components: {
 		[Select.name]: Select,
 		[Option.name]: Option,
-		[Dialog.name]: Dialog,
 		Basics
 	},
 	props: {
@@ -289,15 +286,8 @@ export default {
 <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/ .modal-body {
+	margin: 2rem 0;
 }
 
 /deep/ .mt-2,
@@ -364,30 +354,4 @@ export default {
         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>

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

@@ -1,8 +1,7 @@
 <template>
-	<el-dialog
-		:visible.sync="isActive"
-		width="54%"
-		custom-class="position-relative"
+	<modal
+		:show.sync="isActive"
+		:size="'lg'"
 		@close="$emit('close')"
 	>
 		<template>
@@ -120,17 +119,13 @@
 				/>
 			</span>
 		</template>
-	</el-dialog>
+	</modal>
 </template>
 
 <script>
-import { Dialog } from 'element-ui';
-
 export default {
 	name: 'shared-modal',
-	components: {
-		[Dialog.name]: Dialog
-	},
+	components: {},
 	props: {
 		isActive: Boolean,
 		userData: Object,
@@ -175,20 +170,8 @@ export default {
 <style lang="scss" scoped>
 @import '@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
 
-/deep/ .el-dialog__body {
-    padding: 0;
-}
-
-/deep/ .el-dialog__header {
-    display: none;
-}
-
-/deep/ .el-dialog {
-    overflow: hidden;
-    border-radius: 10px;
-    padding-bottom: 50px;
-    max-width: 725px;
-    min-width: 725px;
+/deep/ .modal-body {
+	margin-bottom: 2rem !important;
 }
 
 .social {
@@ -213,32 +196,6 @@ export default {
     }
 }
 
-.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;
-    }
-}
-
 .btn-whatsapp:hover {
     color: white;
 }