Solucion a comentarios 4

src/pages/Worker/Card/WorkerPBX.vue

@@ -1,129 +1,56 @@
 <script setup>
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import axios from 'axios';
-
 import { useState } from 'src/composables/useState';
-import { useStateStore } from 'stores/useStateStore';
-import useNotify from 'src/composables/useNotify';
 
+import FormModel from 'src/components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
-const { notify } = useNotify();
 const { t } = useI18n();
-const route = useRoute();
 const state = useState();
-const stateStore = useStateStore();
+const route = useRoute();
 
-const isLoading = ref(false);
+const formInitialData = reactive({});
-const extension = ref('');
-const worker = ref({});
-const workersRef = ref(null);
 
-const hasChanged = computed(() => {
+const filter = {
-    return extension.value !== worker.value?.sip?.extension;
-});
-
-onBeforeMount(() => getData(route.params.id));
-
-watch(
-    () => route.params.id,
-    (newValue) => {
-        getData(newValue);
-    }
-);
-
-const getData = async (id) => {
-    const filter = {
     include: [
         {
             relation: 'sip',
         },
     ],
-    };
-
-    try {
-        const url = `Workers/${id}`;
-        const { data } = await axios.get(url, {
-            params: { filter: JSON.stringify(filter) },
-        });
-        extension.value = data.sip.extension;
-        state.set('extension', data.sip.extension);
-        worker.value = data;
-    } catch (error) {
-        state.set('extension', null);
-        extension.value = '';
-    }
 };
 
-const setInitialData = () => {
+watch(
-    extension.value = worker.value?.sip?.extension;
+    () => route.params.id,
-    state.set('extension', worker.value?.sip?.extension);
+    () => state.set('extension', null)
-};
+);
 
-const onSubmit = async () => {
+const onFetch = (data) => state.set('extension', data?.sip?.extension);
-    isLoading.value = true;
 
-    const payload = {
+const updateModelValue = (data) => state.set('extension', data);
-        extension: extension.value,
-        userFk: Number(route.params.id),
-    };
-    try {
-        await axios.patch('Sips', payload);
-        notify('worker.card.dataSavedCard', 'positive');
-
-        if (workersRef.value) workersRef.value.fetch();
-    } catch (error) {
-        notify(error.error, 'negative');
-    } finally {
-        isLoading.value = false;
-    }
-};
-
-const updateModelValue = () => {
-    state.set('extension', extension.value);
-};
 </script>
 
 <template>
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+    <FormModel
-        <QBtnGroup push class="q-gutter-x-sm">
+        :filter="filter"
-            <QBtn
+        :form-initial-data="formInitialData"
-                :disabled="!hasChanged"
+        :url="`Workers/${route.params.id}`"
-                :label="t('globals.reset')"
+        auto-load
-                :loading="isLoading"
+        model="DeviceProductionUser"
-                @click="setInitialData"
+        @on-fetch="onFetch"
-                color="primary"
+    >
-                flat
+        <template #form="{ data }">
-                icon="restart_alt"
-                type="reset"
-            />
-            <QBtn
-                :disabled="!hasChanged"
-                :label="t('globals.save')"
-                :loading="isLoading"
-                @click="onSubmit"
-                color="primary"
-                icon="save"
-            />
-        </QBtnGroup>
-    </Teleport>
-
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <QCardSection>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <QInput
                         :label="t('worker.summary.sipExtension')"
-                            v-model="extension"
+                        :model-value="data?.sip?.extension"
-                            @update:model-value="updateModelValue()"
+                        @update:model-value="updateModelValue"
                     />
                 </div>
             </VnRow>
-            </QCardSection>
+        </template>
-        </QCard>
+    </FormModel>
-    </div>
 </template>