From 524e89319ee86c9e547bc403e069d5237d5d31ef Mon Sep 17 00:00:00 2001
From: Kevin Martinez <kamgmc@gmail.com>
Date: Thu, 30 Nov 2023 15:57:54 -0300
Subject: [PATCH] Implement shelving logs

---
 src/components/common/VnLog.vue         | 141 +++++++++++++-----------
 src/composables/useArrayData.js         |   4 +-
 src/i18n/en/index.js                    |   1 +
 src/i18n/es/index.js                    |   1 +
 src/pages/Shelving/Card/ShelvingLog.vue |  53 +++++++++
 src/router/modules/shelving.js          |  11 +-
 6 files changed, 145 insertions(+), 66 deletions(-)
 create mode 100644 src/pages/Shelving/Card/ShelvingLog.vue

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 1213c8bbc..b14aae7be 100644
--- a/src/components/common/VnLog.vue
+++ b/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}`"
                         >
@@ -144,65 +157,67 @@ function actionColor(action) {
 </style>
 <i18n>
 en:
-    actions:
-        insert: Creates
-        update: Updates
-        delete: Deletes
-    models:
-        Claim: Claim
-        ClaimDms: Document
-        ClaimBeginning: Claimed Sales
-        ClaimObservation: Observation
-    properties:
-        id: ID
-        claimFk: Claim ID
-        saleFk: Sale ID
-        quantity: Quantity
-        observation: Observation
-        ticketCreated: Created
-        created: Created
-        isChargedToMana: Charged to mana
-        hasToPickUp: Has to pick Up
-        dmsFk: Document ID
-        text: Description
-        claimStateFk: Claim State
-        workerFk: Worker
-        clientFk: Customer
-        rma: RMA
-        responsibility: Responsibility
-        packages: Packages
+  actions:
+    insert: Creates
+    update: Updates
+    delete: Deletes
+  models:
+    Claim: Claim
+    ClaimDms: Document
+    ClaimBeginning: Claimed Sales
+    ClaimObservation: Observation
+    Shelving: Shelving
+  properties:
+    id: ID
+    claimFk: Claim ID
+    saleFk: Sale ID
+    quantity: Quantity
+    observation: Observation
+    ticketCreated: Created
+    created: Created
+    isChargedToMana: Charged to mana
+    hasToPickUp: Has to pick Up
+    dmsFk: Document ID
+    text: Description
+    claimStateFk: Claim State
+    workerFk: Worker
+    clientFk: Customer
+    rma: RMA
+    responsibility: Responsibility
+    packages: Packages
 es:
-    Audit logs: Registros de auditoría
-    Property: Propiedad
-    Before: Antes
-    After: Después
-    Yes: Si
-    Nothing: Nada
-    actions:
-        insert: Crea
-        update: Actualiza
-        delete: Elimina
-    models:
-        Claim: Reclamación
-        ClaimDms: Documento
-        ClaimBeginning: Línea reclamada
-        ClaimObservation: Observación
-    properties:
-        id: ID
-        claimFk: ID reclamación
-        saleFk: ID linea de venta
-        quantity: Cantidad
-        observation: Observación
-        ticketCreated: Creado
-        created: Creado
-        isChargedToMana: Cargado a maná
-        hasToPickUp: Se debe recoger
-        dmsFk: ID documento
-        text: Descripción
-        claimStateFk: Estado de la reclamación
-        workerFk: Trabajador
-        clientFk: Cliente
-        rma: RMA
-        responsibility: Responsabilidad
-        packages: Bultos
+  Audit logs: Registros de auditoría
+  Property: Propiedad
+  Before: Antes
+  After: Después
+  Yes: Si
+  Nothing: Nada
+  actions:
+    insert: Crea
+    update: Actualiza
+    delete: Elimina
+  models:
+    Claim: Reclamación
+    ClaimDms: Documento
+    ClaimBeginning: Línea reclamada
+    ClaimObservation: Observación
+    Shelving: Carro
+  properties:
+    id: ID
+    claimFk: ID reclamación
+    saleFk: ID linea de venta
+    quantity: Cantidad
+    observation: Observación
+    ticketCreated: Creado
+    created: Creado
+    isChargedToMana: Cargado a maná
+    hasToPickUp: Se debe recoger
+    dmsFk: ID documento
+    text: Descripción
+    claimStateFk: Estado de la reclamación
+    workerFk: Trabajador
+    clientFk: Cliente
+    rma: RMA
+    responsibility: Responsabilidad
+    packages: Bultos
 </i18n>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 6fcca4722..523340cc9 100644
--- a/src/composables/useArrayData.js
+++ b/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;
                     }
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index d92f11789..b20ee6a55 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -437,6 +437,7 @@ export default {
             create: 'Create',
             summary: 'Summary',
             basicData: 'Basic Data',
+            log: 'Logs'
         },
         list: {
             parking: 'Parking',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 3a7d09c3c..a91bd8b13 100644
--- a/src/i18n/es/index.js
+++ b/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',
diff --git a/src/pages/Shelving/Card/ShelvingLog.vue b/src/pages/Shelving/Card/ShelvingLog.vue
new file mode 100644
index 000000000..e65df3843
--- /dev/null
+++ b/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>
diff --git a/src/router/modules/shelving.js b/src/router/modules/shelving.js
index ec3843c64..d35afafea 100644
--- a/src/router/modules/shelving.js
+++ b/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'),
+                },
             ],
         },
     ]