Implement shelving logs

src/components/common/VnLog.vue

@@ -19,6 +19,18 @@ const props = defineProps({
         type: String,
         default: null,
     },
+    url: {
+        type: String,
+        default: null,
+    },
+    mapper: {
+        type: Function,
+        default: null,
+    },
+    filter: {
+      type: Object,
+      default: null,
+    }
 });
 
 const columns = [
@@ -65,17 +77,18 @@ function actionColor(action) {
 <template>
     <div class="column items-center">
         <QTimeline class="q-pa-md">
-            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }} </QTimelineEntry>
+            <QTimelineEntry heading tag="h4"> {{ t('Audit logs') }}</QTimelineEntry>
             <VnPaginate
                 :data-key="`${props.model}Logs`"
-                :url="`${props.model}s/${route.params.id}/logs`"
+                :url="props.url ?? `${props.model}s/${route.params.id}/logs`"
                 order="id DESC"
                 :offset="100"
                 :limit="5"
+                :filter="props.filter"
                 auto-load
             >
                 <template #body="{ rows }">
-                    <template v-for="log of rows" :key="log.id">
+                    <template v-for="log of (props.mapper ? (rows || []).map(props.mapper) :rows)" :key="log.id">
                         <QTimelineEntry
                             :avatar="`/api/Images/user/160x160/${log.userFk}/download?access_token=${token}`"
                         >
@@ -153,6 +166,7 @@ en:
     ClaimDms: Document
     ClaimBeginning: Claimed Sales
     ClaimObservation: Observation
+    Shelving: Shelving
   properties:
     id: ID
     claimFk: Claim ID
@@ -187,6 +201,7 @@ es:
     ClaimDms: Documento
     ClaimBeginning: Línea reclamada
     ClaimObservation: Observación
+    Shelving: Carro
   properties:
     id: ID
     claimFk: ID reclamación

src/composables/useArrayData.js

@@ -149,13 +149,13 @@ export function useArrayData(key, userOptions) {
         return { filter, params };
     }
 
-    function sanitizerParams(params) {
+    function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
             if (params[param] === '' || params[param] === null) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(store?.exprBuilder(param))[0]];
+                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }

src/i18n/en/index.js

@@ -437,6 +437,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             basicData: 'Basic Data',
+            log: 'Logs'
         },
         list: {
             parking: 'Parking',

src/i18n/es/index.js

@@ -439,6 +439,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             basicData: 'Datos básicos',
+            log: 'Registros de auditoría'
         },
         list: {
             parking: 'Parking',

src/pages/Shelving/Card/ShelvingLog.vue

@@ -0,0 +1,53 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const getChanges = (oldInstance, newInstance) => {
+    const changes = [];
+    Object.entries(newInstance).forEach(([key, newValue]) => {
+        const oldValue = oldInstance?.[key];
+        if (oldValue !== newValue) {
+            changes.push({
+                property: key,
+                before: oldValue,
+                after: newValue,
+            });
+        }
+    });
+    return changes;
+};
+
+const shelvingMapper = (shelving) => ({
+    ...shelving,
+    action: shelving.action,
+    created: shelving.creationDate,
+    model: shelving.changedModel,
+    userFk: shelving.userFk,
+    userName: shelving.user?.name,
+    changes: getChanges(shelving.oldInstance, shelving.newInstance),
+});
+
+const shelvingFilter = {
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['nickname', 'name'],
+            },
+        },
+    ],
+    where: {
+        originFk: route.params.id,
+    },
+};
+</script>
+<template>
+    <VnLog
+        model="Shelving"
+        url="/ShelvingLogs"
+        :mapper="shelvingMapper"
+        :filter="shelvingFilter"
+    ></VnLog>
+</template>

src/router/modules/shelving.js

@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'ShelvingMain' },
     menus: {
         main: ['ShelvingList'],
-        card: ['ShelvingBasicData']
+        card: ['ShelvingBasicData', 'ShelvingLog']
     },
     children: [
         {
@@ -64,6 +64,15 @@ export default {
                     },
                     component: () => import('pages/Shelving/ShelvingBasicData.vue'),
                 },
+                {
+                    name: 'ShelvingLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Shelving/Card/ShelvingLog.vue'),
+                },
             ],
         },
     ]