From c35545c209cf5114e44fa487efddffb166ac25cc Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Mon, 12 Feb 2024 15:05:11 +0200
Subject: [PATCH] label manager quick search

---
 .../admin/label-manager/category.tpl          |   8 +-
 .../templates/admin/label-manager/edit.tpl    |  19 +-
 client/src/views/admin/label-manager/edit.js  | 165 ++++++++++++++----
 3 files changed, 153 insertions(+), 39 deletions(-)

diff --git a/client/res/templates/admin/label-manager/category.tpl b/client/res/templates/admin/label-manager/category.tpl
index 6ee754839a..740ea8b24f 100644
--- a/client/res/templates/admin/label-manager/category.tpl
+++ b/client/res/templates/admin/label-manager/category.tpl
@@ -1,9 +1,7 @@
 {{#each categoryDataList}}
-<div class="row">
+<div class="row" data-name="{{name}}">
     <div class="cell col-md-5 form-group">
-        <div class="field">
-            {{label}}
-        </div>
+        <div class="field detail-field-container">{{label}}</div>
     </div>
     <div class="cell col-md-7 form-group" data-name="{{name}}">
         <div class="field">
@@ -11,4 +9,4 @@
         </div>
     </div>
 </div>
-{{/each}}
\ No newline at end of file
+{{/each}}
diff --git a/client/res/templates/admin/label-manager/edit.tpl b/client/res/templates/admin/label-manager/edit.tpl
index 9ec1fa41d2..31dd28c69d 100644
--- a/client/res/templates/admin/label-manager/edit.tpl
+++ b/client/res/templates/admin/label-manager/edit.tpl
@@ -11,10 +11,21 @@
             <button class="btn btn-default btn-xs-wide" data-action="cancel">{{translate 'Cancel'}}</button>
         </div>
     </div>
+
+    <div class="button-container negate-no-side-margin">
+        <input
+            type="text"
+            maxlength="64"
+            placeholder="{{translate 'Search'}}"
+            data-name="quick-search"
+            class="form-control"
+            spellcheck="false"
+        >
+    </div>
 {{/unless}}
 
 {{#each categoryList}}
-<div class="panel panel-default" data-name="{{./this}}" style="overflow: hidden;">
+<div class="panel panel-default category-panel" data-name="{{./this}}" style="overflow: hidden;">
     <div class="panel-heading clearfix">
         <div
             class="pull-left"
@@ -39,12 +50,12 @@
             ><span class="fas fa-chevron-up"></span></a>
         </div>
         <h4 class="panel-title">
-            <span class="action" style="cursor: pointer;" data-action="showCategory" data-name="{{./this}}">
+            <span class="action" style="cursor: pointer;" data-action="toggleCategory" data-name="{{./this}}">
             {{translate this}}
             </span>
         </h4>
     </div>
-    <div class="panel-body hidden" data-name="{{./this}}">
-    </div>
+    <div class="panel-body hidden" data-name="{{./this}}">{{{var this ../this}}}</div>
 </div>
 {{/each}}
+<div class="no-data hidden">{{translate 'No Data'}}</div>
diff --git a/client/src/views/admin/label-manager/edit.js b/client/src/views/admin/label-manager/edit.js
index 1680ee3d37..7e975e14c7 100644
--- a/client/src/views/admin/label-manager/edit.js
+++ b/client/src/views/admin/label-manager/edit.js
@@ -32,7 +32,22 @@ class LabelManagerEditView extends View {
 
     template = 'admin/label-manager/edit'
 
+    /**
+     * @type {Object.<string, Object.<string, string>>}
+     */
+    scopeData
+
     events = {
+        /** @this LabelManagerEditView */
+        'click [data-action="toggleCategory"]': function (e) {
+            const name = $(e.currentTarget).data('name');
+
+            this.toggleCategory(name);
+        },
+        /** @this LabelManagerEditView */
+        'keyup input[data-name="quick-search"]': function (e) {
+            this.processQuickSearch(e.currentTarget.value);
+        },
         /** @this LabelManagerEditView */
         'click [data-action="showCategory"]': function (e) {
             const name = $(e.currentTarget).data('name');
@@ -73,19 +88,28 @@ class LabelManagerEditView extends View {
         this.scope = this.options.scope;
         this.language = this.options.language;
 
+        this.categoryShownMap = {};
         this.dirtyLabelList = [];
 
-        this.wait(true);
+        this.wait(
+            Espo.Ajax.postRequest('LabelManager/action/getScopeData', {
+                scope: this.scope,
+                language: this.language,
+            }).then(data => {
+                this.scopeData = data;
 
-        Espo.Ajax.postRequest('LabelManager/action/getScopeData', {
-            scope: this.scope,
-            language: this.language,
-        }).then(data => {
-            this.scopeData = data;
+                this.scopeDataInitial = Espo.Utils.cloneDeep(this.scopeData);
 
-            this.scopeDataInitial = Espo.Utils.cloneDeep(this.scopeData);
-            this.wait(false);
-        });
+                Object.keys(this.scopeData).forEach(category => {
+                    this.createView(category, 'views/admin/label-manager/category', {
+                        selector: `.panel-body[data-name="${category}"]`,
+                        categoryData: this.getCategoryData(category),
+                        scope: this.scope,
+                        language: this.language,
+                    });
+                });
+            })
+        );
     }
 
     getCategoryList() {
@@ -127,6 +151,9 @@ class LabelManagerEditView extends View {
     afterRender() {
         this.$save = this.$el.find('button[data-action="save"]');
         this.$cancel = this.$el.find('button[data-action="cancel"]');
+
+        this.$panels = this.$el.find('.category-panel');
+        this.$noData = this.$el.find('.no-data');
     }
 
     actionSave() {
@@ -189,42 +216,120 @@ class LabelManagerEditView extends View {
         });
     }
 
+    toggleCategory(category) {
+
+        !this.categoryShownMap[category] ?
+            this.showCategory(category) :
+            this.hideCategory(category);
+    }
+
     showCategory(category) {
         this.$el.find(`a[data-action="showCategory"][data-name="${category}"]`).addClass('hidden');
 
-        if (this.hasView(category)) {
-            this.$el.find(`a[data-action="hideCategory"][data-name="${category}"]`).removeClass('hidden');
-            this.$el.find(`.panel-body[data-name="${category}"]`).removeClass('hidden');
+        this.$el.find(`a[data-action="hideCategory"][data-name="${category}"]`).removeClass('hidden');
+        this.$el.find(`.panel-body[data-name="${category}"]`).removeClass('hidden');
 
-            return;
-        }
-
-        this.createView(category, 'views/admin/label-manager/category', {
-            selector: `.panel-body[data-name="${category}"]`,
-            categoryData: this.getCategoryData(category),
-            scope: this.scope,
-            language: this.language,
-        }, view => {
-            this.$el.find(`.panel-body[data-name="${category}"]`).removeClass('hidden');
-            this.$el.find(`a[data-action="hideCategory"][data-name="${category}"]`).removeClass('hidden');
-
-            view.render();
-        });
+        this.categoryShownMap[category] = true;
     }
 
     hideCategory(category) {
-        this.clearView(category);
-
         this.$el.find(`.panel-body[data-name="${category}"]`).addClass('hidden');
         this.$el.find(`a[data-action="showCategory"][data-name="${category}"]`).removeClass('hidden');
         this.$el.find(`a[data-action="hideCategory"][data-name="${category}"]`).addClass('hidden');
+
+        this.categoryShownMap[category] = false;
     }
 
     getCategoryData(category) {
         return this.scopeData[category] || {};
     }
+
+    processQuickSearch(text) {
+        text = text.trim();
+
+        if (!text) {
+            this.$panels.removeClass('hidden');
+            this.$panels.find('.row').removeClass('hidden');
+            this.$noData.addClass('hidden');
+
+            return;
+        }
+
+        const matchedCategoryList = [];
+        /** @type {Object.<string, string[]>} */
+        const matchedMapList = {};
+
+        const lowerCaseText = text.toLowerCase();
+
+        let anyMatched = false;
+
+        Object.keys(this.scopeData).forEach(/** string */category => {
+            matchedMapList[category] = []
+
+            Object.keys(this.scopeData[category]).forEach(/** string */item => {
+                let matched = false;
+
+                const value = /** @type {string} */this.scopeData[category][item];
+
+                if (
+                    value.toLowerCase().indexOf(lowerCaseText) === 0 ||
+                    item.toLowerCase().indexOf(lowerCaseText) === 0
+                ) {
+                    matched = true;
+                }
+
+                if (!matched) {
+                    const wordList = value.split(' ').concat(value.split(' '));
+
+                    for (const word of wordList) {
+                        if (word.toLowerCase().indexOf(lowerCaseText) === 0) {
+                            matched = true;
+
+                            break;
+                        }
+                    }
+                }
+
+                if (!matched) {
+                    return;
+                }
+
+                anyMatched = true;
+
+                matchedMapList[category].push(item);
+
+                if (!matchedCategoryList.includes(category)) {
+                    matchedCategoryList.push(category);
+                }
+            });
+        });
+
+        if (!anyMatched) {
+            this.$panels.addClass('hidden');
+            this.$panels.find('.row').addClass('hidden');
+            this.$noData.removeClass('hidden');
+
+            return;
+        }
+
+        this.$noData.addClass('hidden');
+
+        Object.keys(this.scopeData).forEach(/** string */category => {
+            const $categoryPanel = this.$panels.filter(`[data-name="${category}"]`);
+
+            Object.keys(this.scopeData[category]).forEach(/** string */item => {
+                const $row = $categoryPanel.find(`.row[data-name="${item}"]`);
+
+                matchedMapList[category].includes(item) ?
+                    $row.removeClass('hidden') :
+                    $row.addClass('hidden');
+            });
+
+            matchedCategoryList.includes(category) ?
+                $categoryPanel.removeClass('hidden') :
+                $categoryPanel.addClass('hidden');
+        });
+    }
 }
 
 export default LabelManagerEditView;
-
-