feat: refs #6657 create component & composable

src/components/common/VnSummaryDialog.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+
+defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    summary: {
+        type: Object,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
+        <component :is="summary" :id="id" />
+    </QDialog>
+</template>

src/composables/useSummaryDialog.js

@@ -0,0 +1,15 @@
+import VnSummaryDialog from 'src/components/common/VnSummaryDialog.vue';
+import { useQuasar } from 'quasar';
+
+export function useSummaryDialog() {
+    const quasar = useQuasar();
+
+    function viewSummary(id, summary) {
+        quasar.dialog({
+            component: VnSummaryDialog,
+            componentProps: { id, summary },
+        });
+    }
+
+    return { viewSummary };
+}

src/pages/Claim/ClaimList.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -9,14 +8,15 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
+import ClaimSummary from './Card/ClaimSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 const STATE_COLOR = {
     pending: 'positive',
@@ -30,14 +30,14 @@ function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
 
-function viewSummary(id) {
+/* function viewSummary(id) {
     quasar.dialog({
         component: ClaimSummaryDialog,
         componentProps: {
             id,
         },
     });
-}
+} */
 </script>
 
 <template>
@@ -135,7 +135,7 @@ function viewSummary(id) {
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, ClaimSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Customer/CustomerList.vue

@@ -1,34 +1,25 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import CustomerFilter from './CustomerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import CustomerSummary from './Card/CustomerSummary.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: CustomerSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 const redirectToCreateView = () => {
     router.push({ name: 'CustomerCreate' });
 };
@@ -98,7 +89,7 @@ const redirectToCreateView = () => {
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, CustomerSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue

@@ -1,14 +1,12 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-
+import CustomerSummary from '../Card/CustomerSummary.vue';
-import { useQuasar } from 'quasar';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-
-import CustomerSummaryDialog from '../Card/CustomerSummaryDialog.vue';
 
 const { t } = useI18n();
-const quasar = useQuasar();
 const router = useRouter();
+const { viewSummary } = useSummaryDialog();
 
 const $props = defineProps({
     id: {
@@ -27,15 +25,6 @@ const redirectToCreateView = () => {
         },
     });
 };
-
-const viewSummary = () => {
-    quasar.dialog({
-        component: CustomerSummaryDialog,
-        componentProps: {
-            id: $props.id,
-        },
-    });
-};
 </script>
 
 <template>
@@ -51,7 +40,7 @@ const viewSummary = () => {
             </QTooltip>
         </QIcon>
         <QIcon
-            @click.stop="viewSummary"
+            @click.stop="viewSummary($props.id, CustomerSummary)"
             class="q-ml-md"
             color="primary"
             name="preview"

src/pages/Entry/EntryList.vue

@@ -2,22 +2,20 @@
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
-
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
+import EntrySummary from './Card/EntrySummary.vue';
 import EntryFilter from './EntryFilter.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/entry/${id}` });
@@ -27,15 +25,6 @@ const redirectToCreateView = () => {
     router.push({ name: 'EntryCreate' });
 };
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: EntrySummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -121,7 +110,7 @@ onMounted(async () => {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, EntrySummary)"
                                 color="primary"
                                 type="submit"
                             />

src/pages/InvoiceIn/InvoiceInList.vue

@@ -2,7 +2,6 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
@@ -11,12 +10,13 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import InvoiceInFilter from './InvoiceInFilter.vue';
-import InvoiceInSummaryDialog from './Card/InvoiceInSummaryDialog.vue';
 import { getUrl } from 'src/composables/getUrl';
+import InvoiceInSummary from './Card/InvoiceInSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
+const { viewSummary } = useSummaryDialog();
 let url = ref();
 const { t } = useI18n();
 
@@ -29,15 +29,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 function navigate(id) {
     router.push({ path: `/invoice-in/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: InvoiceInSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -127,7 +118,7 @@ function viewSummary(id) {
 
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, InvoiceInSummary)"
                                 color="primary"
                                 type="submit"
                                 class="q-mt-sm"

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,23 +1,25 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { exportFile, useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
+import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const { t } = useI18n();
 const selectedCards = ref(new Map());
 const quasar = useQuasar();
 const router = useRouter();
 const stateStore = useStateStore();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -26,15 +28,6 @@ function navigate(id) {
     router.push({ path: `/invoice-out/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: InvoiceOutSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 const toggleIndividualCard = (cardData) => {
     if (selectedCards.value.has(cardData.id)) {
         selectedCards.value.delete(cardData.id);
@@ -233,7 +226,7 @@ const downloadCsv = () => {
                                 />
                                 <QBtn
                                     :label="t('components.smartCard.openSummary')"
-                                    @click.stop="viewSummary(row.id)"
+                                    @click.stop="viewSummary(row.id, InvoiceOutSummary)"
                                     color="primary"
                                     style="margin-top: 15px"
                                     type="submit"

src/pages/Order/OrderList.vue

@@ -4,7 +4,6 @@ import { onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toDate } from 'src/filters';
-import { useQuasar } from 'quasar';
 import CardList from 'components/ui/CardList.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -12,12 +11,13 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
-import OrderSummaryDialog from 'pages/Order/Card/OrderSummaryDialog.vue';
+import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
-const quasar = useQuasar();
 const router = useRouter();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -25,15 +25,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 function navigate(id) {
     router.push({ path: `/order/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: OrderSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -134,7 +125,7 @@ function viewSummary(id) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, OrderSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Shelving/ShelvingList.vue

@@ -5,16 +5,16 @@ import { useI18n } from 'vue-i18n';
 import { onMounted, onUnmounted } from 'vue';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
-import ShelvingSummaryDialog from 'pages/Shelving/Card/ShelvingSummaryDialog.vue';
+import ShelvingSummary from 'pages/Shelving/Card/ShelvingSummary.vue';
 import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const filter = {
     include: [{ relation: 'parking' }],
 };
@@ -26,15 +26,6 @@ function navigate(id) {
     router.push({ path: `/shelving/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: ShelvingSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 function exprBuilder(param, value) {
     switch (param) {
         case 'search':
@@ -110,7 +101,7 @@ function exprBuilder(param, value) {
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, ShelvingSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Supplier/SupplierList.vue

@@ -1,21 +1,19 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
-
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import SupplierSummaryDialog from './Card/SupplierSummaryDialog.vue';
+import SupplierSummary from './Card/SupplierSummary.vue';
 import SupplierListFilter from './SupplierListFilter.vue';
-
 import { useStateStore } from 'stores/useStateStore';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/supplier/${id}` });
@@ -24,15 +22,6 @@ function navigate(id) {
 const redirectToCreateView = () => {
     router.push({ name: 'SupplierCreate' });
 };
-
-const viewSummary = (id) => {
-    quasar.dialog({
-        component: SupplierSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-};
 </script>
 
 <template>
@@ -86,7 +75,7 @@ const viewSummary = (id) => {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, SupplierSummary)"
                                 color="primary"
                             />
                         </template>

src/pages/Ticket/TicketList.vue

@@ -1,21 +1,21 @@
 <script setup>
 import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { toDate, toDateString, toCurrency } from 'src/filters/index';
-import TicketSummaryDialog from './Card/TicketSummaryDialog.vue';
+import TicketSummary from './Card/TicketSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TicketFilter from './TicketFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
 const stateStore = useStateStore();
+const { viewSummary } = useSummaryDialog();
 
 onMounted(() => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -32,15 +32,6 @@ const userParams = {
 function navigate(id) {
     router.push({ path: `/ticket/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: TicketSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -123,7 +114,7 @@ function viewSummary(id) {
                         <template #actions>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, TicketSummary)"
                                 color="primary"
                             />
                         </template>

src/pages/Travel/TravelList.vue

@@ -2,21 +2,19 @@
 import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
-
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import TravelSummaryDialog from './Card/TravelSummaryDialog.vue';
+import TravelSummary from './Card/TravelSummary.vue';
 import TravelFilter from './TravelFilter.vue';
-
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
 const stateStore = useStateStore();
+const { viewSummary } = useSummaryDialog();
 
 const navigateToTravelId = (id) => {
     router.push({ path: `/travel/${id}` });
@@ -35,15 +33,6 @@ const redirectCreateEntryView = (travelData) => {
     router.push({ name: 'EntryCreate', query: { travelFk: travelData.id } });
 };
 
-const viewSummary = (id) => {
-    quasar.dialog({
-        component: TravelSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-};
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
@@ -114,7 +103,7 @@ onMounted(async () => {
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, TravelSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

src/pages/Worker/WorkerList.vue

@@ -1,33 +1,24 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import WorkerSummaryDialog from './Card/WorkerSummaryDialog.vue';
+import WorkerSummary from './Card/WorkerSummary.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import WorkerFilter from './WorkerFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-const quasar = useQuasar();
+const { viewSummary } = useSummaryDialog();
 
 function navigate(id) {
     router.push({ path: `/worker/${id}` });
 }
 
-function viewSummary(id) {
-    quasar.dialog({
-        component: WorkerSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
-
 const redirectToCreateView = () => {
     router.push({ name: 'WorkerCreate' });
 };
@@ -96,7 +87,7 @@ const redirectToCreateView = () => {
                             />
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, WorkerSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />

test/cypress/integration/vnLog.spec.js

@@ -7,7 +7,7 @@ describe('VnLog', () => {
     beforeEach(() => {
         cy.login('developer');
         cy.visit(`/#/claim/${1}/log`);
-        cy.openRightMenu('.timeline');
+        cy.openRightMenu();
     });
 
     it('should filter by insert actions', () => {