fix: refs #7652 update url

src/components/common/VnCard.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onBeforeMount, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
@@ -41,6 +41,15 @@ onBeforeMount(async () => {
     if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
     await arrayData.fetch({ append: false });
 });
+
+if (props.baseUrl) {
+    onBeforeRouteUpdate(async (to, from) => {
+        if (to.params.id !== from.params.id) {
+            arrayData.store.url = `${props.baseUrl}/${to.params.id}`;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
 </script>
 <template>
     <QDrawer

src/components/ui/CardDescriptor.vue

@@ -46,7 +46,7 @@ let arrayData;
 let store;
 let entity;
 const isLoading = ref(false);
-
+const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
 defineExpose({ getData });
 
 onBeforeMount(async () => {
@@ -58,10 +58,12 @@ onBeforeMount(async () => {
     store = arrayData.store;
     entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
     // It enables to load data only once if the module is the same as the dataKey
-    if ($props.dataKey !== route.meta.moduleName || !route.params.id) await getData();
+    if (!isSameDataKey.value || !route.params.id) await getData();
     watch(
         () => [$props.url, $props.filter],
-        async () => await getData()
+        async () => {
+            if (!isSameDataKey.value) await getData();
+        }
     );
 });
 
@@ -77,6 +79,19 @@ async function getData() {
         isLoading.value = false;
     }
 }
+
+function getValueFromPath(path) {
+    if (!path) return;
+    const keys = path.split('.');
+    let current = entity.value;
+
+    for (let i = 0; i < keys.length; i++) {
+        if (current[keys[i]] === undefined) return undefined;
+        else current = current[keys[i]];
+    }
+    return current;
+}
+
 const emit = defineEmits(['onFetch']);
 </script>
 
@@ -139,8 +154,8 @@ const emit = defineEmits(['onFetch']);
                 <QList dense>
                     <QItemLabel header class="ellipsis text-h5" :lines="1">
                         <div class="title">
-                            <span v-if="$props.title" :title="$props.title">
+                            <span v-if="$props.title" :title="getValueFromPath(title)">
-                                {{ entity[title] ?? $props.title }}
+                                {{ getValueFromPath(title) ?? $props.title }}
                             </span>
                             <slot v-else name="description" :entity="entity">
                                 <span :title="entity.name">
@@ -151,7 +166,7 @@ const emit = defineEmits(['onFetch']);
                     </QItemLabel>
                     <QItem dense>
                         <QItemLabel class="subtitle" caption>
-                            #{{ $props.subtitle ?? entity.id }}
+                            #{{ getValueFromPath(subtitle) ?? entity.id }}
                         </QItemLabel>
                     </QItem>
                 </QList>

src/composables/useArrayData.js

@@ -198,6 +198,13 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     function updateStateParams() {
         const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
         newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
+        const { matched: matches } = router.currentRoute.value;
+        const { path } = matches.at(-1);
+
+        const to =
+            store?.data?.length === 1
+                ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
+                : path.replace(/:id.*/, '');
 
         if (store.navigate) {
             const { customRouteRedirectName, searchText } = store.navigate;
@@ -206,13 +213,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                     name: customRouteRedirectName,
                     params: { id: searchText },
                 });
-            const { matched: matches } = router.currentRoute.value;
-            const { path } = matches.at(-1);
-
-            const to =
-                store?.data?.length === 1
-                    ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
-                    : path.replace(/:id.*/, '');
 
             if (route.path != to) {
                 const pushUrl = { path: to };
@@ -223,7 +223,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             }
         }
 
-        router.replace(newUrl);
+        if (store.currentFilter?.search) router.replace({ ...newUrl, path: to });
     }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);