src/components/common/VnSummaryDialog.vue

@@ -1,21 +1,23 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
-import WorkerSummary from './WorkerSummary.vue';
 
-const $props = defineProps({
+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">
+    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
-        <WorkerSummary v-if="$props.id" :id="$props.id" />
+        <component :is="summary" :id="id" />
     </QDialog>
 </template>

src/components/ui/CardDescriptor.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { onMounted, useSlots, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const $props = defineProps({
     url: {
@@ -35,9 +35,9 @@ const $props = defineProps({
         default: null,
     },
 });
-const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
 
 defineExpose({
@@ -64,15 +64,6 @@ async function getData() {
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: $props.summary,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -81,7 +72,7 @@ function viewSummary(id) {
             <div class="header bg-primary q-pa-sm justify-between">
                 <slot name="header-extra-action" />
                 <QBtn
-                    @click.stop="viewSummary(entity.id)"
+                    @click.stop="viewSummary(entity.id, $props.summary)"
                     round
                     flat
                     dense

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/Card/ClaimSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import ClaimSummary from './ClaimSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <ClaimSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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',
@@ -29,15 +29,6 @@ function stateColor(code) {
 function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: ClaimSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -135,7 +126,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/Card/CustomerDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import CustomerSummaryDialog from './CustomerSummaryDialog.vue';
+import CustomerSummary from './CustomerSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -12,10 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <CustomerDescriptor
+        <CustomerDescriptor v-if="$props.id" :id="$props.id" :summary="CustomerSummary" />
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="CustomerSummaryDialog"
-        />
     </QPopupProxy>
 </template>

src/pages/Customer/Card/CustomerSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import CustomerSummary from './CustomerSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <CustomerSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Card/EntrySummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import EntrySummary from './EntrySummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <EntrySummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Card/InvoiceInSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import InvoiceInSummary from './InvoiceInSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <InvoiceInSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Card/InvoiceOutSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import InvoiceOutSummary from './InvoiceOutSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <InvoiceOutSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Item/Card/ItemDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ItemDescriptor from './ItemDescriptor.vue';
-import ItemSummaryDialog from './ItemSummaryDialog.vue';
+import ItemSummary from './ItemSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -19,7 +19,7 @@ const $props = defineProps({
         <ItemDescriptor
             v-if="$props.id"
             :id="$props.id"
-            :summary="ItemSummaryDialog"
+            :summary="ItemSummary"
             :dated="dated"
         />
     </QPopupProxy>

src/pages/Item/Card/ItemSummaryDialog.vue

@@ -1,5 +0,0 @@
-<template>
-    <QDialog
-        >Item summary dialog (A DESARROLLAR CUANDO SE CREE EL MODULO DE ITEMS)</QDialog
-    >
-</template>

src/pages/Order/Card/OrderSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import OrderSummary from "pages/Order/Card/OrderSummary.vue";
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <OrderSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Route/Card/RouteSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <RouteSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .route .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

src/pages/Route/RouteList.vue

@@ -13,14 +13,14 @@ import VnInputTime from 'components/common/VnInputTime.vue';
 import axios from 'axios';
 import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
 import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
-import { useQuasar } from 'quasar';
+import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
-import RouteSummaryDialog from 'pages/Route/Card/RouteSummaryDialog.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
-const quasar = useQuasar();
+const { viewSummary } = useSummaryDialog();
 
 const to = Date.vnNew();
 to.setDate(to.getDate() + 1);
@@ -159,18 +159,6 @@ const markAsServed = () => {
     refreshKey.value++;
     startingDate.value = null;
 };
-
-function previewRoute(id) {
-    if (!id) {
-        return;
-    }
-    quasar.dialog({
-        component: RouteSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -473,7 +461,9 @@ function previewRoute(id) {
                                             name="preview"
                                             size="xs"
                                             color="primary"
-                                            @click="previewRoute(props?.row?.id)"
+                                            @click="
+                                                viewSummary(props?.row?.id, RouteSummary)
+                                            "
                                             class="cursor-pointer"
                                         >
                                             <QTooltip>{{ t('Preview') }}</QTooltip>

src/pages/Shelving/Card/ShelvingSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import ShelvingSummary from "pages/Shelving/Card/ShelvingSummary.vue";
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <ShelvingSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Card/SupplierSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import SupplierSummary from './SupplierSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <SupplierSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Card/TicketSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import TicketSummary from './TicketSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <TicketSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Card/TravelSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import TravelSummary from './TravelSummary.vue';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <TravelSummary v-if="$props.id" :id="$props.id" />
-    </QDialog>
-</template>
-
-<style lang="scss">
-.q-dialog .summary .header {
-    position: sticky;
-    z-index: $z-max;
-    top: 0;
-}
-</style>

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/Card/WorkerDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import WorkerDescriptor from './WorkerDescriptor.vue';
-import WorkerSummaryDialog from './WorkerSummaryDialog.vue';
+import WorkerSummary from './WorkerSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -12,10 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <WorkerDescriptor
+        <WorkerDescriptor v-if="$props.id" :id="$props.id" :summary="WorkerSummary" />
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="WorkerSummaryDialog"
-        />
     </QPopupProxy>
 </template>

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', () => {