From 9e827e8e0ddb7456542f973a0f358007898cc065 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 12 Feb 2021 09:27:55 -0500
Subject: [PATCH] SearchKit - Add orderBy selector when configuring displays

---
 .../crmSearchAdmin.component.js               | 32 +++++++++++++------
 .../crmSearchAdminDisplay.component.js        | 27 ++++++++++++++--
 .../crmSearchAdmin/crmSearchAdminDisplay.html |  1 -
 .../crmSearchAdminDisplaySort.html            | 13 ++++++++
 .../displays/searchAdminDisplayList.html      |  1 +
 .../displays/searchAdminDisplayTable.html     |  1 +
 6 files changed, 63 insertions(+), 12 deletions(-)
 create mode 100644 ext/search/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html

diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js
index ba560f038c..93387d5eb4 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdmin.component.js
@@ -690,28 +690,25 @@
       }
 
       $scope.fieldsForGroupBy = function() {
-        return {results: getAllFields('', function(key) {
+        return {results: ctrl.getAllFields('', function(key) {
             return _.contains(ctrl.savedSearch.api_params.groupBy, key);
           })
         };
       };
 
       $scope.fieldsForSelect = function() {
-        return {results: getAllFields(':label', function(key) {
+        return {results: ctrl.getAllFields(':label', function(key) {
             return _.contains(ctrl.savedSearch.api_params.select, key);
           })
         };
       };
 
       $scope.fieldsForWhere = function() {
-        return {results: getAllFields(':name', _.noop)};
+        return {results: ctrl.getAllFields(':name')};
       };
 
       $scope.fieldsForHaving = function() {
-        return {results: _.transform(ctrl.savedSearch.api_params.select, function(fields, name) {
-          var info = searchMeta.parseExpr(name);
-          fields.push({id: info.alias + info.suffix, text: ctrl.getFieldLabel(name)});
-        })};
+        return {results: ctrl.getSelectFields()};
       };
 
       $scope.sortableColumnOptions = {
@@ -735,7 +732,8 @@
         });
       }
 
-      function getAllFields(suffix, disabledIf) {
+      this.getAllFields = function(suffix, disabledIf) {
+        disabledIf = disabledIf || _.noop;
         function formatFields(entityName, join) {
           var prefix = join ? join.alias + '.' : '',
             result = [];
@@ -782,7 +780,23 @@
           });
         });
         return result;
-      }
+      };
+
+      this.getSelectFields = function(disabledIf) {
+        disabledIf = disabledIf || _.noop;
+        return _.transform(ctrl.savedSearch.api_params.select, function(fields, name) {
+          var info = searchMeta.parseExpr(name);
+          var item = {
+            id: info.alias + info.suffix,
+            text: ctrl.getFieldLabel(name),
+            description: info.field && info.field.description
+          };
+          if (disabledIf(item.id)) {
+            item.disabled = true;
+          }
+          fields.push(item);
+        });
+      };
 
       /**
        * Fetch pseudoconstants for main entity + joined entities
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index 24cd177261..1880662b4e 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -6,6 +6,9 @@
       savedSearch: '<',
       display: '<'
     },
+    require: {
+      crmSearchAdmin: '^crmSearchAdmin'
+    },
     template: function() {
       // Dynamic template generates switch condition for each display type
       var html =
@@ -33,6 +36,8 @@
       var ts = $scope.ts = CRM.ts(),
         ctrl = this;
 
+      this.preview = this.stale = false;
+
       function fieldToColumn(fieldExpr) {
         var info = searchMeta.parseExpr(fieldExpr);
         return {
@@ -65,8 +70,6 @@
         }
       };
 
-      this.preview = this.stale = false;
-
       this.previewDisplay = function() {
         ctrl.preview = !ctrl.preview;
         ctrl.stale = false;
@@ -77,6 +80,26 @@
         }
       };
 
+      this.fieldsForSort = function() {
+        function disabledIf(key) {
+          return _.findIndex(ctrl.display.settings.sort, [key]) >= 0;
+        }
+        return {
+          results: [{
+            text: ts('Columns'),
+            children: ctrl.crmSearchAdmin.getSelectFields(disabledIf)
+          }].concat(ctrl.crmSearchAdmin.getAllFields('', disabledIf))
+        };
+      };
+
+      // Generic function to add to a setting array if the item is not already there
+      this.pushSetting = function(name, value) {
+        ctrl.display.settings[name] = ctrl.display.settings[name] || [];
+        if (_.findIndex(ctrl.display.settings[name], value) < 0) {
+          ctrl.display.settings[name].push(value);
+        }
+      };
+
       $scope.$watch('$ctrl.display.settings', function() {
         ctrl.stale = true;
       }, true);
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.html b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.html
index e97e753bf7..52bb428b6d 100644
--- a/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.html
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplay.html
@@ -2,6 +2,5 @@
   <div class="form-inline">
     <label for="crm-search-admin-display-label">{{:: ts('Name:') }} <span class="crm-marker">*</span></label>
     <input id="crm-search-admin-display-label" type="text" class="form-control" ng-model="$ctrl.display.label" required placeholder="{{ ts('Untitled') }}"/>
-    <label class="pull-right">{{:: $ctrl.displayTypes[$ctrl.display.type].label }}</label>
   </div>
 </fieldset>
diff --git a/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html
new file mode 100644
index 0000000000..43b412b436
--- /dev/null
+++ b/ext/search/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html
@@ -0,0 +1,13 @@
+<div class="form-inline" ng-repeat="sort in $ctrl.display.settings.sort">
+  <label for="crm-search-display-sort-{{$index}}">{{ $index ? ts('Also by:') : ts('Sort by:') }}</label>
+  <input id="crm-search-display-sort-{{$index}}" class="form-control huge" ng-model="sort[0]" crm-ui-select="{data: $ctrl.crmSearchAdminDisplay.fieldsForSort}" />
+  <select class="form-control" ng-model="sort[1]">
+    <option value="ASC">{{ ts('Ascending') }}</option>
+    <option value="DESC">{{ ts('Descending') }}</option>
+  </select>
+  <a href class="crm-hover-button" title="{{:: ts('Clear') }}" ng-click="$ctrl.display.settings.sort.splice($index, 1)"><i class="crm-i fa-times" aria-hidden="true"></i></a>
+</div>
+<div class="form-inline">
+  <label for="crm-search-display-add-sort">{{ $ctrl.display.settings.sort.length ? ts('Also by:') : ts('Sort by:') }}</label>
+  <input id="crm-search-display-add-sort" class="form-control crm-action-menu fa-plus huge" ng-model="controls.sort" crm-ui-select="{placeholder: ts('Select field'), data: $ctrl.crmSearchAdminDisplay.fieldsForSort}" ng-change="$ctrl.crmSearchAdminDisplay.pushSetting('sort', [controls.sort, 'ASC']); controls.sort = '';"/>
+</div>
diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index e877777e81..f27f7a3617 100644
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -1,3 +1,4 @@
+<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
 <fieldset>
   <div class="form-inline">
     <label for="crm-search-admin-display-style">{{:: ts('Style:') }}</label>
diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 3589b56c03..2068cc2b2a 100644
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -1,3 +1,4 @@
+<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
 <fieldset>
   <div class="form-inline">
     <label for="crm-search-admin-display-limit">{{:: ts('Results to display (0 for no limit):') }}</label>
-- 
2.25.1