feat: refs #5186 use arrayData in descriptor

src/components/LeftMenuItem.vue

@@ -11,25 +11,30 @@ const props = defineProps({
     },
 });
 
-const item = computed(() => {
+const itemComputed = computed(() => {
     const item = JSON.parse(JSON.stringify(props.item));
     const [, , section] = item.title.split('.');
 
     if (!te(item.title)) item.title = t(`globals.pageTitles.${section}`);
     return item;
-}); // eslint-disable-line vue/no-dupe-keys
+});
 </script>
 <template>
-    <QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
-        <QItemSection avatar v-if="item.icon">
-            <QIcon :name="item.icon" />
+    <QItem
+        active-class="text-primary"
+        :to="{ name: itemComputed.name }"
+        clickable
+        v-ripple
+    >
+        <QItemSection avatar v-if="itemComputed.icon">
+            <QIcon :name="itemComputed.icon" />
         </QItemSection>
-        <QItemSection avatar v-if="!item.icon">
+        <QItemSection avatar v-if="!itemComputed.icon">
             <QIcon name="disabled_by_default" />
         </QItemSection>
-        <QItemSection>{{ t(item.title) }}</QItemSection>
+        <QItemSection>{{ t(itemComputed.title) }}</QItemSection>
         <QItemSection side>
-            <slot name="side" :item="item" />
+            <slot name="side" :item="itemComputed" />
         </QItemSection>
     </QItem>
 </template>

src/components/common/VnBreadcrumbs.vue

@@ -34,6 +34,7 @@ function getBreadcrumb(param) {
         icon: param.meta.icon,
         path: param.path,
         root: root.value,
+        locale: t(`globals.pageTitles.${param.meta.title}`),
     };
 
     if (screen.gt.sm) {
@@ -42,9 +43,7 @@ function getBreadcrumb(param) {
     }
 
     const moduleLocale = `${breadcrumb.root}.pageTitles.${breadcrumb.title}`;
-    breadcrumb.locale = te(moduleLocale)
-        ? t(moduleLocale)
-        : t(`globals.pageTitles.${breadcrumb.title}`);
+    if (te(moduleLocale)) breadcrumb.locale = t(moduleLocale);
 
     return breadcrumb;
 }

src/components/ui/CardDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, useSlots, watch, computed, ref } from 'vue';
+import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -41,13 +41,15 @@ const state = useState();
 const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const entity = computed(() => useArrayData($props.dataKey).store.data);
+const { store } = useArrayData($props.dataKey);
+const entity = computed(() => store.data);
 const isLoading = ref(false);
 
 defineExpose({
     getData,
 });
-onMounted(async () => {
+onBeforeMount(async () => {
+    if ($props.url) {
         await getData();
         watch(
             () => $props.url,
@@ -56,6 +58,7 @@ onMounted(async () => {
                 await getData();
             }
         );
+    }
 });
 
 async function getData() {

src/pages/Parking/Card/ParkingCard.vue

@@ -8,26 +8,28 @@ import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
 
-const stateStore = useStateStore();
 const { t } = useI18n();
+const route = useRoute();
+const stateStore = useStateStore();
 
 const filter = {
-    fields: ['sectorFk', 'code', 'pickingOrder'],
+    fields: ['id', 'sectorFk', 'code', 'pickingOrder'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
 };
 
-const route = useRoute();
 const arrayData = useArrayData('Parking', {
     url: `Parkings/${route.params.id}`,
     filter,
 });
+const { store } = arrayData;
 
 onMounted(async () => await arrayData.fetch({ append: false }));
 watch(
     () => route.params.id,
     async (newId) => {
         if (newId) {
-            arrayData.store.url = `Parkings/${newId}`;
+            store.url = `Parkings/${newId}`;
+            store.filter = filter;
             await arrayData.fetch({ append: false });
         }
     }

src/pages/Parking/Card/ParkingDescriptor.vue

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