From 627d3bbe85a38232de80a5d92bb67aee98a38291 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Mon, 25 Mar 2024 16:00:47 -0500
Subject: [PATCH] Se implementan las correcciones a los comentarios

---
 src/pages/Worker/Card/WorkerDms.vue           |  36 ++-
 .../Worker/components/WorkerDmsActions.vue    |  16 +-
 .../Worker/components/WorkerDmsCreate.vue     | 277 ++----------------
 src/pages/Worker/components/WorkerDmsEdit.vue | 262 +++--------------
 src/router/modules/worker.js                  |  32 +-
 5 files changed, 103 insertions(+), 520 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerDms.vue b/src/pages/Worker/Card/WorkerDms.vue
index 144e3edee..f794f6b17 100644
--- a/src/pages/Worker/Card/WorkerDms.vue
+++ b/src/pages/Worker/Card/WorkerDms.vue
@@ -1,22 +1,27 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+
+import { useQuasar } from 'quasar';
 
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDateHour } from 'src/filters';
 
 import FetchData from 'components/FetchData.vue';
+import WorkerDmsCreate from '../components/WorkerDmsCreate.vue';
 import WorkerDmsActions from '../components/WorkerDmsActions.vue';
 
 const { t } = useI18n();
+const quasar = useQuasar();
 const route = useRoute();
-const router = useRouter();
 
-const workerDmsRef = ref(null);
+const findOne = ref([]);
 const rows = ref([]);
+const workerDmsRef = ref(null);
 
 const filter = { where: { worker: route.params.id }, order: ['dmsFk DESC'], limit: 20 };
+const filterFindOne = { where: { code: 'hhrrData' } };
 
 const columns = computed(() => [
     {
@@ -82,8 +87,15 @@ const setData = () => {
     workerDmsRef.value.fetch();
 };
 
-const toWorkerDmsCreate = () => {
-    router.push({ name: 'WorkerDmsCreate' });
+const showWorkerDmsCreate = () => {
+    quasar.dialog({
+        component: WorkerDmsCreate,
+        componentProps: {
+            id: Number(route.params.id),
+            defaultDmsCode: findOne.value.code,
+            promise: setData,
+        },
+    });
 };
 </script>
 
@@ -95,6 +107,12 @@ const toWorkerDmsCreate = () => {
         auto-load
         :url="`WorkerDms/${route.params.id}/filter`"
     />
+    <fetch-data
+        :filter="filterFindOne"
+        @on-fetch="(data) => (findOne = data)"
+        auto-load
+        url="DmsTypes/findOne"
+    />
 
     <QPage class="column items-center q-pa-md">
         <QTable
@@ -107,7 +125,9 @@ const toWorkerDmsCreate = () => {
         >
             <template #body-cell-order="{ row }">
                 <QTd>
-                    <QChip class="chip-color" square>{{ row.hardCopyNumber }}</QChip>
+                    <QChip class="chip-color" square v-if="row.hardCopyNumber">{{
+                        row.hardCopyNumber
+                    }}</QChip>
                 </QTd>
             </template>
 
@@ -138,7 +158,7 @@ const toWorkerDmsCreate = () => {
     </QPage>
 
     <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toWorkerDmsCreate()" color="primary" fab icon="add" />
+        <QBtn @click.stop="showWorkerDmsCreate" color="primary" fab icon="add" />
         <QTooltip>
             {{ t('Upload file') }}
         </QTooltip>
@@ -147,7 +167,7 @@ const toWorkerDmsCreate = () => {
 
 <style scoped>
 .chip-color {
-    background-color: var(--vn-label);
+    background-color: var(--vn-label-color);
 }
 </style>
 
diff --git a/src/pages/Worker/components/WorkerDmsActions.vue b/src/pages/Worker/components/WorkerDmsActions.vue
index 9a8e4816e..2a6ab1ce3 100644
--- a/src/pages/Worker/components/WorkerDmsActions.vue
+++ b/src/pages/Worker/components/WorkerDmsActions.vue
@@ -1,17 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
 
 import { useQuasar } from 'quasar';
 
 import { downloadFile } from 'src/composables/downloadFile';
 
 import WorkerDmsDelete from 'src/pages/Worker/components/WorkerDmsDelete.vue';
+import WorkerDmsEdit from './WorkerDmsEdit.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
-const route = useRoute();
-const router = useRouter();
 
 const $props = defineProps({
     id: {
@@ -26,12 +24,12 @@ const $props = defineProps({
 
 const setDownloadFile = () => downloadFile($props.id);
 
-const toWorkerDmsEdit = () => {
-    router.push({
-        name: 'WorkerDmsEdit',
-        params: {
-            id: route.params.id,
+const showWorkerDmsEdit = () => {
+    quasar.dialog({
+        component: WorkerDmsEdit,
+        componentProps: {
             dmsId: $props.id,
+            promise: setData,
         },
     });
 };
@@ -64,7 +62,7 @@ const setData = () => {
             </QTooltip>
         </QIcon>
         <QIcon
-            @click.stop="toWorkerDmsEdit"
+            @click.stop="showWorkerDmsEdit"
             class="q-ml-md"
             color="primary"
             name="edit"
diff --git a/src/pages/Worker/components/WorkerDmsCreate.vue b/src/pages/Worker/components/WorkerDmsCreate.vue
index d38e044ca..f9afdddeb 100644
--- a/src/pages/Worker/components/WorkerDmsCreate.vue
+++ b/src/pages/Worker/components/WorkerDmsCreate.vue
@@ -1,262 +1,37 @@
 <script setup>
-import { onBeforeMount, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useDialogPluginComponent } from 'quasar';
 
-import axios from 'axios';
+import VnDms from 'src/components/common/VnDms.vue';
 
-import { useState } from 'src/composables/useState';
-import { useValidator } from 'src/composables/useValidator';
-import useNotify from 'src/composables/useNotify';
+const { dialogRef } = useDialogPluginComponent();
 
-import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-
-const { notify } = useNotify();
-const { t } = useI18n();
-const { validate } = useValidator();
-const route = useRoute();
-const router = useRouter();
-const state = useState();
-const user = state.getUser();
-
-const filterFindOne = { where: { code: 'paymentsLaw' } };
-const filterCompanies = { order: ['code'] };
-const filterWarehouses = { order: ['name'] };
-
-const inputFileRef = ref();
-const client = ref({});
-const findOne = ref([]);
-const allowedContentTypes = ref([]);
-const optionsCompanies = ref([]);
-const optionsWarehouses = ref([]);
-const optionsDmsTypes = ref([]);
-const isLoading = ref(false);
-const dms = ref({
-    hasFile: false,
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    defaultDmsCode: {
+        type: String,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
 });
 
-onBeforeMount(() => {
-    const { companyFk, warehouseFk } = user.value;
-    dms.value.reference = route.params.id;
-    dms.value.companyId = companyFk;
-    dms.value.warehouseId = warehouseFk;
-});
-
-watch([client, findOne], ([newClient, newFindOne]) => {
-    dms.value.description = t('clientFileDescription', {
-        dmsTypeName: newFindOne.name?.toUpperCase(),
-        clientName: newClient.name?.toUpperCase(),
-        clientId: newClient.id,
-    });
-    dms.value.dmsTypeId = newFindOne.id;
-});
-
-const saveData = async () => {
-    try {
-        const formData = new FormData();
-        const files = dms.value.files;
-
-        if (files && files.length > 0) {
-            for (let file of files) {
-                formData.append(file.name, file);
-            }
-            dms.value.hasFileAttached = true;
-
-            const url = `Workers/${route.params.id}/uploadFile`;
-            await axios.post(url, formData, {
-                params: dms.value,
-            });
-            notify('globals.dataSaved', 'positive');
-            toWorkerDms();
-        }
-    } catch (error) {
-        notify(error.message, 'negative');
-    }
-};
-
-const toWorkerDms = () => {
-    router.push({ name: 'WorkerDms' });
+const onDataSaved = async () => {
+    if ($props.promise) await $props.promise();
 };
 </script>
 
 <template>
-    <fetch-data
-        @on-fetch="(data) => (client = data)"
-        auto-load
-        :url="`Clients/${route.params.id}/getCard`"
-    />
-    <fetch-data
-        :filter="filterFindOne"
-        @on-fetch="(data) => (findOne = data)"
-        auto-load
-        url="DmsTypes/findOne"
-    />
-    <fetch-data
-        @on-fetch="(data) => (allowedContentTypes = data)"
-        auto-load
-        url="DmsContainers/allowedContentTypes"
-    />
-    <fetch-data
-        :filter="filterCompanies"
-        @on-fetch="(data) => (optionsCompanies = data)"
-        auto-load
-        url="Companies"
-    />
-    <fetch-data
-        :filter="filterWarehouses"
-        @on-fetch="(data) => (optionsWarehouses = data)"
-        auto-load
-        url="Warehouses"
-    />
-    <fetch-data
-        :filter="filterWarehouses"
-        @on-fetch="(data) => (optionsDmsTypes = data)"
-        auto-load
-        url="DmsTypes"
-    />
-
-    <Teleport to="#st-actions">
-        <QBtnGroup push class="q-gutter-x-sm">
-            <QBtn
-                :disabled="isLoading"
-                :label="t('globals.cancel')"
-                :loading="isLoading"
-                @click="toWorkerDms"
-                color="primary"
-                flat
-                icon="close"
-            />
-            <QBtn
-                :disabled="isLoading"
-                :label="t('globals.save')"
-                :loading="isLoading"
-                @click.stop="saveData"
-                color="primary"
-                icon="save"
-            />
-        </QBtnGroup>
-    </Teleport>
-
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <QCardSection>
-                <QForm>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnInput
-                                :label="t('Reference')"
-                                clearable
-                                v-model="dms.reference"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Company')"
-                                :options="optionsCompanies"
-                                :rules="validate('entry.companyFk')"
-                                option-label="code"
-                                option-value="id"
-                                v-model="dms.companyId"
-                            />
-                        </div>
-                    </VnRow>
-
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Warehouse')"
-                                :options="optionsWarehouses"
-                                option-label="name"
-                                option-value="id"
-                                v-model="dms.warehouseId"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Type')"
-                                :options="optionsDmsTypes"
-                                option-label="name"
-                                option-value="id"
-                                v-model="dms.dmsTypeId"
-                            />
-                        </div>
-                    </VnRow>
-
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnInput
-                                :label="t('Description')"
-                                :rules="validate('route.description')"
-                                clearable
-                                type="textarea"
-                                v-model="dms.description"
-                            />
-                        </div>
-                    </VnRow>
-
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QFile
-                                ref="inputFileRef"
-                                class="required"
-                                :label="t('File')"
-                                v-model="dms.files"
-                                multiple
-                                :accept="allowedContentTypes.join(',')"
-                                clearable
-                                clear-icon="close"
-                            >
-                                <template #append>
-                                    <QBtn
-                                        icon="vn:attach"
-                                        flat
-                                        round
-                                        padding="xs"
-                                        @click="inputFileRef.pickFiles()"
-                                    >
-                                        <QTooltip>
-                                            {{ t('Select a file') }}
-                                        </QTooltip>
-                                    </QBtn>
-                                    <QBtn icon="info" flat round padding="xs">
-                                        <QTooltip max-width="30rem">
-                                            {{
-                                                `${t(
-                                                    'Allowed content types'
-                                                )}: ${allowedContentTypes.join(', ')}`
-                                            }}
-                                        </QTooltip>
-                                    </QBtn>
-                                </template>
-                            </QFile>
-                        </div>
-                    </VnRow>
-
-                    <QCheckbox
-                        :label="t('Generate identifier for original file')"
-                        v-model="dms.hasFile"
-                    />
-                </QForm>
-            </QCardSection>
-        </QCard>
-    </div>
+    <QDialog ref="dialogRef">
+        <VnDms
+            :default-dms-code="$props.defaultDmsCode"
+            :url="`Workers/${$props.id}/uploadFile`"
+            @on-data-saved="onDataSaved"
+            model="WorkerDmsCreate"
+        />
+    </QDialog>
 </template>
-
-<i18n>
-en:
-    clientFileDescription: '{dmsTypeName} FROM CLIENT {clientName} ID {clientId}'
-es:
-    Reference: Referencia
-    Company: Empresa
-    Warehouse: Almacén
-    Type: Tipo
-    Description: Descripción
-    clientFileDescription: '{dmsTypeName} DEL CLIENTE {clientName} ID {clientId}'
-    File: Fichero
-    Select a file: Selecciona un fichero
-    Allowed content types: Tipos de archivo permitidos
-    Generate identifier for original file: Generar identificador para archivo original
-</i18n>
diff --git a/src/pages/Worker/components/WorkerDmsEdit.vue b/src/pages/Worker/components/WorkerDmsEdit.vue
index 8e84c6326..7656fe09f 100644
--- a/src/pages/Worker/components/WorkerDmsEdit.vue
+++ b/src/pages/Worker/components/WorkerDmsEdit.vue
@@ -1,246 +1,56 @@
 <script setup>
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
 
-import axios from 'axios';
-
-import { useValidator } from 'src/composables/useValidator';
-import useNotify from 'src/composables/useNotify';
+import { useDialogPluginComponent } from 'quasar';
 
 import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnInput from 'src/components/common/VnInput.vue';
+import VnDms from 'src/components/common/VnDms.vue';
 
-const { notify } = useNotify();
-const { t } = useI18n();
-const { validate } = useValidator();
-const route = useRoute();
-const router = useRouter();
+const { dialogRef } = useDialogPluginComponent();
 
-const filterCompanies = { order: ['code'] };
-const filterWarehouses = { order: ['name'] };
+const $props = defineProps({
+    dmsId: {
+        type: Number,
+        required: true,
+    },
+    defaultDmsCode: {
+        type: String,
+        required: false,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
 
-const inputFileRef = ref();
-const allowedContentTypes = ref([]);
-const optionsCompanies = ref([]);
-const optionsWarehouses = ref([]);
-const optionsDmsTypes = ref([]);
-const isLoading = ref(false);
-const dms = ref({
+const initialData = ref({
     hasFile: true,
+    id: $props.dmsId,
 });
 
 const setCurrentDms = (data) => {
-    dms.value.reference = data.reference;
-    dms.value.companyId = data.companyFk;
-    dms.value.warehouseId = data.warehouseFk;
-    dms.value.dmsTypeId = data.dmsTypeFk;
-    dms.value.description = data.description;
-    dms.value.hasFile = data.hasFile;
+    initialData.value.reference = data.reference;
+    initialData.value.companyFk = data.companyFk;
+    initialData.value.warehouseFk = data.warehouseFk;
+    initialData.value.dmsTypeFk = data.dmsTypeFk;
+    initialData.value.description = data.description;
+    initialData.value.hasFile = data.hasFile;
 };
 
-const saveData = async () => {
-    try {
-        const formData = new FormData();
-        console.log(formData);
-        const files = dms.value.files;
-        console.log(files);
-
-        dms.value.hasFileAttached = files ? true : false;
-        const url = `dms/${route.params.dmsId}/updateFile`;
-
-        if (files && files.length > 0) {
-            for (let file of files) {
-                formData.append(file.name, file);
-            }
-
-            await axios.post(url, formData, {
-                params: dms.value,
-            });
-            notify('globals.dataSaved', 'positive');
-        } else {
-            await axios.post(url, dms.value);
-        }
-
-        toWorkerDms();
-    } catch (error) {
-        notify(error.message, 'negative');
-    }
-};
-
-const toWorkerDms = () => {
-    router.push({ name: 'WorkerDms' });
+const onDataSaved = async () => {
+    if ($props.promise) await $props.promise();
 };
 </script>
 
 <template>
-    <fetch-data :url="`Dms/${route.params.dmsId}`" @on-fetch="setCurrentDms" auto-load />
-    <fetch-data
-        @on-fetch="(data) => (allowedContentTypes = data)"
-        auto-load
-        url="DmsContainers/allowedContentTypes"
-    />
-    <fetch-data
-        :filter="filterCompanies"
-        @on-fetch="(data) => (optionsCompanies = data)"
-        auto-load
-        url="Companies"
-    />
-    <fetch-data
-        :filter="filterWarehouses"
-        @on-fetch="(data) => (optionsWarehouses = data)"
-        auto-load
-        url="Warehouses"
-    />
-    <fetch-data
-        :filter="filterWarehouses"
-        @on-fetch="(data) => (optionsDmsTypes = data)"
-        auto-load
-        url="DmsTypes"
-    />
+    <fetch-data :url="`Dms/${$props.dmsId}`" @on-fetch="setCurrentDms" auto-load />
 
-    <Teleport to="#st-actions">
-        <QBtnGroup push class="q-gutter-x-sm">
-            <QBtn
-                :disabled="isLoading"
-                :label="t('globals.cancel')"
-                :loading="isLoading"
-                @click="toWorkerDms"
-                color="primary"
-                flat
-                icon="close"
-            />
-            <QBtn
-                :disabled="isLoading"
-                :label="t('globals.save')"
-                :loading="isLoading"
-                @click.stop="saveData"
-                color="primary"
-                icon="save"
-            />
-        </QBtnGroup>
-    </Teleport>
-
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <QCardSection>
-                <QForm>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnInput
-                                :label="t('Reference')"
-                                clearable
-                                v-model="dms.reference"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Company')"
-                                :options="optionsCompanies"
-                                :rules="validate('entry.companyFk')"
-                                option-label="code"
-                                option-value="id"
-                                v-model="dms.companyId"
-                            />
-                        </div>
-                    </VnRow>
-
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Warehouse')"
-                                :options="optionsWarehouses"
-                                option-label="name"
-                                option-value="id"
-                                v-model="dms.warehouseId"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Type')"
-                                :options="optionsDmsTypes"
-                                option-label="name"
-                                option-value="id"
-                                v-model="dms.dmsTypeId"
-                            />
-                        </div>
-                    </VnRow>
-
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnInput
-                                :label="t('Description')"
-                                :rules="validate('route.description')"
-                                clearable
-                                type="textarea"
-                                v-model="dms.description"
-                            />
-                        </div>
-                    </VnRow>
-
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <QFile
-                                ref="inputFileRef"
-                                class="required"
-                                :label="t('File')"
-                                v-model="dms.files"
-                                multiple
-                                :accept="allowedContentTypes.join(',')"
-                                clearable
-                                clear-icon="close"
-                            >
-                                <template #append>
-                                    <QBtn
-                                        icon="vn:attach"
-                                        flat
-                                        round
-                                        padding="xs"
-                                        @click="inputFileRef.pickFiles()"
-                                    >
-                                        <QTooltip>
-                                            {{ t('Select a file') }}
-                                        </QTooltip>
-                                    </QBtn>
-                                    <QBtn icon="info" flat round padding="xs">
-                                        <QTooltip max-width="30rem">
-                                            {{
-                                                `${t(
-                                                    'Allowed content types'
-                                                )}: ${allowedContentTypes.join(', ')}`
-                                            }}
-                                        </QTooltip>
-                                    </QBtn>
-                                </template>
-                            </QFile>
-                        </div>
-                    </VnRow>
-
-                    <QCheckbox
-                        :label="t('Generate identifier for original file')"
-                        v-model="dms.hasFile"
-                        disable
-                    />
-                </QForm>
-            </QCardSection>
-        </QCard>
-    </div>
+    <QDialog ref="dialogRef">
+        <VnDms
+            :default-initialData-code="$props.defaultDmsCode"
+            @on-data-saved="onDataSaved"
+            model="WorkerDmsEdit"
+            :form-initial-data="initialData"
+        />
+    </QDialog>
 </template>
-
-<i18n>
-en:
-    clientFileDescription: '{dmsTypeName} FROM CLIENT {clientName} ID {clientId}'
-es:
-    Reference: Referencia
-    Company: Empresa
-    Warehouse: Almacén
-    Type: Tipo
-    Description: Descripción
-    clientFileDescription: '{dmsTypeName} DEL CLIENTE {clientName} ID {clientId}'
-    File: Fichero
-    Select a file: Selecciona un fichero
-    Allowed content types: Tipos de archivo permitidos
-    Generate identifier for original file: Generar identificador para archivo original
-</i18n>
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index a3b2d52dc..c0fe6e1fa 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -86,33 +86,13 @@ export default {
                     component: () => import('src/pages/Worker/Card/WorkerPda.vue'),
                 },
                 {
+                    name: 'WorkerDms',
                     path: 'dms',
-                    name: 'DmsCard',
-                    redirect: { name: 'WorkerDms' },
-                    children: [
-                        {
-                            path: '',
-                            name: 'WorkerDms',
-                            meta: {
-                                title: 'dms',
-                                icon: 'cloud_upload',
-                            },
-                            component: () =>
-                                import('src/pages/Worker/Card/WorkerDms.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'WorkerDmsCreate',
-                            component: () =>
-                                import('src/pages/Worker/components/WorkerDmsCreate.vue'),
-                        },
-                        {
-                            path: ':dmsId/edit',
-                            name: 'WorkerDmsEdit',
-                            component: () =>
-                                import('src/pages/Worker/components/WorkerDmsEdit.vue'),
-                        },
-                    ],
+                    meta: {
+                        title: 'dms',
+                        icon: 'cloud_upload',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerDms.vue'),
                 },
             ],
         },