From d70a909c10f40f38060574167edd572efb19fd40 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Sat, 5 Nov 2022 15:53:26 -0400
Subject: [PATCH] SearchKit - Add UI for configuring autocomplete fields

---
 .../crmSearchAdminDisplay.component.js        | 14 ++++++-
 ....html => crmSearchAdminDisplayHeader.html} |  6 +--
 .../displays/common/addColMenu.html           |  4 +-
 .../crmSearchDisplayAutocomplete.component.js | 24 +++++++++++
 ...earchAdminDisplayAutocomplete.component.js | 42 +++++++++++++++++++
 .../searchAdminDisplayAutocomplete.html       | 39 +++++++++++++++++
 .../searchAdminDisplayGrid.component.js       | 11 ++---
 .../displays/searchAdminDisplayGrid.html      |  1 +
 .../searchAdminDisplayList.component.js       | 11 ++---
 .../displays/searchAdminDisplayList.html      |  1 +
 .../searchAdminDisplayTable.component.js      |  8 ++--
 .../displays/searchAdminDisplayTable.html     |  1 +
 .../displays/searchDisplayAutocomplete.html   |  3 ++
 ext/search_kit/css/crmSearchAdmin.css         |  1 +
 14 files changed, 147 insertions(+), 19 deletions(-)
 rename ext/search_kit/ang/crmSearchAdmin/{crmSearchAdminDisplay.html => crmSearchAdminDisplayHeader.html} (67%)
 create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/crmSearchDisplayAutocomplete.component.js
 create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js
 create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html
 create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/searchDisplayAutocomplete.html

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
index 6e78b8446d..44192f1cd5 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js
@@ -12,7 +12,6 @@
     template: function() {
       // Dynamic template generates switch condition for each display type
       var html =
-        '<div ng-include="\'~/crmSearchAdmin/crmSearchAdminDisplay.html\'"></div>\n' +
         '<div ng-switch="$ctrl.display.type">\n';
       _.each(CRM.crmSearchAdmin.displayTypes, function(type) {
         html +=
@@ -326,6 +325,19 @@
         }
       };
 
+      this.getDefaultLimit = function() {
+        return CRM.crmSearchAdmin.defaultPagerSize;
+      };
+
+      this.getDefaultSort = function() {
+        var apiEntity = ctrl.savedSearch.api_entity,
+          sort = [];
+        if (searchMeta.getEntity(apiEntity).order_by) {
+          sort.push([searchMeta.getEntity(apiEntity).order_by, 'ASC']);
+        }
+        return sort;
+      };
+
       this.fieldsForSort = function() {
         function disabledIf(key) {
           return _.findIndex(ctrl.display.settings.sort, [key]) >= 0;
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplayHeader.html
similarity index 67%
rename from ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html
rename to ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplayHeader.html
index 5600bdd3f2..173701dbcc 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplayHeader.html
@@ -2,9 +2,9 @@
   <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') }}"/>
-    <div class="form-control" ng-class="{disabled: !$ctrl.isSuperAdmin}" title="{{:: $ctrl.aclBypassHelp }}">
+    <div class="form-control" ng-class="{disabled: !$ctrl.parent.isSuperAdmin}" title="{{:: $ctrl.parent.aclBypassHelp }}">
       <label>
-        <input type="checkbox" ng-if="$ctrl.isSuperAdmin" ng-model="$ctrl.display.acl_bypass" style="display: none;">
+        <input type="checkbox" ng-if="$ctrl.parent.isSuperAdmin" ng-model="$ctrl.display.acl_bypass" style="display: none;">
         <i class="crm-i fa-lock text-success" ng-if="!$ctrl.display.acl_bypass"></i>
         <i class="crm-i fa-unlock text-danger" ng-if="$ctrl.display.acl_bypass"></i>
         <span>{{ $ctrl.display.acl_bypass ? ts('Bypass Permissions') : ts('Enforce Permissions') }}</span>
@@ -17,7 +17,7 @@
   </div>
 </fieldset>
 <div class="form-group crm-search-admin-right" ng-if="$ctrl.display.id">
-  <a ng-href="{{ $ctrl.crmSearchAdmin.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + $ctrl.display.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search display on its own page') }}">
+  <a ng-href="{{ $ctrl.parent.crmSearchAdmin.searchDisplayPath + '#/display/' + $ctrl.parent.savedSearch.name + '/' + $ctrl.display.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search display on its own page') }}">
     <i class="crm-i fa-external-link"></i>
     {{:: ts('View Display') }}
   </a>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html b/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html
index bfe415a80a..7ce59d1a95 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html
@@ -3,10 +3,10 @@
   {{:: ts('Add') }} <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
-  <li ng-repeat="(type, col) in $ctrl.parent.colTypes">
+  <li ng-repeat="(type, col) in $ctrl.getColTypes()">
     <a href ng-click="$ctrl.parent.addCol(type)"><i class="fa {{:: col.icon }}"></i> {{:: col.label }}</a>
   </li>
-  <li class="divider" ng-show="$ctrl.parent.hiddenColumns.length"></li>
+  <li class="divider" ng-show="$ctrl.parent.hiddenColumns.length && $ctrl.getColTypes().length"></li>
   <li ng-repeat="col in $ctrl.parent.hiddenColumns">
     <a href ng-click="$ctrl.parent.restoreCol($index)">
       {{:: $ctrl.parent.getFieldLabel(col.key) }}
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/crmSearchDisplayAutocomplete.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/crmSearchDisplayAutocomplete.component.js
new file mode 100644
index 0000000000..4d1261f28f
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/crmSearchDisplayAutocomplete.component.js
@@ -0,0 +1,24 @@
+(function(angular, $, _) {
+  "use strict";
+
+  // This isn't a real display type, it's only used for preview purposes on the Admin screen
+  angular.module('crmSearchAdmin').component('crmSearchDisplayAutocomplete', {
+    bindings: {
+      apiEntity: '@',
+      search: '<',
+      display: '<',
+    },
+    templateUrl: '~/crmSearchAdmin/displays/searchDisplayAutocomplete.html',
+    controller: function($scope, searchMeta) {
+      var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
+        // Mix in properties of searchDisplayBaseTrait
+        ctrl = this;
+
+      this.$onInit = function() {
+        this.placeholder = ts('Select %1', {1: searchMeta.getEntity(ctrl.apiEntity).title});
+      };
+
+    }
+  });
+
+})(angular, CRM.$, CRM._);
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js
new file mode 100644
index 0000000000..df55c2e731
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js
@@ -0,0 +1,42 @@
+(function(angular, $, _) {
+  "use strict";
+
+  angular.module('crmSearchAdmin').component('searchAdminDisplayAutocomplete', {
+    bindings: {
+      display: '<',
+      apiEntity: '<',
+      apiParams: '<'
+    },
+    require: {
+      parent: '^crmSearchAdminDisplay'
+    },
+    templateUrl: '~/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html',
+    controller: function($scope, searchMeta) {
+      var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
+        ctrl = this,
+        colTypes = [];
+
+      this.getColTypes = function() {
+        return colTypes;
+      };
+
+      this.$onInit = function () {
+        if (!ctrl.display.settings) {
+          ctrl.display.settings = {
+            sort: ctrl.parent.getDefaultSort(),
+            columns: []
+          };
+          var labelField = searchMeta.getEntity(ctrl.apiEntity).label_field;
+          _.each([labelField, 'description'], function(field) {
+            if (_.includes(ctrl.parent.savedSearch.api_params.select, field)) {
+              ctrl.display.settings.columns.push(searchMeta.fieldToColumn(field, {}));
+            }
+          });
+        }
+        ctrl.parent.initColumns({});
+      };
+
+    }
+  });
+
+})(angular, CRM.$, CRM._);
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html
new file mode 100644
index 0000000000..a59abe35fb
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html
@@ -0,0 +1,39 @@
+<div class="help-block">
+
+</div>
+<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
+
+<fieldset class="crm-search-admin-edit-columns-wrapper">
+  <legend>
+    {{:: ts('Fields') }}
+    <div ng-if="$ctrl.parent.hiddenColumns.length" ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group btn-group-xs"></div>
+  </legend>
+  <div class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
+    <fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable">
+      <legend>
+        <i class="crm-i fa-arrows crm-search-move-icon"></i>
+        {{ $index ? ts('Description %1:', {1: $index}) : ts('Title:') }} {{ $ctrl.parent.getColLabel(col) }}
+      </legend>
+      <button type="button" class="btn btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
+        <i class="crm-i fa-ban"></i>
+      </button>
+      <div class="form-inline crm-search-admin-flex-row">
+        <label title="{{:: ts('Text to display if the field contents are empty.') }}">
+          <input type="checkbox" ng-checked="col.empty_value" ng-click="$ctrl.parent.toggleEmptyVal(col)" >
+          {{:: ts('Empty placeholder') }}
+        </label>
+        <textarea rows="2" class="form-control crm-flex-1" ng-if="col.empty_value" ng-model="col.empty_value" ng-model-options="{updateOn: 'blur'}"></textarea>
+        <crm-search-admin-token-select ng-if="col.empty_value" model="col" field="empty_value" suffix=":label"></crm-search-admin-token-select>
+      </div>
+      <div class="form-inline crm-search-admin-flex-row">
+        <label title="{{:: ts('Change the contents of this field, or combine multiple field values.') }}">
+          <input type="checkbox" ng-checked="col.rewrite" ng-click="$ctrl.parent.toggleRewrite(col)" >
+          {{:: ts('Rewrite Text') }}
+        </label>
+        <textarea rows="2" class="form-control crm-flex-1" ng-if="col.rewrite" ng-model="col.rewrite" ng-model-options="{updateOn: 'blur'}"></textarea>
+        <crm-search-admin-token-select ng-if="col.rewrite" model="col" field="rewrite" suffix=":label"></crm-search-admin-token-select>
+      </div>
+      <search-admin-icons item="col" ng-if="!$index"></search-admin-icons>
+    </fieldset>
+  </div>
+</fieldset>
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js
index 3273fafa1c..e5295b3cce 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js
@@ -15,17 +15,18 @@
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
         ctrl = this;
 
+      this.getColTypes = function() {
+        return ctrl.parent.colTypes;
+      };
+
       this.$onInit = function () {
         if (!ctrl.display.settings) {
           ctrl.display.settings = {
             colno: '3',
-            limit: CRM.crmSearchAdmin.defaultPagerSize,
-            sort: [],
+            limit: ctrl.parent.getDefaultLimit(),
+            sort: ctrl.parent.getDefaultSort(),
             pager: {}
           };
-          if (searchMeta.getEntity(ctrl.apiEntity).order_by) {
-            ctrl.display.settings.sort.push([searchMeta.getEntity(ctrl.apiEntity).order_by, 'ASC']);
-          }
         }
         ctrl.parent.initColumns({});
       };
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
index a614443acd..fdc5eeed2c 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
@@ -1,3 +1,4 @@
+<div ng-include="'~/crmSearchAdmin/crmSearchAdminDisplayHeader.html'"></div>
 <fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
 <fieldset>
   <div class="form-inline">
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.component.js
index de64dfb92c..6705513402 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.component.js
@@ -15,6 +15,10 @@
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
         ctrl = this;
 
+      this.getColTypes = function() {
+        return ctrl.parent.colTypes;
+      };
+
       this.symbols = {
         ul: [
           {char: '', label: ts('Default')},
@@ -34,13 +38,10 @@
         if (!ctrl.display.settings) {
           ctrl.display.settings = {
             style: 'ul',
-            limit: CRM.crmSearchAdmin.defaultPagerSize,
-            sort: [],
+            limit: ctrl.parent.getDefaultLimit(),
+            sort: ctrl.parent.getDefaultSort(),
             pager: {}
           };
-          if (searchMeta.getEntity(ctrl.apiEntity).order_by) {
-            ctrl.display.settings.sort.push([searchMeta.getEntity(ctrl.apiEntity).order_by, 'ASC']);
-          }
         }
         ctrl.parent.initColumns({});
       };
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index 57a5dbac5c..3253059f54 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -1,3 +1,4 @@
+<div ng-include="'~/crmSearchAdmin/crmSearchAdminDisplayHeader.html'"></div>
 <fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
 <fieldset>
   <div class="form-inline">
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
index b735571bfe..e151bf5758 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
@@ -42,12 +42,14 @@
         }
       };
 
+      this.getColTypes = function() {
+        return ctrl.parent.colTypes;
+      };
+
       this.$onInit = function () {
         if (!ctrl.display.settings) {
           ctrl.display.settings = _.extend({}, _.cloneDeep(CRM.crmSearchAdmin.defaultDisplay.settings), {columns: null, pager: {}});
-          if (searchMeta.getEntity(ctrl.apiEntity).order_by) {
-            ctrl.display.settings.sort.push([searchMeta.getEntity(ctrl.apiEntity).order_by, 'ASC']);
-          }
+          ctrl.display.settings.sort = ctrl.parent.getDefaultSort();
         }
         // Displays created prior to 5.43 may not have this property
         ctrl.display.settings.classes = ctrl.display.settings.classes || [];
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index f45b49342e..9de37446b5 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -1,3 +1,4 @@
+<div ng-include="'~/crmSearchAdmin/crmSearchAdminDisplayHeader.html'"></div>
 <fieldset ng-if="!$ctrl.display.settings.draggable" ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
 <fieldset>
   <div ng-if="$ctrl.canBeDraggable" class="form-inline">
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchDisplayAutocomplete.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchDisplayAutocomplete.html
new file mode 100644
index 0000000000..12a5eaa697
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchDisplayAutocomplete.html
@@ -0,0 +1,3 @@
+<fieldset>
+  <input class="form-control" placeholder="{{:: $ctrl.placeholder }}" crm-autocomplete="$ctrl.apiEntity" crm-autocomplete-params="{savedSearch: $ctrl.search, display: $ctrl.display}">
+</fieldset>
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index 0c51a57aa9..89c5391b74 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -100,6 +100,7 @@
   min-height: 3.5em;
 }
 
+#bootstrap-theme.crm-search .form-control label,
 #bootstrap-theme.crm-search legend[ng-click] {
   cursor: pointer;
 }
-- 
2.25.1