refactor: refs #6919 fine tunning vnCard

src/components/common/VnCard.vue

@@ -11,7 +11,6 @@ import RightMenu from 'components/common/RightMenu.vue';
 const props = defineProps({
     dataKey: { type: String, required: true },
     url: { type: String, default: undefined },
-    customUrl: { type: String, default: undefined },
     filter: { type: Object, default: () => {} },
     descriptor: { type: Object, required: true },
     filterPanel: { type: Object, default: undefined },
@@ -24,27 +23,20 @@ const props = defineProps({
 const stateStore = useStateStore();
 const route = useRoute();
 const router = useRouter();
-const regex = /(\/\d+)/;
 const searchRightDataKey = computed(() => {
     if (!props.searchDataKey) return route.name;
     return props.searchDataKey;
 });
 
-const url = computed(() => props.url || props.customUrl);
 const arrayData = useArrayData(props.dataKey, {
-    url: url.value,
+    url: props.url,
     filter: props.filter,
     oneRecord: true,
 });
 
 onBeforeMount(async () => {
     try {
-        const id = route.params.id;
+        await fetchData(route.params.id);
-        if (props.idInWhere) arrayData.store.filter.where = { id };
-        else if (props.customUrl) arrayData.store.url = url.value;
-        else if (!regex.test(url.value)) arrayData.store.url = `${url.value}/${id}`;
-
-        await arrayData.fetch({ append: false, updateRouter: false });
     } catch {
         const { matched: matches } = router.currentRoute.value;
         const { path } = matches.at(-1);
@@ -53,16 +45,15 @@ onBeforeMount(async () => {
 });
 
 onBeforeRouteUpdate(async (to, from) => {
-    if (to.params.id !== from.params.id) {
     const id = to.params.id;
-        if (props.idInWhere) arrayData.store.filter.where = { id };
+    if (id !== from.params.id) await fetchData(id, true);
-        else if (props.customUrl)
-            arrayData.store.url = url.value.replace(regex, `/${id}`);
-        else arrayData.store.url = `${url.value}/${id}`;
-
-        await arrayData.fetch({ updateRouter: false });
-    }
 });
+
+async function fetchData(id, append = false) {
+    if (props.idInWhere) arrayData.store.filter.where = { id };
+    else arrayData.store.url = props.url.replace(/(\/\d+)/, `/${id}`);
+    await arrayData.fetch({ append, updateRouter: false });
+}
 </script>
 <template>
     <QDrawer
@@ -89,7 +80,7 @@ onBeforeRouteUpdate(async (to, from) => {
         <QPage>
             <VnSubToolbar />
             <div :class="[useCardSize(), $attrs.class]">
-                <RouterView :key="route.path" />
+                <RouterView :key="$route.path" />
             </div>
         </QPage>
     </QPageContainer>

src/components/common/VnCardBeta.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { onBeforeMount, computed } from 'vue';
+import { onBeforeMount } from 'vue';
-import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
@@ -10,7 +10,6 @@ import VnSubToolbar from '../ui/VnSubToolbar.vue';
 const props = defineProps({
     dataKey: { type: String, required: true },
     url: { type: String, default: undefined },
-    customUrl: { type: String, default: undefined },
     idInWhere: { type: Boolean, default: false },
     filter: { type: Object, default: () => {} },
     descriptor: { type: Object, required: true },
@@ -21,11 +20,7 @@ const props = defineProps({
 });
 
 const stateStore = useStateStore();
-const route = useRoute();
 const router = useRouter();
-const regex = /(\/\d+)/;
-
-const url = computed(() => props.url || props.customUrl);
 const arrayData = useArrayData(props.dataKey, {
     url: props.url,
     filter: props.filter,
@@ -34,12 +29,7 @@ const arrayData = useArrayData(props.dataKey, {
 
 onBeforeMount(async () => {
     try {
-        const id = route.params.id;
+        await fetchData(router.currentRoute.value.params.id);
-        if (props.idInWhere) arrayData.store.filter.where = { id };
-        else if (props.customUrl) arrayData.store.url = url.value;
-        else if (!regex.test(url.value)) arrayData.store.url = `${url.value}/${id}`;
-
-        await arrayData.fetch({ append: false, updateRouter: false });
     } catch {
         const { matched: matches } = router.currentRoute.value;
         const { path } = matches.at(-1);
@@ -48,16 +38,15 @@ onBeforeMount(async () => {
 });
 
 onBeforeRouteUpdate(async (to, from) => {
-    if (to.params.id !== from.params.id) {
     const id = to.params.id;
-        if (props.idInWhere) arrayData.store.filter.where = { id };
+    if (id !== from.params.id) await fetchData(id, true);
-        else if (props.customUrl)
-            arrayData.store.url = url.value.replace(regex, `/${id}`);
-        else arrayData.store.url = `${url.value}/${id}`;
-
-        await arrayData.fetch({ updateRouter: false });
-    }
 });
+
+async function fetchData(id, append = false) {
+    if (props.idInWhere) arrayData.store.filter.where = { id };
+    else arrayData.store.url = props.url.replace(/(\/\d+)/, `/${id}`);
+    await arrayData.fetch({ append, updateRouter: false });
+}
 </script>
 <template>
     <Teleport to="#left-panel" v-if="stateStore.isHeaderMounted()">
@@ -67,6 +56,6 @@ onBeforeRouteUpdate(async (to, from) => {
     </Teleport>
     <VnSubToolbar />
     <div :class="[useCardSize(), $attrs.class]">
-        <RouterView :key="route.path" />
+        <RouterView :key="$route.path" />
     </div>
 </template>

src/pages/Customer/Card/CustomerCard.vue

@@ -6,7 +6,7 @@ import CustomerFilter from '../CustomerFilter.vue';
 <template>
     <VnCard
         data-key="Customer"
-        :custom-url="`Clients/${$route.params.id}/getCard`"
+        :url="`Clients/${$route.params.id}/getCard`"
         :descriptor="CustomerDescriptor"
         :filter-panel="$route.name != 'CustomerConsumption' && CustomerFilter"
         search-data-key="CustomerList"

src/pages/Item/Card/ItemCard.vue

@@ -6,7 +6,7 @@ import ItemListFilter from '../ItemListFilter.vue';
 <template>
     <VnCard
         data-key="Item"
-        :custom-url="`Items/${$route.params.id}/getCard`"
+        :url="`Items/${$route.params.id}/getCard`"
         :descriptor="ItemDescriptor"
         :filter-panel="ItemListFilter"
         search-data-key="ItemList"