diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue index 8f106a9f1..136dbf2a4 100644 --- a/src/components/common/VnLog.vue +++ b/src/components/common/VnLog.vue @@ -10,7 +10,7 @@ import { useColor } from 'src/composables/useColor'; import { useCapitalize } from 'src/composables/useCapitalize'; import { useValidator } from 'src/composables/useValidator'; import VnAvatar from '../ui/VnAvatar.vue'; -import VnJsonValue from '../common/VnJsonValue.vue'; +import VnLogValue from './VnLogValue.vue'; import FetchData from '../FetchData.vue'; import VnSelect from './VnSelect.vue'; import VnUserLink from '../ui/VnUserLink.vue'; @@ -560,10 +560,11 @@ watch( value.nameI18n }}: - @@ -614,7 +615,11 @@ watch( > {{ prop.nameI18n }}: - + + - → - - +import { useDescriptorStore } from 'src/stores/useDescriptorStore'; +import VnJsonValue from './VnJsonValue.vue'; +import { computed } from 'vue'; +const descriptorStore = useDescriptorStore(); + +const $props = defineProps({ + name: { type: [String], default: undefined }, +}); + +const descriptor = computed(() => descriptorStore.has($props.name)); + + diff --git a/src/components/common/__tests__/VnLogValue.spec.js b/src/components/common/__tests__/VnLogValue.spec.js new file mode 100644 index 000000000..c23743a02 --- /dev/null +++ b/src/components/common/__tests__/VnLogValue.spec.js @@ -0,0 +1,26 @@ +import { describe, it, expect } from 'vitest'; +import VnLogValue from 'src/components/common/VnLogValue.vue'; +import { createWrapper } from 'app/test/vitest/helper'; + +const buildComponent = (props) => { + return createWrapper(VnLogValue, { + props, + global: {}, + }).wrapper; +}; + +describe('VnLogValue', () => { + const id = 1; + it('renders without descriptor', async () => { + expect(getIcon('inventFk').exists()).toBe(false); + }); + + it('renders with descriptor', async () => { + expect(getIcon('claimFk').text()).toBe('launch'); + }); + + function getIcon(name) { + const wrapper = buildComponent({ value: { val: id }, name }); + return wrapper.find('.q-icon'); + } +}); diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue index 961438b04..57d8b0421 100644 --- a/src/components/ui/CardDescriptor.vue +++ b/src/components/ui/CardDescriptor.vue @@ -224,7 +224,7 @@ const toModule = computed(() => { - + #{{ getValueFromPath(subtitle) ?? entity.id }} +import AccountDescriptor from './AccountDescriptor.vue'; +import AccountSummary from './AccountSummary.vue'; + + diff --git a/src/pages/Claim/Card/ClaimDescriptorProxy.vue b/src/pages/Claim/Card/ClaimDescriptorProxy.vue new file mode 100644 index 000000000..78e686745 --- /dev/null +++ b/src/pages/Claim/Card/ClaimDescriptorProxy.vue @@ -0,0 +1,14 @@ + + diff --git a/src/stores/__tests__/useDescriptorStore.spec.js b/src/stores/__tests__/useDescriptorStore.spec.js new file mode 100644 index 000000000..61aab8d14 --- /dev/null +++ b/src/stores/__tests__/useDescriptorStore.spec.js @@ -0,0 +1,28 @@ +import { describe, expect, it, beforeEach } from 'vitest'; +import 'app/test/vitest/helper'; + +import { useDescriptorStore } from 'src/stores/useDescriptorStore'; +import { useStateStore } from 'stores/useStateStore'; + +describe('useDescriptorStore', () => { + const { get, has } = useDescriptorStore(); + const stateStore = useStateStore(); + + beforeEach(() => { + stateStore.setDescriptors({}); + }); + + function getDescriptors() { + return stateStore.descriptors; + } + + it('should get descriptors in stateStore', async () => { + expect(Object.keys(getDescriptors()).length).toBe(0); + get(); + expect(Object.keys(getDescriptors()).length).toBeGreaterThan(0); + }); + + it('should find ticketDescriptor if search ticketFk', async () => { + expect(has('ticketFk')).toBeDefined(); + }); +}); diff --git a/src/stores/useDescriptorStore.js b/src/stores/useDescriptorStore.js new file mode 100644 index 000000000..89189f32e --- /dev/null +++ b/src/stores/useDescriptorStore.js @@ -0,0 +1,35 @@ +import { defineAsyncComponent } from 'vue'; +import { defineStore } from 'pinia'; +import { useStateStore } from 'stores/useStateStore'; + +export const useDescriptorStore = defineStore('descriptorStore', () => { + const { descriptors, setDescriptors } = useStateStore(); + function get() { + if (Object.keys(descriptors).length) return descriptors; + + const currentDescriptors = {}; + const files = import.meta.glob(`/src/**/*DescriptorProxy.vue`); + const moduleParser = { + account: 'user', + client: 'customer', + }; + for (const file in files) { + const name = file.split('/').at(-1).slice(0, -19).toLowerCase(); + const descriptor = moduleParser[name] ?? name; + currentDescriptors[descriptor + 'Fk'] = defineAsyncComponent( + () => import(/* @vite-ignore */ file), + ); + } + setDescriptors(currentDescriptors); + return currentDescriptors; + } + + function has(name) { + 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, }; }); diff --git a/test/cypress/integration/vnComponent/VnLog.spec.js b/test/cypress/integration/vnComponent/VnLog.spec.js index 80b9d07df..afe641549 100644 --- a/test/cypress/integration/vnComponent/VnLog.spec.js +++ b/test/cypress/integration/vnComponent/VnLog.spec.js @@ -22,4 +22,10 @@ describe('VnLog', () => { cy.get('.q-page').click(); cy.validateContent(chips[0], 'Claim'); }); + + it('should show claimDescriptor', () => { + cy.dataCy('iconLaunch-claimFk').first().click(); + cy.dataCy('descriptor_id').contains('1'); + cy.dataCy('iconLaunch-claimFk').first().click(); + }); });