From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 31 Dec 2019 17:45:00 +0000 (-0500)
Subject: Implement Address block with chainSelect state/county
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=21dff7043ff319bc33df96de760ceced517ff620;p=civicrm-core.git

Implement Address block with chainSelect state/county
---

diff --git a/ext/afform/core/ang/af/Field.js b/ext/afform/core/ang/af/Field.js
index 5bf7c9b8db..554eb82218 100644
--- a/ext/afform/core/ang/af/Field.js
+++ b/ext/afform/core/ang/af/Field.js
@@ -1,7 +1,7 @@
 (function(angular, $, _) {
   var id = 0;
   // Example usage: <div af-fieldset="myModel"><af-field name="do_not_email" /></div>
-  angular.module('af').directive('afField', function() {
+  angular.module('af').directive('afField', function(crmApi4) {
     return {
       restrict: 'E',
       require: ['^^afForm', '^^afFieldset', '?^^afJoin', '?^^afRepeatItem'],
@@ -30,6 +30,28 @@
             }, [])
           };
         };
+
+        // ChainSelect - watch control field & reload options as needed
+        if ($scope.defn.input_type === 'ChainSelect') {
+          $scope.$watch('dataProvider.getFieldData()[defn.input_attrs.controlField]', function(val) {
+            if (val) {
+              var params = {
+                where: [['name', '=', $scope.fieldName]],
+                select: ['options'],
+                loadOptions: true,
+                values: {}
+              };
+              params.values[$scope.defn.input_attrs.controlField] = val;
+              crmApi4($scope.dataProvider.getEntityType(), 'getFields', params, 0)
+                .then(function(data) {
+                  $scope.defn.options.length = 0;
+                  _.transform(data.options, function(options, label, key) {
+                    options.push({key: key, label: label});
+                  }, $scope.defn.options);
+                });
+            }
+          });
+        }
       }
     };
   });
diff --git a/ext/afform/core/ang/af/Fieldset.js b/ext/afform/core/ang/af/Fieldset.js
index a62483cc85..4294ee7c58 100644
--- a/ext/afform/core/ang/af/Fieldset.js
+++ b/ext/afform/core/ang/af/Fieldset.js
@@ -21,6 +21,9 @@
         this.getName = function() {
           return this.modelName;
         };
+        this.getEntityType = function() {
+          return this.afFormCtrl.getEntity(this.modelName).type;
+        };
         this.getFieldData = function() {
           var data = this.getData();
           if (!data.length) {
diff --git a/ext/afform/core/ang/af/Join.js b/ext/afform/core/ang/af/Join.js
index 35d6b350ed..16de30079f 100644
--- a/ext/afform/core/ang/af/Join.js
+++ b/ext/afform/core/ang/af/Join.js
@@ -15,6 +15,9 @@
         },
         controller: function($scope) {
           var self = this;
+          this.getEntityType = function() {
+            return this.entity;
+          };
           this.getData = function() {
             var data, fieldsetData;
             if (self.repeatItem) {
diff --git a/ext/afform/core/ang/af/Repeat.js b/ext/afform/core/ang/af/Repeat.js
index 52337c9276..bb25e5f820 100644
--- a/ext/afform/core/ang/af/Repeat.js
+++ b/ext/afform/core/ang/af/Repeat.js
@@ -19,7 +19,7 @@
         },
         controller: function($scope) {
           this.getItems = $scope.getItems = function() {
-            var data = $scope.afJoin ? $scope.afJoin.getData() : $scope.afFieldset.getData();
+            var data = getEntityController().getData();
             while ($scope.min && data.length < $scope.min) {
               data.push(getRepeatType() === 'join' ? {} : {fields: {}, joins: {}});
             }
@@ -31,6 +31,11 @@
           }
           this.getRepeatType = getRepeatType;
 
+          function getEntityController() {
+            return $scope.afJoin || $scope.afFieldset;
+          }
+          this.getEntityController = getEntityController;
+
           $scope.addItem = function() {
             $scope.getItems().push(getRepeatType() === 'join' ? {} : {fields: {}});
           };
@@ -64,6 +69,10 @@
           this.getFieldData = function() {
             return this.afRepeat.getRepeatType() === 'join' ? this.item : this.item.fields;
           };
+
+          this.getEntityType = function() {
+            return this.afRepeat.getEntityController().getEntityType();
+          };
         }
       };
     });
diff --git a/ext/afform/core/ang/af/fields/ChainSelect.html b/ext/afform/core/ang/af/fields/ChainSelect.html
new file mode 100644
index 0000000000..a3cb1e2abd
--- /dev/null
+++ b/ext/afform/core/ang/af/fields/ChainSelect.html
@@ -0,0 +1 @@
+<input crm-ui-select="{data: select2Options, multiple: defn.input_attrs.multiple, placeholder: defn.input_attrs.placeholder}" id="{{ fieldId }}" ng-model="dataProvider.getFieldData()[fieldName]" />
diff --git a/ext/afform/core/ang/blockAddressDefault.aff.html b/ext/afform/core/ang/blockAddressDefault.aff.html
new file mode 100644
index 0000000000..76d21e406f
--- /dev/null
+++ b/ext/afform/core/ang/blockAddressDefault.aff.html
@@ -0,0 +1,10 @@
+<div class="af-container af-layout-inline">
+  <af-field name="street_address" />
+  <af-field name="location_type_id" />
+</div>
+<div class="af-container af-layout-inline">
+  <af-field name="city" />
+  <af-field name="state_province_id" />
+  <af-field name="country_id" />
+  <af-field name="postal_code" />
+</div>
diff --git a/ext/afform/core/ang/blockAddressDefault.aff.json b/ext/afform/core/ang/blockAddressDefault.aff.json
new file mode 100644
index 0000000000..2a26888f4a
--- /dev/null
+++ b/ext/afform/core/ang/blockAddressDefault.aff.json
@@ -0,0 +1,6 @@
+{
+  "title": "Address Block (default)",
+  "block": "Contact",
+  "join": "Address",
+  "repeat": true
+}
diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index 9616e74346..bfa548f349 100644
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -358,6 +358,7 @@
 #afGuiEditor .af-gui-field-input-type-select .input-group-btn {
   position: initial;
 }
+#afGuiEditor .af-gui-field-input-type-chainselect .input-group .dropdown-toggle,
 #afGuiEditor .af-gui-field-input-type-select .input-group .dropdown-toggle {
   padding: 3px 11px;
 }
diff --git a/ext/afform/gui/ang/afGuiEditor/inputType/ChainSelect.html b/ext/afform/gui/ang/afGuiEditor/inputType/ChainSelect.html
new file mode 100644
index 0000000000..bca0c9474e
--- /dev/null
+++ b/ext/afform/gui/ang/afGuiEditor/inputType/ChainSelect.html
@@ -0,0 +1,8 @@
+<div class="form-inline">
+  <div class="input-group">
+    <input autocomplete="off" class="form-control" placeholder="{{ ts('Select') }}" title="{{ ts('Click to add placeholder text') }}" ng-model="getSet('input_attrs.placeholder')" ng-model-options="{getterSetter: true}" type="text" />
+    <div class="input-group-btn">
+      <button type="button" class="btn btn-default disabled dropdown-toggle"><i class="crm-i fa-caret-down"></i></button>
+    </div>
+  </div>
+</div>