feat: refs #5186 use arrayData in summary

src/components/ui/CardDescriptor.vue

@@ -41,7 +41,12 @@ const state = useState();
 const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const { store } = useArrayData($props.dataKey);
+const arrayData = useArrayData($props.dataKey || $props.module, {
+    url: $props.url,
+    filter: $props.filter,
+    skip: 0,
+});
+const { store } = arrayData;
 const entity = computed(() => store.data);
 const isLoading = ref(false);
 
@@ -49,24 +54,15 @@ defineExpose({
     getData,
 });
 onBeforeMount(async () => {
-    if ($props.url) {
-        await getData();
-        watch(
-            () => $props.url,
-            async (newUrl, lastUrl) => {
-                if (newUrl == lastUrl) return;
-                await getData();
-            }
-        );
-    }
+    await getData();
+    watch(
+        () => $props.url,
+        async () => await getData()
+    );
 });
 
 async function getData() {
-    const arrayData = useArrayData($props.dataKey, {
-        url: $props.url,
-        filter: $props.filter,
-        skip: 0,
-    });
+    store.url = $props.url;
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });

src/components/ui/CardSummary.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { ref, computed, watch, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
-import axios from 'axios';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 
-const entity = ref();
 const props = defineProps({
     url: {
         type: String,
@@ -19,43 +18,48 @@ const props = defineProps({
         type: Number,
         default: null,
     },
+    dataKey: {
+        type: String,
+        default: '',
+    },
 });
 const emit = defineEmits(['onFetch']);
 const route = useRoute();
 const isSummary = ref();
+const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
+    url: props.url,
+    filter: props.filter,
+    skip: 0,
+});
+const { store } = arrayData;
+const entity = computed(() => store.data);
+const isLoading = ref(false);
 
 defineExpose({
     entity,
     fetch,
 });
 
-onMounted(() => {
+onBeforeMount(async () => {
     isSummary.value = String(route.path).endsWith('/summary');
-    fetch();
+    await fetch();
+    watch(props, async () => await fetch());
 });
 
 async function fetch() {
-    const params = {};
-
-    if (props.filter) params.filter = JSON.stringify(props.filter);
-
-    const { data } = await axios.get(props.url, { params });
-    entity.value = data;
-
+    store.url = props.url;
+    isLoading.value = true;
+    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
     emit('onFetch', data);
+    isLoading.value = false;
 }
-
-watch(props, async () => {
-    entity.value = null;
-    fetch();
-});
 </script>
 
 <template>
     <div class="summary container">
         <QCard class="cardSummary">
-            <SkeletonSummary v-if="!entity" />
-            <template v-if="entity">
+            <SkeletonSummary v-if="!entity || isLoading" />
+            <template v-if="entity && !isLoading">
                 <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
                         <router-link

src/i18n/en/index.js

@@ -90,6 +90,7 @@ export default {
             summary: 'Summary',
             basicData: 'Basic data',
             log: 'Logs',
+            parkingList: 'Parkings list',
         },
     },
     errors: {
@@ -672,7 +673,6 @@ export default {
             summary: 'Summary',
             basicData: 'Basic Data',
             log: 'Logs',
-            parkingList: 'Parking list',
         },
         list: {
             parking: 'Parking',
@@ -700,7 +700,6 @@ export default {
         column: 'Column',
         pageTitles: {
             parking: 'Parking',
-            parkingList: 'Parkings list',
         },
         searchBar: {
             info: 'You can search by parking code',
@@ -976,7 +975,7 @@ export default {
             roadmap: 'Roadmap',
             summary: 'Summary',
             basicData: 'Basic Data',
-            stops: 'Stops'
+            stops: 'Stops',
         },
     },
     roadmap: {
@@ -984,7 +983,7 @@ export default {
             roadmap: 'Roadmap',
             summary: 'Summary',
             basicData: 'Basic Data',
-            stops: 'Stops'
+            stops: 'Stops',
         },
     },
     route: {

src/i18n/es/index.js

@@ -90,6 +90,7 @@ export default {
             summary: 'Resumen',
             basicData: 'Datos básicos',
             log: 'Historial',
+            parkingList: 'Listado de parkings',
         },
     },
     errors: {
@@ -730,7 +731,6 @@ export default {
             summary: 'Resumen',
             basicData: 'Datos básicos',
             log: 'Historial',
-            parkingList: 'Listado de parkings',
         },
         list: {
             parking: 'Parking',
@@ -757,7 +757,6 @@ export default {
         column: 'Columna',
         pageTitles: {
             parking: 'Parking',
-            parkingList: 'Listado de parkings',
         },
         searchBar: {
             info: 'Puedes buscar por código de parking',
@@ -975,7 +974,7 @@ export default {
             roadmap: 'Troncales',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            stops: 'Paradas'
+            stops: 'Paradas',
         },
     },
     roadmap: {
@@ -983,7 +982,7 @@ export default {
             roadmap: 'Troncales',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            stops: 'Paradas'
+            stops: 'Paradas',
         },
     },
     route: {

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -199,7 +199,7 @@ function getLink(param) {
 
 <template>
     <CardSummary
-        ref="summary"
+        data-key="InvoiceInSummary"
         :url="`InvoiceIns/${entityId}/summary`"
         @on-fetch="(data) => setData(data)"
     >

src/pages/Parking/Card/ParkingCard.vue

@@ -13,7 +13,7 @@ const route = useRoute();
 const stateStore = useStateStore();
 
 const filter = {
-    fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
+    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
 };
 
@@ -22,7 +22,6 @@ const arrayData = useArrayData('Parking', {
     filter,
 });
 const { store } = arrayData;
-
 onMounted(async () => await arrayData.fetch({ append: false }));
 watch(
     () => route.params.id,

src/pages/Parking/Card/ParkingDescriptor.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'components/ui/VnLv.vue';
 
-defineProps({
+const props = defineProps({
     id: {
         type: Number,
         required: false,
@@ -14,16 +15,23 @@ defineProps({
 });
 
 const { t } = useI18n();
+const { params } = useRoute();
+const entityId = computed(() => props.id || params.id);
 const { store } = useArrayData('Parking');
 const card = computed(() => store.data);
+const filter = {
+    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
+    include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
+};
 </script>
-
 <template>
     <CardDescriptor
         module="Parking"
         data-key="Parking"
+        :url="`Parkings/${entityId}`"
         :title="card?.code"
         :subtitle="card?.id"
+        :filter="filter"
     >
         <template #body="{ entity: parking }">
             <VnLv :label="t('globals.code')" :value="parking.code" />

src/pages/Parking/Card/ParkingSummary.vue

@@ -11,20 +11,19 @@ const $props = defineProps({
         default: 0,
     },
 });
-const route = useRoute();
+const { params } = useRoute();
 const { t } = useI18n();
-
-const entityId = computed(() => $props.id || route.params.id);
+const entityId = computed(() => $props.id || params.id);
 
 const filter = {
-    fields: ['sectorFk', 'code', 'pickingOrder', 'row', 'column'],
+    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
 };
 </script>
 
 <template>
     <div class="q-pa-md">
-        <CardSummary ref="summary" :url="`Parkings/${entityId}`" :filter="filter">
+        <CardSummary :url="`Parkings/${entityId}`" :filter="filter">
             <template #header="{ entity: parking }">{{ parking.code }}</template>
             <template #body="{ entity: parking }">
                 <QCard class="vn-one">

src/pages/Parking/ParkingList.vue

@@ -12,7 +12,7 @@ import ParkingFilter from './ParkingFilter.vue';
 import ParkingSummary from './Card/ParkingSummary.vue';
 
 const stateStore = useStateStore();
-const router = useRouter();
+const { push } = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 
@@ -83,7 +83,7 @@ function exprBuilder(param, value) {
                         :key="row.id"
                         :id="row.id"
                         :title="row.code"
-                        @click="router.push({ path: `/parking/${row.id}` })"
+                        @click="push({ path: `/parking/${row.id}` })"
                     >
                         <template #list-items>
                             <VnLv label="Sector" :value="row.sector?.description" />

src/router/modules/parking.js

@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'parking',
         icon: 'garage_home',
+        moduleName: 'Parking',
     },
     component: RouterView,
     redirect: { name: 'ParkingCard' },

test/cypress/integration/parking/parkingList.spec.js

@@ -13,7 +13,7 @@ describe('ParkingList', () => {
         cy.closeSideMenu();
     });
 
-    it('should redirect on clicking a invoice', () => {
+    it('should redirect on clicking a parking', () => {
         cy.get(firstChipId)
             .invoke('text')
             .then((content) => {