refs #5394 wip generate html code by javascript

front/salix/components/log/index.html

@@ -25,7 +25,8 @@
                 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-src="/api/Images/user/160x160/{{::log.userFk}}/download?access_token={{::$ctrl.vnToken.token}}"
+                    ng-click="::$ctrl.showDescriptor('Worker', $event, log.userFk)">
                 </img>
             </vn-avatar>
             <div class="arrow bg-panel"></div>
@@ -212,5 +213,4 @@
         </vn-date-picker>
     </form>
 </vn-side-menu>
-<vn-worker-descriptor-popover vn-id="workerDescriptor">
+<div id="descriptors"></div>
-</vn-worker-descriptor-popover>

front/salix/components/log/index.js

@@ -8,6 +8,8 @@ const validDate = /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[
 export default class Controller extends Section {
     constructor($element, $) {
         super($element, $);
+        this.descriptors = new Map();
+        this.activeDescriptors = [];
         this.hashToColor = hashToColor;
         this.actionsText = {
             insert: 'Creates',
@@ -70,6 +72,9 @@ export default class Controller extends Section {
         const castJsonValue = this.castJsonValue;
 
         for (const log of value) {
+            if (log.changedModel && !this.descriptors.get(log.changedModel))
+                this.fillDescriptorsMap(log.changedModel);
+
             const notDelete = log.action != 'delete';
             const olds = (notDelete ? log.oldInstance : null) || empty;
             const vals = (notDelete ? log.newInstance : log.oldInstance) || empty;
@@ -78,23 +83,37 @@ export default class Controller extends Section {
 
             let props = Object.keys(olds).concat(Object.keys(vals));
             props = [...new Set(props)];
-
             log.props = [];
             for (const prop of props) {
+                const descriptor = this.descriptors.get(log.changedModel).get(prop);
                 if (prop.endsWith('$')) continue;
                 log.props.push({
                     name: prop,
                     nameI18n: firstUpper(locale.columns?.[prop]) || prop,
                     old: getVal(olds, prop),
-                    val: getVal(vals, prop)
+                    val: getVal(vals, prop),
+                    descriptor
                 });
+                if (descriptor && !this.activeDescriptors.includes(descriptor))
+                    this.activeDescriptors.push(descriptor);
             }
             log.props.sort(
                 (a, b) => a.nameI18n.localeCompare(b.nameI18n));
         }
+        let innerHTML = '';
+        for (const descriptor of this.activeDescriptors)
+            innerHTML += `<vn-${this.toKebabCase(descriptor)}-descriptor-popover vn-id="${descriptor}"></vn-${this.toKebabCase(descriptor)}-descriptor-popover>\n`;
+
+        document.getElementById('descriptors').innerHTML = innerHTML;
+    }
+
+    toKebabCase(str) {
+        return str.replace(/\s+/g, '-')
+            .replace(/([a-z])([A-Z])/g, '$1-$2')
+            .toLowerCase();
 
         function getVal(vals, prop) {
-            let val, id;
+            let val; let id;
             const showProp = `${prop}$`;
 
             if (vals[showProp] != null) {
@@ -121,6 +140,15 @@ export default class Controller extends Section {
         }
     }
 
+    fillDescriptorsMap(changedModel) {
+        const relations = new Map();
+        Object.values(window.validations[changedModel].relations).forEach(relation => {
+            if (relation.type == 'belongsTo')
+                relations.set(relation.keyFrom, relation.modelTo);
+        });
+        this.descriptors.set(changedModel, relations);
+    }
+
     get showModelName() {
         return !(this.changedModel && this.changedModelId);
     }
@@ -192,9 +220,9 @@ export default class Controller extends Section {
                 }
                 return inq.length ? {action: {inq}} : null;
             case 'from':
-                if (filter.to) {
+                if (filter.to)
                     return {creationDate: {gte: value}};
-                } else {
+                else {
                     const to = new Date(value);
                     to.setHours(23, 59, 59, 999);
                     return {creationDate: {between: [value, to]}};
@@ -230,19 +258,30 @@ export default class Controller extends Section {
     }
 
     searchUser(search) {
-        if (/^[0-9]+$/.test(search)) {
+        if (/^[0-9]+$/.test(search))
             return {id: search};
-        } else {
+        else {
             return {or: [
                 {name: search},
                 {nickname: {like: `%${search}%`}}
-            ]}
+            ]};
         }
     }
 
-    showWorkerDescriptor(event, log) {
+    userBgColor(user) {
-        if (log.user?.worker)
+        if (!user) return;
-            this.$.workerDescriptor.show(event.target, log.userFk);
+        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]
+        };
+    }
+
+    showDescriptor(descriptor, event, id) {
+        if (!descriptor || !this.$[descriptor]) return;
+        this.$[descriptor].show(event.target, id);
     }
 }
 
@@ -250,6 +289,8 @@ function firstUpper(str) {
     return str && str.charAt(0).toUpperCase() + str.substr(1);
 }
 
+Controller.$inject = ['$element', '$scope', '$compile'];
+
 ngModule.vnComponent('vnLog', {
     controller: Controller,
     template: require('./index.html'),

loopback/common/methods/schema/model-info.js

@@ -93,6 +93,7 @@ module.exports = Self => {
 
             json[modelName] = {
                 properties: model.definition.rawProperties,
+                relations: model.relations,
                 validations: jsonValidations,
                 locale
             };