refs #6157 card

2023-10-30 11:28:48 +01:00 · 2023-10-30 11:28:48 +01:00 · abb1b3f7c1
parent 8a6a3083a3
commit abb1b3f7c1
5 changed files with 137 additions and 58 deletions
--- a/src/components/ui/CardDescriptor.vue
+++ b/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() {
-    console.log('MY FETCH');
-    lastUrl.value = $props.url;
-    const params = {};
+const arrayData = computed(() => {
+    const current = arrayDataStore.get($props.dataKey);
+    const currentArrayData = useArrayData($props.dataKey);
+    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);
-
-    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();
+    return newArrayData;
 });

-watchEffect(() => {
-    console.log(arrayData.store.data);
-    entity.value = arrayData.store.data;
-});
-
-async function myFn() {
-    const arrayData = useArrayData('claimData');
-    const store = arrayData.store;
-    console.log('myFn', store);
-}
+watch(
+    () => arrayData,
+    (arrayData) => {
+        console.log('watch CHANGE??', arrayDataStore.get($props.dataKey));
+    },
+    { deep: true }
+);
 </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">
-                                <span :title="entity.name">
-                                    {{ entity.name }}
+                            <slot
+                                v-else
+                                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>

--- a/src/composables/useArrayData.js
+++ b/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,
        });
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/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);
 }

--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/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 }}
-                        <WorkerDescriptorProxy :id="entity.client.salesPersonFk" />
+                        {{ entity.client?.salesPersonUser?.name }}
+                        <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>
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/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"