src/components/ui/CardDescriptor.vue

@@ -5,6 +5,7 @@ import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useState } from 'src/composables/useState';
+import { useRoute } from 'vue-router';
 
 const $props = defineProps({
     url: {
@@ -21,12 +22,16 @@ const $props = defineProps({
     },
     subtitle: {
         type: Number,
-        default: 0,
+        default: null,
     },
     dataKey: {
         type: String,
         default: null,
     },
+    module: {
+        type: String,
+        default: null,
+    },
     summary: {
         type: Object,
         default: null,
@@ -36,18 +41,23 @@ const $props = defineProps({
 const state = useState();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const arrayData = useArrayData($props.dataKey || 'descriptor', {
-    url: $props.url,
-    filter: $props.filter,
-    skip: 0,
-});
-const { store } = arrayData;
-const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
+let arrayData;
+let store;
+let entity;
 const isLoading = ref(false);
 
 defineExpose({ getData });
+
 onBeforeMount(async () => {
-    if (!$props.dataKey) await getData();
+    arrayData = useArrayData($props.dataKey, {
+        url: $props.url,
+        filter: $props.filter,
+        skip: 0,
+    });
+    store = arrayData.store;
+    entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
+
+    if ($props.dataKey !== useRoute().meta.moduleName) await getData();
     watch(
         () => [$props.url, $props.filter],
         async () => await getData()
@@ -91,7 +101,7 @@ const emit = defineEmits(['onFetch']);
                 </QBtn>
                 <RouterLink
                     :to="{
-                        name: `${$route.meta.moduleName}Summary`,
+                        name: `${module}Summary`,
                         params: { id: entity.id },
                     }"
                 >
@@ -134,7 +144,7 @@ const emit = defineEmits(['onFetch']);
                     <QItemLabel header class="ellipsis text-h5" :lines="1">
                         <div class="title">
                             <span v-if="$props.title" :title="$props.title">
-                                {{ $props.title }}
+                                {{ entity[title] ?? $props.title }}
                             </span>
                             <slot v-else name="description" :entity="entity">
                                 <span :title="entity.name">

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -129,7 +129,11 @@ const correctionFormData = reactive({
 });
 const isNotFilled = computed(() => Object.values(correctionFormData).includes(null));
 
-onBeforeMount(async () => await setInvoiceCorrection(entityId.value));
+onBeforeMount(async () => {
+    await setInvoiceCorrection(entityId.value);
+    const { data } = await axios.get(`InvoiceIns/${entityId.value}/getTotals`);
+    totalAmount.value = data.totalDueDay;
+});
 
 watch(
     () => currentRoute.value.params.id,
@@ -169,11 +173,6 @@ async function setInvoiceCorrection(id) {
     );
 }
 
-async function setTotals() {
-    const { data } = await axios.get(`InvoiceIns/${entityId.value}/getTotals`);
-    totalAmount.value = data.totalDueDay;
-}
-
 function openDialog() {
     quasar.dialog({
         component: VnConfirm,
@@ -263,7 +262,6 @@ const createInvoiceInCorrection = async () => {
     push({ path: `/invoice-in/${correctingId}/summary` });
 };
 </script>
-
 <template>
     <FetchData
         url="InvoiceInConfigs"
@@ -288,21 +286,18 @@ const createInvoiceInCorrection = async () => {
         auto-load
     />
     <CardDescriptor
-        v-if="invoiceIn"
         ref="cardDescriptorRef"
         module="InvoiceIn"
+        data-key="InvoiceIn"
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
-        :title="invoiceIn.supplierRef"
-        :subtitle="invoiceIn.id"
-        data-key="InvoiceIn"
-        @on-fetch="setTotals"
+        title="supplierRef"
     >
-        <template #menu>
+        <template #menu="{ entity }">
             <InvoiceInToBook>
                 <template #content="{ book }">
                     <QItem
-                        v-if="!invoiceIn?.isBooked && isAdministrative()"
+                        v-if="!entity?.isBooked && isAdministrative()"
                         v-ripple
                         clickable
                         @click="book(entityId)"
@@ -312,7 +307,7 @@ const createInvoiceInCorrection = async () => {
                 </template>
             </InvoiceInToBook>
             <QItem
-                v-if="invoiceIn?.isBooked && isAdministrative()"
+                v-if="entity?.isBooked && isAdministrative()"
                 v-ripple
                 clickable
                 @click="triggerMenu('unbook')"
@@ -364,37 +359,34 @@ const createInvoiceInCorrection = async () => {
                 <QItemSection>{{ t('Create rectificative invoice') }}...</QItemSection>
             </QItem>
             <QItem
-                v-if="invoiceIn.dmsFk"
+                v-if="entity.dmsFk"
                 v-ripple
                 clickable
-                @click="downloadFile(invoiceIn.dmsFk)"
+                @click="downloadFile(entity.dmsFk)"
             >
                 <QItemSection>{{ t('components.smartCard.downloadFile') }}</QItemSection>
             </QItem>
         </template>
-        <template #body>
-            <VnLv :label="t('invoiceIn.card.issued')" :value="toDate(invoiceIn.issued)" />
-            <VnLv
-                :label="t('invoiceIn.summary.booked')"
-                :value="toDate(invoiceIn.booked)"
-            />
+        <template #body="{ entity }">
+            <VnLv :label="t('invoiceIn.card.issued')" :value="toDate(entity.issued)" />
+            <VnLv :label="t('invoiceIn.summary.booked')" :value="toDate(entity.booked)" />
             <VnLv :label="t('invoiceIn.card.amount')" :value="toCurrency(totalAmount)" />
             <VnLv :label="t('invoiceIn.summary.supplier')">
                 <template #value>
                     <span class="link">
-                        {{ invoiceIn?.supplier?.nickname }}
-                        <SupplierDescriptorProxy :id="invoiceIn?.supplierFk" />
+                        {{ entity?.supplier?.nickname }}
+                        <SupplierDescriptorProxy :id="entity?.supplierFk" />
                     </span>
                 </template>
             </VnLv>
         </template>
-        <template #action>
+        <template #action="{ entity }">
             <QCardActions>
                 <QBtn
                     size="md"
                     icon="vn:supplier"
                     color="primary"
-                    :to="routes.getSupplier(invoiceIn.supplierFk)"
+                    :to="routes.getSupplier(entity.supplierFk)"
                 >
                     <QTooltip>{{ t('invoiceIn.list.supplier') }}</QTooltip>
                 </QBtn>
@@ -402,7 +394,7 @@ const createInvoiceInCorrection = async () => {
                     size="md"
                     icon="vn:entry"
                     color="primary"
-                    :to="routes.getEntry(invoiceIn.entryFk)"
+                    :to="routes.getEntry(entity.entryFk)"
                 >
                     <QTooltip>{{ t('Entry') }}</QTooltip>
                 </QBtn>
@@ -410,7 +402,7 @@ const createInvoiceInCorrection = async () => {
                     size="md"
                     icon="vn:ticket"
                     color="primary"
-                    :to="routes.getTickets(invoiceIn.supplierFk)"
+                    :to="routes.getTickets(entity.supplierFk)"
                 >
                     <QTooltip>{{ t('invoiceOut.card.ticketList') }}</QTooltip>
                 </QBtn>