From c2b4caf72367fc82e52c36a4b0e7a1f6f9d9586c Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Wed, 14 Feb 2024 12:14:42 +0200
Subject: [PATCH] menu item disabled

---
 client/res/templates/header.tpl           |   6 +-
 client/src/views/main.js                  | 108 +++++++++++++++-------
 frontend/less/espo/elements/dropdown.less |   4 +
 frontend/less/espo/elements/type.less     |   5 +
 4 files changed, 89 insertions(+), 34 deletions(-)

diff --git a/client/res/templates/header.tpl b/client/res/templates/header.tpl
index 9e2d3b136f..785f72aaa5 100644
--- a/client/res/templates/header.tpl
+++ b/client/res/templates/header.tpl
@@ -8,7 +8,7 @@
                 <a
                     {{#if link}}href="{{link}}"{{else}}role="button"{{/if}}
                     tabindex="0"
-                    class="btn btn-{{#if style}}{{style}}{{else}}default{{/if}} btn-xs-wide main-header-manu-action action{{#if hidden}} hidden{{/if}}{{#if className}} {{className}}{{/if}}"
+                    class="btn btn-{{#if style}}{{style}}{{else}}default{{/if}} btn-xs-wide main-header-manu-action action{{#if disabled}} disabled{{/if}}{{#if hidden}} hidden{{/if}}{{#if className}} {{className}}{{/if}}"
                     data-name="{{name}}"
                     data-action="{{action}}"
                     {{#each data}} data-{{@key}}="{{./this}}"{{/each}}
@@ -38,7 +38,7 @@
                         <a
                             {{#if link}}href="{{link}}"{{else}}role="button"{{/if}}
                             tabindex="0"
-                            class="action main-header-manu-action"
+                            class="action main-header-manu-action{{#if disabled}} disabled{{/if}}"
                             data-name="{{name}}"
                             data-action="{{action}}"
                             {{#each data}} data-{{@key}}="{{./this}}"{{/each}}
@@ -66,7 +66,7 @@
                             <a
                                 {{#if link}}href="{{link}}"{{else}}role="button"{{/if}}
                                 tabindex="0"
-                                class="action main-header-manu-action"
+                                class="action main-header-manu-action{{#if disabled}} disabled{{/if}}"
                                 data-name="{{name}}"
                                 data-action="{{action}}"
                                 {{#each data}} data-{{@key}}="{{./this}}"{{/each}}
diff --git a/client/src/views/main.js b/client/src/views/main.js
index 3cad7408ab..66d7aeac2a 100644
--- a/client/src/views/main.js
+++ b/client/src/views/main.js
@@ -61,7 +61,8 @@ class MainView extends View {
      * @property {string} [label] A translatable label.
      * @property {string} [labelTranslation] A label translation path.
      * @property {'default'|'danger'|'success'|'warning'} [style] A style. Only for buttons.
-     * @property {boolean} [hidden]
+     * @property {boolean} [hidden] Hidden.
+     * @property {boolean} [disabled] Disabled.
      * @property {Object.<string,string|number|boolean>} [data] Data attribute values.
      * @property {string} [title] A title.
      * @property {string} [iconHtml] An icon HTML.
@@ -528,14 +529,30 @@ class MainView extends View {
      * @param {string} name A name.
      */
     disableMenuItem(name) {
-        if (!this.$headerActionsContainer) {
+        const item = this._getHeaderActionItem(name);
+
+        if (item) {
+            item.disabled = true;
+        }
+
+        const process = () => {
+            this.$headerActionsContainer
+                .find(`[data-name="${name}"]`)
+                .addClass('disabled')
+                .attr('disabled');
+        };
+
+        if (this.isBeingRendered()) {
+            this.whenRendered().then(() => process());
+
             return;
         }
 
-        this.$headerActionsContainer
-            .find('[data-name="' + name + '"]')
-            .addClass('disabled')
-            .attr('disabled');
+        if (!this.isRendered()) {
+            return;
+        }
+
+        process();
     }
 
     /**
@@ -544,14 +561,30 @@ class MainView extends View {
      * @param {string} name A name.
      */
     enableMenuItem(name) {
-        if (!this.$headerActionsContainer) {
+        const item = this._getHeaderActionItem(name);
+
+        if (item) {
+            item.disabled = false;
+        }
+
+        const process = () => {
+            this.$headerActionsContainer
+                .find(`[data-name="${name}"]`)
+                .removeClass('disabled')
+                .removeAttr('disabled');
+        };
+
+        if (this.isBeingRendered()) {
+            this.whenRendered().then(() => process());
+
             return;
         }
 
-        this.$headerActionsContainer
-            .find('[data-name="' + name + '"]')
-            .removeClass('disabled')
-            .removeAttr('disabled');
+        if (!this.isRendered()) {
+            return;
+        }
+
+        process();
     }
 
     // noinspection JSUnusedGlobalSymbols
@@ -576,28 +609,45 @@ class MainView extends View {
         });
     }
 
+    /**
+     * @private
+     * @param {string} name
+     * @return {module:views/main~MenuItem|undefined}
+     */
+    _getHeaderActionItem(name) {
+        for (const type of this.headerActionItemTypeList) {
+            if (!this.menu[type]) {
+                continue;
+            }
+
+            for (const item of this.menu[type]) {
+                if (item && item.name === name) {
+                    return item;
+                }
+            }
+        }
+
+        return undefined;
+    }
+
     /**
      * Hide a menu item.
      *
      * @param {string} name A name.
      */
     hideHeaderActionItem(name) {
-        this.headerActionItemTypeList.forEach(t => {
-            (this.menu[t] || []).forEach(item => {
-                item = item || {};
+        const item = this._getHeaderActionItem(name);
 
-                if (item.name === name) {
-                    item.hidden = true;
-                }
-            });
-        });
+        if (item) {
+            item.hidden = true;
+        }
 
         if (!this.isRendered()) {
             return;
         }
 
-        this.$headerActionsContainer.find('li > .action[data-name="'+name+'"]').parent().addClass('hidden');
-        this.$headerActionsContainer.find('a.action[data-name="'+name+'"]').addClass('hidden');
+        this.$headerActionsContainer.find(`li > .action[data-name="${name}"]`).parent().addClass('hidden');
+        this.$headerActionsContainer.find(`a.action[data-name="${name}"]`).addClass('hidden');
 
         this.controlMenuDropdownVisibility();
         this.adjustButtons();
@@ -609,19 +659,15 @@ class MainView extends View {
      * @param {string} name A name.
      */
     showHeaderActionItem(name) {
-        this.headerActionItemTypeList.forEach(t => {
-            (this.menu[t] || []).forEach(item => {
-                item = item || {};
+        const item = this._getHeaderActionItem(name);
 
-                if (item.name === name) {
-                    item.hidden = false;
-                }
-            });
-        });
+        if (item) {
+            item.hidden = false;
+        }
 
         const processUi = () => {
-            this.$headerActionsContainer.find('li > .action[data-name="' + name + '"]').parent().removeClass('hidden');
-            this.$headerActionsContainer.find('a.action[data-name="' + name + '"]').removeClass('hidden');
+            this.$headerActionsContainer.find(`li > .action[data-name="${name}"]`).parent().removeClass('hidden');
+            this.$headerActionsContainer.find(`a.action[data-name="${name}"]`).removeClass('hidden');
 
             this.controlMenuDropdownVisibility();
             this.adjustButtons();
diff --git a/frontend/less/espo/elements/dropdown.less b/frontend/less/espo/elements/dropdown.less
index 25a0f6375d..d8ae3b3657 100644
--- a/frontend/less/espo/elements/dropdown.less
+++ b/frontend/less/espo/elements/dropdown.less
@@ -111,6 +111,10 @@ ul.dropdown-menu {
         span.fa-check {
             padding-top: 2px;
         }
+
+        &.disabled {
+            color: var(--text-muted-color);
+        }
     }
 
     > li.checkbox:last-child {
diff --git a/frontend/less/espo/elements/type.less b/frontend/less/espo/elements/type.less
index 495d7148ab..597d515ea6 100644
--- a/frontend/less/espo/elements/type.less
+++ b/frontend/less/espo/elements/type.less
@@ -214,6 +214,11 @@ a[href="javascript:"] {
     }
 }
 
+a.disabled {
+    pointer-events: none;
+    cursor: default;
+}
+
 a.text-muted {
     &:hover,
     &:focus {