Update roadmap summary dialog implementation

src/pages/Route/Roadmap/RoadmapSummaryDialog.vue

@@ -1,29 +0,0 @@
-<script setup>
-import { useDialogPluginComponent } from 'quasar';
-import RoadmapSummary from "pages/Route/Roadmap/RoadmapSummary.vue";
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-defineEmits([...useDialogPluginComponent.emits]);
-
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <div class="dialog full-width">
-            <RoadmapSummary v-if="$props.id" :id="$props.id" />
-        </div>
-    </QDialog>
-</template>
-
-<style lang="scss" scoped>
-.dialog {
-    max-width: 1280px;
-}
-</style>

src/pages/Route/RouteRoadmap.vue

@@ -13,11 +13,13 @@ import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import axios from 'axios';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import RoadmapSummaryDialog from "pages/Route/Roadmap/RoadmapSummaryDialog.vue";
+import {useSummaryDialog} from "composables/useSummaryDialog";
+import RoadmapSummary from "pages/Route/Roadmap/RoadmapSummary.vue";
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const quasar = useQuasar();
+const { viewSummary } = useSummaryDialog();
 
 const to = Date.vnNew();
 to.setDate(to.getDate() + 1);
@@ -122,18 +124,6 @@ function confirmRemove() {
         })
         .onOk(() => refreshKey.value++);
 }
-
-function previewRoadmap(id) {
-    if (!id) {
-        return;
-    }
-    quasar.dialog({
-        component: RoadmapSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -248,7 +238,7 @@ function previewRoadmap(id) {
                                             name="preview"
                                             size="xs"
                                             color="primary"
-                                            @click="previewRoadmap(props?.row?.id)"
+                                            @click.stop="viewSummary(props?.row?.id, RoadmapSummary)"
                                             class="cursor-pointer"
                                         >
                                             <QTooltip>{{ t('Preview') }}</QTooltip>