From 1d37b91e093d98e982f39feeeab2375d6fa1bfa5 Mon Sep 17 00:00:00 2001
From: carlosfonseca <carlos.fonseca@mindshore.io>
Date: Tue, 26 Mar 2024 17:17:40 -0500
Subject: [PATCH] Solucion a comentarios 3

---
 src/pages/Worker/Card/WorkerBasicData.vue  | 303 ++++++++-------------
 src/pages/Worker/Card/WorkerDescriptor.vue |  17 +-
 src/pages/Worker/Card/WorkerNotes.vue      |   4 +-
 3 files changed, 136 insertions(+), 188 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerBasicData.vue b/src/pages/Worker/Card/WorkerBasicData.vue
index 1bfa82deb..be362c726 100644
--- a/src/pages/Worker/Card/WorkerBasicData.vue
+++ b/src/pages/Worker/Card/WorkerBasicData.vue
@@ -1,11 +1,10 @@
 <script setup>
-import { onBeforeMount, ref, watch } from 'vue';
+import { reactive, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import axios from 'axios';
-
 import FetchData from 'components/FetchData.vue';
+import FormModel from 'src/components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -13,17 +12,29 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 const route = useRoute();
 const { t } = useI18n();
 
-const data = ref({});
+const formInitialData = reactive({});
+
 const workersOptions = ref([]);
 const countriesOptions = ref([]);
 const educationLevelsOptions = ref([]);
 
-const workerFilter = { fields: ['id', 'nickname'], where: { id: null } };
+const workerFilter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['name', 'emailVerified'],
+                include: { relation: 'emailUser', scope: { fields: ['email'] } },
+            },
+        },
+        { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
+        { relation: 'department', scope: { include: { relation: 'department' } } },
+    ],
+};
 const workersFilter = {
     fields: ['id', 'nickname'],
     order: 'nickname ASC',
     limit: 30,
-    skip: 60,
 };
 const countriesFilter = {
     fields: ['id', 'country', 'code'],
@@ -36,52 +47,6 @@ const maritalStatus = [
     { code: 'M', name: t('Married') },
     { code: 'S', name: t('Single') },
 ];
-
-onBeforeMount(() => {
-    getData(route.params.id);
-});
-
-watch(
-    () => route.params.id,
-    (newValue) => {
-        getData(newValue);
-    }
-);
-
-const getData = async (id) => {
-    try {
-        const worker = await axios.get(`Workers/${id}`);
-        workerFilter.where.id = worker.data.bossFk;
-        data.value = worker.data;
-
-        const workers = await axios.get('Workers/search', {
-            params: { filter: JSON.stringify(workerFilter) },
-        });
-        data.value.bossFk = Number(workers.data[0].code);
-    } catch (error) {
-        data.value = {
-            SSN: null,
-            bossFk: null,
-            educationLevelFk: null,
-            firstName: null,
-            lastName: null,
-            locker: null,
-            maritalStatus: null,
-            mobileExtension: null,
-            originCountryFk: null,
-            phone: null,
-        };
-        console.error(error);
-    }
-};
-
-const saveData = async () => {
-    try {
-        await axios.patch(`Workers/${route.params.id}`, data.value);
-    } catch (error) {
-        console.error(error);
-    }
-};
 </script>
 
 <template>
@@ -104,141 +69,113 @@ const saveData = async () => {
         url="EducationLevels"
     />
 
-    <Teleport to="#st-actions">
-        <QBtnGroup push class="q-gutter-x-sm">
-            <QBtn
-                :disabled="!hasChanged"
-                :label="t('globals.reset')"
-                :loading="isLoading"
-                @click="setInitialData"
-                color="primary"
-                flat
-                icon="restart_alt"
-            />
-            <QBtn
-                :disabled="isLoading"
-                :label="t('globals.save')"
-                :loading="isLoading"
-                @click.stop="saveData"
-                color="primary"
-                icon="save"
-            />
-        </QBtnGroup>
-    </Teleport>
+    <FormModel
+        :filter="workerFilter"
+        :form-initial-data="formInitialData"
+        :url="`Workers/${route.params.id}`"
+        auto-load
+        model="Worker"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Name')" clearable v-model="data.firstName" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Last name')" clearable v-model="data.lastName" />
+                </div>
+            </VnRow>
 
-    <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('Name')"
-                                clearable
-                                v-model="data.firstName"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnInput
-                                :label="t('Last name')"
-                                clearable
-                                v-model="data.lastName"
-                            />
-                        </div>
-                    </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.phone"
+                        :label="t('Business phone')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.mobileExtension"
+                        :label="t('Mobile extension')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
 
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnInput
-                                v-model="data.phone"
-                                :label="t('Business phone')"
-                                clearable
-                            />
-                        </div>
-                        <div class="col">
-                            <VnInput
-                                v-model="data.mobileExtension"
-                                :label="t('Mobile extension')"
-                                clearable
-                            />
-                        </div>
-                    </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Boss')"
+                        :options="workersOptions"
+                        hide-selected
+                        option-label="nickname"
+                        option-value="id"
+                        v-model="data.bossFk"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ scope.opt?.nickname }},
+                                        {{ scope.opt?.code }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Marital status')"
+                        :options="maritalStatus"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.maritalStatus"
+                    />
+                </div>
+            </VnRow>
 
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Boss')"
-                                :options="workersOptions"
-                                hide-selected
-                                option-label="nickname"
-                                option-value="id"
-                                v-model="data.bossFk"
-                            >
-                                <template #option="scope">
-                                    <QItem v-bind="scope.itemProps">
-                                        <QItemSection>
-                                            <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                            <QItemLabel caption>
-                                                {{ scope.opt?.nickname }},
-                                                {{ scope.opt?.code }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </template>
-                            </VnSelectFilter>
-                        </div>
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Marital status')"
-                                :options="maritalStatus"
-                                hide-selected
-                                option-label="name"
-                                option-value="code"
-                                v-model="data.maritalStatus"
-                            />
-                        </div>
-                    </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Origin country')"
+                        :options="countriesOptions"
+                        hide-selected
+                        option-label="country"
+                        option-value="id"
+                        v-model="data.originCountryFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Education level')"
+                        :options="educationLevelsOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.educationLevelFk"
+                    />
+                </div>
+            </VnRow>
 
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Origin country')"
-                                :options="countriesOptions"
-                                hide-selected
-                                option-label="country"
-                                option-value="id"
-                                v-model="data.originCountryFk"
-                            />
-                        </div>
-                        <div class="col">
-                            <VnSelectFilter
-                                :label="t('Education level')"
-                                :options="educationLevelsOptions"
-                                hide-selected
-                                option-label="name"
-                                option-value="id"
-                                v-model="data.educationLevelFk"
-                            />
-                        </div>
-                    </VnRow>
-
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <div class="col">
-                            <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
-                        </div>
-                        <div class="col">
-                            <VnInput
-                                v-model="data.locker"
-                                type="number"
-                                :label="t('Locker')"
-                                clearable
-                            />
-                        </div>
-                    </VnRow>
-                </QForm>
-            </QCardSection>
-        </QCard>
-    </div>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.locker"
+                        type="number"
+                        :label="t('Locker')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
 </template>
 
 <i18n>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 393dcb0f6..a20ad5546 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
@@ -55,7 +55,18 @@ const filter = {
     ],
 };
 
-const sip = computed(() => worker.value?.sip && worker.value.sip.extension);
+const sip = ref(null);
+
+watch(
+    () => [worker.value?.sip?.extension, state.get('extension')],
+    ([newWorkerSip, newStateExtension], [oldWorkerSip, oldStateExtension]) => {
+        if (newStateExtension !== oldStateExtension || sip.value === oldStateExtension) {
+            sip.value = newStateExtension;
+        } else if (newWorkerSip !== oldWorkerSip && sip.value !== newStateExtension) {
+            sip.value = newWorkerSip;
+        }
+    }
+);
 
 function getWorkerAvatar() {
     const token = getTokenMultimedia();
@@ -114,7 +125,7 @@ const setData = (entity) => {
                     <VnLinkPhone :phone-number="entity.phone" />
                 </template>
             </VnLv>
-            <VnLv :value="state.get('extension') || sip">
+            <VnLv :value="sip">
                 <template #label>
                     {{ t('worker.summary.sipExtension') }}
                     <VnLinkPhone v-if="sip" :phone-number="sip" />
diff --git a/src/pages/Worker/Card/WorkerNotes.vue b/src/pages/Worker/Card/WorkerNotes.vue
index cbe415421..07761c697 100644
--- a/src/pages/Worker/Card/WorkerNotes.vue
+++ b/src/pages/Worker/Card/WorkerNotes.vue
@@ -48,7 +48,7 @@ const toWorkerNoteCreate = () => {
 
 <template>
     <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg" v-if="rows.length">
+        <QCard class="full-width q-pa-lg" v-if="rows.length">
             <div>
                 <QCard
                     v-for="(item, index) in rows"
@@ -61,7 +61,7 @@ const toWorkerNoteCreate = () => {
                     }"
                 >
                     <div class="flex justify-end">
-                        <p class="color-vn-label">
+                        <p class="color-vn-label q-mb-none">
                             {{ date.formatDate(item?.created, 'DD-MM-YYYY HH:mm') }}
                         </p>
                     </div>