From 86f6253ed75b0c60932d190af5983cb8014b5668 Mon Sep 17 00:00:00 2001
From: Gerard <gerard@verdnatura.es>
Date: Tue, 23 Oct 2018 11:34:07 +0200
Subject: [PATCH] #707 Loggable

---
 client/client/src/history/index.html    | 69 ++++++++++++++++---------
 client/client/src/history/index.js      | 18 ++++---
 client/client/src/history/index.spec.js | 10 ++--
 client/client/src/history/locale/es.yml |  6 +--
 client/client/src/history/style.scss    | 30 +++++++++++
 5 files changed, 96 insertions(+), 37 deletions(-)
 create mode 100644 client/client/src/history/style.scss

diff --git a/client/client/src/history/index.html b/client/client/src/history/index.html
index 0eb658fe8..a88e27dbd 100644
--- a/client/client/src/history/index.html
+++ b/client/client/src/history/index.html
@@ -1,10 +1,9 @@
 <vn-crud-model
     vn-id="model"
     url="/client/api/ClientLogs"
-    filter="$ctrl.filter"
     link="{originFk: $ctrl.$stateParams.id}"
     limit="20"
-    data="logs" on-data-change="$ctrl.onDataChange()">
+    data="$ctrl.logs">
 </vn-crud-model>
 
 <vn-vertical>
@@ -15,39 +14,63 @@
                 <vn-thead>
                     <vn-tr>
                         <vn-th field="creationDate" default-order="DESC">Date</vn-th>
-                        <vn-th field="model">Model</vn-th>
-                        <vn-th field="action">Action</vn-th>
-                        <vn-th field="userFk">Changed by</vn-th>
-                        <vn-th field="before">Before</vn-th>
-                        <vn-th field="after">After</vn-th>
+                        <vn-th field="userFk" class="expendable">Changed by</vn-th>
+                        <vn-th field="changedModel" class="expendable">Model</vn-th>
+                        <vn-th field="action" class="expendable">Action</vn-th>
+                        <vn-th field="changedModelValue" class="expendable">Instance</vn-th>
+                        <vn-th>Before</vn-th>
+                        <vn-th>After</vn-th>
                     </vn-tr>
                 </vn-thead>
                 <vn-tbody>
-                    <vn-tr ng-repeat="clientLog in logs"> 
+                    <vn-tr ng-repeat="clientLog in $ctrl.logs"> 
                         <vn-td>
                             {{::clientLog.creationDate | date:'dd/MM/yyyy HH:mm'}}
+                            <div class="changes">
+                                <div>
+                                    <span translate class="label">Changed by</span><span class="label">: </span>
+                                    <span translate class="value">{{::clientLog.user.name}}</span>
+                                </div>
+                                <div>
+                                    <span translate class="label">Model</span><span class="label">: </span>
+                                    <span translate class="value">{{::clientLog.changedModel}}</span>
+                                </div>
+                                <div>
+                                    <span translate class="label">Action</span><span class="label">: </span>
+                                    <span translate class="value">{{::clientLog.action}}</span>
+                                </div>
+                                <div>
+                                    <span translate class="label">Instance</span><span class="label">: </span>
+                                    <span translate class="value">{{::clientLog.changedModelValue}}</span>
+                                </div>
+                            </div>
                         </vn-td>
-                        <vn-td>
-                            {{::clientLog.model}}
-                        </vn-td>
-                        <vn-td translate>
-                            {{::clientLog.action}}
-                        </vn-td>
-                        <vn-td>
+                        <vn-td class="expendable">
                             {{::clientLog.user.name}}
                         </vn-td>
-                        <vn-td>
+                        <vn-td class="expendable">
+                            {{::clientLog.changedModel}}
+                        </vn-td>
+                        <vn-td translate class="expendable">
+                            {{::clientLog.action}}
+                        </vn-td>
+                        <vn-td class="expendable">
+                            {{::clientLog.changedModelValue}}
+                        </vn-td>
+                        <vn-td class="before">
                             <vn-one ng-repeat="old in clientLog.oldProperties">
-                                <vn-label-value label="{{old.key}}"
-                                    value="{{old.value}}">
-                                </vn-label-value>
+                                <div>
+                                    <span translate class="label">{{::old.key}}</span><span class="label">: </span>
+                                    <span translate class="value">{{::old.value}}</span>
+                                </div>
                             </vn-one>
                         </vn-td>
-                        <vn-td>
+                        <vn-td class="after">
                             <vn-one ng-repeat="new in clientLog.newProperties">
-                                <vn-label-value label="{{new.key}}"
-                                    value="{{new.value}}">
-                                </vn-label-value>
+                                <div>
+                                    <span translate class="label">{{::new.key}}</span><span class="label">: </span>
+                                    <span translate class="value">{{::new.value}}</span>
+                                </div>
                             </vn-one>
                         </vn-td>
                     </vn-tr>
diff --git a/client/client/src/history/index.js b/client/client/src/history/index.js
index dbabcbfe0..7f63b674e 100644
--- a/client/client/src/history/index.js
+++ b/client/client/src/history/index.js
@@ -1,4 +1,5 @@
 import ngModule from '../module';
+import './style.scss';
 
 class Controller {
     constructor($scope, $stateParams) {
@@ -14,13 +15,18 @@ class Controller {
         };
     }
 
-    onDataChange() {
-        let logs = this.$scope.model.data;
+    get logs() {
+        return this._logs;
+    }
 
-        logs.forEach(log => {
-            log.oldProperties = this.getInstance(log.oldInstance);
-            log.newProperties = this.getInstance(log.newInstance);
-        });
+    set logs(value) {
+        this._logs = value;
+
+        if (this.logs)
+            this.logs.forEach(log => {
+                log.oldProperties = this.getInstance(log.oldInstance);
+                log.newProperties = this.getInstance(log.newInstance);
+            });
     }
 
     getInstance(instance) {
diff --git a/client/client/src/history/index.spec.js b/client/client/src/history/index.spec.js
index 15785d041..99f75b201 100644
--- a/client/client/src/history/index.spec.js
+++ b/client/client/src/history/index.spec.js
@@ -7,20 +7,20 @@ describe('Client', () => {
         let controller;
 
         beforeEach(() => {
-            angular.mock.module('client');
+            ngModule('client');
         });
 
         beforeEach(angular.mock.inject((_$componentController_, $rootScope) => {
             $componentController = _$componentController_;
             $scope = $rootScope.$new();
             controller = $componentController('vnClientHistory', {$scope: $scope});
-            controller.$scope.model = {data: [{newInstance: {id: 1}, oldInstance: {id: 2}}]}
+            controller.$scope.model = {data: [{newInstance: {id: 1}, oldInstance: {id: 2}}]};
         }));
 
-        describe('onDataChange()', () => {
+        describe('logs setter', () => {
             it('should call the function getInstance() twice', () => {
-                spyOn(controller, 'getInstance').and.callFake(() => {});
-                controller.onDataChange();
+                spyOn(controller, 'getInstance');
+                controller.logs = [{newInstance: {id: 1}, oldInstance: {id: 2}}];
 
                 expect(controller.getInstance.calls.count()).toBe(2);
                 expect(controller.getInstance).toHaveBeenCalledWith({id: 1});
diff --git a/client/client/src/history/locale/es.yml b/client/client/src/history/locale/es.yml
index d1c4318ee..75deeb63b 100644
--- a/client/client/src/history/locale/es.yml
+++ b/client/client/src/history/locale/es.yml
@@ -3,7 +3,7 @@ Action: Acción
 Changed by: Cambiado por
 Before: Antes
 After: Despues
-update: Actualizar
-Create: Crear
 History: Historial
-insert: Crear
\ No newline at end of file
+insert: Crear
+delete: Eliminar
+update: Actualizar
\ No newline at end of file
diff --git a/client/client/src/history/style.scss b/client/client/src/history/style.scss
new file mode 100644
index 000000000..f36e158cb
--- /dev/null
+++ b/client/client/src/history/style.scss
@@ -0,0 +1,30 @@
+@import 'colors';
+
+vn-client-history {
+    vn-td {
+        vertical-align: initial !important;
+    }
+    .changes {
+        display: none;
+    }
+    .label {
+        color: $secondary-font-color;
+    }
+    .value {
+        color: $main-font-color;
+    }
+
+    .after, .before {
+        max-width: 250px;
+    }
+
+    @media screen and (max-width: 1570px) {
+        .expendable {
+            display: none;
+        }
+        .changes {
+            padding-top: 10px;
+            display: block;
+        }
+    }
+}
\ No newline at end of file