Merge pull request #22653 from colemanw/searchKitOperatorFixes

SearchKit - Fix selecting operators and values in clauses
civicrm · Jan 29, 2022 · ba5702a · ba5702a
2 parents 660c4ec + 1415fdc
commit ba5702a
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 24 deletions.
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchCondition.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchCondition.component.js
@@ -7,10 +7,10 @@
       clause: '<',
       format: '<',
       optionKey: '<',
-      offset: '@'
+      offset: '<'
     },
     templateUrl: '~/crmSearchAdmin/crmSearchCondition.html',
-    controller: function ($scope, $element, searchMeta) {
+    controller: function ($scope) {
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
         ctrl = this;
       this.operators = {};
@@ -30,6 +30,30 @@
         }
       }
 
+      function getValue() {
+        return ctrl.clause[1 + ctrl.offset];
+      }
+
+      function setValue(val) {
+        ctrl.clause[1 + ctrl.offset] = val;
+      }
+
+      // Getter/setter for use with ng-model
+      this.getSetOperator = function(op) {
+        if (arguments.length) {
+          setOperator(op);
+        }
+        return getOperator();
+      };
+
+      // Getter/setter for use with ng-model
+      this.getSetValue = function(val) {
+        if (arguments.length) {
+          setValue(val);
+        }
+        return getValue();
+      };
+
       // Return a list of operators allowed for the current field
       this.getOperators = function() {
         var field = ctrl.field || {},
@@ -74,13 +98,13 @@
           }
           // Change multi/single value to/from an array
           var shouldBeArray = _.includes(['IN', 'NOT IN', 'BETWEEN', 'NOT BETWEEN'], getOperator());
-          if (!_.isArray(ctrl.clause[ctrl.offset + 1]) && shouldBeArray) {
-            ctrl.clause[ctrl.offset + 1] = [];
-          } else if (_.isArray(ctrl.clause[ctrl.offset + 1]) && !shouldBeArray) {
-            ctrl.clause[ctrl.offset + 1] = '';
+          if (!_.isArray(getValue()) && shouldBeArray) {
+            setValue([]);
+          } else if (_.isArray(getValue()) && !shouldBeArray) {
+            setValue('');
           }
           if (_.includes(['BETWEEN', 'NOT BETWEEN'], getOperator())) {
-            ctrl.clause[ctrl.offset + 1].length = 2;
+            getValue().length = 2;
           }
         }
       };

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchCondition.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchCondition.html
@@ -1,2 +1,2 @@
-<select class="form-control api4-operator" ng-model="$ctrl.clause[$ctrl.offset]" ng-options="o.key as o.value for o in $ctrl.getOperators()" ng-change="$ctrl.changeClauseOperator()" ></select>
-<crm-search-input ng-if="$ctrl.operatorTakesInput()" ng-model="$ctrl.clause[$ctrl.offset + 1]" field="$ctrl.field" option-key="$ctrl.optionKey" op="$ctrl.clause[$ctrl.offset]" format="$ctrl.format" class="form-group"></crm-search-input>
+<select class="form-control api4-operator" ng-model="$ctrl.getSetOperator" ng-model-options="{getterSetter: true}" ng-options="o.key as o.value for o in $ctrl.getOperators()" ng-change="$ctrl.changeClauseOperator()" ></select>
+<crm-search-input ng-if="$ctrl.operatorTakesInput()" ng-model="$ctrl.getSetValue" ng-model-options="{getterSetter: true}" field="$ctrl.field" option-key="$ctrl.optionKey" op="$ctrl.getSetOperator()" format="$ctrl.format" class="form-group"></crm-search-input>
diff --git a/ext/search_kit/ang/crmSearchTasks/crmSearchInput/boolean.html b/ext/search_kit/ang/crmSearchTasks/crmSearchInput/boolean.html
@@ -1,8 +1,8 @@
-<div class="form-group" ng-if="!$ctrl.multi" >
+<div class="form-group" ng-if="!$ctrl.isMulti()" >
   <label class="radio-inline"><input type="radio" ng-value="true" ng-model="$ctrl.value"> {{:: ts('Yes') }}</label>
   <label class="radio-inline"><input type="radio" ng-value="false" ng-model="$ctrl.value"> {{:: ts('No') }}</label>
 </div>
-<div class="form-group" ng-if="$ctrl.multi" >
+<div class="form-group" ng-if="$ctrl.isMulti()" >
   <label class="checkbox-inline"><input type="checkbox" checklist-value="true" checklist-model="$ctrl.value"> {{:: ts('Yes') }}</label>
   <label class="checkbox-inline"><input type="checkbox" checklist-value="false" checklist-model="$ctrl.value"> {{:: ts('No') }}</label>
 </div>
diff --git a/ext/search_kit/ang/crmSearchTasks/crmSearchInput/date.html b/ext/search_kit/ang/crmSearchTasks/crmSearchInput/date.html
@@ -1,5 +1,5 @@
 <div class="form-group">
-  <select class="form-control" ng-if="$ctrl.multi === false" ng-model="$ctrl.dateType" ng-change="$ctrl.changeDateType()">
+  <select class="form-control" ng-if="$ctrl.isMulti() === false" ng-model="$ctrl.dateType" ng-change="$ctrl.changeDateType()">
     <option value="fixed">{{:: ts('Pick Date') }}</option>
     <option value="range">{{:: ts('Date Range') }}</option>
     <option value="now">{{:: ts('Now') }}</option>
@@ -10,8 +10,8 @@
   <div class="form-group" ng-switch="$ctrl.dateType">
 
     <div class="form-group" ng-switch-when="fixed">
-      <input class="form-control" crm-ui-datepicker="{time: $ctrl.field.data_type === 'Timestamp'}" ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable" ng-if="!$ctrl.multi">
-      <input class="form-control" crm-multi-select-date ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable" ng-if="$ctrl.multi">
+      <input class="form-control" crm-ui-datepicker="{time: $ctrl.field.data_type === 'Timestamp'}" ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable" ng-if="!$ctrl.isMulti()">
+      <input class="form-control" crm-multi-select-date ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable" ng-if="$ctrl.isMulti()">
     </div>
 
     <div class="form-group" ng-switch-when="range">

diff --git a/ext/search_kit/ang/crmSearchTasks/crmSearchInput/entityRef.html b/ext/search_kit/ang/crmSearchTasks/crmSearchInput/entityRef.html
@@ -1,6 +1,6 @@
-<div class="form-group" ng-if="!$ctrl.multi">
+<div class="form-group" ng-if="!$ctrl.isMulti()">
   <input class="form-control" ng-model="$ctrl.value" crm-entityref="{entity: $ctrl.entity, select:{allowClear: true, placeholder: ts('Select')}, static: $ctrl.entity === 'Contact' ? ['user_contact_id'] : []}">
 </div>
-<div class="form-group" ng-if="$ctrl.multi">
+<div class="form-group" ng-if="$ctrl.isMulti()">
   <input class="form-control" ng-model="$ctrl.value" crm-entityref="{entity: $ctrl.entity, select: {multiple: true}, static: $ctrl.entity === 'Contact' ? ['user_contact_id'] : []}" ng-list >
 </div>
diff --git a/ext/search_kit/ang/crmSearchTasks/crmSearchInput/float.html b/ext/search_kit/ang/crmSearchTasks/crmSearchInput/float.html
@@ -1,6 +1,6 @@
-<div class="form-group" ng-if="!$ctrl.multi" >
+<div class="form-group" ng-if="!$ctrl.isMulti()" >
   <input type="number" step="any" class="form-control" ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable">
 </div>
-<div class="form-group" ng-if="$ctrl.multi" >
+<div class="form-group" ng-if="$ctrl.isMulti()" >
   <input class="form-control" ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable" crm-ui-select="{multiple: true, tags: [], tokenSeparators: [','], formatNoMatches: ''}" ng-list>
 </div>
diff --git a/ext/search_kit/ang/crmSearchTasks/crmSearchInput/integer.html b/ext/search_kit/ang/crmSearchTasks/crmSearchInput/integer.html
@@ -1,6 +1,6 @@
-<div class="form-group" ng-if="!$ctrl.multi" >
+<div class="form-group" ng-if="!$ctrl.isMulti()" >
   <input type="number" step="1" class="form-control" ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable">
 </div>
-<div class="form-group" ng-if="$ctrl.multi" >
+<div class="form-group" ng-if="$ctrl.isMulti()" >
   <input class="form-control" ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable" crm-ui-select="{multiple: true, tags: [], tokenSeparators: [','], formatNoMatches: ''}" ng-list>
 </div>
diff --git a/ext/search_kit/ang/crmSearchTasks/crmSearchInput/select.html b/ext/search_kit/ang/crmSearchTasks/crmSearchInput/select.html
@@ -1,9 +1,9 @@
 <div class="form-group" ng-if="$ctrl.field.options === true">
   <input disabled class="form-control loading" crm-ui-select="{data: []}">
 </div>
-<div class="form-group" ng-if="!$ctrl.multi && $ctrl.field.options !== true">
+<div class="form-group" ng-if="!$ctrl.isMulti() && $ctrl.field.options !== true">
   <input class="form-control" ng-model="$ctrl.value" crm-ui-select="{data: $ctrl.getFieldOptions, allowClear: $ctrl.field.nullable, placeholder: $ctrl.field.nullable ? ts('None') : ts('Select')}">
 </div>
-<div class="form-group" ng-if="$ctrl.multi && $ctrl.field.options !== true">
+<div class="form-group" ng-if="$ctrl.isMulti() && $ctrl.field.options !== true">
   <input class="form-control" ng-model="$ctrl.value" crm-ui-select="{data: $ctrl.getFieldOptions, multiple: true}" ng-list >
 </div>
diff --git a/ext/search_kit/ang/crmSearchTasks/crmSearchInput/text.html b/ext/search_kit/ang/crmSearchTasks/crmSearchInput/text.html
@@ -1,6 +1,6 @@
-<div class="form-group" ng-if="!$ctrl.multi" >
+<div class="form-group" ng-if="!$ctrl.isMulti()" >
   <input type="text" class="form-control" ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable">
 </div>
-<div class="form-group" ng-if="$ctrl.multi" >
+<div class="form-group" ng-if="$ctrl.isMulti()" >
   <input class="form-control" ng-model="$ctrl.value" ng-required="!$ctrl.field.nullable" crm-ui-select="{multiple: true, tags: [], tokenSeparators: [','], formatNoMatches: ''}" ng-list>
 </div>