From 46730a23a68830f9d5baaaf775cd5f170d6a7571 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 4 Feb 2021 12:10:38 -0500
Subject: [PATCH] Afform Gui - Improve speed & accuracy of rendering
 fields/blocks palette

Ensure the palette gets refreshed when saving a new block, and use ng-change instead of $watch
---
 .../ang/afGuiEditor/afGuiEntity.component.js  | 39 +++++++++++--------
 .../admin/ang/afGuiEditor/afGuiEntity.html    | 10 ++---
 .../ang/afGuiEditor/afGuiSearch.component.js  | 31 +++++++++++----
 .../admin/ang/afGuiEditor/afGuiSearch.html    |  4 +-
 4 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.component.js
index 6c231a5914..b4f67341bb 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.component.js
@@ -39,12 +39,12 @@
         delete entity.data[fieldName];
       };
 
-      function buildPaletteLists() {
+      this.buildPaletteLists = function() {
         var search = $scope.controls.fieldSearch ? $scope.controls.fieldSearch.toLowerCase() : null;
         buildFieldList(search);
         buildBlockList(search);
         buildElementList(search);
-      }
+      };
 
       function buildFieldList(search) {
         $scope.fieldList.length = 0;
@@ -122,15 +122,11 @@
         });
       }
 
-      $scope.clearSearch = function() {
-        $scope.controls.fieldSearch = '';
-      };
-
       // This gets called from jquery-ui so we have to manually apply changes to scope
       $scope.buildPaletteLists = function() {
         $timeout(function() {
           $scope.$apply(function() {
-            buildPaletteLists();
+            ctrl.buildPaletteLists();
           });
         });
       };
@@ -144,6 +140,8 @@
         return check(ctrl.editor.layout['#children'], {'#tag': 'af-field', name: fieldName});
       };
 
+      // Checks if fields in a block are already in use on the form.
+      // Note that if a block contains no fields it can be used repeatedly, so this will always return false for those.
       $scope.blockInUse = function(block) {
         if (block['af-join']) {
           return check(ctrl.editor.layout['#children'], {'af-join': block['af-join']});
@@ -182,17 +180,24 @@
         return found.match;
       }
 
-      $scope.$watch('controls.addValue', function(fieldName) {
-        if (fieldName) {
-          if (!ctrl.entity.data) {
-            ctrl.entity.data = {};
-          }
-          ctrl.entity.data[fieldName] = '';
-          $scope.controls.addValue = '';
-        }
-      });
+      this.$onInit = function() {
+        // When a new block is saved, update the list
+        this.meta = afGui.meta;
+        $scope.$watchCollection('$ctrl.meta.blocks', function() {
+          $scope.controls.fieldSearch = '';
+          ctrl.buildPaletteLists();
+        });
 
-      $scope.$watch('controls.fieldSearch', buildPaletteLists);
+        $scope.$watch('controls.addValue', function(fieldName) {
+          if (fieldName) {
+            if (!ctrl.entity.data) {
+              ctrl.entity.data = {};
+            }
+            ctrl.entity.data[fieldName] = '';
+            $scope.controls.addValue = '';
+          }
+        });
+      };
     }
   });
 
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
index ee017c9ee1..adbfaf60b9 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
@@ -17,14 +17,14 @@
   <fieldset class="af-gui-entity-palette">
     <legend class="form-inline">
       {{:: ts('Add:') }}
-      <input ng-model="controls.fieldSearch" class="form-control" type="search" placeholder="&#xf002" title="{{:: ts('Search fields') }}" />
+      <input ng-model="controls.fieldSearch" ng-change="$ctrl.buildPaletteLists()" class="form-control" type="search" placeholder="&#xf002" title="{{:: ts('Search fields') }}" />
     </legend>
     <div class="af-gui-entity-palette-select-list">
       <div ng-if="elementList.length">
         <label>{{:: ts('Elements') }}</label>
         <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[ui-sortable]', placeholder: 'af-gui-dropzone'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="elementList">
           <div ng-repeat="element in elementList" >
-            {{ elementTitles[$index] }}
+            {{:: elementTitles[$index] }}
           </div>
         </div>
       </div>
@@ -32,7 +32,7 @@
         <label>{{:: ts('Blocks') }}</label>
         <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[data-entity=' + $ctrl.entity.name + '] &gt; [ui-sortable]', placeholder: 'af-gui-dropzone'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="blockList">
           <div ng-repeat="block in blockList" ng-class="{disabled: blockInUse(block)}">
-            {{ blockTitles[$index] }}
+            {{:: blockTitles[$index] }}
           </div>
         </div>
       </div>
@@ -41,7 +41,7 @@
           <label>{{ fieldGroup.label }}</label>
           <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[data-entity=' + fieldGroup.entityName + '] &gt; [ui-sortable]', placeholder: 'af-gui-dropzone'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="fieldGroup.fields">
             <div ng-repeat="field in fieldGroup.fields" ng-class="{disabled: fieldInUse(field.name)}">
-              {{ getField(fieldGroup.entityType, field.name).label }}
+              {{:: getField(fieldGroup.entityType, field.name).label }}
             </div>
           </div>
         </div>
@@ -56,5 +56,5 @@
 
 <fieldset ng-if="!$ctrl.entity.loading && $ctrl.editor.allowEntityConfig">
   <legend>{{:: ts('Options') }}</legend>
-  <div ng-include="'~/afGuiEditor/entityConfig/' + $ctrl.entity.type + '.html'"></div>
+  <div ng-include="::'~/afGuiEditor/entityConfig/' + $ctrl.entity.type + '.html'"></div>
 </fieldset>
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiSearch.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiSearch.component.js
index e8d8be0581..c195a5e321 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiSearch.component.js
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiSearch.component.js
@@ -20,12 +20,12 @@
 
       $scope.getField = afGui.getField;
 
-      function buildPaletteLists() {
+      this.buildPaletteLists = function() {
         var search = $scope.controls.fieldSearch ? $scope.controls.fieldSearch.toLowerCase() : null;
         buildFieldList(search);
         buildBlockList(search);
         buildElementList(search);
-      }
+      };
 
       function buildBlockList(search) {
         $scope.blockList.length = 0;
@@ -89,15 +89,11 @@
         });
       }
 
-      $scope.clearSearch = function() {
-        $scope.controls.fieldSearch = '';
-      };
-
       // This gets called from jquery-ui so we have to manually apply changes to scope
       $scope.buildPaletteLists = function() {
         $timeout(function() {
           $scope.$apply(function() {
-            buildPaletteLists();
+            ctrl.buildPaletteLists();
           });
         });
       };
@@ -107,6 +103,18 @@
         return check(ctrl.editor.layout['#children'], {'#tag': 'af-field', name: fieldName});
       };
 
+      // Checks if fields in a block are already in use on the form.
+      // Note that if a block contains no fields it can be used repeatedly, so this will always return false for those.
+      $scope.blockInUse = function(block) {
+        if (block['af-join']) {
+          return check(ctrl.editor.layout['#children'], {'af-join': block['af-join']});
+        }
+        var fieldsInBlock = _.pluck(afGui.findRecursive(afGui.meta.blocks[block['#tag']].layout, {'#tag': 'af-field'}), 'name');
+        return check(ctrl.editor.layout['#children'], function(item) {
+          return item['#tag'] === 'af-field' && _.includes(fieldsInBlock, item.name);
+        });
+      };
+
       // Check for a matching item for this entity
       // Recursively checks the form layout, including block directives
       function check(group, criteria, found) {
@@ -135,7 +143,14 @@
         return found.match;
       }
 
-      $scope.$watch('controls.fieldSearch', buildPaletteLists);
+      this.$onInit = function() {
+        // When a new block is saved, update the list
+        this.meta = afGui.meta;
+        $scope.$watchCollection('$ctrl.meta.blocks', function() {
+          $scope.controls.fieldSearch = '';
+          ctrl.buildPaletteLists();
+        });
+      };
     }
   });
 
diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiSearch.html b/ext/afform/admin/ang/afGuiEditor/afGuiSearch.html
index b61deac99a..1d9def8349 100644
--- a/ext/afform/admin/ang/afGuiEditor/afGuiSearch.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiSearch.html
@@ -2,7 +2,7 @@
   <fieldset class="af-gui-entity-palette">
     <legend class="form-inline">
       {{:: ts('Add:') }}
-      <input ng-model="controls.fieldSearch" class="form-control" type="search" placeholder="&#xf002" title="{{:: ts('Search fields') }}" />
+      <input ng-model="controls.fieldSearch" ng-change="$ctrl.buildPaletteLists()" class="form-control" type="search" placeholder="&#xf002" title="{{:: ts('Search fields') }}" />
     </legend>
     <div class="af-gui-entity-palette-select-list">
       <div ng-if="elementList.length">
@@ -17,7 +17,7 @@
         <label>{{:: ts('Blocks') }}</label>
         <div ui-sortable="{update: buildPaletteLists, items: '&gt; div:not(.disabled)', connectWith: '[ui-sortable]', placeholder: 'af-gui-dropzone'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="blockList">
           <div ng-repeat="block in blockList" ng-class="{disabled: blockInUse(block)}">
-            {{ blockTitles[$index] }}
+            {{:: blockTitles[$index] }}
           </div>
         </div>
       </div>
-- 
2.25.1