refactor: refs #8120 change prop and classes' names

src/components/common/VnSummaryDialog.vue

@@ -10,9 +10,9 @@ defineProps({
         type: Object,
         required: true,
     },
-    moduleClass: {
+    width: {
         type: String,
-        default: 'defaultSummary',
+        default: 'md-width',
     },
 });
 
@@ -22,18 +22,18 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 <template>
     <QDialog ref="dialogRef" @hide="onDialogHide">
-        <component :is="summary" :id="id" :class="moduleClass" />
+        <component :is="summary" :id="id" :class="width" />
     </QDialog>
 </template>
 
 <style lang="scss" scoped>
-.defaultSummary {
+.md-width {
     max-width: $width-md;
 }
-.largeSummary {
+.lg-width {
     max-width: $width-lg;
 }
-.xlargeSummary {
+.xlg-width {
     max-width: $width-xl;
 }
 </style>

src/components/ui/CardDescriptor.vue

@@ -37,9 +37,9 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
-    moduleClass: {
+    width: {
         type: String,
-        default: 'defaultSummary',
+        default: 'md-width',
     },
 });
 
@@ -133,9 +133,7 @@ const toModule = computed(() =>
                     </QBtn></slot
                 >
                 <QBtn
-                    @click.stop="
+                    @click.stop="viewSummary(entity.id, $props.summary, $props.width)"
-                        viewSummary(entity.id, $props.summary, $props.moduleClass)
-                    "
                     round
                     flat
                     dense

src/composables/useSummaryDialog.js

@@ -4,10 +4,10 @@ import { useQuasar } from 'quasar';
 export function useSummaryDialog() {
     const quasar = useQuasar();
 
-    function viewSummary(id, summary, moduleClass) {
+    function viewSummary(id, summary, width) {
         quasar.dialog({
             component: VnSummaryDialog,
-            componentProps: { id, summary, moduleClass },
+            componentProps: { id, summary, width },
         });
     }
 

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -53,7 +53,7 @@ const debtWarning = computed(() => {
         @on-fetch="setData"
         :summary="$props.summary"
         data-key="customer"
-        :module-class="'largeSummary'"
+        width="lg-width"
     >
         <template #menu="{ entity }">
             <CustomerDescriptorMenu :customer="entity" />

src/pages/Entry/Card/EntryDescriptor.vue

@@ -61,7 +61,7 @@ const getEntryRedirectionFilter = (entry) => {
         :filter="filter"
         title="supplier.nickname"
         data-key="Entry"
-        :module-class="'largeSummary'"
+        width="lg-width"
     >
         <template #menu="{ entity }">
             <EntryDescriptorMenu :id="entity.id" />

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -161,14 +161,17 @@ const createInvoiceInCorrection = async () => {
         :url="`InvoiceIns/${entityId}`"
         :filter="filter"
         title="supplierRef"
-        :module-class="'xlargeSummary'"
+        width="xlg-width"
     >
         <template #menu="{ entity }">
             <InvoiceInDescriptorMenu :invoice="entity" />
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('invoicein.list.issued')" :value="toDate(entity.issued)" />
-            <VnLv :label="t('invoicein.summary.bookedDate')" :value="toDate(entity.booked)" />
+            <VnLv
+                :label="t('invoicein.summary.bookedDate')"
+                :value="toDate(entity.booked)"
+            />
             <VnLv :label="t('invoicein.list.amount')" :value="toCurrency(totalAmount)" />
             <VnLv :label="t('invoicein.list.supplier')">
                 <template #value>

src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue

@@ -62,7 +62,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         :subtitle="data.subtitle"
         @on-fetch="setData"
         data-key="invoiceOutData"
-        :module-class="'largeSummary'"
+        width="lg-width"
     >
         <template #menu="{ entity, menuRef }">
             <InvoiceOutDescriptorMenu :invoice-out-data="entity" :menu-ref="menuRef" />

src/pages/Route/Card/RouteDescriptor.vue

@@ -76,7 +76,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.code, entity
         :subtitle="data.subtitle"
         data-key="routeData"
         @on-fetch="setData"
-        :module-class="'largeSummary'"
+        width="lg-width"
     >
         <template #body="{ entity }">
             <VnLv :label="t('Date')" :value="toDate(entity?.dated)" />

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -102,6 +102,10 @@ const data = ref(useCardDescription());
 function ticketFilter(ticket) {
     return JSON.stringify({ clientFk: ticket.clientFk });
 }
+
+const setData = (entity) => {
+    data.value = useCardDescription(entity.ref, entity.id);
+};
 </script>
 
 <template>
@@ -111,8 +115,8 @@ function ticketFilter(ticket) {
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
+        @on-fetch="setData"
         data-key="ticketData"
-        :module-class="'largeSummary'"
     >
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />