feat(preview): refs #6475 add preview icon on descriptor

src/components/ui/CardDescriptor.vue

@@ -1,9 +1,10 @@
 <script setup>
 import { onMounted, useSlots, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
-
+import CustomerSummaryDialog from '../../pages/Customer/Card/CustomerSummaryDialog.vue';
 const $props = defineProps({
     url: {
         type: String,
@@ -25,8 +26,12 @@ const $props = defineProps({
         type: Number,
         default: 0,
     },
+    preview: {
+        type: Boolean,
+        default: false,
+    },
 });
-
+const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
 const entity = ref();
@@ -52,27 +57,36 @@ watch($props, async () => {
     entity.value = null;
     await fetch();
 });
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: CustomerSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
 </script>
 
 <template>
     <div class="descriptor">
         <template v-if="entity">
-            <div class="header bg-primary q-pa-sm">
-                <RouterLink :to="{ name: `${module}List` }">
-                    <QBtn
-                        round
-                        flat
-                        dense
-                        size="md"
-                        icon="view_list"
-                        color="white"
-                        class="link"
-                    >
-                        <QTooltip>
-                            {{ t('components.cardDescriptor.mainList') }}
-                        </QTooltip>
-                    </QBtn>
-                </RouterLink>
+            <div class="header bg-primary q-pa-sm justify-between">
+                <QBtn
+                    @click.stop="viewSummary(entity.id)"
+                    round
+                    flat
+                    dense
+                    size="md"
+                    icon="preview"
+                    color="white"
+                    class="link"
+                    v-if="preview"
+                >
+                    <QTooltip>
+                        {{ t('components.smartCard.openSummary') }}
+                    </QTooltip>
+                </QBtn>
                 <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                     <QBtn
                         round
@@ -88,7 +102,6 @@ watch($props, async () => {
                         </QTooltip>
                     </QBtn>
                 </RouterLink>
-
                 <QBtn
                     v-if="slots.menu"
                     size="md"
@@ -211,8 +224,6 @@ watch($props, async () => {
     width: 256px;
     .header {
         display: flex;
-        justify-content: space-between;
-        align-items: stretch;
     }
     .icons {
         margin: 0 10px;

src/pages/Customer/Card/CustomerDescriptorProxy.vue

@@ -10,6 +10,6 @@ const $props = defineProps({
 </script>
 <template>
     <QPopupProxy>
-        <CustomerDescriptor v-if="$props.id" :id="$props.id" />
+        <CustomerDescriptor v-if="$props.id" :id="$props.id" :preview="true" />
     </QPopupProxy>
 </template>