From 7c219eb30eb84e66570bcea8a53f7df0c457515e Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 20 Jul 2021 21:03:27 -0400
Subject: [PATCH] SearchKit - Refactor pick-lists to use onCrmUiSelect
 directive

---
 .../ang/crmSearchAdmin/compose/criteria.html  | 10 ++++-
 .../ang/crmSearchAdmin/compose/results.html   |  4 +-
 .../crmSearchAdmin.component.js               | 45 +++++++++----------
 .../crmSearchAdminDisplaySort.html            |  5 ++-
 .../crmSearchClause.component.js              | 15 +++----
 .../ang/crmSearchAdmin/crmSearchClause.html   |  4 +-
 6 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/compose/criteria.html b/ext/search_kit/ang/crmSearchAdmin/compose/criteria.html
index b45e138e00..8aeb118781 100644
--- a/ext/search_kit/ang/crmSearchAdmin/compose/criteria.html
+++ b/ext/search_kit/ang/crmSearchAdmin/compose/criteria.html
@@ -16,7 +16,10 @@
       <fieldset>
         <div class="form-inline">
           <select class="form-control" ng-model="controls.joinType" ng-options="o.k as o.v for o in ::joinTypes" ></select>
-          <input id="crm-search-add-join" class="form-control crm-action-menu fa-plus huge" ng-model="controls.join" crm-ui-select="{placeholder: ts('Entity'), data: getJoinEntities}" ng-change="addJoin()"/>
+          <input id="crm-search-add-join"
+                 class="form-control crm-action-menu fa-plus"
+                 crm-ui-select="{placeholder: ts('Entity'), data: getJoinEntities, dropdownCss: {width: '275px'}}"
+                 on-crm-ui-select="$ctrl.addJoin(selection)">
         </div>
       </fieldset>
     </div>
@@ -27,7 +30,10 @@
         <hr>
       </div>
       <div class="form-inline">
-        <input id="crm-search-add-groupBy" class="form-control crm-action-menu fa-plus huge" ng-model="controls.groupBy" crm-ui-select="{placeholder: ts('Group By'), data: fieldsForGroupBy}" ng-change="addParam('groupBy')"/>
+        <input id="crm-search-add-groupBy"
+               class="form-control crm-action-menu fa-plus"
+               crm-ui-select="{placeholder: ts('Group By'), data: fieldsForGroupBy, dropdownCss: {width: '300px'}}"
+               on-crm-ui-select="$ctrl.addParam('groupBy', selection)" >
       </div>
       <fieldset id="crm-search-build-group-aggregate" ng-if="$ctrl.savedSearch.api_params.groupBy.length" class="crm-collapsible collapsed">
         <legend class="collapsible-title">{{:: ts('Aggregate fields') }}</legend>
diff --git a/ext/search_kit/ang/crmSearchAdmin/compose/results.html b/ext/search_kit/ang/crmSearchAdmin/compose/results.html
index 1d760406ab..1f7f053176 100644
--- a/ext/search_kit/ang/crmSearchAdmin/compose/results.html
+++ b/ext/search_kit/ang/crmSearchAdmin/compose/results.html
@@ -13,7 +13,9 @@
         </span>
       </th>
       <th class="form-inline">
-        <input class="form-control crm-action-menu fa-plus" ng-model="controls.select" crm-ui-select="::{data: fieldsForSelect, placeholder: ts('Add')}" ng-change="addParam('select')">
+        <input class="form-control crm-action-menu fa-plus"
+               crm-ui-select="::{data: fieldsForSelect, placeholder: ts('Add'), width: '80px', containerCss: {minWidth: '80px'}, dropdownCss: {width: '300px'}}"
+               on-crm-ui-select="$ctrl.addParam('select', selection)" >
       </th>
     </tr>
   </thead>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
index c4a320659f..0b3e361dc7 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
@@ -246,28 +246,24 @@
         return {results: addEntityJoins(ctrl.savedSearch.api_entity)};
       };
 
-      $scope.addJoin = function() {
-        // Debounce the onchange event using timeout
-        $timeout(function() {
-          if ($scope.controls.join) {
-            ctrl.savedSearch.api_params.join = ctrl.savedSearch.api_params.join || [];
-            var join = searchMeta.getJoin($scope.controls.join),
-              entity = searchMeta.getEntity(join.entity),
-              params = [$scope.controls.join, $scope.controls.joinType || 'LEFT'];
-            _.each(_.cloneDeep(join.conditions), function(condition) {
-              params.push(condition);
-            });
-            _.each(_.cloneDeep(join.defaults), function(condition) {
-              params.push(condition);
-            });
-            ctrl.savedSearch.api_params.join.push(params);
-            if (entity.label_field && $scope.controls.joinType !== 'EXCLUDE') {
-              ctrl.savedSearch.api_params.select.push(join.alias + '.' + entity.label_field);
-            }
-            loadFieldOptions();
+      this.addJoin = function(value) {
+        if (value) {
+          ctrl.savedSearch.api_params.join = ctrl.savedSearch.api_params.join || [];
+          var join = searchMeta.getJoin(value),
+            entity = searchMeta.getEntity(join.entity),
+            params = [value, $scope.controls.joinType || 'LEFT'];
+          _.each(_.cloneDeep(join.conditions), function(condition) {
+            params.push(condition);
+          });
+          _.each(_.cloneDeep(join.defaults), function(condition) {
+            params.push(condition);
+          });
+          ctrl.savedSearch.api_params.join.push(params);
+          if (entity.label_field && $scope.controls.joinType !== 'EXCLUDE') {
+            ctrl.savedSearch.api_params.select.push(join.alias + '.' + entity.label_field);
           }
-          $scope.controls.join = '';
-        });
+          loadFieldOptions();
+        }
       };
 
       // Remove an explicit join + all SELECT, WHERE & other JOINs that use it
@@ -408,9 +404,9 @@
         return 'fa-sort disabled';
       };
 
-      $scope.addParam = function(name) {
-        if ($scope.controls[name] && !_.contains(ctrl.savedSearch.api_params[name], $scope.controls[name])) {
-          ctrl.savedSearch.api_params[name].push($scope.controls[name]);
+      this.addParam = function(name, value) {
+        if (value && !_.contains(ctrl.savedSearch.api_params[name], value)) {
+          ctrl.savedSearch.api_params[name].push(value);
           if (name === 'groupBy') {
             // Expand the aggregate block
             $timeout(function() {
@@ -418,7 +414,6 @@
             }, 10);
           }
         }
-        $scope.controls[name] = '';
       };
 
       // Deletes an item from an array param
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html
index 18d9decbf3..4e548899aa 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplaySort.html
@@ -9,5 +9,8 @@
 </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.parent.fieldsForSort}" ng-change="$ctrl.parent.pushSetting('sort', [controls.sort, 'ASC']); controls.sort = '';"/>
+  <input id="crm-search-display-add-sort"
+         class="form-control crm-action-menu fa-plus"
+         crm-ui-select="{placeholder: ts('Select field'), data: $ctrl.parent.fieldsForSort, dropdownCss: {width: '300px'}}"
+         on-crm-ui-select="$ctrl.parent.pushSetting('sort', [selection, 'ASC'])" >
 </div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchClause.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchClause.component.js
index 4d2c8072b6..c2b21354eb 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchClause.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchClause.component.js
@@ -93,15 +93,12 @@
         $('.api4-input.form-inline.ui-sortable-helper').css('margin-left', '' + offset + 'px');
       }
 
-      this.addClause = function() {
-        $timeout(function() {
-          if (ctrl.newClause) {
-            var newIndex = ctrl.clauses.length;
-            ctrl.clauses.push([ctrl.newClause, '=', '']);
-            ctrl.newClause = null;
-            updateOperators(ctrl.clauses[newIndex]);
-          }
-        });
+      this.addClause = function(value) {
+        if (value) {
+          var newIndex = ctrl.clauses.length;
+          ctrl.clauses.push([value, '=', '']);
+          updateOperators(ctrl.clauses[newIndex]);
+        }
       };
 
       this.deleteRow = function(index) {
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchClause.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchClause.html
index 163e31f39d..4fc255e6eb 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchClause.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchClause.html
@@ -38,5 +38,7 @@
       </ul>
     </div>
   </div>
-  <input class="form-control collapsible-optgroups" ng-model="$ctrl.newClause" ng-change="$ctrl.addClause()" crm-ui-select="{data: $ctrl.fields, placeholder: $ctrl.placeholder || ts('Select field')}" />
+  <input class="form-control collapsible-optgroups"
+         on-crm-ui-select="$ctrl.addClause(selection)"
+         crm-ui-select="{data: $ctrl.fields, placeholder: $ctrl.placeholder || ts('Select field')}" >
 </div>
-- 
2.25.1