feat(claimList): refs #6475 claimList add links

src/components/ui/CardDescriptor.vue

@@ -4,7 +4,7 @@ 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,
@@ -26,9 +26,9 @@ const $props = defineProps({
         type: Number,
         default: 0,
     },
-    preview: {
+    summary: {
-        type: Boolean,
+        type: Object,
-        default: false,
+        default: null,
     },
 });
 const quasar = useQuasar();
@@ -60,7 +60,7 @@ watch($props, async () => {
 
 function viewSummary(id) {
     quasar.dialog({
-        component: CustomerSummaryDialog,
+        component: $props.summary,
         componentProps: {
             id,
         },
@@ -81,7 +81,7 @@ function viewSummary(id) {
                     icon="preview"
                     color="white"
                     class="link"
-                    v-if="preview"
+                    v-if="summary"
                 >
                     <QTooltip>
                         {{ t('components.smartCard.openSummary') }}

src/pages/Claim/ClaimList.vue

@@ -5,12 +5,13 @@ import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
-import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 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 WorkerSummaryDialog from 'src/pages/Worker/Card/WorkerSummaryDialog.vue';
+import CustomerSummaryDialog from 'src/pages/Customer/Card/CustomerSummaryDialog.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -27,9 +28,25 @@ function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
 
-function viewSummary(id) {
+function viewSummary(id, summaryDialog) {
+    let dialogComponent;
+
+    switch (summaryDialog) {
+        case 'worker':
+            dialogComponent = WorkerSummaryDialog;
+            break;
+        case 'customer':
+            dialogComponent = CustomerSummaryDialog;
+            break;
+        case 'claim':
+            dialogComponent = ClaimSummaryDialog;
+            break;
+        default:
+            return;
+    }
+
     quasar.dialog({
-        component: ClaimSummaryDialog,
+        component: dialogComponent,
         componentProps: {
             id,
         },
@@ -86,12 +103,24 @@ function viewSummary(id) {
                             <VnLv label="ID" :value="row.id" />
                             <VnLv
                                 :label="t('claim.list.customer')"
-                                :value="row.clientName"
+                                @click.stop="viewSummary(row.clientFk, 'customer')"
-                            />
+                            >
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.clientName }}
+                                    </span>
+                                </template>
+                            </VnLv>
                             <VnLv
                                 :label="t('claim.list.assignedTo')"
-                                :value="row.workerName"
+                                @click.stop="viewSummary(row.workerFk, 'worker')"
-                            />
+                            >
+                                <template #value>
+                                    <span class="link">
+                                        {{ row.workerName }}
+                                    </span>
+                                </template>
+                            </VnLv>
                             <VnLv
                                 :label="t('claim.list.created')"
                                 :value="toDate(row.created)"
@@ -118,18 +147,15 @@ function viewSummary(id) {
                                     {{ t('components.smartCard.openCard') }}
                                 </QTooltip>
                             </QBtn>
-                            <QBtn flat icon="preview" @click.stop="viewSummary(row.id)">
+                            <QBtn
+                                flat
+                                icon="preview"
+                                @click.stop="viewSummary(row.id, 'claim')"
+                            >
                                 <QTooltip>
                                     {{ t('components.smartCard.openSummary') }}
                                 </QTooltip>
                             </QBtn>
-                            <QBtn flat icon="vn:client" @click.stop>
-                                <QTooltip>
-                                    {{ t('components.smartCard.viewDescription') }}
-                                </QTooltip>
-
-                                <CustomerDescriptorProxy :id="row.clientFk" />
-                            </QBtn>
                         </template>
                     </CardList>
                 </template>

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -14,6 +14,10 @@ const $props = defineProps({
         required: false,
         default: null,
     },
+    summary: {
+        type: Object,
+        default: null,
+    },
 });
 
 const route = useRoute();
@@ -34,6 +38,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
+        :summary="$props.summary"
     >
         <template #body="{ entity }">
             <VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">

src/pages/Customer/Card/CustomerDescriptorProxy.vue

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