Se modifica las peticiones en el componente

src/pages/Customer/Card/CustomerLog.vue

@@ -3,10 +3,9 @@ import { onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import axios from 'axios';
-
 import { useStateStore } from 'stores/useStateStore';
 
+import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -15,6 +14,9 @@ const { t } = useI18n();
 const route = useRoute();
 const stateStore = useStateStore();
 
+const clientLogs = ref(null);
+const urlClientLogsEditors = ref(null);
+const urlClientLogsModels = ref(null);
 const clientLogsModelsOptions = ref([]);
 const clientLogsOptions = ref([]);
 const clientLogsEditorsOptions = ref([]);
@@ -23,77 +25,71 @@ const insert = ref(false);
 const update = ref(false);
 const deletes = ref(false);
 const select = ref(false);
+const neq = ref(null);
 const inq = ref([]);
 
+const filterClientLogs = {
+    fields: [
+        'id',
+        'originFk',
+        'userFk',
+        'action',
+        'changedModel',
+        'oldInstance',
+        'newInstance',
+        'creationDate',
+        'changedModel',
+        'changedModelId',
+        'changedModelValue',
+        'description',
+    ],
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['nickname', 'name', 'image'],
+                include: { relation: 'worker', scope: { fields: ['id'] } },
+            },
+        },
+    ],
+    order: ['creationDate DESC', 'id DESC'],
+    limit: 20,
+};
 const filterClientLogsEditors = {
     fields: ['id', 'nickname', 'name', 'image'],
     order: 'nickname',
     limit: 30,
 };
+const filterClientLogsModels = { order: ['changedModel'] };
+const urlBase = `ClientLogs/${route.params.id}`;
 
 onBeforeMount(() => {
-    getData();
+    stateStore.rightDrawer = true;
+    filterClientLogs.where = {
+        and: [
+            { originFk: `${route.params.id}` },
+            { userFk: { neq: radioButtonValue.value } },
+            { action: { inq: inq.value } },
+        ],
+    };
+    urlClientLogsEditors.value = `${urlBase}/editors`;
+    urlClientLogsModels.value = `${urlBase}/models`;
 });
 
-const getData = () => {
-    stateStore.rightDrawer = true;
-    getClientLogsModels();
-    getClientLogs();
-};
-
-const getClientLogsModels = async () => {
-    const filter = { order: ['changedModel'] };
-    const { data } = await axios.get(`ClientLogs/${route.params.id}/models`, {
-        params: { filter: JSON.stringify(filter) },
-    });
-    clientLogsModelsOptions.value = data;
-};
-
 const getClientLogs = async (value, status) => {
-    let neq = 'all';
     if (status === 'neq') {
-        neq = value;
+        neq.value = value;
     } else {
         setInq(value, status);
     }
-    const filter = {
+    filterClientLogs.where = {
-        fields: [
+        and: [
-            'id',
+            { originFk: `${route.params.id}` },
-            'originFk',
+            { userFk: { neq: neq.value } },
-            'userFk',
+            { action: { inq: inq.value } },
-            'action',
-            'changedModel',
-            'oldInstance',
-            'newInstance',
-            'creationDate',
-            'changedModel',
-            'changedModelId',
-            'changedModelValue',
-            'description',
         ],
-        include: [
-            {
-                relation: 'user',
-                scope: {
-                    fields: ['nickname', 'name', 'image'],
-                    include: { relation: 'worker', scope: { fields: ['id'] } },
-                },
-            },
-        ],
-        order: ['creationDate DESC', 'id DESC'],
-        limit: 20,
-        where: {
-            and: [
-                { originFk: `${route.params.id}` },
-                { userFk: { neq } },
-                { action: { inq: inq.value } },
-            ],
-        },
     };
-    const { data } = await axios.get('ClientLogs', {
+    clientLogs.value?.fetch();
-        params: { filter: JSON.stringify(filter) },
-    });
-    clientLogsOptions.value = data;
 };
 
 const setInq = (value, status) => {
@@ -108,11 +104,24 @@ const setInq = (value, status) => {
 </script>
 
 <template>
+    <FetchData
+        :filter="filterClientLogs"
+        @on-fetch="(data) => (clientLogsOptions = data)"
+        auto-load
+        url="ClientLogs"
+        ref="clientLogs"
+    />
     <FetchData
         :filter="filterClientLogsEditors"
         @on-fetch="(data) => (clientLogsEditorsOptions = data)"
         auto-load
-        :url="`ClientLogs/${route.params.id}/editors`"
+        :url="urlClientLogsEditors"
+    />
+    <FetchData
+        :filter="filterClientLogsModels"
+        @on-fetch="(data) => (clientLogsModelsOptions = data)"
+        auto-load
+        :url="urlClientLogsModels"
     />
 
     <h5 class="flex justify-center label-color">
@@ -132,7 +141,7 @@ const setInq = (value, status) => {
             </VnInput>
             <VnSelectFilter
                 :label="t('Entity')"
-                :options="companiesOptions"
+                :options="[]"
                 class="q-mt-md"
                 hide-selected
                 option-label="name"