From 6d0b4b7607cdee42c5007ec2e5d09bb589aef9a3 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 12 Mar 2025 14:17:27 +0100
Subject: [PATCH] chore: refs #6994 revert VnJsonValue

---
 src/components/common/VnJsonValue.vue         | 58 ++++++-------------
 .../common/__tests__/VnJsonValue.spec.js      | 34 +++++------
 2 files changed, 31 insertions(+), 61 deletions(-)

diff --git a/src/components/common/VnJsonValue.vue b/src/components/common/VnJsonValue.vue
index f89918d2c..a2e858d0d 100644
--- a/src/components/common/VnJsonValue.vue
+++ b/src/components/common/VnJsonValue.vue
@@ -1,68 +1,56 @@
 <script setup>
-import { computed, watch } from 'vue';
+import { watch } from 'vue';
 import { toDateString } from 'src/filters';
-import { useDescriptorStore } from 'src/stores/useDescriptorStore';
 
 const props = defineProps({
-    value: { type: Object, default: undefined },
-    name: { type: String, default: undefined },
+    value: { type: [String, Number, Boolean, Object], default: undefined },
 });
 
 const maxStrLen = 512;
 let t = '';
 let cssClass = '';
 let type;
-const descriptorStore = useDescriptorStore();
-const propsValue = computed(() => props.value.val);
-
 const updateValue = () => {
-    type = typeof propsValue.value;
+    type = typeof props.value;
 
-    if (propsValue.value == null) {
+    if (props.value == null) {
         t = '∅';
         cssClass = 'json-null';
     } else {
         cssClass = `json-${type}`;
         switch (type) {
             case 'number':
-                if (Number.isInteger(propsValue)) {
-                    t = propsValue.value.toString();
+                if (Number.isInteger(props.value)) {
+                    t = props.value.toString();
                 } else {
                     t = (
-                        Math.round((propsValue.value + Number.EPSILON) * 1000) / 1000
+                        Math.round((props.value + Number.EPSILON) * 1000) / 1000
                     ).toString();
                 }
-                cssClass = isLink(cssClass);
                 break;
             case 'boolean':
-                t = propsValue.value ? '✓' : '✗';
-                cssClass = `json-${propsValue.value ? 'true' : 'false'}`;
+                t = props.value ? '✓' : '✗';
+                cssClass = `json-${props.value ? 'true' : 'false'}`;
                 break;
             case 'string':
                 t =
-                    propsValue.value.length <= maxStrLen
-                        ? propsValue.value
-                        : propsValue.value.substring(0, maxStrLen) + '...';
-                cssClass = isLink(cssClass);
+                    props.value.length <= maxStrLen
+                        ? props.value
+                        : props.value.substring(0, maxStrLen) + '...';
                 break;
             case 'object':
-                if (propsValue.value instanceof Date) {
-                    t = toDateString(propsValue.value);
+                if (props.value instanceof Date) {
+                    t = toDateString(props.value);
                 } else {
-                    t = propsValue.value.toString();
+                    t = props.value.toString();
                 }
                 break;
             default:
-                t = propsValue.value.toString();
+                t = props.value.toString();
         }
     }
 };
 
-function isLink(cssClass) {
-    if (!descriptorStore.has(props.name)) return cssClass;
-    return 'link json-link';
-}
-
 watch(() => props.value, updateValue);
 
 updateValue();
@@ -70,17 +58,10 @@ updateValue();
 
 <template>
     <span
-        :title="type === 'string' && propsValue.length > maxStrLen ? propsValue : ''"
-        :class="{
-            [cssClass]: t !== '',
-        }"
+        :title="type === 'string' && props.value.length > maxStrLen ? props.value : ''"
+        :class="{ [cssClass]: t !== '' }"
     >
         {{ t }}
-        <component
-            v-if="value.val && descriptorStore.has(name)"
-            :is="descriptorStore.has(name)"
-            :id="value.val"
-        />
     </span>
 </template>
 
@@ -104,7 +85,4 @@ updateValue();
     color: #cd7c7c;
     font-style: italic;
 }
-.json-link {
-    text-decoration: underline;
-}
 </style>
diff --git a/src/components/common/__tests__/VnJsonValue.spec.js b/src/components/common/__tests__/VnJsonValue.spec.js
index a51111c04..393b39f3a 100644
--- a/src/components/common/__tests__/VnJsonValue.spec.js
+++ b/src/components/common/__tests__/VnJsonValue.spec.js
@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { createWrapper } from 'app/test/vitest/helper';
 import VnJsonValue from 'src/components/common/VnJsonValue.vue';
+import { createWrapper } from 'app/test/vitest/helper';
 
 const buildComponent = (props) => {
     return createWrapper(VnJsonValue, {
@@ -10,28 +10,28 @@ const buildComponent = (props) => {
 
 describe('VnJsonValue', () => {
     it('renders null value correctly', async () => {
-        const wrapper = buildComponent({ value: { val: null } });
+        const wrapper = buildComponent({ value: null });
         const span = wrapper.find('span');
         expect(span.text()).toBe('∅');
         expect(span.classes()).toContain('json-null');
     });
 
     it('renders boolean true correctly', async () => {
-        const wrapper = buildComponent({ value: { val: true } });
+        const wrapper = buildComponent({ value: true });
         const span = wrapper.find('span');
         expect(span.text()).toBe('✓');
         expect(span.classes()).toContain('json-true');
     });
 
     it('renders boolean false correctly', async () => {
-        const wrapper = buildComponent({ value: { val: false } });
+        const wrapper = buildComponent({ value: false });
         const span = wrapper.find('span');
         expect(span.text()).toBe('✗');
         expect(span.classes()).toContain('json-false');
     });
 
     it('renders a short string correctly', async () => {
-        const wrapper = buildComponent({ value: { val: 'Hello' } });
+        const wrapper = buildComponent({ value: 'Hello' });
         const span = wrapper.find('span');
         expect(span.text()).toBe('Hello');
         expect(span.classes()).toContain('json-string');
@@ -39,7 +39,7 @@ describe('VnJsonValue', () => {
 
     it('renders a long string correctly with ellipsis', async () => {
         const longString = 'a'.repeat(600);
-        const wrapper = buildComponent({ value: { val: longString } });
+        const wrapper = buildComponent({ value: longString });
         const span = wrapper.find('span');
         expect(span.text()).toContain('...');
         expect(span.text().length).toBeLessThanOrEqual(515);
@@ -48,14 +48,14 @@ describe('VnJsonValue', () => {
     });
 
     it('renders a number correctly', async () => {
-        const wrapper = buildComponent({ value: { val: 123.4567 } });
+        const wrapper = buildComponent({ value: 123.4567 });
         const span = wrapper.find('span');
         expect(span.text()).toBe('123.457');
         expect(span.classes()).toContain('json-number');
     });
 
     it('renders an integer correctly', async () => {
-        const wrapper = buildComponent({ value: { val: 42 } });
+        const wrapper = buildComponent({ value: 42 });
         const span = wrapper.find('span');
         expect(span.text()).toBe('42');
         expect(span.classes()).toContain('json-number');
@@ -63,7 +63,7 @@ describe('VnJsonValue', () => {
 
     it('renders a date correctly', async () => {
         const date = new Date('2023-01-01');
-        const wrapper = buildComponent({ value: { val: date } });
+        const wrapper = buildComponent({ value: date });
         const span = wrapper.find('span');
         expect(span.text()).toBe('2023-01-01');
         expect(span.classes()).toContain('json-object');
@@ -71,7 +71,7 @@ describe('VnJsonValue', () => {
 
     it('renders an object correctly', async () => {
         const obj = { key: 'value' };
-        const wrapper = buildComponent({ value: { val: obj } });
+        const wrapper = buildComponent({ value: obj });
         const span = wrapper.find('span');
         expect(span.text()).toBe(obj.toString());
         expect(span.classes()).toContain('json-object');
@@ -79,23 +79,15 @@ describe('VnJsonValue', () => {
 
     it('renders an array correctly', async () => {
         const arr = [1, 2, 3];
-        const wrapper = buildComponent({ value: { val: arr } });
+        const wrapper = buildComponent({ value: arr });
         const span = wrapper.find('span');
         expect(span.text()).toBe(arr.toString());
         expect(span.classes()).toContain('json-object');
     });
 
-    it('renders an link(descriptor) correctly', async () => {
-        const id = 1;
-        const wrapper = buildComponent({ value: { val: id }, name: 'claimFk' });
-        const span = wrapper.find('span');
-        expect(span.text()).toBe(id.toString());
-        expect(span.classes()).toContain('json-link');
-    });
-
     it('updates value when prop changes', async () => {
-        const wrapper = buildComponent({ value: { val: true } });
-        await wrapper.setProps({ value: { val: 123 } });
+        const wrapper = buildComponent({ value: true });
+        await wrapper.setProps({ value: 123 });
         const span = wrapper.find('span');
         expect(span.text()).toBe('123');
         expect(span.classes()).toContain('json-number');