From 9e06a48841ccfb2e5d4a66f500d4882a74d910ec Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Thu, 9 Jan 2025 17:10:21 +0100
Subject: [PATCH] refactor: refs #6919 fine tunning vnCard

---
 src/components/common/VnCard.vue         | 31 ++++++++-------------
 src/components/common/VnCardBeta.vue     | 35 ++++++++----------------
 src/pages/Customer/Card/CustomerCard.vue |  2 +-
 src/pages/Item/Card/ItemCard.vue         |  2 +-
 4 files changed, 25 insertions(+), 45 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 004607914..064f85337 100644
--- a/src/components/common/VnCard.vue
+++ b/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;
-        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 });
+        await fetchData(route.params.id);
     } 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 };
-        else if (props.customUrl)
-            arrayData.store.url = url.value.replace(regex, `/${id}`);
-        else arrayData.store.url = `${url.value}/${id}`;
-
-        await arrayData.fetch({ updateRouter: false });
-    }
+    const id = to.params.id;
+    if (id !== from.params.id) await fetchData(id, true);
 });
+
+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>
diff --git a/src/components/common/VnCardBeta.vue b/src/components/common/VnCardBeta.vue
index cecb6516e..f5aa34189 100644
--- a/src/components/common/VnCardBeta.vue
+++ b/src/components/common/VnCardBeta.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { onBeforeMount, computed } from 'vue';
-import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
+import { onBeforeMount } from 'vue';
+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;
-        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 });
+        await fetchData(router.currentRoute.value.params.id);
     } 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 };
-        else if (props.customUrl)
-            arrayData.store.url = url.value.replace(regex, `/${id}`);
-        else arrayData.store.url = `${url.value}/${id}`;
-
-        await arrayData.fetch({ updateRouter: false });
-    }
+    const id = to.params.id;
+    if (id !== from.params.id) await fetchData(id, true);
 });
+
+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>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 92b015098..c7de9946e 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/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"
diff --git a/src/pages/Item/Card/ItemCard.vue b/src/pages/Item/Card/ItemCard.vue
index 79d4240bc..52cfabdef 100644
--- a/src/pages/Item/Card/ItemCard.vue
+++ b/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"