[TASK] Use multi record selection in recycler module

The multi record selection component is now also used
in the recycler module. This increases consistency, as
custom checkbox logic could be removed.

Also the recyclers' JavaScript implementation of the
selection actions is simplified. To interact with the
multi record selection component, some events are used.
This also means, the functionality stays the same, while
most of it is now handled by the Multi record selection
component.

Resolves: #94926
Releases: master
Change-Id: I57d91d070bfa75c01d4cb87dfd0c5576d111dcfa
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/70678


Tested-by: core-ci <typo3@b13.com>
Tested-by: Jochen <rothjochen@gmail.com>
Tested-by: Simon Schaufelberger <simonschaufi+typo3@gmail.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Jochen <rothjochen@gmail.com>
Reviewed-by: Simon Schaufelberger <simonschaufi+typo3@gmail.com>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/TypeScript/recycler/Resources/Public/TypeScript/Recycler.ts

@@ -18,6 +18,7 @@ import DeferredAction = require('TYPO3/CMS/Backend/ActionButton/DeferredAction')
 import Modal = require('TYPO3/CMS/Backend/Modal');
 import Notification = require('TYPO3/CMS/Backend/Notification');
 import Severity = require('TYPO3/CMS/Backend/Severity');
+import RegularEvent from 'TYPO3/CMS/Core/Event/RegularEvent';
 
 enum RecyclerIdentifiers {
   searchForm = '#recycler-form',
@@ -28,9 +29,10 @@ enum RecyclerIdentifiers {
   recyclerTable = '#itemsInRecycler',
   paginator = '#recycler-index nav',
   reloadAction = 'a[data-action=reload]',
-  massUndo = 'button[data-action=massundo]',
-  massDelete = 'button[data-action=massdelete]',
-  toggleAll = '.t3js-toggle-all',
+  undo = 'a[data-action=undo]',
+  delete = 'a[data-action=delete]',
+  massUndo = 'button[data-multi-record-selection-action=massundo]',
+  massDelete = 'button[data-multi-record-selection-action=massdelete]',
 }
 
 /**
@@ -46,7 +48,6 @@ class Recycler {
     itemsPerPage: TYPO3.settings.Recycler.pagingSize,
   };
   public markedRecordsForMassAction: Array<string> = [];
-  public allToggled: boolean = false;
 
   /**
    * Reloads the page tree
@@ -77,7 +78,6 @@ class Recycler {
       $reloadAction: $(RecyclerIdentifiers.reloadAction),
       $massUndo: $(RecyclerIdentifiers.massUndo),
       $massDelete: $(RecyclerIdentifiers.massDelete),
-      $toggleAll: $(RecyclerIdentifiers.toggleAll),
     };
   }
 
@@ -127,10 +127,10 @@ class Recycler {
     });
 
     // clicking "recover" in single row
-    this.elements.$recyclerTable.on('click', '[data-action=undo]', this.undoRecord);
+    new RegularEvent('click', this.undoRecord).delegateTo(document, RecyclerIdentifiers.undo);
 
     // clicking "delete" in single row
-    this.elements.$recyclerTable.on('click', '[data-action=delete]', this.deleteRecord);
+    new RegularEvent('click', this.deleteRecord).delegateTo(document, RecyclerIdentifiers.delete);
 
     this.elements.$reloadAction.on('click', (e: JQueryEventObject): void => {
       e.preventDefault();
@@ -199,14 +199,9 @@ class Recycler {
     });
 
     // checkboxes in the table
-    this.elements.$toggleAll.on('click', (): void => {
-      this.allToggled = !this.allToggled;
-      $('input[type="checkbox"]').prop('checked', this.allToggled).trigger('change');
-    });
-    this.elements.$recyclerTable.on('change', 'tr input[type=checkbox]', this.handleCheckboxSelects);
-
-    this.elements.$massUndo.on('click', this.undoRecord);
-    this.elements.$massDelete.on('click', this.deleteRecord);
+    new RegularEvent('checkbox:state:changed', this.handleCheckboxStateChanged).bindTo(document);
+    new RegularEvent('multiRecordSelection:action:massundo', this.undoRecord).bindTo(document);
+    new RegularEvent('multiRecordSelection:action:massdelete', this.deleteRecord).bindTo(document);
   }
 
   /**
@@ -230,8 +225,8 @@ class Recycler {
   /**
    * Handles the clicks on checkboxes in the records table
    */
-  private handleCheckboxSelects = (e: JQueryEventObject): void => {
-    const $checkbox = $(e.currentTarget);
+  private handleCheckboxStateChanged = (e: Event): void => {
+    const $checkbox = $(e.target);
     const $tr = $checkbox.parents('tr');
     const table = $tr.data('table');
     const uid = $tr.data('uid');
@@ -239,29 +234,20 @@ class Recycler {
 
     if ($checkbox.prop('checked')) {
       this.markedRecordsForMassAction.push(record);
-      $tr.addClass('warning');
     } else {
       const index = this.markedRecordsForMassAction.indexOf(record);
       if (index > -1) {
         this.markedRecordsForMassAction.splice(index, 1);
       }
-      $tr.removeClass('warning');
     }
 
     if (this.markedRecordsForMassAction.length > 0) {
-      if (this.elements.$massUndo.hasClass('disabled')) {
-        this.elements.$massUndo.removeClass('disabled').removeAttr('disabled');
-      }
-      if (this.elements.$massDelete.hasClass('disabled')) {
-        this.elements.$massDelete.removeClass('disabled').removeAttr('disabled');
-      }
-
-      const btnTextUndo = this.createMessage(TYPO3.lang['button.undoselected'], [this.markedRecordsForMassAction.length]);
-      const btnTextDelete = this.createMessage(TYPO3.lang['button.deleteselected'], [this.markedRecordsForMassAction.length]);
-
-      this.elements.$massUndo.find('span.text').text(btnTextUndo);
-      this.elements.$massDelete.find('span.text').text(btnTextDelete);
-
+      this.elements.$massUndo.find('span.text').text(
+        this.createMessage(TYPO3.lang['button.undoselected'], [this.markedRecordsForMassAction.length])
+      );
+      this.elements.$massDelete.find('span.text').text(
+        this.createMessage(TYPO3.lang['button.deleteselected'], [this.markedRecordsForMassAction.length])
+      );
     } else {
       this.resetMassActionButtons();
     }
@@ -272,10 +258,9 @@ class Recycler {
    */
   private resetMassActionButtons(): void {
     this.markedRecordsForMassAction = [];
-    this.elements.$massUndo.addClass('disabled').attr('disabled', true);
     this.elements.$massUndo.find('span.text').text(TYPO3.lang['button.undo']);
-    this.elements.$massDelete.addClass('disabled').attr('disabled', true);
     this.elements.$massDelete.find('span.text').text(TYPO3.lang['button.delete']);
+    document.dispatchEvent(new Event('multiRecordSelection:actions:hide'));
   }
 
   /**
@@ -350,12 +335,12 @@ class Recycler {
     });
   }
 
-  private deleteRecord = (e: JQueryEventObject): void => {
+  private deleteRecord = (e: Event): void => {
     if (TYPO3.settings.Recycler.deleteDisable) {
       return;
     }
 
-    const $tr = $(e.currentTarget).parents('tr');
+    const $tr = $(e.target).parents('tr');
     const isMassDelete = $tr.parent().prop('tagName') !== 'TBODY'; // deleteRecord() was invoked by the mass delete button
     let records: Array<string>;
     let message: string;
@@ -389,8 +374,8 @@ class Recycler {
     ]);
   }
 
-  private undoRecord = (e: JQueryEventObject): void => {
-    const $tr = $(e.currentTarget).parents('tr');
+  private undoRecord = (e: Event): void => {
+    const $tr = $(e.target).parents('tr');
     const isMassUndo = $tr.parent().prop('tagName') !== 'TBODY'; // undoRecord() was invoked by the mass delete button
 
     let records: Array<string>;
@@ -501,9 +486,6 @@ class Recycler {
           if (reloadPageTree) {
             Recycler.refreshPageTree();
           }
-
-          // Reset toggle state
-          this.allToggled = false;
         });
       },
       complete: () => {

typo3/sysext/recycler/Classes/Controller/RecyclerModuleController.php

@@ -156,6 +156,7 @@ class RecyclerModuleController
     {
         $this->pageRenderer->addInlineSettingArray('Recycler', $this->getJavaScriptConfiguration($request->getAttribute('normalizedParams')));
         $this->pageRenderer->addInlineLanguageLabelFile('EXT:recycler/Resources/Private/Language/locallang.xlf');
+        $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/MultiRecordSelection');
         if ($this->isAccessibleForCurrentUser) {
             $this->moduleTemplate->getDocHeaderComponent()->setMetaInformation($this->pageRecord);
         }

typo3/sysext/recycler/Resources/Private/Partials/RecordsTable/DeletedRecord.html

 <html xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers" data-namespace-typo3-fluid="true">
 <tr data-uid="{record.uid}" data-table="{record.table}" data-recordtitle="{record.title}" data-parent-deleted="{record.isParentDeleted}">
     <td class="nowrap">
-        <label class="btn btn-default btn-checkbox">
-            <input type="checkbox">
-            <span class="t3-icon fa"></span>
-        </label>
+        <span class="form-check form-toggle">
+            <input class="form-check-input t3js-multi-record-selection-check" type="checkbox">
+        </span>
     </td>
     <td class="nowrap">{record.tableTitle}</td>
     <td class="nowrap"><f:format.raw>{record.icon}</f:format.raw> {record.title}</td>

typo3/sysext/recycler/Resources/Private/Templates/RecyclerModule/Index.html

@@ -27,14 +27,12 @@
                 </div>
             </div>
         </form>
-        <f:render section="buttons" arguments="{allowDelete: allowDelete}"/>
-        <div class="table-fit">
+        <f:render section="multiRecordSelectionActions" arguments="{allowDelete: allowDelete}"/>
+        <div class="table-fit mb-0">
             <table class="table table-hover" id="itemsInRecycler">
                 <thead>
                     <tr>
-                        <th>
-                            <button type="button" class="btn btn-default t3js-toggle-all"><core:icon identifier="actions-document-select" /></button>
-                        </th>
+                        <th><f:render section="multiRecordSelectionCheckboxActions" /></th>
                         <th><f:translate key="table.header.recordtype" /></th>
                         <th><f:translate key="table.header.record" /></th>
                         <th><f:translate key="table.header.tstamp" /></th>
@@ -47,27 +45,61 @@
                 </tbody>
             </table>
         </div>
-        <f:render section="buttons" arguments="{allowDelete: allowDelete}"/>
+        <f:render section="multiRecordSelectionActions" arguments="{allowDelete: allowDelete}"/>
         <nav>
         </nav>
     </div>
 </f:section>
 
-<f:section name="buttons">
-    <div class="form-group">
-        <button class="btn btn-default disabled" data-action="massundo" disabled>
-            <core:icon identifier="actions-edit-undo" />
-            <span class="text">
-                <f:translate key="button.undo" />
-            </span>
+<f:section name="multiRecordSelectionCheckboxActions">
+    <div class="btn-group dropdown position-static">
+        <button type="button" class="btn btn-borderless dropdown-toggle" data-bs-target="multi-record-selection-check-actions" data-bs-toggle="dropdown" data-bs-boundary="window" aria-expanded="false">
+            <core:icon identifier="content-special-div" size="small" />
         </button>
-        <f:if condition="{allowDelete}">
-            <button class="btn btn-default disabled" data-action="massdelete" disabled>
-                <core:icon identifier="actions-edit-delete" />
-                <span class="text">
-                    <f:translate key="button.delete" />
-                </span>
-            </button>
-        </f:if>
+        <ul id="multi-record-selection-check-actions" class="dropdown-menu">
+            <li>
+                <button type="button" class="btn btn-link dropdown-item disabled" data-multi-record-selection-check-action="check-all" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.checkAll')}">
+                    <core:icon identifier="actions-check-square" size="small" /> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.checkAll" />
+                </button>
+            </li>
+            <li>
+                <button type="button" class="btn btn-link dropdown-item disabled" data-multi-record-selection-check-action="check-none" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.uncheckAll')}">
+                    <core:icon identifier="actions-square" size="small" /> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.uncheckAll" />
+                </button>
+            </li>
+            <li>
+                <button type="button" class="btn btn-link dropdown-item" data-multi-record-selection-check-action="toggle" title="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.toggleSelection')}">
+                    <core:icon identifier="actions-document-select" size="small" /> <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.toggleSelection" />
+                </button>
+            </li>
+        </ul>
+    </div>
+</f:section>
+
+<f:section name="multiRecordSelectionActions">
+    <div class="multi-record-selection-actions-wrapper">
+        <div class="row row-cols-auto align-items-center g-2 t3js-multi-record-selection-actions hidden">
+            <div class="col">
+                <strong><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.selection"/></strong>
+            </div>
+            <div class="col">
+                <button class="btn btn-default btn-sm" data-multi-record-selection-action="massundo" data-multi-record-selection-action-config='{"idField": "uid"}'>
+                    <core:icon identifier="actions-edit-undo" />
+                    <span class="text">
+                        <f:translate key="button.undo" />
+                    </span>
+                </button>
+            </div>
+            <f:if condition="{allowDelete}">
+                <div class="col">
+                    <button class="btn btn-default btn-sm" data-multi-record-selection-action="massdelete" data-multi-record-selection-action-config='{"idField": "uid"}'>
+                        <core:icon identifier="actions-edit-delete" />
+                        <span class="text">
+                            <f:translate key="button.delete" />
+                        </span>
+                    </button>
+                </div>
+            </f:if>
+        </div>
     </div>
 </f:section>