mass action show/hide

client/res/templates/record/list-expanded.tpl

@@ -2,26 +2,25 @@
 {{#if topBar}}
 <div class="list-buttons-container clearfix">
     {{#if checkboxes}}
-    {{#if massActionList}}
+    {{#if massActionDataList}}
     <div class="btn-group actions">
         <button
             type="button"
             class="btn btn-default dropdown-toggle actions-button"
             data-toggle="dropdown"
             disabled
-        >
-            {{translate 'Actions'}}
-            <span class="caret"></span>
+        >{{translate 'Actions'}} <span class="caret"></span>
         </button>
         <ul class="dropdown-menu">
-            {{#each massActionList}}
-            <li>
-                <a
-                    role="button"
-                    tabindex="0"
-                    data-action="{{./this}}"
-                    class='mass-action'
-                >{{translate this category="massActions" scope=../scope}}</a></li>
+            {{#each massActionDataList}}
+                <li {{#if hidden}}class="hidden"{{/if}}>
+                    <a
+                        role="button"
+                        tabindex="0"
+                        data-action="{{name}}"
+                        class="mass-action"
+                    >{{translate name category="massActions" scope=../scope}}</a>
+                </li>
             {{/each}}
         </ul>
     </div>

client/res/templates/record/list.tpl

@@ -2,7 +2,7 @@
     <div class="list-buttons-container clearfix">
         {{#if displayActionsButtonGroup}}
             <div class="btn-group actions">
-                {{#if massActionList}}
+                {{#if massActionDataList}}
                     <button
                         type="button"
                         class="btn btn-default btn-xs-wide dropdown-toggle actions-button hidden"
@@ -52,17 +52,17 @@
                     {{/if}}
                 </div>
 
-                {{#if massActionList}}
+                {{#if massActionDataList}}
                     <ul class="dropdown-menu actions-menu">
-                        {{#each massActionList}}
+                        {{#each massActionDataList}}
                             {{#if this}}
-                                <li>
+                                <li {{#if hidden}}class="hidden"{{/if}}>
                                     <a
                                         role="button"
                                         tabindex="0"
-                                        data-action="{{./this}}"
-                                        class='mass-action'
-                                    >{{translate this category="massActions" scope=../scope}}</a></li>
+                                        data-action="{{name}}"
+                                        class="mass-action"
+                                    >{{translate name category="massActions" scope=../scope}}</a></li>
                             {{else}}
                                 {{#unless @first}}
                                     {{#unless @last}}
@@ -84,15 +84,15 @@
                     >{{translate 'Actions'}} <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu actions-menu">
-                        {{#each massActionList}}
+                        {{#each massActionDataList}}
                             {{#if this}}
-                                <li>
+                                <li {{#if hidden}}class="hidden"{{/if}}>
                                     <a
                                         role="button"
                                         tabindex="0"
-                                        data-action="{{./this}}"
-                                        class='mass-action'
-                                    >{{translate this category="massActions" scope=../scope}}</a>
+                                        data-action="{{name}}"
+                                        class="mass-action"
+                                    >{{translate name category="massActions" scope=../scope}}</a>
                                 </li>
                             {{else}}
                                 {{#unless @first}}

client/src/views/email/list.js

@@ -489,6 +489,7 @@ class EmailListView extends ListView {
 
     applyFolder() {
         this.collection.selectedFolderId = this.selectedFolderId;
+        this.collection.trigger('select-folder');
 
         if (!this.selectedFolderId) {
             this.collection.whereFunction = null;

client/src/views/email/record/list.js

@@ -44,6 +44,8 @@ class EmailListRecordView extends ListRecordView {
         super.setup();
 
         if (this.collection.url === this.entityType) {
+            this.addMassAction({name: 'retrieveFromTrash', groupIndex: -6}, false);
+
             this.addMassAction({name: 'moveToTrash', groupIndex: -5}, false);
             this.addMassAction({name: 'moveToArchive', groupIndex: -5}, false);
             this.addMassAction({name: 'moveToFolder', groupIndex: -5}, true);
@@ -53,12 +55,13 @@ class EmailListRecordView extends ListRecordView {
             this.addMassAction({name: 'markAsRead', groupIndex: -3}, false);
             this.addMassAction({name: 'markAsNotRead', groupIndex: -3}, false);
 
-            this.addMassAction({name: 'retrieveFromTrash', groupIndex: -1}, false);
-
             this.dropdownItemList.push({
                 name: 'markAllAsRead',
                 label: 'Mark all as read',
             });
+
+            this.controlEmailMassActionsVisibility();
+            this.listenTo(this.collection, 'select-folder', () => this.controlEmailMassActionsVisibility());
         }
 
         this.listenTo(this.collection, 'moving-to-trash', (id) => {
@@ -526,6 +529,33 @@ class EmailListRecordView extends ListRecordView {
 
         this.massActionMarkAsImportant();
     }
+
+    /**
+     * @private
+     */
+    controlEmailMassActionsVisibility() {
+        const moveToArchive =
+            this.collection.selectedFolderId !== 'trash' &&
+            this.collection.selectedFolderId !== 'archive'
+
+        moveToArchive ?
+            this.showMassAction('moveToArchive') :
+            this.hideMassAction('moveToArchive');
+
+        if (this.collection.selectedFolderId === 'trash') {
+            this.hideMassAction('moveToTrash');
+            this.showMassAction('retrieveFromTrash');
+        } else {
+            this.showMassAction('moveToTrash');
+            this.hideMassAction('retrieveFromTrash');
+        }
+
+        if (this.collection.selectedFolderId === 'important') {
+            this.hideMassAction('markAsImportant');
+        } else {
+            this.showMassAction('markAsImportant');
+        }
+    }
 }
 
 export default EmailListRecordView;

client/src/views/record/list.js

@@ -547,6 +547,7 @@ class ListRecordView extends View {
      * @property {string} [confirmationMessage] A confirmation message.
      * @property {string} [waitMessage] A wait message.
      * @property {string} [successMessage] A success message.
+     * @property {boolean} [hidden] Is hidden.
      */
 
     /**
@@ -974,7 +975,7 @@ class ListRecordView extends View {
             showCount: this.showCount && this.collection.total > 0,
             moreCount: moreCount,
             checkboxes: this.checkboxes,
-            massActionList: this.getMassActionDataList(),
+            massActionDataList: this.getMassActionDataList(),
             rowList: this.rowList,
             topBar: topBar,
             checkAllResultDisabled: checkAllResultDisabled,
@@ -1095,7 +1096,10 @@ class ListRecordView extends View {
         this.$selectAllCheckbox.prop('checked', false);
 
         this.massActionList.forEach(item => {
-            if (!this.checkAllResultMassActionList.includes(item)) {
+            if (
+                !this.checkAllResultMassActionList.includes(item) &&
+                !(this.massActionDefs[item] || {}).hidden
+            ) {
                 this.$el
                     .find(`div.list-buttons-container .actions-menu li a.mass-action[data-action="${item}"]`)
                     .parent()
@@ -3522,9 +3526,39 @@ class ListRecordView extends View {
         return this.pagination;
     }
 
+    /**
+     * Hide a mass action. Requires re-render.
+     *
+     * @protected
+     * @param {string} name An action name.
+     * @since 8.4.0
+     */
+    hideMassAction(name) {
+        if (!this.massActionDefs[name]) {
+            this.massActionDefs[name] = {};
+        }
+
+        this.massActionDefs[name].hidden = true;
+    }
+
+    /**
+     * Show a mass action. Requires re-render.
+     *
+     * @protected
+     * @param {string} name An action name.
+     * @since 8.4.0
+     */
+    showMassAction(name) {
+        if (!this.massActionDefs[name]) {
+            this.massActionDefs[name] = {};
+        }
+
+        this.massActionDefs[name].hidden = false;
+    }
+
     /**
      * @private
-     * @return {Array<string|false>}
+     * @return {Array<{name: string, hidden: boolean}|false>}
      */
     getMassActionDataList() {
         /** @type {string[][]} */
@@ -3555,7 +3589,16 @@ class ListRecordView extends View {
             list.push(false);
         });
 
-        return list;
+        return list.map(name => {
+            if (name === false) {
+                return false;
+            }
+
+            return {
+                name,
+                hidden: (this.massActionDefs[name] || {}).hidden,
+            };
+        });
     }
 }