Dashboard - Sort inactive dashlets by label, add search box.

This makes dashlets easier to find if there is a large number.
civicrm · May 11, 2022 · 1c07ebb · 1c07ebb
1 parent 5376bfc
commit 1c07ebb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/ang/crmDashboard/Dashboard.html b/ang/crmDashboard/Dashboard.html
@@ -1,17 +1,18 @@
 <div id="civicrm-dashboard">
   <fieldset class="crm-inactive-dashlet-fieldset">
     <legend>
-      <a href class="crm-hover-button" ng-click="$ctrl.showInactive = !$ctrl.showInactive">
+      <a href class="crm-hover-button" ng-click="$ctrl.toggleInactive()">
         <i class="crm-i fa-{{ $ctrl.showInactive ? 'minus' : 'plus' }}" aria-hidden="true"></i>
         {{ $ctrl.inactive.length === 1 ? ts('1 Available Dashlet') : ts('%1 Available Dashlets', {1: $ctrl.inactive.length}) }}
       </a>
+      <input ng-if="$ctrl.showInactive" class="crm-form-text" ng-model="$ctrl.filterInactive" type="search" placeholder="{{:: ts('Filter by title...') }}">
     </legend>
     <div ng-if="$ctrl.showInactive" ng-model="$ctrl.inactive" ui-sortable="$ctrl.sortableOptions" class="crm-dashboard-droppable">
       <div class="help">
         {{ ts('Drag and drop dashlets onto the left or right columns below to add them to your dashboard. Changes are automatically saved.') }}
         <a crm-ui-help="hs({id: 'dash_configure', title: ts('Dashboard Configuration')})"></a>
       </div>
-      <div ng-repeat="dashlet in $ctrl.inactive" class="crm-inactive-dashlet">
+      <div ng-repeat="dashlet in $ctrl.inactive" class="crm-inactive-dashlet" ng-show="$ctrl.filterApplies(dashlet)">
         <crm-inactive-dashlet dashlet="dashlet" delete="$ctrl.deleteDashlet($index)"></crm-inactive-dashlet>
       </div>
     </div>

diff --git a/ang/crmDashboard/crmDashboard.component.js b/ang/crmDashboard/crmDashboard.component.js
@@ -68,9 +68,27 @@
         });
       }, 2000);
 
+      // Sort inactive dashlets by label. This makes them easier to find if there is a large number.
+      function sortInactive() {
+        ctrl.inactive = _.sortBy(ctrl.inactive, 'label');
+      }
+
+      // Show/hide inactive dashlets
+      this.toggleInactive = function() {
+        // Ensure inactive dashlets are sorted before showing them
+        sortInactive();
+        ctrl.showInactive = !ctrl.showInactive;
+      };
+
+      this.filterApplies = function(dashlet) {
+        return !ctrl.filterInactive || _.includes(dashlet.label.toLowerCase(), ctrl.filterInactive.toLowerCase());
+      };
+
       this.removeDashlet = function(column, index) {
         ctrl.inactive.push(ctrl.columns[column][index]);
         ctrl.columns[column].splice(index, 1);
+        // Place the dashlet back in the correct abc order
+        sortInactive();
       };
 
       this.deleteDashlet = function(index) {