From 80eebef931030b06355cb3e9ccd628165f39c015 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 7 Mar 2025 14:01:36 +0100
Subject: [PATCH] feat(VnLog): refs #6994 add descriptors

---
 src/components/common/VnJsonValue.vue | 13 +++--
 src/components/common/VnLog.vue       | 76 +++++++++++++--------------
 src/stores/useDescriptorStore.js      | 32 +++++------
 src/stores/useStateStore.js           |  7 +++
 4 files changed, 69 insertions(+), 59 deletions(-)

diff --git a/src/components/common/VnJsonValue.vue b/src/components/common/VnJsonValue.vue
index 11588e710..331c72d0a 100644
--- a/src/components/common/VnJsonValue.vue
+++ b/src/components/common/VnJsonValue.vue
@@ -66,11 +66,15 @@ updateValue();
         :title="type === 'string' && value.length > maxStrLen ? value : ''"
         :class="{
             [cssClass]: t !== '',
-            'json-link': descriptorStore.has(name),
+            'link json-link': descriptorStore.has(name),
         }"
     >
-        {{ name }}
-        <component v-if="value.id" :is="descriptorStore.has(name)" :id="value.id" />
+        {{ t }}
+        <component
+            v-if="value.val && descriptorStore.has(name)"
+            :is="descriptorStore.has(name)"
+            :id="value.val"
+        />
     </span>
 </template>
 
@@ -94,4 +98,7 @@ updateValue();
     color: #cd7c7c;
     font-style: italic;
 }
+.json-link {
+    text-decoration: underline;
+}
 </style>
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 1d73e4689..f4d6c5bca 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -561,7 +561,7 @@ watch(
                                                                         }}:
                                                                     </span>
                                                                     <VnJsonValue
-                                                                        :value="value.val"
+                                                                        :value="prop.val"
                                                                         :name="prop.name"
                                                                     />
                                                                 </QItem>
@@ -599,17 +599,36 @@ watch(
                                         />
                                         <span v-if="log.props.length" class="attributes">
                                             <span
-                                                class="expanded-json q-pa-none"
-                                                :class="
-                                                    log.expand
-                                                        ? 'column'
-                                                        : 'row no-wrap ellipsis'
-                                                "
-                                                style="
-                                                    text-overflow: ellipsis;
-                                                    overflow: hidden;
-                                                    white-space: nowrap;
-                                                "
+                                                v-if="!log.expand"
+                                                class="q-pa-none text-grey"
+                                            >
+                                                <span
+                                                    v-for="(prop, propIndex) in log.props"
+                                                    :key="propIndex"
+                                                    class="basic-json"
+                                                >
+                                                    <span
+                                                        class="json-field"
+                                                        :title="prop.name"
+                                                    >
+                                                        {{ prop.nameI18n }}:
+                                                    </span>
+                                                    <VnJsonValue
+                                                        :value="prop.val"
+                                                        :name="prop.name"
+                                                    />
+                                                    <span
+                                                        v-if="
+                                                            propIndex <
+                                                            log.props.length - 1
+                                                        "
+                                                        >,&nbsp;
+                                                    </span>
+                                                </span>
+                                            </span>
+                                            <span
+                                                v-if="log.expand"
+                                                class="expanded-json column q-pa-none"
                                             >
                                                 <div
                                                     v-for="(
@@ -624,32 +643,7 @@ watch(
                                                     >
                                                         {{ prop.nameI18n }}:
                                                     </span>
-                                                    <VnJsonValue
-                                                        :value="prop.val"
-                                                        :name="prop.name"
-                                                    />
-                                                    <span
-                                                        v-if="
-                                                            prop2Index <
-                                                                log.props.length &&
-                                                            !log.expand
-                                                        "
-                                                        class="q-mr-xs"
-                                                        >,
-                                                    </span>
-                                                    <span
-                                                        v-if="prop.val.id && log.expand"
-                                                        class="id-value"
-                                                    >
-                                                        #{{ prop.val.id }}
-                                                    </span>
-                                                    <span
-                                                        v-if="
-                                                            log.action == 'update' &&
-                                                            log.expand
-                                                        "
-                                                    >
-                                                        ←
+                                                    <span v-if="log.action == 'update'">
                                                         <VnJsonValue
                                                             :value="prop.old"
                                                             :name="prop.name"
@@ -662,7 +656,8 @@ watch(
                                                         </span>
                                                         →
                                                         <VnJsonValue
-                                                            :value="prop.val.val"
+                                                            :value="prop.val"
+                                                            :name="prop.name"
                                                         />
                                                         <span
                                                             v-if="prop.val.id"
@@ -673,7 +668,8 @@ watch(
                                                     </span>
                                                     <span v-else="prop.old.val">
                                                         <VnJsonValue
-                                                            :value="prop.val.val"
+                                                            :value="prop.val"
+                                                            :name="prop.name"
                                                         />
                                                         <span
                                                             v-if="prop.old.id"
diff --git a/src/stores/useDescriptorStore.js b/src/stores/useDescriptorStore.js
index f6ac0a570..7ffbdda7a 100644
--- a/src/stores/useDescriptorStore.js
+++ b/src/stores/useDescriptorStore.js
@@ -1,37 +1,37 @@
-import { ref, defineAsyncComponent } from 'vue';
+import { defineAsyncComponent } from 'vue';
 import { defineStore } from 'pinia';
+import { useStateStore } from 'stores/useStateStore';
+
+const { descriptors, setDescriptors } = useStateStore();
 
 export const useDescriptorStore = defineStore('descriptorStore', () => {
-    const descriptors = ref({});
+    function get() {
+        if (Object.keys(descriptors).length) return descriptors;
 
-    function set() {
-        const files = import.meta.glob(`src/**/*DescriptorProxy.vue`);
+        const currentDescriptors = {};
+        const files = import.meta.glob(`/src/**/*DescriptorProxy.vue`);
         const moduleParser = {
-            user: 'account',
+            account: 'user',
             client: 'customer',
         };
         for (const file in files) {
-            console.log('fasd', file.split('/').at(-1).slice(0, -19).toLowerCase());
             const name = file.split('/').at(-1).slice(0, -19).toLowerCase();
             const descriptor = moduleParser[name] ?? name;
-            //Ver pq no funciona account//user
-            descriptors.value[descriptor + 'Fk'] = defineAsyncComponent(() =>
-                import(file)
+            currentDescriptors[descriptor + 'Fk'] = defineAsyncComponent(
+                () => import(/* @vite-ignore */ file),
             );
         }
-    }
-
-    function get() {
-        if (!Object.keys(descriptors.value).length) set();
+        setDescriptors(currentDescriptors);
+        return currentDescriptors;
     }
 
     function has(name) {
-        get();
-        console.log('descriptors.value: ', descriptors.value);
-        return descriptors.value[name];
+        console.log('get(): ', get());
+        return get()[name];
     }
 
     return {
         has,
+        get,
     };
 });
diff --git a/src/stores/useStateStore.js b/src/stores/useStateStore.js
index ca447bc11..44fa133d0 100644
--- a/src/stores/useStateStore.js
+++ b/src/stores/useStateStore.js
@@ -8,6 +8,7 @@ export const useStateStore = defineStore('stateStore', () => {
     const rightAdvancedDrawer = ref(false);
     const subToolbar = ref(false);
     const cardDescriptor = ref(null);
+    const descriptors = ref({});
 
     function cardDescriptorChangeValue(descriptor) {
         cardDescriptor.value = descriptor;
@@ -52,6 +53,10 @@ export const useStateStore = defineStore('stateStore', () => {
         return subToolbar.value;
     }
 
+    function setDescriptors(value) {
+        descriptors.value = value;
+    }
+
     return {
         cardDescriptor,
         cardDescriptorChangeValue,
@@ -68,5 +73,7 @@ export const useStateStore = defineStore('stateStore', () => {
         isSubToolbarShown,
         toggleSubToolbar,
         rightDrawerChangeValue,
+        descriptors,
+        setDescriptors,
     };
 });