Merge pull request '6994-vnLog_descriptors' (!1579) from 6994-vnLog_descriptors into dev

Reviewed-on: #1579
Reviewed-by: Juan Ferrer <juan@verdnatura.es>
Reviewed-by: Jon Elias <jon@verdnatura.es>

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
                                                                         }}:
                                                                     </span>
-                                                                    <VnJsonValue
+                                                                    <VnLogValue
                                                                         :value="
                                                                             value.val.val
                                                                         "
+                                                                        :name="value.name"
                                                                     />
                                                                 </QItem>
                                                             </QCardSection>
@@ -614,7 +615,11 @@ watch(
                                                     >
                                                         {{ prop.nameI18n }}:
                                                     </span>
-                                                    <VnJsonValue :value="prop.val.val" />
+                                                    <VnLogValue
+                                                        :value="prop.val.val"
+                                                        :name="prop.name"
+                                                    />
+                                                    <VnIconLink />
                                                     <span
                                                         v-if="
                                                             propIndex <
@@ -642,8 +647,9 @@ watch(
                                                         {{ prop.nameI18n }}:
                                                     </span>
                                                     <span v-if="log.action == 'update'">
-                                                        <VnJsonValue
+                                                        <VnLogValue
                                                             :value="prop.old.val"
+                                                            :name="prop.name"
                                                         />
                                                         <span
                                                             v-if="prop.old.id"
@@ -652,8 +658,9 @@ watch(
                                                             #{{ prop.old.id }}
                                                         </span>
                                                         →
-                                                        <VnJsonValue
+                                                        <VnLogValue
                                                             :value="prop.val.val"
+                                                            :name="prop.name"
                                                         />
                                                         <span
                                                             v-if="prop.val.id"
@@ -663,8 +670,9 @@ watch(
                                                         </span>
                                                     </span>
                                                     <span v-else="prop.old.val">
-                                                        <VnJsonValue
+                                                        <VnLogValue
                                                             :value="prop.val.val"
+                                                            :name="prop.name"
                                                         />
                                                         <span
                                                             v-if="prop.old.id"

src/components/common/VnLogValue.vue

@@ -0,0 +1,22 @@
+<script setup>
+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));
+</script>
+<template>
+    <VnJsonValue v-bind="$attrs" />
+    <QIcon
+        name="launch"
+        class="link"
+        v-if="$attrs.value && descriptor"
+        :data-cy="'iconLaunch-' + $props.name"
+    />
+    <component :is="descriptor" :id="$attrs.value" v-if="$attrs.value && descriptor" />
+</template>

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');
+    }
+});

src/components/ui/CardDescriptor.vue

@@ -224,7 +224,7 @@ const toModule = computed(() => {
                         </div>
                     </QItemLabel>
                     <QItem>
-                        <QItemLabel class="subtitle">
+                        <QItemLabel class="subtitle" data-cy="descriptor_id">
                             #{{ getValueFromPath(subtitle) ?? entity.id }}
                         </QItemLabel>
                         <QBtn

src/pages/Account/Card/AccountDescriptorProxy.vue

@@ -0,0 +1,14 @@
+<script setup>
+import AccountDescriptor from './AccountDescriptor.vue';
+import AccountSummary from './AccountSummary.vue';
+</script>
+<template>
+    <QPopupProxy style="max-width: 10px">
+        <AccountDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs.id"
+            :summary="AccountSummary"
+            :proxy-render="true"
+        />
+    </QPopupProxy>
+</template>

src/pages/Claim/Card/ClaimDescriptorProxy.vue

@@ -0,0 +1,14 @@
+<script setup>
+import ClaimDescriptor from './ClaimDescriptor.vue';
+import ClaimSummary from './ClaimSummary.vue';
+</script>
+<template>
+    <QPopupProxy style="max-width: 10px">
+        <ClaimDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs.id"
+            :summary="ClaimSummary"
+            :proxy-render="true"
+        />
+    </QPopupProxy>
+</template>

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();
+    });
+});

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,
+    };
+});

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,
     };
 });

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();
+    });
 });