verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 92 Releases Wiki Activity

chore: refs #6994 revert VnJsonValue

This commit is contained in:
Alex Moreno 2025-03-12 14:17:27 +01:00
parent 9db10b7b5a
commit 6d0b4b7607
2 changed files with 31 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/common/VnJsonValue.vue
View File

@ -1,68 +1,56 @@
<script setup> <script setup>
import { computed, watch } from 'vue'; import { watch } from 'vue';
import { toDateString } from 'src/filters'; import { toDateString } from 'src/filters';
import { useDescriptorStore } from 'src/stores/useDescriptorStore';
const props = defineProps({ const props = defineProps({
value: { type: Object, default: undefined }, value: { type: [String, Number, Boolean, Object], default: undefined },
name: { type: String, default: undefined },
}); });
const maxStrLen = 512; const maxStrLen = 512;
let t = ''; let t = '';
let cssClass = ''; let cssClass = '';
let type; let type;
const descriptorStore = useDescriptorStore();
const propsValue = computed(() => props.value.val);
const updateValue = () => { const updateValue = () => {
type = typeof propsValue.value; type = typeof props.value;
if (propsValue.value == null) { if (props.value == null) {
t = '∅'; t = '∅';
cssClass = 'json-null'; cssClass = 'json-null';
} else { } else {
cssClass = `json-${type}`; cssClass = `json-${type}`;
switch (type) { switch (type) {
case 'number': case 'number':
if (Number.isInteger(propsValue)) { if (Number.isInteger(props.value)) {
t = propsValue.value.toString(); t = props.value.toString();
} else { } else {
t = ( t = (
Math.round((propsValue.value + Number.EPSILON) * 1000) / 1000 Math.round((props.value + Number.EPSILON) * 1000) / 1000
).toString(); ).toString();
} }
cssClass = isLink(cssClass);
break; break;
case 'boolean': case 'boolean':
t = propsValue.value ? '✓' : '✗'; t = props.value ? '✓' : '✗';
cssClass = `json-${propsValue.value ? 'true' : 'false'}`; cssClass = `json-${props.value ? 'true' : 'false'}`;
break; break;
case 'string': case 'string':
t = t =
propsValue.value.length <= maxStrLen props.value.length <= maxStrLen
? propsValue.value ? props.value
: propsValue.value.substring(0, maxStrLen) + '...'; : props.value.substring(0, maxStrLen) + '...';
cssClass = isLink(cssClass);
break; break;
case 'object': case 'object':
if (propsValue.value instanceof Date) { if (props.value instanceof Date) {
t = toDateString(propsValue.value); t = toDateString(props.value);
} else { } else {
t = propsValue.value.toString(); t = props.value.toString();
} }
break; break;
default: 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); watch(() => props.value, updateValue);
updateValue(); updateValue();
@ -70,17 +58,10 @@ updateValue();
<template> <template>
<span <span
:title="type === 'string' && propsValue.length > maxStrLen ? propsValue : ''" :title="type === 'string' && props.value.length > maxStrLen ? props.value : ''"
:class="{ :class="{ [cssClass]: t !== '' }"
[cssClass]: t !== '',
}"
> >
{{ t }} {{ t }}
<component
v-if="value.val && descriptorStore.has(name)"
:is="descriptorStore.has(name)"
:id="value.val"
/>
</span> </span>
</template> </template>
@ -104,7 +85,4 @@ updateValue();
color: #cd7c7c; color: #cd7c7c;
font-style: italic; font-style: italic;
} }
.json-link {
text-decoration: underline;
}
</style> </style>

34
src/components/common/__tests__/VnJsonValue.spec.js
View File

@ -1,6 +1,6 @@
import { describe, it, expect } from 'vitest'; import { describe, it, expect } from 'vitest';
import { createWrapper } from 'app/test/vitest/helper';
import VnJsonValue from 'src/components/common/VnJsonValue.vue'; import VnJsonValue from 'src/components/common/VnJsonValue.vue';
import { createWrapper } from 'app/test/vitest/helper';
const buildComponent = (props) => { const buildComponent = (props) => {
return createWrapper(VnJsonValue, { return createWrapper(VnJsonValue, {
@ -10,28 +10,28 @@ const buildComponent = (props) => {
describe('VnJsonValue', () => { describe('VnJsonValue', () => {
it('renders null value correctly', async () => { it('renders null value correctly', async () => {
const wrapper = buildComponent({ value: { val: null } }); const wrapper = buildComponent({ value: null });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe('∅'); expect(span.text()).toBe('∅');
expect(span.classes()).toContain('json-null'); expect(span.classes()).toContain('json-null');
}); });
it('renders boolean true correctly', async () => { it('renders boolean true correctly', async () => {
const wrapper = buildComponent({ value: { val: true } }); const wrapper = buildComponent({ value: true });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe('✓'); expect(span.text()).toBe('✓');
expect(span.classes()).toContain('json-true'); expect(span.classes()).toContain('json-true');
}); });
it('renders boolean false correctly', async () => { it('renders boolean false correctly', async () => {
const wrapper = buildComponent({ value: { val: false } }); const wrapper = buildComponent({ value: false });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe('✗'); expect(span.text()).toBe('✗');
expect(span.classes()).toContain('json-false'); expect(span.classes()).toContain('json-false');
}); });
it('renders a short string correctly', async () => { it('renders a short string correctly', async () => {
const wrapper = buildComponent({ value: { val: 'Hello' } }); const wrapper = buildComponent({ value: 'Hello' });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe('Hello'); expect(span.text()).toBe('Hello');
expect(span.classes()).toContain('json-string'); expect(span.classes()).toContain('json-string');
@ -39,7 +39,7 @@ describe('VnJsonValue', () => {
it('renders a long string correctly with ellipsis', async () => { it('renders a long string correctly with ellipsis', async () => {
const longString = 'a'.repeat(600); const longString = 'a'.repeat(600);
const wrapper = buildComponent({ value: { val: longString } }); const wrapper = buildComponent({ value: longString });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toContain('...'); expect(span.text()).toContain('...');
expect(span.text().length).toBeLessThanOrEqual(515); expect(span.text().length).toBeLessThanOrEqual(515);
@ -48,14 +48,14 @@ describe('VnJsonValue', () => {
}); });
it('renders a number correctly', async () => { it('renders a number correctly', async () => {
const wrapper = buildComponent({ value: { val: 123.4567 } }); const wrapper = buildComponent({ value: 123.4567 });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe('123.457'); expect(span.text()).toBe('123.457');
expect(span.classes()).toContain('json-number'); expect(span.classes()).toContain('json-number');
}); });
it('renders an integer correctly', async () => { it('renders an integer correctly', async () => {
const wrapper = buildComponent({ value: { val: 42 } }); const wrapper = buildComponent({ value: 42 });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe('42'); expect(span.text()).toBe('42');
expect(span.classes()).toContain('json-number'); expect(span.classes()).toContain('json-number');
@ -63,7 +63,7 @@ describe('VnJsonValue', () => {
it('renders a date correctly', async () => { it('renders a date correctly', async () => {
const date = new Date('2023-01-01'); const date = new Date('2023-01-01');
const wrapper = buildComponent({ value: { val: date } }); const wrapper = buildComponent({ value: date });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe('2023-01-01'); expect(span.text()).toBe('2023-01-01');
expect(span.classes()).toContain('json-object'); expect(span.classes()).toContain('json-object');
@ -71,7 +71,7 @@ describe('VnJsonValue', () => {
it('renders an object correctly', async () => { it('renders an object correctly', async () => {
const obj = { key: 'value' }; const obj = { key: 'value' };
const wrapper = buildComponent({ value: { val: obj } }); const wrapper = buildComponent({ value: obj });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe(obj.toString()); expect(span.text()).toBe(obj.toString());
expect(span.classes()).toContain('json-object'); expect(span.classes()).toContain('json-object');
@ -79,23 +79,15 @@ describe('VnJsonValue', () => {
it('renders an array correctly', async () => { it('renders an array correctly', async () => {
const arr = [1, 2, 3]; const arr = [1, 2, 3];
const wrapper = buildComponent({ value: { val: arr } }); const wrapper = buildComponent({ value: arr });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe(arr.toString()); expect(span.text()).toBe(arr.toString());
expect(span.classes()).toContain('json-object'); 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 () => { it('updates value when prop changes', async () => {
const wrapper = buildComponent({ value: { val: true } }); const wrapper = buildComponent({ value: true });
await wrapper.setProps({ value: { val: 123 } }); await wrapper.setProps({ value: 123 });
const span = wrapper.find('span'); const span = wrapper.find('span');
expect(span.text()).toBe('123'); expect(span.text()).toBe('123');
expect(span.classes()).toContain('json-number'); expect(span.classes()).toContain('json-number');