From af6f5ac8fc2ce4316867670d2ea9ed76ae17eafb Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Mon, 22 Jun 2020 16:04:51 -0400
Subject: [PATCH] APIv4 Explorer - UI support for join ON clause

---
 ang/api4Explorer/Clause.html   | 44 ++++++++++---------
 ang/api4Explorer/Explorer.html | 25 ++++++-----
 ang/api4Explorer/Explorer.js   | 79 +++++++++++++++++++---------------
 3 files changed, 82 insertions(+), 66 deletions(-)

diff --git a/ang/api4Explorer/Clause.html b/ang/api4Explorer/Clause.html
index 9f9412e9f7..96698212f4 100644
--- a/ang/api4Explorer/Clause.html
+++ b/ang/api4Explorer/Clause.html
@@ -1,39 +1,41 @@
-<legend>{{ data.label || data.op + ' group' }}<span class="crm-marker" ng-if="data.required"> *</span></legend>
+<legend>{{ data.label || ts('%1 group', {1: $ctrl.conjunctions[data.op]}) }}</legend>
 <div class="btn-group btn-group-xs" ng-if="data.groupParent">
-  <button class="btn btn-danger-outline" ng-click="removeGroup()" title="{{:: ts('Remove group') }}">
+  <button class="btn btn-danger-outline" ng-click="$ctrl.removeGroup()" title="{{:: ts('Remove group') }}">
     <i class="crm-i fa-trash" aria-hidden="true"></i>
   </button>
 </div>
-<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">{{ data.type }}</span>
-        <span ng-if="index || data.groupParent">{{ data.op }}</span>
-        <i class="crm-i fa-arrows" aria-hidden="true"></i>
-      </span>
+<div class="api4-clause-group-sortable" ng-model="data.clauses" ui-sortable="$ctrl.sortOptions">
+  <div class="api4-input form-inline clearfix" ng-repeat="(index, clause) in data.clauses" ng-class="{hiddenElement: index &lt; (data.skip || 0)}">
+    <div ng-if="index &gt;= (data.skip || 0)">
+      <div class="api4-clause-badge" title="{{:: ts('Drag to reposition') }}">
+        <span class="badge badge-info">
+          <span ng-if="index === (data.skip || 0) && !data.groupParent">{{ data.label }}</span>
+          <span ng-if="index &gt; (data.skip || 0) || data.groupParent">{{ $ctrl.conjunctions[data.op] }}</span>
+          <i class="crm-i fa-arrows" aria-hidden="true"></i>
+        </span>
+      </div>
+      <div ng-if="!$ctrl.conjunctions[clause[0]]" class="api4-input-group">
+        <input class="collapsible-optgroups form-control" ng-model="clause[0]" crm-ui-select="{data: data.fields, allowClear: true, placeholder: 'Field'}" />
+        <select class="form-control api4-operator" ng-model="clause[1]" ng-options="o for o in $ctrl.operators" ></select>
+        <input class="form-control" ng-model="clause[2]" api4-exp-value="{field: clause[0], op: clause[1], format: data.format}" />
+      </div>
+      <fieldset class="clearfix" ng-if="$ctrl.conjunctions[clause[0]]" crm-api4-clause="{format: data.format, clauses: clause[1], op: clause[0], fields: data.fields, groupParent: data.clauses, groupIndex: index}">
+      </fieldset>
     </div>
-    <div ng-if="clause[0] !== 'AND' && clause[0] !== 'OR' && clause[0] !== 'NOT'" class="api4-input-group">
-      <input class="collapsible-optgroups form-control" ng-model="clause[0]" crm-ui-select="{data: data.fields, allowClear: true, placeholder: 'Field'}" />
-      <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-clause="{type: data.type, clauses: clause[1], op: clause[0], fields: data.fields, groupParent: data.clauses, groupIndex: index}">
-    </fieldset>
   </div>
 </div>
 <div class="api4-input form-inline">
   <div class="api4-clause-badge">
     <div class="btn-group btn-group-xs" title="{{ data.groupParent ? ts('Add a subgroup of clauses') : ts('Add a group of clauses') }}">
       <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        {{ data.op }} <span class="caret"></span>
+        {{ $ctrl.conjunctions[data.op] }} <span class="caret"></span>
       </button>
       <ul class="dropdown-menu api4-add-where-group-menu">
-        <li ng-repeat="con in conjunctions" ng-if="data.op !== con">
-          <a href ng-click="addGroup(con)">{{ con }}</a>
+        <li ng-repeat="(con, label) in $ctrl.conjunctions" ng-show="data.op !== con">
+          <a href ng-click="$ctrl.addGroup(con)">{{ label }}</a>
         </li>
       </ul>
     </div>
   </div>
-  <input class="collapsible-optgroups form-control" ng-model="newClause" title="Add a single clause" crm-ui-select="{data: data.fields, placeholder: 'Add clause'}" />
+  <input class="collapsible-optgroups form-control" ng-model="$ctrl.newClause" ng-change="$ctrl.addClause()" title="Add a single clause" crm-ui-select="{data: data.fields, placeholder: 'Add clause'}" />
 </div>
diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index d1379c8929..fe618337ec 100644
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -63,16 +63,19 @@
               <input class="collapsible-optgroups form-control huge" ng-model="controls.select" crm-ui-select="{data: fieldsAndJoinsAndFunctionsAndWildcards}" placeholder="Add select" />
             </div>
           </fieldset>
-          <fieldset class="api4-input form-inline" ng-mouseenter="help('join', availableParams.join)" ng-mouseleave="help()" ng-if="::availableParams.join">
+          <fieldset id="api4-join-fieldset" class="api4-input form-inline" ng-mouseenter="help('join', availableParams.join)" ng-mouseleave="help()" ng-if="::availableParams.join">
             <legend>join<span class="crm-marker" ng-if="::availableParams.join.required"> *</span></legend>
-            <div ng-model="params.join" ui-sortable="{axis: 'y'}">
-              <div class="api4-input form-inline" ng-repeat="item in params.join track by $index">
-                <i class="crm-i fa-arrows"></i>
-                <input class="form-control twenty" type="text" ng-model="params.join[$index][0]" />
-                <select class="form-control" ng-model="params.join[$index][1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
-                <input class="form-control twenty" type="text" ng-model="params.join[$index][2]" />
-                <a href class="crm-hover-button" title="Clear" ng-click="clearParam('join', $index)"><i class="crm-i fa-times"></i></a>
-              </div>
+            <div ng-model="params.join" ui-sortable="{axis: 'y', containment: '#api4-join-fieldset'}">
+              <fieldset ng-repeat="item in params.join track by $index">
+                <div class="api4-input form-inline">
+                  <i class="crm-i fa-arrows"></i>
+                  <input class="form-control twenty" type="text" ng-model="params.join[$index][0]" />
+                  <select class="form-control" ng-model="params.join[$index][1]" ng-options="o.k as o.v for o in ::joinTypes" ></select>
+                  <a href class="crm-hover-button" title="Clear" ng-click="clearParam('join', $index)"><i class="crm-i fa-times"></i></a>
+                </div>
+                <fieldset class="api4-clause-fieldset" crm-api4-clause="{skip: 2, clauses: params.join[$index], op: 'AND', label: 'On', fields: fieldsAndJoins, format: 'plain'}">
+                </fieldset>
+              </fieldset>
             </div>
             <div class="api4-input form-inline">
               <input class="collapsible-optgroups form-control huge" ng-model="controls.join" crm-ui-select="{data: entities}" placeholder="Add join" />
@@ -97,7 +100,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-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 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>
@@ -122,7 +125,7 @@
               <input class="collapsible-optgroups form-control huge" ng-model="controls.groupBy" crm-ui-select="{data: fieldsAndJoinsAndFunctions}" placeholder="Add groupBy" />
             </div>
           </fieldset>
-          <fieldset ng-if="::availableParams.having" class="api4-clause-fieldset" ng-mouseenter="help('having', availableParams.having)" ng-mouseleave="help()" crm-api4-clause="{type: 'having', clauses: params.having, required: availableParams.having.required, op: 'AND', label: 'having', fields: havingOptions}">
+          <fieldset ng-if="::availableParams.having" class="api4-clause-fieldset" ng-mouseenter="help('having', availableParams.having)" ng-mouseleave="help()" crm-api4-clause="{clauses: params.having, required: availableParams.having.required, op: 'AND', label: 'Having', fields: havingOptions}">
           </fieldset>
           <fieldset ng-if="::availableParams.orderBy" ng-mouseenter="help('orderBy', availableParams.orderBy)" ng-mouseleave="help()">
             <legend>orderBy<span class="crm-marker" ng-if="::availableParams.orderBy.required"> *</span></legend>
diff --git a/ang/api4Explorer/Explorer.js b/ang/api4Explorer/Explorer.js
index dc4ac31ca5..faacc68efa 100644
--- a/ang/api4Explorer/Explorer.js
+++ b/ang/api4Explorer/Explorer.js
@@ -465,7 +465,7 @@
               $timeout(function() {
                 if (field) {
                   if (name === 'join') {
-                    $scope.params[name].push([field + ' AS ' + _.snakeCase(field), false, '[]']);
+                    $scope.params[name].push([field + ' AS ' + _.snakeCase(field), false]);
                   }
                   else if (typeof objectParams[name] === 'undefined') {
                     $scope.params[name].push(field);
@@ -905,59 +905,70 @@
     };
   });
 
-  angular.module('api4Explorer').directive('crmApi4Clause', function($timeout) {
+  angular.module('api4Explorer').directive('crmApi4Clause', function() {
     return {
       scope: {
-        data: '=crmApi4Clause'
+        data: '<crmApi4Clause'
       },
       templateUrl: '~/api4Explorer/Clause.html',
-      link: function (scope, element, attrs) {
-        var ts = scope.ts = CRM.ts();
-        scope.newClause = '';
-        scope.conjunctions = ['AND', 'OR', 'NOT'];
-        scope.operators = CRM.vars.api4.operators;
+      controller: function ($scope, $element, $timeout) {
+        var ts = $scope.ts = CRM.ts();
+        var ctrl = $scope.$ctrl = this;
+        this.conjunctions = {AND: ts('And'), OR: ts('Or'), NOT: ts('Not')};
+        this.operators = CRM.vars.api4.operators;
+        this.sortOptions = {
+          axis: 'y',
+          connectWith: '.api4-clause-group-sortable',
+          containment: $element.closest('.api4-clause-fieldset'),
+          over: onSortOver,
+          start: onSort,
+          stop: onSort
+        };
 
-        scope.addGroup = function(op) {
-          scope.data.clauses.push([op, []]);
+        this.addGroup = function(op) {
+          $scope.data.clauses.push([op, []]);
         };
 
-        scope.removeGroup = function() {
-          scope.data.groupParent.splice(scope.data.groupIndex, 1);
+        this.removeGroup = function() {
+          $scope.data.groupParent.splice($scope.data.groupIndex, 1);
         };
 
-        scope.onSort = function(event, ui) {
-          $(element).closest('.api4-clause-fieldset').toggleClass('api4-sorting', event.type === 'sortstart');
+        function onSort(event, ui) {
+          $($element).closest('.api4-clause-fieldset').toggleClass('api4-sorting', event.type === 'sortstart');
           $('.api4-input.form-inline').css('margin-left', '');
-        };
+        }
 
         // Indent clause while dragging between nested groups
-        scope.onSortOver = function(event, ui) {
+        function onSortOver(event, ui) {
           var offset = 0;
           if (ui.sender) {
             offset = $(ui.placeholder).offset().left - $(ui.sender).offset().left;
           }
           $('.api4-input.form-inline.ui-sortable-helper').css('margin-left', '' + offset + 'px');
-        };
+        }
 
-        scope.$watch('newClause', function(value) {
-          var field = value;
+        this.addClause = function() {
           $timeout(function() {
-            if (field) {
-              scope.data.clauses.push([field, '=', '']);
-              scope.newClause = null;
+            if (ctrl.newClause) {
+              $scope.data.clauses.push([ctrl.newClause, '=', '']);
+              ctrl.newClause = null;
             }
           });
-        });
-        scope.$watch('data.clauses', function(values) {
-          // Remove empty values
-          _.each(values, function(clause, index) {
-            if (typeof clause !== 'undefined' && !clause[0]) {
-              values.splice(index, 1);
-            }
-            if (typeof clause[1] === 'string' && _.contains(clause[1], 'NULL')) {
-              clause.length = 2;
-            } else if (typeof clause[1] === 'string' && clause.length == 2) {
-              clause.push('');
+        };
+        $scope.$watch('data.clauses', function(values) {
+          // Iterate in reverse order so index doesn't get out-of-sync during splice
+          _.forEachRight(values, function(clause, index) {
+            // Remove empty values
+            if (index >= ($scope.data.skip  || 0)) {
+              if (typeof clause !== 'undefined' && !clause[0]) {
+                values.splice(index, 1);
+              }
+              // Add/remove value if operator allows for one
+              else if (typeof clause[1] === 'string' && _.contains(clause[1], 'NULL')) {
+                clause.length = 2;
+              } else if (typeof clause[1] === 'string' && clause.length === 2) {
+                clause.push('');
+              }
             }
           });
         }, true);
@@ -1073,7 +1084,7 @@
         scope.$watchCollection('data', function(data) {
           destroyWidget();
           var field = getField(data.field, entity, action);
-          if (field) {
+          if (field && data.format !== 'plain') {
             makeWidget(field, data.op);
           }
         });
-- 
2.25.1