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>
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>

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

@ -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');