From 24463df754288ddd4ead33feff4651116dd8e08d Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 8 Apr 2020 12:08:40 -0400
Subject: [PATCH] APIv4 Explorer - Make WHERE clause code more generic, toward
 supporting HAVING

---
 ang/api4Explorer/{WhereClause.html => Clause.html} |  8 ++++----
 ang/api4Explorer/Explorer.html                     |  2 +-
 ang/api4Explorer/Explorer.js                       | 14 +++++++-------
 css/api4-explorer.css                              |  4 ++--
 4 files changed, 14 insertions(+), 14 deletions(-)
 rename ang/api4Explorer/{WhereClause.html => Clause.html} (79%)

diff --git a/ang/api4Explorer/WhereClause.html b/ang/api4Explorer/Clause.html
similarity index 79%
rename from ang/api4Explorer/WhereClause.html
rename to ang/api4Explorer/Clause.html
index 52a237b504..3fc5cababd 100644
--- a/ang/api4Explorer/WhereClause.html
+++ b/ang/api4Explorer/Clause.html
@@ -4,11 +4,11 @@
     <i class="crm-i fa-trash"></i>
   </button>
 </div>
-<div class="api4-where-group-sortable" ng-model="data.where" ui-sortable="{axis: 'y', connectWith: '.api4-where-group-sortable', containment: '.api4-where-fieldset', over: onSortOver, start: onSort, stop: onSort}">
-  <div class="api4-input form-inline clearfix" ng-repeat="(index, clause) in data.where">
+<div class="api4-clause-group-sortable" ng-model="data.clauses" ui-sortable="{axis: 'y', connectWith: '.api4-clause-group-sortable', containment: '.api4-clause-fieldset', over: onSortOver}" ui-sortable-start="onSort" ui-sortable-stop="onSort">
+  <div class="api4-input form-inline clearfix" ng-repeat="(index, clause) in data.clauses">
     <div class="api4-clause-badge" title="{{ ts('Drag to reposition') }}">
       <span class="badge badge-info">
-        <span ng-if="!index && !data.groupParent">Where</span>
+        <span ng-if="!index && !data.groupParent">{{ data.type }}</span>
         <span ng-if="index || data.groupParent">{{ data.op }}</span>
         <i class="crm-i fa-arrows"></i>
       </span>
@@ -18,7 +18,7 @@
       <select class="form-control api4-operator" ng-model="clause[1]" ng-options="o for o in operators" ></select>
       <input class="form-control" ng-model="clause[2]" api4-exp-value="{field: clause[0], op: clause[1]}" />
     </div>
-    <fieldset class="clearfix" ng-if="clause[0] === 'AND' || clause[0] === 'OR' || clause[0] === 'NOT'" crm-api4-where-clause="{where: clause[1], op: clause[0], fields: data.fields, operators: data.operators, groupParent: data.where, groupIndex: index}">
+    <fieldset class="clearfix" ng-if="clause[0] === 'AND' || clause[0] === 'OR' || clause[0] === 'NOT'" crm-api4-clause="{type: data.type, clauses: clause[1], op: clause[0], fields: data.fields, groupParent: data.clauses, groupIndex: index}">
     </fieldset>
   </div>
 </div>
diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index e34476a416..ac62ad068e 100644
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -73,7 +73,7 @@
             <textarea class="form-control" type="{{ param.type[0] === 'int' && param.type.length === 1 ? 'number' : 'text' }}" id="api4-param-{{ name }}" ng-model="params[name]">
             </textarea>
           </div>
-          <fieldset ng-if="availableParams.where" class="api4-where-fieldset" ng-mouseenter="help('where', availableParams.where)" ng-mouseleave="help()" crm-api4-where-clause="{where: params.where, required: availableParams.where.required, op: 'AND', label: 'where', fields: fieldsAndJoins}">
+          <fieldset ng-if="availableParams.where" class="api4-clause-fieldset" ng-mouseenter="help('where', availableParams.where)" ng-mouseleave="help()" crm-api4-clause="{type: 'where', clauses: params.where, required: availableParams.where.required, op: 'AND', label: 'where', fields: fieldsAndJoins}">
           </fieldset>
           <fieldset ng-repeat="name in ['values', 'defaults']" ng-if="availableParams[name]" ng-mouseenter="help(name, availableParams[name])" ng-mouseleave="help()">
             <legend>{{ name }}<span class="crm-marker" ng-if="availableParams[name].required"> *</span></legend>
diff --git a/ang/api4Explorer/Explorer.js b/ang/api4Explorer/Explorer.js
index a8f825af17..57cc5d60f0 100644
--- a/ang/api4Explorer/Explorer.js
+++ b/ang/api4Explorer/Explorer.js
@@ -790,12 +790,12 @@
     };
   });
 
-  angular.module('api4Explorer').directive('crmApi4WhereClause', function($timeout) {
+  angular.module('api4Explorer').directive('crmApi4Clause', function($timeout) {
     return {
       scope: {
-        data: '=crmApi4WhereClause'
+        data: '=crmApi4Clause'
       },
-      templateUrl: '~/api4Explorer/WhereClause.html',
+      templateUrl: '~/api4Explorer/Clause.html',
       link: function (scope, element, attrs) {
         var ts = scope.ts = CRM.ts();
         scope.newClause = '';
@@ -803,7 +803,7 @@
         scope.operators = CRM.vars.api4.operators;
 
         scope.addGroup = function(op) {
-          scope.data.where.push([op, []]);
+          scope.data.clauses.push([op, []]);
         };
 
         scope.removeGroup = function() {
@@ -811,7 +811,7 @@
         };
 
         scope.onSort = function(event, ui) {
-          $('.api4-where-fieldset').toggleClass('api4-sorting', event.type === 'sortstart');
+          $(element).closest('.api4-clause-fieldset').toggleClass('api4-sorting', event.type === 'sortstart');
           $('.api4-input.form-inline').css('margin-left', '');
         };
 
@@ -828,12 +828,12 @@
           var field = value;
           $timeout(function() {
             if (field) {
-              scope.data.where.push([field, '=', '']);
+              scope.data.clauses.push([field, '=', '']);
               scope.newClause = null;
             }
           });
         });
-        scope.$watch('data.where', function(values) {
+        scope.$watch('data.clauses', function(values) {
           // Remove empty values
           _.each(values, function(clause, index) {
             if (typeof clause !== 'undefined' && !clause[0]) {
diff --git a/css/api4-explorer.css b/css/api4-explorer.css
index 077f95b7be..bd309c33b7 100644
--- a/css/api4-explorer.css
+++ b/css/api4-explorer.css
@@ -129,13 +129,13 @@
   top: -2px;
 }
 
-#bootstrap-theme.api4-explorer-page .api4-where-fieldset fieldset {
+#bootstrap-theme.api4-explorer-page .api4-clause-fieldset fieldset {
   float: right;
   width: calc(100% - 58px);
   margin-top: -8px;
 }
 
-#bootstrap-theme.api4-explorer-page .api4-where-fieldset.api4-sorting fieldset .api4-where-group-sortable {
+#bootstrap-theme.api4-explorer-page .api4-clause-fieldset.api4-sorting fieldset .api4-clause-group-sortable {
   min-height: 3.5em;
 }
 
-- 
2.25.1