src/components/ui/CardSummary.vue

@@ -1,11 +1,10 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
-onMounted(() => fetch());
-
 const entity = ref();
 const props = defineProps({
     url: {
@@ -16,14 +15,25 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    summaryRouteName: {
+        type: String,
+        default: null,
+    },
 });
 const emit = defineEmits(['onFetch']);
+const route = useRoute();
+const isSummary = ref();
 
 defineExpose({
     entity,
     fetch,
 });
 
+onMounted(() => {
+    isSummary.value = String(route.path).endsWith('/summary');
+    fetch();
+});
+
 async function fetch() {
     const params = {};
 
@@ -48,7 +58,17 @@ watch(props, async () => {
             <template v-if="entity">
                 <div class="summaryHeader bg-primary q-pa-md text-weight-bolder">
                     <slot name="header-left">
-                        <span></span>
+                        <router-link
+                            v-if="!isSummary"
+                            class="header link"
+                            :to="{
+                                name: summaryRouteName,
+                                params: { id: entity.id },
+                            }"
+                        >
+                            <QIcon name="open_in_new" color="white" size="sm" />
+                        </router-link>
+                        <span v-else></span>
                     </slot>
                     <slot name="header" :entity="entity">
                         <VnLv :label="`${entity.id} -`" :value="entity.name" />

src/pages/Supplier/Card/SupplierSummary.vue

@@ -49,17 +49,9 @@ const isAdministrative = computed(() => {
     <CardSummary
         ref="summaryRef"
         :url="`Suppliers/${entityId}/getSummary`"
+        summary-route-name="SupplierSummary"
         @on-fetch="(data) => setData(data)"
     >
-        <template #header-left>
-            <router-link
-                v-if="isAdministrative && route.name !== 'SupplierSummary'"
-                class="header link"
-                :to="{ name: 'SupplierSummary', params: { id: entityId } }"
-            >
-                <QIcon name="open_in_new" color="white" size="sm" />
-            </router-link>
-        </template>
         <template #header>
             <span>{{ supplier.name }} - {{ supplier.id }}</span>
         </template>