refs #6157 card

src/components/ui/CardDescriptor.vue

@@ -1,9 +1,11 @@
 <script setup>
-import { computed, useSlots, ref, watch, watchEffect } from 'vue';
+import { computed, useSlots, ref, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'src/composables/useArrayData';
+import { table } from 'quasar/dist/icon-set/material-icons.umd.prod';
+import { useArrayDataStore } from 'stores/useArrayDataStore';
 
 const $props = defineProps({
     dataKey: { type: String, default: null },
@@ -28,55 +30,119 @@ const $props = defineProps({
         default: null,
     },
 });
-const arrayData = useArrayData('claimData');
+
-console.log('arraydata en descriptor', arrayData.store.data);
+// watch(
+//     () => $props,
+//     (props) => {
+//         fetch(props.url);
+//     },
+//     { deep: true }
+// );
+
+// const emit = defineEmits(['onFetch']);
+// const arrayData = computed(() => {
+//     const currentArrayData = useArrayData($props.dataKey);
+//     const newArrayData = useArrayData($props.dataKey, {
+//         url: $props.url,
+//         filter: $props.filter,
+//     });
+//     console.log(currentArrayData.store.url, currentArrayData?.store?.url != $props.url);
+//     if (currentArrayData?.store?.url != $props.url) newArrayData.fetch({ append: false });
+//     return newArrayData;
+// });
+
+// watch(
+//     () => arrayData,
+//     (arrayData) => {
+//         console.log('watch CHANGE??', arrayData.value.store.data);
+//         entity.value = arrayData.value.store.data;
+//         emit('onFetch', arrayData.value.store.data);
+//     },
+//     { deep: true }
+// );
+
+// const slots = useSlots();
+// const { t } = useI18n();
+// let lastUrl = ref(null);
+// const entity = ref();
+
+// async function fetch(url) {
+//     console.log('FETCH??', arrayData.value.store.url, url);
+//     if (arrayData.value.store.url == url) return;
+//     useArrayData($props.dataKey, {
+//         url: url ?? $props.url,
+//         filter: $props.filter,
+//     });
+//     await arrayData.value.fetch({ append: false });
+//     console.log('FETCH?? 2', url, $props.url);
+//     // if (arrayData.value.store.data) emit('onFetch', arrayData.value.store.data);
+// }
+
+// watch($props, async () => {
+//     if (lastUrl.value == $props.url) return;
+//     entity.value = arrayData.value.store.data;
+//     // await fetch();
+// });
+
+// onMounted(async () => {
+//     console.log('onMounted');
+//     fetch($props.url);
+// });
+
+/*
+
+ArrayData es null. la url tb
+
+Watch → arrayData
+url diferent a la nostra fetch
+
+
+
+
+
+
+*/
+
+// onMounted(async () => {
+//     console.log('onMounted');
+//     fetch($props.url);
+// });
 const slots = useSlots();
 const { t } = useI18n();
-const entity = ref(null);
-let lastUrl = ref(null);
-entity.value = computed(() => {
-    console.log('COMPUTED ', arrayData.store.data.id);
-    return arrayData.store.data;
-});
-
 const emit = defineEmits(['onFetch']);
+const arrayDataStore = useArrayDataStore();
 
-async function fetch() {
+const arrayData = computed(() => {
-    console.log('MY FETCH');
+    const current = arrayDataStore.get($props.dataKey);
-    lastUrl.value = $props.url;
+    const currentArrayData = useArrayData($props.dataKey);
-    const params = {};
+    const newArrayData = useArrayData($props.dataKey, {
+        url: $props.url,
+        filter: $props.filter,
+    });
+    console.log(
+        'URLS ',
+        currentArrayData.store.url,
+        $props.dataKey,
+        $props.url,
+        current?.url
+    );
+    if (current?.url != $props.url) newArrayData.fetch({ append: false });
+    if (newArrayData.store.data) emit('onFetch', newArrayData.store.data);
 
-    if ($props.filter) params.filter = JSON.stringify($props.filter);
+    return newArrayData;
-
-    const { data } = await axios.get($props.url, { params });
-    entity.value = data;
-
-    emit('onFetch', data);
-}
-
-watch($props, async () => {
-    console.log(useArrayData('claimData'));
-    if (lastUrl.value == $props.url) return;
-    entity.value = null;
-    // await fetch();
 });
 
-watchEffect(() => {
+watch(
-    console.log(arrayData.store.data);
+    () => arrayData,
-    entity.value = arrayData.store.data;
+    (arrayData) => {
-});
+        console.log('watch CHANGE??', arrayDataStore.get($props.dataKey));
-
+    },
-async function myFn() {
+    { deep: true }
-    const arrayData = useArrayData('claimData');
+);
-    const store = arrayData.store;
-    console.log('myFn', store);
-}
 </script>
-
 <template>
-    <QBtn @click="myFn()">a</QBtn>
     <div class="descriptor">
-        <template v-if="entity">
+        <template v-if="arrayData.store.data">
             <div class="header bg-primary q-pa-sm">
                 <RouterLink :to="{ name: `${module}List` }">
                     <QBtn
@@ -93,7 +159,12 @@ async function myFn() {
                         </QTooltip>
                     </QBtn>
                 </RouterLink>
-                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
+                <RouterLink
+                    :to="{
+                        name: `${module}Summary`,
+                        params: { id: arrayData.store.data.id },
+                    }"
+                >
                     <QBtn
                         round
                         flat
@@ -136,33 +207,37 @@ async function myFn() {
                             <span v-if="$props.title" :title="$props.title">
                                 {{ $props.title }}
                             </span>
-                            <slot v-else name="description" :entity="entity">
+                            <slot
-                                <span :title="entity.name">
+                                v-else
-                                    {{ entity.name }}
+                                name="description"
+                                :entity="arrayData.store.data"
+                            >
+                                <span :title="arrayData.store.data.name">
+                                    {{ arrayData.store.data.name }}
                                 </span>
                             </slot>
                         </div>
                     </QItemLabel>
                     <QItem dense>
                         <QItemLabel class="subtitle" caption>
-                            #{{ $props.subtitle ?? entity.id }}
+                            #{{ $props.subtitle ?? arrayData.store.data.id }}
                         </QItemLabel>
                     </QItem>
                 </QList>
                 <div class="list-box q-mt-xs">
-                    <slot name="body" :entity="entity" />
+                    <slot name="body" :entity="arrayData.store.data" />
                 </div>
             </div>
             <div class="icons">
-                <slot name="icons" :entity="entity" />
+                <slot name="icons" :entity="arrayData.store.data" />
             </div>
             <div class="actions">
-                <slot name="actions" :entity="entity" />
+                <slot name="actions" :entity="arrayData.store.data" />
             </div>
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <SkeletonDescriptor v-if="!entity" />
+        <SkeletonDescriptor v-if="!arrayData.store.data" />
     </div>
 </template>
 

src/composables/useArrayData.js

@@ -7,7 +7,7 @@ const arrayDataStore = useArrayDataStore();
 
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
-
+    console.log('CALLED WITH KEY → ', key, userOptions);
     if (!arrayDataStore.get(key)) {
         arrayDataStore.set(key);
     }
@@ -40,7 +40,7 @@ export function useArrayData(key, userOptions) {
             'userParams',
             'userFilter',
         ];
-        if (typeof userOptions === 'object') {
+        if (userOptions && typeof userOptions === 'object') {
             for (const option in userOptions) {
                 const isEmpty = userOptions[option] == null || userOptions[option] == '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
@@ -74,6 +74,7 @@ export function useArrayData(key, userOptions) {
         Object.assign(params, store.userParams);
 
         store.isLoading = true;
+        console.log('ARRAY FETCH', store.url);
         const response = await axios.get(store.url, {
             signal: canceller.signal,
             params,
@@ -147,7 +148,7 @@ export function useArrayData(key, userOptions) {
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
 
-        router.replace({
+        router?.replace({
             path: route.path,
             query: query,
         });

src/pages/Claim/Card/ClaimAction.vue

@@ -104,7 +104,6 @@ watchEffect(() => {
 });
 
 function getDestination(destinationId) {
-    console.log(destinationTypes.value.find((type) => type.id == destinationId));
     return destinationTypes.value.find((type) => type.id == destinationId);
 }
 

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -69,6 +69,8 @@ function stateColor(code) {
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
+    console.log('SET ENTITY SETDATA', entity);
+    if (!entity) return;
     data.value = useCardDescription(entity.client.name, entity.id);
     state.set('ClaimDescriptor', entity);
 };
@@ -83,6 +85,7 @@ const setData = (entity) => {
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
+        data-key="claimData"
     >
         <template #menu="{ entity }">
             <ClaimDescriptorMenu :claim="entity" />
@@ -120,16 +123,16 @@ const setData = (entity) => {
             <VnLv :label="t('claim.card.commercial')">
                 <template #value>
                     <span class="link">
-                        {{ entity.client.salesPersonUser.name }}
+                        {{ entity.client?.salesPersonUser?.name }}
-                        <WorkerDescriptorProxy :id="entity.client.salesPersonFk" />
+                        <WorkerDescriptorProxy :id="entity.client?.salesPersonFk" />
                     </span>
                 </template>
             </VnLv>
             <VnLv
                 :label="t('claim.card.province')"
-                :value="entity.ticket.address.province.name"
+                :value="entity.ticket?.address?.province?.name"
             />
-            <VnLv :label="t('claim.card.zone')" :value="entity.ticket.zone.name" />
+            <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
         </template>
         <template #actions="{ entity }">
             <QCardActions>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -55,13 +55,14 @@ function getWorkerAvatar() {
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
-    console.log('entity ASDASD', entity);
+    if (!entity) return;
     data.value = useCardDescription(entity.user.nickname, entity.id);
 };
 </script>
 <template>
     <CardDescriptor
         module="Worker"
+        data-key="workerData"
         :url="`Workers/${entityId}`"
         :filter="filter"
         :title="data.title"