From 54dbfd0501dbb34432c20ab858229978f84f23c9 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 3 Jan 2020 15:40:39 -0500
Subject: [PATCH] GUI - Add block fields to field palette

---
 ext/afform/gui/ang/afGuiEditor.css         |  6 +++-
 ext/afform/gui/ang/afGuiEditor.js          | 35 ++++++++++++++++++----
 ext/afform/gui/ang/afGuiEditor/entity.html | 12 ++++----
 3 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/ext/afform/gui/ang/afGuiEditor.css b/ext/afform/gui/ang/afGuiEditor.css
index bfa548f349..3399f74cd0 100644
--- a/ext/afform/gui/ang/afGuiEditor.css
+++ b/ext/afform/gui/ang/afGuiEditor.css
@@ -23,6 +23,10 @@
   margin-bottom: 5px !important;
 }
 
+#afGuiEditor-palette fieldset legend {
+  height: 30px;
+}
+
 #afGuiEditor hr {
   margin-top: 15px;
   margin-bottom: 10px;
@@ -79,7 +83,7 @@
 #afGuiEditor-palette-config .af-gui-entity-palette [type=search] {
   width: 120px;
   padding: 3px 3px 3px 5px;
-  height: 22px;
+  height: 25px;
   font-weight: normal;
   position: relative;
   top: -3px;
diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 1a2655227d..609de11e2f 100644
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -249,9 +249,12 @@
         $scope.elementList = [];
         $scope.elementTitles = [];
 
+        function getEntityType() {
+          return $scope.entity.type === 'Contact' ? $scope.entity.data.contact_type : $scope.entity.type;
+        }
+
         $scope.getMeta = function() {
-          var type = $scope.entity.type === 'Contact' ? $scope.entity.data.contact_type : $scope.entity.type;
-          return $scope.editor ? $scope.editor.meta.entities[type] : {};
+          return $scope.editor ? $scope.editor.meta.entities[getEntityType()] : {};
         };
 
         $scope.valuesFields = function() {
@@ -274,14 +277,34 @@
 
         function buildFieldList(search) {
           $scope.fieldList.length = 0;
-          _.each($scope.getMeta().fields, function(field) {
-            if (!search || _.contains(field.name, search) || _.contains(field.title.toLowerCase(), search)) {
+          $scope.fieldList.push({
+            entityName: $scope.entity.name,
+            entityType: getEntityType(),
+            label: ts('%1 Fields', {1: $scope.getMeta().label}),
+            fields: filterFields($scope.getMeta().fields)
+          });
+
+          _.each($scope.editor.meta.entities, function(entity, entityName) {
+            if (check($scope.editor.scope.layout['#children'], {'af-join': entityName})) {
               $scope.fieldList.push({
-                "#tag": "af-field",
-                name: field.name
+                entityName: $scope.entity.name + '-join-' + entityName,
+                entityType: entityName,
+                label: ts('%1 Fields', {1: entity.label}),
+                fields: filterFields(entity.fields)
               });
             }
           });
+
+          function filterFields(fields) {
+            return _.transform(fields, function(fieldList, field) {
+              if (!search || _.contains(field.name, search) || _.contains(field.title.toLowerCase(), search)) {
+                fieldList.push({
+                  "#tag": "af-field",
+                  name: field.name
+                });
+              }
+            }, []);
+          }
         }
 
         function buildBlockList(search) {
diff --git a/ext/afform/gui/ang/afGuiEditor/entity.html b/ext/afform/gui/ang/afGuiEditor/entity.html
index e89dfc220d..a6c9b26aa8 100644
--- a/ext/afform/gui/ang/afGuiEditor/entity.html
+++ b/ext/afform/gui/ang/afGuiEditor/entity.html
@@ -36,11 +36,13 @@
           </div>
         </div>
       </div>
-      <div ng-if="fieldList.length">
-        <label>{{ ts('Fields') }}</label>
-        <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[data-entity=' + entity.name + '] &gt; [ui-sortable]'}" ng-model="fieldList">
-          <div ng-repeat="field in fieldList" ng-class="{disabled: fieldInUse(field.name)}">
-            {{ editor.getField(entity.type, field.name).title }}
+      <div ng-repeat="fieldGroup in fieldList">
+        <div ng-if="fieldGroup.fields.length">
+          <label>{{ fieldGroup.label }}</label>
+          <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[data-entity=' + fieldGroup.entityName + '] &gt; [ui-sortable]'}" ng-model="fieldGroup.fields">
+            <div ng-repeat="field in fieldGroup.fields" ng-class="{disabled: fieldInUse(field.name)}">
+              {{ editor.getField(fieldGroup.entityType, field.name).title }}
+            </div>
           </div>
         </div>
       </div>
-- 
2.25.1