From db0552d09e5467cbec745a5a63a1dc3cfac93d0c Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 19 May 2021 10:41:39 -0400
Subject: [PATCH] SearchKit - Click-sort column headers on list page

---
 .../crmSearchAdmin/searchList.controller.js   | 35 +++++++----
 .../ang/crmSearchAdmin/searchList.html        | 60 ++++++++++++++-----
 2 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/searchList.controller.js b/ext/search_kit/ang/crmSearchAdmin/searchList.controller.js
index 53e4ac32b1..be17c652da 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchList.controller.js
+++ b/ext/search_kit/ang/crmSearchAdmin/searchList.controller.js
@@ -1,17 +1,20 @@
 (function(angular, $, _) {
   "use strict";
 
-  angular.module('crmSearchAdmin').controller('searchList', function($scope, savedSearches, crmApi4) {
+  angular.module('crmSearchAdmin').controller('searchList', function($scope, savedSearches, crmApi4, searchMeta) {
     var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
       ctrl = $scope.$ctrl = this;
     $scope.formatDate = CRM.utils.formatDate;
     this.savedSearches = savedSearches;
+    this.sortField = 'modified_date';
+    this.sortDir = true;
     this.afformEnabled = CRM.crmSearchAdmin.afformEnabled;
     this.afformAdminEnabled = CRM.crmSearchAdmin.afformAdminEnabled;
 
-    this.entityTitles = _.transform(CRM.crmSearchAdmin.schema, function(titles, entity) {
-      titles[entity.name] = entity.title_plural;
-    }, {});
+    _.each(savedSearches, function(search) {
+      search.entity_title = searchMeta.getEntity(search.api_entity).title_plural;
+      search.afform_count = 0;
+    });
 
     this.searchPath = CRM.url('civicrm/search');
     this.afformPath = CRM.url('civicrm/admin/afform');
@@ -20,6 +23,12 @@
       return encodeURI(angular.toJson(params));
     };
 
+    // Change sort field/direction when clicking a column header
+    this.sortBy = function(col) {
+      ctrl.sortDir = ctrl.sortField === col ? !ctrl.sortDir : false;
+      ctrl.sortField = col;
+    };
+
     this.deleteSearch = function(search) {
       var index = _.findIndex(savedSearches, {id: search.id});
       if (index > -1) {
@@ -45,13 +54,17 @@
         _.each(afforms, function(afform) {
           var searchName = afform.layout.match(/<crm-search-display-[^>]+search-name[ ]*=[ ]*['"]([^"']+)/);
           if (searchName) {
-            ctrl.afforms[searchName[1]] = ctrl.afforms[searchName[1]] || [];
-            ctrl.afforms[searchName[1]].push({
-              title: afform.title,
-              name: afform.name,
-              // FIXME: This is the view url, currently not exposed to the UI, as BS3 doesn't support submenus.
-              url: afform.server_route ? CRM.url(afform.server_route) : null
-            });
+            var search = _.find(ctrl.savedSearches, {name: searchName[1]});
+            if (search) {
+              search.afform_count++;
+              ctrl.afforms[searchName[1]] = ctrl.afforms[searchName[1]] || [];
+              ctrl.afforms[searchName[1]].push({
+                title: afform.title,
+                name: afform.name,
+                // FIXME: This is the view url, currently not exposed to the UI, as BS3 doesn't support submenus.
+                url: afform.server_route ? CRM.url(afform.server_route) : null
+              });
+            }
           }
         });
       });
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchList.html b/ext/search_kit/ang/crmSearchAdmin/searchList.html
index 8eef0258c5..ce4eb169ae 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchList.html
@@ -11,22 +11,48 @@
   <table>
     <thead>
       <tr>
-        <th>{{:: ts('ID') }}</th>
-        <th>{{:: ts('Label') }}</th>
-        <th>{{:: ts('For') }}</th>
-        <th>{{:: ts('Displays') }}</th>
-        <th>{{:: ts('Smart Group') }}</th>
-        <th ng-if="$ctrl.afformEnabled">{{:: ts('Forms') }}</th>
-        <th>{{:: ts('Created') }}</th>
-        <th>{{:: ts('Last Modified') }}</th>
+        <th ng-click="$ctrl.sortBy('label')">
+          <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'label'"></i>
+          <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'label'"></i>
+          {{:: ts('Label') }}
+        </th>
+        <th ng-click="$ctrl.sortBy('entity_title')">
+          <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'entity_title'"></i>
+          <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'entity_title'"></i>
+          {{:: ts('For') }}
+        </th>
+        <th ng-click="$ctrl.sortBy('display_name.length')">
+          <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'display_name.length'"></i>
+          <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'display_name.length'"></i>
+          {{:: ts('Displays') }}
+        </th>
+        <th ng-click="$ctrl.sortBy('groups[0]')">
+          <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'groups[0]'"></i>
+          <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'groups[0]'"></i>
+          {{:: ts('Smart Group') }}
+        </th>
+        <th ng-if="$ctrl.afformEnabled" ng-click="$ctrl.sortBy('afform_count')">
+          <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'afform_count'"></i>
+          <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'afform_count'"></i>
+          {{:: ts('Forms') }}
+        </th>
+        <th ng-click="$ctrl.sortBy('created_date')">
+          <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'created_date'"></i>
+          <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'created_date'"></i>
+          {{:: ts('Created') }}
+        </th>
+        <th ng-click="$ctrl.sortBy('modified_date')">
+          <i class="crm-i fa-sort disabled" ng-if="$ctrl.sortField !== 'modified_date'"></i>
+          <i class="crm-i fa-sort-{{ $ctrl.sortDir ? 'asc' : 'desc' }}" ng-if="$ctrl.sortField === 'modified_date'"></i>
+          {{:: ts('Last Modified') }}
+        </th>
         <th></th>
       </tr>
     </thead>
     <tbody>
-      <tr ng-repeat="search in $ctrl.savedSearches | filter:$ctrl.searchFilter">
-        <td>{{:: search.id }}</td>
+      <tr ng-repeat="search in $ctrl.savedSearches | filter:$ctrl.searchFilter | orderBy:$ctrl.sortField:$ctrl.sortDir">
         <td>{{:: search.label }}</td>
-        <td>{{:: $ctrl.entityTitles[search.api_entity] }}</td>
+        <td>{{:: search.entity_title }}</td>
         <td>
           <div class="btn-group">
             <button type="button" disabled ng-if="!search.display_name" class="btn btn-xs dropdown-toggle btn-primary-outline">
@@ -49,7 +75,7 @@
         <td ng-if="::$ctrl.afformEnabled">
           <div class="btn-group">
             <button type="button" ng-click="$ctrl.loadAfforms()" ng-if="search.display_name" class="btn btn-xs dropdown-toggle btn-primary-outline" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              {{ $ctrl.afforms ? ($ctrl.afforms[search.name] && $ctrl.afforms[search.name].length === 1 ? ts('1 Form') : ts('%1 Forms', {1: $ctrl.afforms[search.name] ? $ctrl.afforms[search.name].length : 0})) : ts('Forms...') }}
+              {{ $ctrl.afforms ? (search.afform_count === 1 ? ts('1 Form') : ts('%1 Forms', {1: search.afform_count})) : ts('Forms...') }}
               <span class="caret"></span>
             </button>
             <ul class="dropdown-menu">
@@ -59,7 +85,7 @@
                 </a>
               </li>
               <li class="divider" role="separator" ng-if="::$ctrl.afformAdminEnabled"></li>
-              <li ng-if="!$ctrl.afforms || !$ctrl.afforms[search.name]" class="disabled">
+              <li ng-if="!search.afform_count" class="disabled">
                 <a href>
                   <i ng-if="!$ctrl.afforms" class="crm-i fa-spinner fa-spin"></i>
                   <em ng-if="$ctrl.afforms && !$ctrl.afforms[search.name]">{{:: ts('None Found') }}</em>
@@ -74,8 +100,12 @@
             </ul>
           </div>
         </td>
-        <td>{{:: ts('%1 by %2', {1: formatDate(search.created_date), 2: search['created.display_name']}) }}</td>
-        <td>{{:: ts('%1 by %2', {1: formatDate(search.created_date), 2: search['modified.display_name']}) }}</td>
+        <td title="{{:: formatDate(search.created_date, null, true) }}">
+          {{:: search['created.display_name'] ? ts('%1 by %2', {1: formatDate(search.created_date), 2: search['created.display_name']}) : formatDate(search.created_date) }}
+        </td>
+        <td title="{{:: formatDate(search.modified_date, null, true) }}">
+          {{:: search['modified.display_name'] ? ts('%1 by %2', {1: formatDate(search.modified_date), 2: search['modified.display_name']}) : formatDate(search.modified_date) }}
+        </td>
         <td class="text-right">
           <a class="btn btn-xs btn-default" href="#/edit/{{:: search.id }}">{{:: ts('Edit') }}</a>
           <a class="btn btn-xs btn-default" href="#/create/{{:: search.api_entity + '?params=' + $ctrl.encode(search.api_params) }}">{{:: ts('Clone') }}</a>
-- 
2.25.1