src/components/ui/CardDescriptor.vue

@@ -1,14 +1,10 @@
 <script setup>
-import { computed, useSlots, ref, watch, onMounted } from 'vue';
+import { onMounted, useSlots, ref, watch } 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 },
     url: {
         type: String,
         default: '',
@@ -27,31 +23,40 @@ const $props = defineProps({
     },
     subtitle: {
         type: Number,
-        default: null,
+        default: 0,
     },
 });
 
 const slots = useSlots();
 const { t } = useI18n();
+const entity = ref();
+
+onMounted(async () => {
+    await fetch();
+});
+
 const emit = defineEmits(['onFetch']);
-const arrayDataStore = useArrayDataStore();
 
-const arrayData = computed(() => {
+async function fetch() {
-    const current = arrayDataStore.get($props.dataKey);
+    const params = {};
-    const currentArrayData = useArrayData($props.dataKey);
-    const newArrayData = useArrayData($props.dataKey, {
-        url: $props.url,
-        filter: $props.filter,
-    });
-    if (current?.url != $props.url) newArrayData.fetch({ append: false });
-    if (newArrayData.store.data) emit('onFetch', newArrayData.store.data);
 
-    return newArrayData;
+    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 () => {
+    entity.value = null;
+    await fetch();
 });
 </script>
+
 <template>
     <div class="descriptor">
-        <template v-if="arrayData.store.data">
+        <template v-if="entity">
             <div class="header bg-primary q-pa-sm">
                 <RouterLink :to="{ name: `${module}List` }">
                     <QBtn
@@ -68,12 +73,7 @@ const arrayData = computed(() => {
                         </QTooltip>
                     </QBtn>
                 </RouterLink>
-                <RouterLink
+                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
-                    :to="{
-                        name: `${module}Summary`,
-                        params: { id: arrayData.store.data.id },
-                    }"
-                >
                     <QBtn
                         round
                         flat
@@ -116,37 +116,33 @@ const arrayData = computed(() => {
                             <span v-if="$props.title" :title="$props.title">
                                 {{ $props.title }}
                             </span>
-                            <slot
+                            <slot v-else name="description" :entity="entity">
-                                v-else
+                                <span :title="entity.name">
-                                name="description"
+                                    {{ entity.name }}
-                                :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 ?? arrayData.store.data.id }}
+                            #{{ $props.subtitle ?? entity.id }}
                         </QItemLabel>
                     </QItem>
                 </QList>
                 <div class="list-box q-mt-xs">
-                    <slot name="body" :entity="arrayData.store.data" />
+                    <slot name="body" :entity="entity" />
                 </div>
             </div>
             <div class="icons">
-                <slot name="icons" :entity="arrayData.store.data" />
+                <slot name="icons" :entity="entity" />
             </div>
             <div class="actions">
-                <slot name="actions" :entity="arrayData.store.data" />
+                <slot name="actions" :entity="entity" />
             </div>
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <SkeletonDescriptor v-if="!arrayData.store.data" />
+        <SkeletonDescriptor v-if="!entity" />
     </div>
 </template>
 

src/composables/useArrayData.js

@@ -7,6 +7,7 @@ const arrayDataStore = useArrayDataStore();
 
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
+
     if (!arrayDataStore.get(key)) {
         arrayDataStore.set(key);
     }
@@ -39,7 +40,7 @@ export function useArrayData(key, userOptions) {
             'userParams',
             'userFilter',
         ];
-        if (userOptions && typeof userOptions === 'object') {
+        if (typeof userOptions === 'object') {
             for (const option in userOptions) {
                 const isEmpty = userOptions[option] == null || userOptions[option] == '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
@@ -146,7 +147,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/i18n/es/index.js

@@ -273,7 +273,7 @@ export default {
             photos: 'Fotos',
             log: 'Registros de auditoría',
             notes: 'Notas',
-            action: 'Action',
+            action: 'Acción',
         },
         list: {
             customer: 'Cliente',

src/pages/Claim/Card/ClaimAction.vue

@@ -541,7 +541,7 @@ es:
     Delivered: Descripción
     Quantity: Cantidad
     Claimed: Rec
-    Description: Description
+    Description: Descripción
     Price: Precio
     Discount: Dto.
     Destination: Destino

src/pages/Claim/Card/ClaimCard.vue

@@ -1,57 +1,17 @@
 <script setup>
-import { onMounted, computed, watch, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useArrayData } from 'src/composables/useArrayData';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import { getUrl } from 'composables/getUrl';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 
+import { onMounted } from 'vue';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
-const filter = {
-    include: [
-        {
-            relation: 'client',
-            scope: {
-                include: { relation: 'salesPersonUser' },
-            },
-        },
-        {
-            relation: 'claimState',
-        },
-        {
-            relation: 'ticket',
-            scope: {
-                include: [
-                    { relation: 'zone' },
-                    {
-                        relation: 'address',
-                        scope: {
-                            include: { relation: 'province' },
-                        },
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'worker',
-            scope: {
-                include: { relation: 'user' },
-            },
-        },
-    ],
-};
-const arrayData = useArrayData('claimData', {
-    url: `Claims/${route.params.id}`,
-    filter,
-});
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-
 const $props = defineProps({
     id: {
         type: Number,
@@ -59,17 +19,13 @@ const $props = defineProps({
         default: null,
     },
 });
-let salixUrl;
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
 
+let salixUrl;
 onMounted(async () => {
-    await arrayData.fetch({ append: false });
+    salixUrl = await getUrl(`claim/${entityId.value}`);
-    watch(
-        () => route.params.id,
-        async (id) => {
-            arrayData.store.url = `Claims/${id}`;
-            await arrayData.fetch({ append: false });
-        }
-    );
 });
 </script>
 <template>