From 993ae11277c7a96171a0408a0f9231b699f58172 Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan@verdnatura.es>
Date: Wed, 9 Nov 2022 09:19:56 +0100
Subject: [PATCH] refs #3302

---
 front/salix/components/log/index.html | 55 ++++++++++++---------------
 front/salix/components/log/index.js   | 31 ++++++++++++---
 front/salix/components/log/style.scss | 18 ++++++++-
 3 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/front/salix/components/log/index.html b/front/salix/components/log/index.html
index 0a0449038..ecee89097 100644
--- a/front/salix/components/log/index.html
+++ b/front/salix/components/log/index.html
@@ -1,10 +1,10 @@
-<vn-crud-model 
-    vn-id="model" 
-    url="{{$ctrl.url}}" 
-    filter="$ctrl.filter" 
+<vn-crud-model
+    vn-id="model"
+    url="{{$ctrl.url}}"
+    filter="$ctrl.filter"
     link="{originFk: $ctrl.originId}"
-    data="$ctrl.logs" 
-    limit="20" 
+    data="$ctrl.logs"
+    limit="20"
     auto-load="true">
 </vn-crud-model>
 <vn-data-viewer model="model" class="vn-w-xl">
@@ -13,12 +13,11 @@
             <vn-thead>
                 <vn-tr>
                     <vn-th field="creationDate">Date</vn-th>
-                    <vn-th field="userFk" class="expendable" shrink>Author</vn-th>
+                    <vn-th field="userFk" class="expendable" shrink>User</vn-th>
                     <vn-th field="changedModel" class="expendable">Model</vn-th>
                     <vn-th field="action" class="expendable" shrink>Action</vn-th>
                     <vn-th field="changedModelValue" class="expendable">Name</vn-th>
-                    <vn-th expand>Before</vn-th>
-                    <vn-th expand>After</vn-th>
+                    <vn-th expand>Changes</vn-th>
                 </vn-tr>
             </vn-thead>
             <vn-tbody>
@@ -62,27 +61,23 @@
                     <vn-td class="expendable" expand>
                         {{::log.changedModelValue}}
                     </vn-td>
-                    <vn-td expand class="before">
-                        <vn-one ng-repeat="old in log.oldProperties">
-                            <div>
-                                <vn-label-value
-                                    no-ellipsize
-                                    label="{{::old.key}}"
-                                    value="{{::old.value}}">
-                                </vn-label-value>
-                            </div>
-                        </vn-one>
-                    </vn-td>
                     <vn-td expand class="after">
-                        <vn-one ng-repeat="new in log.newProperties" ng-if="!log.description" id="newInstance">
-                            <div>
-                                <vn-label-value
-                                    no-ellipsize
-                                    label="{{::new.key}}"
-                                    value="{{::new.value}}">
-                                </vn-label-value>
-                            </div>
-                        </vn-one>
+                        <table class="attributes">
+                            <thead>
+                                <tr>
+                                    <th class="field">Field</th>
+                                    <th>Before</th>
+                                    <th>After</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr ng-repeat="prop in ::log.props">
+                                    <td class="field">{{prop.name}}</td>
+                                    <td>{{::$ctrl.formatValue(prop.old)}}</td>
+                                    <td>{{::$ctrl.formatValue(prop.new)}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
                         <vn-one ng-if="!log.newProperties" id="description">
                             <div>
                                 <span no-ellipsize>{{::log.description}}</span>
@@ -96,4 +91,4 @@
     </vn-card>
 </vn-data-viewer>
 <vn-worker-descriptor-popover vn-id="workerDescriptor">
-</vn-worker-descriptor-popover>
\ No newline at end of file
+</vn-worker-descriptor-popover>
diff --git a/front/salix/components/log/index.js b/front/salix/components/log/index.js
index c5a4febcc..d7619e34c 100644
--- a/front/salix/components/log/index.js
+++ b/front/salix/components/log/index.js
@@ -33,12 +33,33 @@ export default class Controller extends Section {
 
     set logs(value) {
         this._logs = value;
+        if (!this.logs) return;
+        for (const log of value) {
+            // log.oldProperties = this.getInstance(log.oldInstance);
+            // log.newProperties = this.getInstance(log.newInstance);
 
-        if (this.logs) {
-            this.logs.forEach(log => {
-                log.oldProperties = this.getInstance(log.oldInstance);
-                log.newProperties = this.getInstance(log.newInstance);
-            });
+            let props = [].concat(
+                Object.keys(log.oldInstance),
+                Object.keys(log.newInstance)
+            );
+            props = [...new Set(props)];
+            log.props = [];
+            for (const prop of props) {
+                log.props.push({
+                    name: prop,
+                    old: log.oldInstance[prop],
+                    new: log.newInstance[prop]
+                });
+            }
+        }
+    }
+
+    formatValue(value) {
+        switch (typeof value) {
+        case 'boolean':
+            return value ? '✓' : '✗';
+        default:
+            return value;
         }
     }
 
diff --git a/front/salix/components/log/style.scss b/front/salix/components/log/style.scss
index ca1de113a..58e4b8e3f 100644
--- a/front/salix/components/log/style.scss
+++ b/front/salix/components/log/style.scss
@@ -23,6 +23,22 @@ vn-log {
             display: block;
         }
     }
+    .attributes {
+        width: 100%;
+
+        tr {
+            height: 10px;
+
+            & > td {
+                padding: 2px;
+                width: 33%;
+            }
+            & > td.field,
+            & > th.field {
+                color: gray;
+            }
+        }
+    }
 }
 .ellipsis {
     white-space: nowrap;
@@ -40,4 +56,4 @@ vn-log {
 .alignSpan {
     overflow: hidden;
     display: inline-block;
-}
\ No newline at end of file
+}