From bbd2137e57abfd2c04609958a366a3f2acb287e6 Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan@verdnatura.es>
Date: Wed, 3 May 2023 11:57:13 +0200
Subject: [PATCH] refs #5517 Avatar componetized

---
 front/core/components/autocomplete/index.js   | 14 +----
 front/core/components/avatar/index.html       |  5 ++
 front/core/components/avatar/index.js         | 63 +++++++++++++++++++
 front/core/components/avatar/style.scss       | 32 ++++++++++
 front/core/components/index.js                |  1 +
 .../core/components/json-value/index.spec.js  |  4 +-
 front/salix/components/log/index.html         | 39 +++++++-----
 front/salix/components/log/index.js           | 37 -----------
 front/salix/components/log/style.scss         | 29 +--------
 9 files changed, 131 insertions(+), 93 deletions(-)
 create mode 100644 front/core/components/avatar/index.html
 create mode 100644 front/core/components/avatar/index.js
 create mode 100644 front/core/components/avatar/style.scss

diff --git a/front/core/components/autocomplete/index.js b/front/core/components/autocomplete/index.js
index 52491f7e0..2539c4ef4 100755
--- a/front/core/components/autocomplete/index.js
+++ b/front/core/components/autocomplete/index.js
@@ -174,7 +174,6 @@ export default class Autocomplete extends Field {
 
     refreshDisplayed() {
         let display = '';
-        let hasTemplate = this.$transclude && this.$transclude.isSlotFilled('tplItem');
 
         if (this._selection && this.showField) {
             if (this.multiple && Array.isArray(this._selection)) {
@@ -182,19 +181,8 @@ export default class Autocomplete extends Field {
                     if (display.length > 0) display += ', ';
                     display += item[this.showField];
                 }
-            } else {
+            } else
                 display = this._selection[this.showField];
-                if (hasTemplate) {
-                    let template = this.$transclude(() => {}, null, 'tplItem');
-                    const element = template[0];
-                    const description = element.querySelector('.text-secondary');
-                    if (description) description.remove();
-
-                    const displayElement = angular.element(element);
-                    const displayText = displayElement.text();
-                    display = this.$interpolate(displayText)(this._selection);
-                }
-            }
         }
 
         this.input.value = display;
diff --git a/front/core/components/avatar/index.html b/front/core/components/avatar/index.html
new file mode 100644
index 000000000..2819e1d50
--- /dev/null
+++ b/front/core/components/avatar/index.html
@@ -0,0 +1,5 @@
+<div class="letter">
+    {{::$ctrl.val && $ctrl.val.charAt(0).toUpperCase()}}
+</div>
+<div class="image" ng-transclude>
+</div>
diff --git a/front/core/components/avatar/index.js b/front/core/components/avatar/index.js
new file mode 100644
index 000000000..e1aede6be
--- /dev/null
+++ b/front/core/components/avatar/index.js
@@ -0,0 +1,63 @@
+import ngModule from '../../module';
+import Component from 'core/lib/component';
+import './style.scss';
+
+/**
+ * Displays colored avatar based on value.
+ *
+ * @property {*} val The value
+ */
+export default class Avatar extends Component {
+    get val() {
+        return this._val;
+    }
+
+    set val(value) {
+        this._val = value;
+
+        const val = value || '';
+        let hash = 0;
+        for (let i = 0; i < val.length; i++)
+            hash += val.charCodeAt(i);
+        const color = '#' + colors[hash % colors.length];
+
+        const el = this.element;
+        el.style.backgroundColor = color;
+        el.title = val;
+    }
+}
+
+ngModule.vnComponent('vnAvatar', {
+    template: require('./index.html'),
+    controller: Avatar,
+    bindings: {
+        val: '@?'
+    },
+    transclude: true
+});
+
+const colors = [
+    'e2553d', // Coral
+    'FFA07A', // Salmon
+    'FFDAB9', // Peach
+    'a17077', // Pink
+    'bf0e99', // Pink light
+    '52a500', // Green chartreuse
+    '00aeae', // Cian
+    'b754cf', // Purple middle
+    '8a69cd', // Blue lavender
+    '1fa8a1', // Green ocean
+    'DC143C', // Red crimson
+    '5681cf', // Blue steel
+    'FF1493', // Ping intense
+    '02ba02', // Green lime
+    '1E90FF', // Blue sky
+    '8B008B', // Purple dark
+    'cc7000', // Orange bright
+    '00b5b8', // Turquoise
+    '8B0000', // Red dark
+    '008080', // Green bluish
+    '2F4F4F', // Gray board
+    '7e7e7e', // Gray
+    '5d5d5d', // Gray dark
+];
diff --git a/front/core/components/avatar/style.scss b/front/core/components/avatar/style.scss
new file mode 100644
index 000000000..272930821
--- /dev/null
+++ b/front/core/components/avatar/style.scss
@@ -0,0 +1,32 @@
+@import "variables";
+
+vn-avatar {
+    display: block;
+    border-radius: 50%;
+    overflow: hidden;
+    height: 36px;
+    width: 36px;
+    font-size: 22px;
+    background-color: $color-main;
+    position: relative;
+
+    & > * {
+        width: 100%;
+        height: 100%;
+    }
+    & > .letter {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    & > .image {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        & > img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
diff --git a/front/core/components/index.js b/front/core/components/index.js
index 44b8beb45..45d182121 100644
--- a/front/core/components/index.js
+++ b/front/core/components/index.js
@@ -17,6 +17,7 @@ import './pagination/pagination';
 import './searchbar/searchbar';
 import './scroll-up/scroll-up';
 import './autocomplete';
+import './avatar';
 import './button';
 import './button-menu';
 import './calendar';
diff --git a/front/core/components/json-value/index.spec.js b/front/core/components/json-value/index.spec.js
index 078080d27..b79d15a5d 100644
--- a/front/core/components/json-value/index.spec.js
+++ b/front/core/components/json-value/index.spec.js
@@ -1,6 +1,6 @@
 import './index';
 
-describe('Salix Component vnLog', () => {
+describe('Component vnJsonValue', () => {
     let controller;
     let $scope;
     let $element;
@@ -10,7 +10,7 @@ describe('Salix Component vnLog', () => {
 
     beforeEach(inject(($componentController, $rootScope) => {
         $scope = $rootScope.$new();
-        $element = angular.element('<json-value></json-value>');
+        $element = angular.element('<vn-json-value></vn-json-value>');
         controller = $componentController('vnJsonValue', {$element, $scope});
         el = controller.element;
     }));
diff --git a/front/salix/components/log/index.html b/front/salix/components/log/index.html
index 00ab23cc9..b7697a1fd 100644
--- a/front/salix/components/log/index.html
+++ b/front/salix/components/log/index.html
@@ -17,20 +17,15 @@
 <vn-data-viewer model="model" class="vn-w-md vn-px-sm">
     <div class="change vn-mb-sm" ng-repeat="log in $ctrl.logs">
         <div class="user-wrapper">
-            <div
-                class="user vn-mt-xs"
+            <vn-avatar class="vn-mt-xs"
                 ng-class="::{system: !log.user}"
-                ng-style="::$ctrl.userBgColor(log.user)"
-                title="{{::log.user.nickname || 'System'}}">
-                <div class="user-letter">
-                    {{::log.user ? log.user.name.charAt(0).toUpperCase() : 'S'}}
-                </div>
+                val="{{::log.user ? log.user.nickname : 'System'}}"
+                ng-click="$ctrl.showWorkerDescriptor($event, log)">
                 <img
                     ng-if="::log.user.image"
-                    ng-src="/api/Images/user/160x160/{{::log.userFk}}/download?access_token={{::$ctrl.vnToken.token}}"
-                    ng-click="$ctrl.showWorkerDescriptor($event, log)">
+                    ng-src="/api/Images/user/160x160/{{::log.userFk}}/download?access_token={{::$ctrl.vnToken.token}}">
                 </img>
-            </div>
+            </vn-avatar>
             <div class="arrow bg-panel"></div>
             <div class="line"></div>
         </div>
@@ -41,7 +36,7 @@
                     title="{{::log.creationDate | date:'dd/MM/yyyy HH:mm'}}">
                     {{::$ctrl.relativeDate(log.creationDate)}}
                 </div>
-                <span class="chip {{::$ctrl.actionsClass[log.action]}}" translate>
+                <span class="chip" ng-class="::$ctrl.actionsClass[log.action]" translate>
                     {{::$ctrl.actionsText[log.action]}}
                 </span>
             </div>
@@ -62,7 +57,9 @@
                     {{::log.changedModelValue}}
                 </span>
             </div>
-            <div class="changes {{::log.props.length ? 'props' : 'no-props'}}" vn-id="changes">
+            <div class="changes"
+                ng-class="::log.props.length ? 'props' : 'no-props'"
+                vn-id="changes">
                 <vn-icon icon="visibility"
                     class="expand-button"
                     ng-click="$ctrl.toggleAttributes(log, changes, true)">
@@ -141,13 +138,25 @@
             ng-model="filter.userFk"
             value-field="id"
             show-field="nickname"
-            fields="['id', 'name', 'nickname']"
+            fields="['id', 'name', 'nickname', 'image']"
             search-function="$ctrl.searchUser($search)"
             url="{{$ctrl.url}}/{{$ctrl.originId}}/editors"
             order="nickname">
             <tpl-item>
-                <div>{{nickname}}</div>
-                <div class="text-secondary text-caption">{{name}}</div>
+                <div style="display: flex;">
+                    <vn-avatar
+                        class="vn-mr-sm"
+                        val="{{::nickname}}">
+                        <img
+                            ng-if="::image"
+                            ng-src="/api/Images/user/160x160/{{::id}}/download?access_token={{::$ctrl.vnToken.token}}">
+                        </img>
+                    </vn-avatar>
+                    <div>
+                        <div>{{::nickname}}</div>
+                        <div class="text-secondary text-caption">{{::name}}</div>
+                    </div>
+                </div>
             </tpl-item>
         </vn-autocomplete>
         <vn-autocomplete
diff --git a/front/salix/components/log/index.js b/front/salix/components/log/index.js
index 46c6cd0f4..ba7c5bc55 100644
--- a/front/salix/components/log/index.js
+++ b/front/salix/components/log/index.js
@@ -186,17 +186,6 @@ export default class Controller extends Section {
         }
     }
 
-    userBgColor(user) {
-        if (!user) return;
-        const name = user.name || '';
-        let hash = 0;
-        for (let i = 0; i < name.length; i++)
-            hash += name.charCodeAt(i);
-        return {
-            backgroundColor: '#'+ colors[hash % colors.length]
-        };
-    }
-
     showWorkerDescriptor(event, log) {
         if (log.user?.worker)
             this.$.workerDescriptor.show(event.target, log.userFk);
@@ -214,29 +203,3 @@ ngModule.vnComponent('vnLog', {
         url: '@'
     }
 });
-
-const colors = [
-    'e2553d', // Coral
-    'FFA07A', // Salmon
-    'FFDAB9', // Peach
-    'a17077', // Pink
-    'bf0e99', // Pink light
-    '52a500', // Green chartreuse
-    '00aeae', // Cian
-    'b754cf', // Purple middle
-    '8a69cd', // Blue lavender
-    '1fa8a1', // Green ocean
-    'DC143C', // Red crimson
-    '5681cf', // Blue steel
-    'FF1493', // Ping intense
-    '02ba02', // Green lime
-    '1E90FF', // Blue sky
-    '8B008B', // Purple dark
-    'cc7000', // Orange bright
-    '00b5b8', // Turquoise
-    '8B0000', // Red dark
-    '008080', // Green bluish
-    '2F4F4F', // Gray board
-    '7e7e7e', // Gray
-    '5d5d5d', // Gray dark
-];
diff --git a/front/salix/components/log/style.scss b/front/salix/components/log/style.scss
index ca0c9473c..b78dc3824 100644
--- a/front/salix/components/log/style.scss
+++ b/front/salix/components/log/style.scss
@@ -8,34 +8,11 @@ vn-log {
             position: relative;
             padding-right: 10px;
 
-            & > .user {
-                position: relative;
-                border-radius: 50%;
-                height: 36px;
-                width: 36px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                overflow: hidden;
+            & > vn-avatar {
+                cursor: pointer;
 
-                & > * {
-                    width: 100%;
-                    height: 100%;
-                }
                 &.system {
-                    background-color: $color-main;
-                }
-                .user-letter {
-                    font-size: 22px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-                img {
-                    cursor: pointer;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
+                    background-color: $color-main !important;
                 }
             }
             & > .arrow {