@burh/nuxt-core 1.0.403 → 1.0.404

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

@@ -1,281 +1,281 @@
-<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>
-</template>
-
-<script>
-import { Dialog, 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');
-        }
-    }
-};
-</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;
-}
-
-.modal-request {
-    section {
-        display: flex;
-        flex-direction: column;
-        margin-top: 1.5rem;
-
-        label {
-            text-transform: uppercase;
-            color: #8898aa;
-            font-weight: 600;
-            font-size: 0.8rem;
-        }
-
-        button {
-            width: 55%;
-            margin-left: auto;
-        }
-    }
-}
-
-.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>
+<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>
+</template>
+
+<script>
+import { Dialog, 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');
+        }
+    }
+};
+</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;
+}
+
+.modal-request {
+    section {
+        display: flex;
+        flex-direction: column;
+        margin-top: 1.5rem;
+
+        label {
+            text-transform: uppercase;
+            color: #8898aa;
+            font-weight: 600;
+            font-size: 0.8rem;
+        }
+
+        button {
+            width: 55%;
+            margin-left: auto;
+        }
+    }
+}
+
+.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>