Solucion a comentarios 3

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,46 +69,20 @@ const saveData = async () => {
         url="EducationLevels"
     />
 
-    <Teleport to="#st-actions">
+    <FormModel
-        <QBtnGroup push class="q-gutter-x-sm">
+        :filter="workerFilter"
-            <QBtn
+        :form-initial-data="formInitialData"
-                :disabled="!hasChanged"
+        :url="`Workers/${route.params.id}`"
-                :label="t('globals.reset')"
+        auto-load
-                :loading="isLoading"
+        model="Worker"
-                @click="setInitialData"
+    >
-                color="primary"
+        <template #form="{ data }">
-                flat
-                icon="restart_alt"
-            />
-            <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
+                    <VnInput :label="t('Name')" clearable v-model="data.firstName" />
-                                :label="t('Name')"
-                                clearable
-                                v-model="data.firstName"
-                            />
                 </div>
                 <div class="col">
-                            <VnInput
+                    <VnInput :label="t('Last name')" clearable v-model="data.lastName" />
-                                :label="t('Last name')"
-                                clearable
-                                v-model="data.lastName"
-                            />
                 </div>
             </VnRow>
 
@@ -235,10 +174,8 @@ const saveData = async () => {
                     />
                 </div>
             </VnRow>
-                </QForm>
+        </template>
-            </QCardSection>
+    </FormModel>
-        </QCard>
-    </div>
 </template>
 
 <i18n>

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" />

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>