feat(log): Added vnLog component

src/pages/Claim/Card/ClaimLog.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
+import { useSession } from 'src/composables/useSession';
+import FetchData from 'components/FetchData.vue';
+
+import { toDate } from 'src/filters';
+
+// const quasar = useQuasar();
+const route = useRoute();
+const session = useSession();
+const token = session.getToken();
+const { t } = useI18n();
+
+const filter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['name'],
+                include: { relation: 'worker', scope: { fields: ['id'] } },
+            },
+        },
+    ],
+    where: {
+        originFk: route.params.id,
+    },
+};
+
+const logs = ref();
+function onFetch(data) {
+    //rows.value = data;
+    logs.value = [];
+    for (const row of data) {
+        const changes = [];
+        const oldInstance = row.oldInstance;
+        const newInstance = row.newInstance;
+        for (const property in oldInstance) {
+            let oldValue = oldInstance[property];
+            let newValue = newInstance[property];
+
+            // if (isNaN(oldValue) && !isNaN(Date.parse(oldValue))) {
+            //     oldValue = toDate(oldValue);
+            // }
+
+            // if (isNaN(newValue) && !isNaN(Date.parse(newValue))) {
+            //     newValue = toDate(newValue);
+            // }
+
+            const change = {
+                property: property,
+                value: `${oldValue} -> ${newValue}`,
+            };
+
+            changes.push(change);
+        }
+
+        logs.value.push({
+            model: row.changedModel,
+            created: row.creationDate,
+            userFk: row.userFk,
+            changes: changes,
+        });
+    }
+}
+</script>
+<template>
+    <fetch-data url="ClaimLogs" :filter="filter" @on-fetch="onFetch" auto-load />
+
+    <div class="q-px-lg">
+        <q-timeline>
+            <q-timeline-entry heading> Logs </q-timeline-entry>
+            <template v-for="log of logs" :key="log.id">
+                <q-timeline-entry
+                    :title="t(`models.${log.model}`)"
+                    :subtitle="toDate(log.created)"
+                    :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
+                >
+                    <q-list
+                        v-for="change of log.changes"
+                        :key="change.property"
+                        dense
+                        style="width: 500px"
+                    >
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t(`properties.${change.property}`) }}
+                                </q-item-label>
+                            </q-item-section>
+                            <q-item-section>
+                                <q-item-label>{{ change.value }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                    <!-- <div v-for="change of log.changes" :key="change.property">
+                    {{ change.property }}: {{ change.value }}
+                </div> -->
+                </q-timeline-entry>
+            </template>
+        </q-timeline>
+    </div>
+</template>
+
+<i18n>
+en: 
+    models:
+        Claim: Claim
+    properties:
+        id: ID
+        observation: Observation
+es:
+    models:
+        Claim: Reclamación
+    properties:
+        id: ID
+        observation: Observación
+</i18n>

src/router/modules/claim.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'ClaimMain' },
     menus: {
         main: ['ClaimList', 'ClaimRmaList'],
-        card: ['ClaimBasicData', 'ClaimRma', 'ClaimPhotos'],
+        card: ['ClaimBasicData', 'ClaimRma', 'ClaimPhotos', 'ClaimLog'],
     },
     children: [
         {
@@ -85,6 +85,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
                 },
+                {
+                    name: 'ClaimLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
+                },
             ],
         },
     ],