refactor: refs #6994 update VnJsonValue component props and improve descriptor handling

src/components/common/VnJsonValue.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { watch, computed } from 'vue';
+import { computed, watch } from 'vue';
 import { toDateString } from 'src/filters';
 import { useDescriptorStore } from 'src/stores/useDescriptorStore';
-import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const props = defineProps({
-    prop: { type: Object, default: undefined },
+    value: { type: [String, Number, Boolean, Object], default: undefined },
+    name: { type: String, default: undefined },
 });
 
 const maxStrLen = 512;
@@ -13,8 +13,7 @@ let t = '';
 let cssClass = '';
 let type;
 const descriptorStore = useDescriptorStore();
-
-const propsValue = computed(() => props.prop.val.val);
+const propsValue = computed(() => props.value.val);
 
 const updateValue = () => {
     type = typeof propsValue.value;
@@ -57,30 +56,21 @@ const updateValue = () => {
     }
 };
 
-watch(() => propsValue.value, updateValue);
+watch(() => props.value, updateValue);
 
 updateValue();
 </script>
 
 <template>
-    <span :title="props.prop.name">{{ props.prop.nameI18n }}: </span>
     <span
-        :title="
-            type === 'string' && propsValue.value?.length > maxStrLen
-                ? propsValue.value
-                : ''
-        "
+        :title="type === 'string' && value.length > maxStrLen ? value : ''"
         :class="{
             [cssClass]: t !== '',
-            'json-link': descriptorStore.has(props.prop.name),
+            'json-link': descriptorStore.has(name),
         }"
     >
-        {{ t }}
-        <component
-            v-if="props.prop.val.id"
-            :is="descriptorStore.has(props.prop.name)"
-            :id="props.prop.val.id"
-        />
+        {{ name }}
+        <component v-if="value.id" :is="descriptorStore.has(name)" :id="value.id" />
     </span>
 </template>
 
@@ -104,8 +94,4 @@ updateValue();
     color: #cd7c7c;
     font-style: italic;
 }
-.json-link {
-    text-decoration: underline;
-    cursor: pointer;
-}
 </style>

src/components/common/VnLog.vue

@@ -561,9 +561,8 @@ watch(
                                                                         }}:
                                                                     </span>
                                                                     <VnJsonValue
-                                                                        :value="
-                                                                            value.val.val
-                                                                        "
+                                                                        :value="value.val"
+                                                                        :name="prop.name"
                                                                     />
                                                                 </QItem>
                                                             </QCardSection>
@@ -619,19 +618,27 @@ watch(
                                                     :key="prop2Index"
                                                     class="q-pa-none text-grey"
                                                 >
+                                                    <span
+                                                        class="json-field"
+                                                        :title="prop.name"
+                                                    >
+                                                        {{ prop.nameI18n }}:
+                                                    </span>
                                                     <VnJsonValue
-                                                        :prop="prop"
-                                                        class="q-pr-xs"
+                                                        :value="prop.val"
+                                                        :name="prop.name"
                                                     />
                                                     <span
                                                         v-if="
-                                                            prop2Index < log.props.length
+                                                            prop2Index <
+                                                                log.props.length &&
+                                                            !log.expand
                                                         "
                                                         class="q-mr-xs"
                                                         >,
                                                     </span>
                                                     <span
-                                                        v-if="prop.val.id"
+                                                        v-if="prop.val.id && log.expand"
                                                         class="id-value"
                                                     >
                                                         #{{ prop.val.id }}
@@ -644,7 +651,8 @@ watch(
                                                     >
                                                         ←
                                                         <VnJsonValue
-                                                            :value="prop.old.val"
+                                                            :value="prop.old"
+                                                            :name="prop.name"
                                                         />
                                                         <span
                                                             v-if="prop.old.id"

src/stores/useDescriptorStore.js

@@ -3,23 +3,31 @@ import { defineStore } from 'pinia';
 
 export const useDescriptorStore = defineStore('descriptorStore', () => {
     const descriptors = ref({});
-    const loaded = ref(false);
 
     function set() {
         const files = import.meta.glob(`src/**/*DescriptorProxy.vue`);
+        const moduleParser = {
+            user: 'account',
+            client: 'customer',
+        };
         for (const file in files) {
-            descriptors.value[file.split('/').at(-1).slice(0, -19).toLowerCase() + 'Fk'] =
-                defineAsyncComponent(() => import(file));
+            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)
+            );
         }
-        loaded.value = true;
     }
 
     function get() {
-        if (!loaded.value) set();
+        if (!Object.keys(descriptors.value).length) set();
     }
 
     function has(name) {
         get();
+        console.log('descriptors.value: ', descriptors.value);
         return descriptors.value[name];
     }