From 9c007504ea8be832d70ae8f27dcf01238744c8a0 Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan@verdnatura.es>
Date: Fri, 9 Jun 2023 01:22:36 +0200
Subject: [PATCH] refs #5667 UI improved, filter by record

---
 front/core/styles/util.scss                  |  7 +++
 front/core/styles/variables.scss             |  2 -
 front/salix/components/background/style.scss |  4 +-
 front/salix/components/layout/style.scss     |  4 +-
 front/salix/components/log/index.html        | 50 ++++++++++----------
 front/salix/components/log/index.js          | 17 +++++--
 front/salix/components/log/locale/es.yml     |  7 ++-
 front/salix/components/log/style.scss        | 24 ++++++++--
 front/salix/styles/misc.scss                 |  7 ++-
 9 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/front/core/styles/util.scss b/front/core/styles/util.scss
index 95a523ff4..8c345ddcc 100644
--- a/front/core/styles/util.scss
+++ b/front/core/styles/util.scss
@@ -1,4 +1,11 @@
+@import "./variables";
+@import "./effects";
 
+@mixin mobile {
+    @media screen and (max-width: $mobile-width) {
+        @content;
+    }
+}
 @mixin browser($browser) {
     html[data-browser*="#{$browser}"] & {
         @content;
diff --git a/front/core/styles/variables.scss b/front/core/styles/variables.scss
index bcc9fab66..0a74c8277 100644
--- a/front/core/styles/variables.scss
+++ b/front/core/styles/variables.scss
@@ -1,5 +1,3 @@
-@import "./util";
-
 $font-size: 11pt;
 $menu-width: 256px;
 $topbar-height: 56px;
diff --git a/front/salix/components/background/style.scss b/front/salix/components/background/style.scss
index c75b69c52..5bc56683e 100644
--- a/front/salix/components/background/style.scss
+++ b/front/salix/components/background/style.scss
@@ -1,4 +1,4 @@
-@import "variables";
+@import "util";
 
 @keyframes fadein {
     from {
@@ -16,7 +16,7 @@ vn-background {
     background-color: black;
     z-index: 14;
 
-    @media screen and (max-width: $mobile-width) {
+    @include mobile {
         &.shown {
             display: block;
             opacity: .3;
diff --git a/front/salix/components/layout/style.scss b/front/salix/components/layout/style.scss
index 612366228..fa3e8f918 100644
--- a/front/salix/components/layout/style.scss
+++ b/front/salix/components/layout/style.scss
@@ -1,4 +1,4 @@
-@import "effects";
+@import "util";
 
 vn-layout {
     & > vn-topbar {
@@ -134,7 +134,7 @@ vn-layout {
             border-radius: 50%;
         }
     }
-    @media screen and (max-width: $mobile-width) {
+    @include mobile {
         & > vn-topbar {
             & > .start > .logo {
                 display: none;
diff --git a/front/salix/components/log/index.html b/front/salix/components/log/index.html
index e6ade48fb..f68919f00 100644
--- a/front/salix/components/log/index.html
+++ b/front/salix/components/log/index.html
@@ -16,7 +16,7 @@
 </vn-crud-model>
 <vn-data-viewer
     model="model"
-    class="vn-w-sm vn-px-sm">
+    class="vn-w-sm vn-px-sm vn-pb-xl">
     <div class="change vn-mb-sm" ng-repeat="log in $ctrl.logs">
         <div class="left">
             <vn-avatar class="vn-mt-xs"
@@ -33,17 +33,6 @@
         </div>
         <vn-card class="detail">
             <div class="header vn-pa-sm">
-                <div
-                    class="action-date text-secondary text-caption vn-mr-sm"
-                    title="{{::log.creationDate | date:'dd/MM/yyyy HH:mm:ss'}}">
-                    <vn-icon
-                        class="action vn-mr-xs"
-                        ng-class="::$ctrl.actionsClass[log.action]"
-                        icon="{{::$ctrl.actionsIcon[log.action]}}"
-                        translate-attr="::{title: $ctrl.actionsText[log.action]}">
-                    </vn-icon>
-                    {{::$ctrl.relativeDate(log.creationDate)}}
-                </div>
                 <div class="action-model">
                     <span class="model-name"
                         ng-if="::$ctrl.showModelName && log.changedModel"
@@ -52,10 +41,26 @@
                         {{::log.changedModelI18n}}
                     </span>
                 </div>
+                <div
+                    class="action-date text-secondary text-caption vn-ml-sm"
+                    title="{{::log.creationDate | date:'dd/MM/yyyy HH:mm:ss'}}">
+                    {{::$ctrl.relativeDate(log.creationDate)}}
+                    <vn-icon
+                        class="action vn-ml-xs"
+                        ng-class="::$ctrl.actionsClass[log.action]"
+                        icon="{{::$ctrl.actionsIcon[log.action]}}"
+                        translate-attr="::{title: $ctrl.actionsText[log.action]}">
+                    </vn-icon>
+                </div>
             </div>
             <div class="model vn-pb-sm vn-px-sm"
-                ng-if="::log.changedModelId || log.changedModelValue">
+                ng-if="::$ctrl.showModelName">
                 <span class="model-id" ng-if="::log.changedModelId">#{{::log.changedModelId}}</span>
+                <vn-icon
+                    icon="filter_alt"
+                    translate-attr="{title: 'Show all record changes'}"
+                    ng-click="$ctrl.filterByEntity(log)">
+                </vn-icon>
                 <span class="model-value" title="{{::log.changedModelValue}}">{{::log.changedModelValue}}</span>
             </div>
             <div class="changes vn-pa-sm"
@@ -94,6 +99,13 @@
         </div>
     </div>
 </vn-data-viewer>
+<vn-float-button
+    ng-if="model.userFilter"
+    icon="filter_alt_off"
+    translate-attr="{title: 'Quit filter'}"
+    ng-click="$ctrl.resetFilter()"
+    fixed-bottom-right>
+</vn-float-button>
 <vn-side-menu side="right">
     <form vn-vertical
         ng-model-options="{updateOn: 'change blur'}"
@@ -198,18 +210,6 @@
             label="To"
             ng-model="filter.to">
         </vn-date-picker>
-        <vn-button-bar vn-vertical>
-            <vn-button
-                label="Filter"
-                ng-click="$ctrl.applyFilter(filter)">
-            </vn-button>
-            <vn-button
-                label="Reset"
-                class="flat"
-                ng-click="$ctrl.resetFilter()"
-                ng-if="model.userFilter">
-            </vn-button>
-        </vn-button-bar>
     </form>
 </vn-side-menu>
 <vn-worker-descriptor-popover vn-id="workerDescriptor">
diff --git a/front/salix/components/log/index.js b/front/salix/components/log/index.js
index 3392c53be..8aea255a2 100644
--- a/front/salix/components/log/index.js
+++ b/front/salix/components/log/index.js
@@ -165,11 +165,10 @@ export default class Controller extends Section {
             switch (prop) {
             case 'search':
                 const or = [];
-                if (/^[\w_-]+$/.test(value))
-                    or.push({changedModelId: value});
-                if (!/^[0-9]+$/.test(value))
-                    or.push({changedModelValue: {like: `%${value}%`}});
-                return or.length ? {or} : null;
+                if (/^\s*[0-9]+\s*$/.test(value))
+                    return {changedModelId: value.trim()};
+                else
+                    return {changedModelValue: {like: `%${value}%`}};
             case 'changes':
                 return {or: [
                     {oldJson: {like: `%${value}%`}},
@@ -222,6 +221,14 @@ export default class Controller extends Section {
         return this.$.model.applyFilter(lbFilter);
     }
 
+    filterByEntity(log) {
+        this.$.filter = {
+            who: 'all',
+            search: log.changedModelId,
+            changedModel: log.changedModel
+        };
+    }
+
     searchUser(search) {
         if (/^[0-9]+$/.test(search)) {
             return {id: search};
diff --git a/front/salix/components/log/locale/es.yml b/front/salix/components/log/locale/es.yml
index 0f2755f2e..90a42911b 100644
--- a/front/salix/components/log/locale/es.yml
+++ b/front/salix/components/log/locale/es.yml
@@ -3,8 +3,8 @@ Concept: Concepto
 Search: Buscar
 Search by id or concept: Buscar por identificador o concepto
 Search by changes: |
-    Buscar por cambios realizados. Los atributos deben buscarse por su nombre
-    interno, para obtenerlo situar el cursor sobre el nombre.
+    Buscar por cambios. Los atributos deben buscarse por su nombre interno,
+    para obtenerlo situar el cursor sobre el atributo.
 Entity: Entidad
 Action: Acción
 Author: Autor
@@ -16,9 +16,12 @@ Creates: Crea
 Edits: Modifica
 Deletes: Elimina
 Accesses: Accede
+All: Todo
 System: Sistema
 Details: Detalles
 note: nota
 Changes: Cambios
 today: hoy
 yesterday: ayer
+Show all record changes: Mostrar todos los cambios realizados en el registro
+Quit filter: Quitar filtro
diff --git a/front/salix/components/log/style.scss b/front/salix/components/log/style.scss
index cec591a7f..de294972d 100644
--- a/front/salix/components/log/style.scss
+++ b/front/salix/components/log/style.scss
@@ -1,5 +1,4 @@
-@import "variables";
-@import "effects";
+@import "util";
 
 vn-log {
     .change {
@@ -77,7 +76,7 @@ vn-log {
                         border-radius: 50%;
                         width: 24px;
                         height: 24px;
-                        font-size: 1.4em;
+                        font-size: 18px;
 
                         &.notice {
                             background-color: $color-notice-medium
@@ -98,16 +97,33 @@ vn-log {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
+                max-height: 18px;
 
+                & > vn-icon {
+                    @extend %clickable-light;
+                    vertical-align: middle;
+                    padding: 2px;
+                    margin: -2px;
+                    font-size: 18px;
+                    color: $color-font-secondary;
+                    float: right;
+                    display: none;
+
+                    @include mobile {
+                        display: initial;
+                    }
+                }
                 & > .model-value {
                     font-style: italic;
                 }
                 & > .model-id {
                     color: $color-font-secondary;
                     font-size: .9rem;
-                    float: right;
                 }
             }
+            &:hover > .model > vn-icon {
+                display: initial;
+            }
         }
     }
     .changes {
diff --git a/front/salix/styles/misc.scss b/front/salix/styles/misc.scss
index 02bfd9f17..9b2829d0b 100644
--- a/front/salix/styles/misc.scss
+++ b/front/salix/styles/misc.scss
@@ -1,5 +1,4 @@
-@import "./variables";
-@import "./effects";
+@import "./util";
 
 form vn-horizontal {
     align-items: center;
@@ -22,10 +21,10 @@ form vn-horizontal {
         }
     }
 
-    @media screen and (max-width: $mobile-width) {
+    @include mobile {
         flex-direction: column;
         align-items: initial;
-    
+
         & > * {
             &,
             &:first-child,