Summaries have now a dialog component

src/pages/Claim/Card/ClaimSummary.vue

@@ -12,13 +12,13 @@ const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
-    claimId: {
+    id: {
         type: Number,
         default: 0,
     },
 });
 
-const entityId = computed(() => $props.claimId || route.params.id);
+const entityId = computed(() => $props.id || route.params.id);
 
 const claim = ref(null);
 const salesClaimed = ref(null);

src/pages/Claim/Card/ClaimSummaryDialog.vue

@@ -0,0 +1,21 @@
+<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>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <claim-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>

src/pages/Claim/ClaimList.vue

@@ -1,15 +1,14 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-// import { useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 import Paginate from 'src/components/Paginate.vue';
 import { toDate } from 'src/filters/index';
-import ClaimSummary from './Card/ClaimSummary.vue';
+import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
 
 const router = useRouter();
-// const quasar = useQuasar();
+const quasar = useQuasar();
 const { t } = useI18n();
 
 const filter = {
@@ -39,26 +38,14 @@ function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
 
-const preview = ref({
+function viewSummary(id) {
-    shown: false,
+    quasar.dialog({
-});
+        component: ClaimSummaryDialog,
-
+        componentProps: {
-function showPreview(id) {
+            id,
-    preview.value.shown = true;
+        },
-    preview.value.data = {
+    });
-        claimId: id,
-    };
 }
-
-// function showPopover($event, customer) {
-//     $event.preventDefault();
-//     quasar.dialog({
-//         component: CustomerDescriptorPopover,
-//         componentProps: {
-//             customer: customer,
-//         },
-//     });
-// }
 </script>
 
 <template>
@@ -127,7 +114,7 @@ function showPreview(id) {
                             <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
+                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
                             <q-btn flat round color="grey-7" icon="vn:client">
@@ -142,7 +129,4 @@ function showPreview(id) {
             </template>
         </paginate>
     </q-page>
-    <q-dialog v-model="preview.shown">
-        <claim-summary :claim-id="preview.data.claimId" />
-    </q-dialog>
 </template>

src/pages/Customer/Card/CustomerSummary.vue

@@ -12,13 +12,13 @@ const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
-    customerId: {
+    id: {
         type: Number,
         default: 0,
     },
 });
 
-const entityId = computed(() => $props.customerId || route.params.id);
+const entityId = computed(() => $props.id || route.params.id);
 
 const customer = ref(null);
 function fetch() {

src/pages/Customer/Card/CustomerSummaryDialog.vue

@@ -0,0 +1,21 @@
+<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>
+    <q-dialog ref="dialogRef" @hide="onDialogHide">
+        <customer-summary v-if="$props.id" :id="$props.id" />
+    </q-dialog>
+</template>

src/pages/Customer/CustomerList.vue

@@ -1,26 +1,25 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 import Paginate from 'src/components/Paginate.vue';
-import CustomerSummary from './Card/CustomerSummary.vue';
+import CustomerSummaryDialog from './Card/CustomerSummaryDialog.vue';
 
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
 
 function navigate(id) {
     router.push({ path: `/customer/${id}` });
 }
 
-const preview = ref({
+function viewSummary(id) {
-    shown: false,
+    quasar.dialog({
-});
+        component: CustomerSummaryDialog,
-
+        componentProps: {
-function showPreview(id) {
+            id,
-    preview.value.shown = true;
+        },
-    preview.value.data = {
+    });
-        customerId: id,
-    };
 }
 </script>
 
@@ -73,7 +72,7 @@ function showPreview(id) {
                             <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="preview" @click="showPreview(row.id)">
+                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
                                 <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
                             </q-btn>
                             <!-- <q-btn flat round color="grey-7" icon="vn:ticket">
@@ -85,7 +84,4 @@ function showPreview(id) {
             </template>
         </paginate>
     </q-page>
-    <q-dialog v-model="preview.shown">
-        <customer-summary :customer-id="preview.data.customerId" />
-    </q-dialog>
 </template>