From bef7cd65951ba981642cad307dd2f6a4043d1628 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 17 Jan 2022 19:25:25 -0500
Subject: [PATCH] SearchKit - Support pseudofields and operators in conditional
 css rules

Allows operators other than `=` in conditional style rules.
Also supports pseudofields like `row_number`.
---
 .../Civi/Api4/Action/SearchDisplay/AbstractRunAction.php  | 6 ++----
 ext/search_kit/ang/crmSearchAdmin.module.js               | 2 +-
 .../displays/common/searchAdminCssRules.component.js      | 8 +++++---
 .../displays/common/searchAdminCssRules.html              | 6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ext/search_kit/Civi/Api4/Action/SearchDisplay/AbstractRunAction.php b/ext/search_kit/Civi/Api4/Action/SearchDisplay/AbstractRunAction.php
index f6957086d0..b41452d6e5 100644
--- a/ext/search_kit/Civi/Api4/Action/SearchDisplay/AbstractRunAction.php
+++ b/ext/search_kit/Civi/Api4/Action/SearchDisplay/AbstractRunAction.php
@@ -306,10 +306,8 @@ abstract class AbstractRunAction extends \Civi\Api4\Generic\AbstractAction {
    */
   protected function getCssRuleCondition($clause) {
     $fieldKey = $clause[1] ?? NULL;
-    // For fields used in group by, add aggregation and change operator from = to CONTAINS
-    // FIXME: This assumes the operator is always set to '=', which so far is all the admin UI supports.
-    // That's only a safe assumption as long as the admin UI doesn't have an operator selector.
-    // @see ang/crmSearchAdmin/displays/common/searchAdminCssRules.html
+    // For fields used in group by, add aggregation and change operator to CONTAINS
+    // NOTE: This doesn't support any other operators for aggregated fields.
     if ($fieldKey && $this->canAggregate($fieldKey)) {
       $clause[2] = 'CONTAINS';
       $fieldKey = 'GROUP_CONCAT_' . str_replace(['.', ':'], '_', $clause[1]);
diff --git a/ext/search_kit/ang/crmSearchAdmin.module.js b/ext/search_kit/ang/crmSearchAdmin.module.js
index 7edab31d64..c0e2f53c56 100644
--- a/ext/search_kit/ang/crmSearchAdmin.module.js
+++ b/ext/search_kit/ang/crmSearchAdmin.module.js
@@ -184,7 +184,7 @@
         }
         // Might be a pseudoField
         if (!field) {
-          field = _.cloneDeep(_.find(CRM.crmSearchAdmin.pseudoFields, {name: name}));
+          field = _.find(CRM.crmSearchAdmin.pseudoFields, {name: name});
         }
         if (field) {
           field.baseEntity = entityName;
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminCssRules.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminCssRules.component.js
index b19ade12fd..40163abb7d 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminCssRules.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminCssRules.component.js
@@ -28,7 +28,10 @@
       this.styles.strikethrough = ts('Strikethrough');
 
       this.fields = function() {
-        return {results: ctrl.crmSearchAdmin.getAllFields(':name', ['Field', 'Custom', 'Extra'])};
+        var allFields = ctrl.crmSearchAdmin.getAllFields(':name', ['Field', 'Custom', 'Extra', 'Pseudo']);
+        return {
+          results: ctrl.crmSearchAdmin.getSelectFields().concat(allFields)
+        };
       };
 
       this.$onInit = function() {
@@ -61,8 +64,7 @@
         return !this.item.cssRules || !this.item.cssRules.length || _.last(this.item.cssRules)[1];
       };
 
-
-
+      this.operators = CRM.crmSearchAdmin.operators;
     }
   });
 
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminCssRules.html b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminCssRules.html
index cf9e7db745..6b6d573bbe 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminCssRules.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminCssRules.html
@@ -22,9 +22,9 @@
   </div>
   <label>{{:: ts('If') }}</label>
   <input class="form-control collapsible-optgroups" ng-model="clause[1]" crm-ui-select="::{data: $ctrl.fields, allowClear: true, placeholder: ts('Always')}" ng-change="$ctrl.onSelectField(clause)" />
-  <!-- TODO: Support operators other than '=' as clause[2] -->
-  <label ng-if="clause[1]">{{:: ts('Is') }}</label>
-  <crm-search-input ng-if="clause[1]" ng-model="clause[3]" field="$ctrl.getField(clause[1])" option-key="'name'" op="clause[1]" format="$ctrl.format" class="form-group"></crm-search-input>
+  <select class="form-control api4-operator" ng-if="clause[1]" ng-model="clause[2]" ng-options="o.key as o.value for o in $ctrl.operators">
+  </select>
+  <crm-search-input ng-if="clause[1] && clause[2].indexOf('IS ') !== 0" ng-model="clause[3]" field="$ctrl.getField(clause[1])" option-key="'name'" op="clause[2]" format="$ctrl.format" class="form-group"></crm-search-input>
   <button type="button" class="btn-xs btn-danger-outline" ng-click="$ctrl.item.cssRules.splice($index);" title="{{:: ts('Remove style') }}">
     <i class="crm-i fa-ban"></i>
   </button>
-- 
2.25.1