Afform - Fix dragging and dropping search fields and containers, savi…

…ng blocks
civicrm · Mar 20, 2022 · 5e42208 · 5e42208
1 parent 7ccdc9a
commit 5e42208
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html
@@ -1,5 +1,5 @@
-<li ng-if="!$ctrl.node['af-fieldset'] && !block.layout"><a href ng-click="saveBlock()">{{:: ts('Save as block') }}</a></li>
-<li ng-if="!$ctrl.node['af-fieldset'] && !block.layout" role="separator" class="divider"></li>
+<li ng-if="$ctrl.canSaveAsBlock()"><a href ng-click="saveBlock()">{{:: ts('Save as block') }}</a></li>
+<li ng-if="$ctrl.canSaveAsBlock()" role="separator" class="divider"></li>
 <li ng-if="tags[$ctrl.node['#tag']]">
   <div class="af-gui-field-select-in-dropdown form-inline" ng-click="$event.stopPropagation()">
     {{:: ts('Element:') }}

diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js
@@ -10,8 +10,11 @@
       entityName: '<',
       deleteThis: '&'
     },
-    require: {editor: '^^afGuiEditor'},
-    controller: function($scope, crmApi4, dialogService, afGui) {
+    require: {
+      editor: '^^afGuiEditor',
+      parentContainer: '?^^afGuiContainer'
+    },
+    controller: function($scope, $element, crmApi4, dialogService, afGui) {
       var ts = $scope.ts = CRM.ts('org.civicrm.afform_admin'),
         ctrl = this;
 
@@ -93,6 +96,10 @@
       var block = {};
       $scope.block = null;
 
+      this.isBlock = function() {
+        return 'layout' in block;
+      };
+
       $scope.getSetChildren = function(val) {
         var collection = block.layout || (ctrl.node && ctrl.node['#children']);
         return arguments.length ? (collection = val) : collection;
@@ -254,6 +261,16 @@
         }, true));
       }
 
+      this.canSaveAsBlock = function() {
+        return !ctrl.node['af-fieldset'] &&
+          // Exclude blocks
+          !ctrl.isBlock() &&
+          // Exclude the child of a block
+          (!ctrl.parentContainer || !ctrl.parentContainer.isBlock()) &&
+          // Excludes search display containers and their children
+          (ctrl.entityName || '') === ctrl.getDataEntity();
+      };
+
       $scope.saveBlock = function() {
         var options = CRM.utils.adjustDialogDefaults({
           width: '500px',
@@ -328,6 +345,10 @@
         return ctrl.entityName ? ctrl.entityName.split('-join-')[0] : null;
       };
 
+      this.getDataEntity = function() {
+        return $element.attr('data-entity') || '';
+      };
+
       this.getJoinEntity = function() {
         if (!ctrl.join) {
           return null;
@@ -342,16 +363,15 @@
 
       // Returns the entity type for fields within this conainer (join entity type if this is a join, else the primary entity type)
       this.getFieldEntityType = function(fieldName) {
+        var entityType;
         // If entityName is declared for this fieldset, return entity-type or join-type
         if (ctrl.entityName) {
           var joinType = ctrl.entityName.split('-join-');
-          return joinType[1] || (ctrl.editor && ctrl.editor.getEntity(joinType[0]).type);
-        }
-        // If entityName is not declared, this field belongs to a search
-        var entityType,
-          searchDisplay = ctrl.getSearchDisplay(ctrl.node),
-          prefix = _.includes(fieldName, '.') ? fieldName.split('.')[0] : null;
-        if (searchDisplay) {
+          entityType = joinType[1] || (ctrl.editor && ctrl.editor.getEntity(joinType[0]).type);
+        } else {
+          var searchKey = ctrl.getDataEntity(),
+            searchDisplay = afGui.getSearchDisplay.apply(null, searchKey.split('.')),
+            prefix = _.includes(fieldName, '.') ? fieldName.split('.')[0] : null;
           if (prefix) {
             _.each(searchDisplay['saved_search_id.api_params'].join, function(join) {
               var joinInfo = join[0].split(' AS ');
@@ -365,7 +385,8 @@
             entityType = searchDisplay['saved_search_id.api_entity'];
           }
         }
-        return entityType || _.map(afGui.meta.searchDisplays, 'saved_search_id.api_entity')[0];
+
+        return entityType;
       };
 
     }

diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html
@@ -25,7 +25,7 @@
   <div ng-repeat="item in getSetChildren()" >
     <div ng-switch="$ctrl.getNodeType(item)">
       <af-gui-container ng-switch-when="fieldset" node="item" delete-this="$ctrl.removeElement(item)" style="{{ item.style }}" class="af-gui-container af-gui-fieldset af-gui-container-type-{{ item['#tag'] }}" ng-class="{'af-entity-selected': isSelectedFieldset(item['af-fieldset'])}" entity-name="item['af-fieldset']" data-entity="{{ item['af-fieldset'] }}" ></af-gui-container>
-      <af-gui-container ng-switch-when="container" node="item" delete-this="$ctrl.removeElement(item)" style="{{ item.style }}" class="af-gui-container af-gui-container-type-{{ item['#tag'] }}" entity-name="$ctrl.entityName" data-entity="{{ $ctrl.entityName }}" ></af-gui-container>
+      <af-gui-container ng-switch-when="container" node="item" delete-this="$ctrl.removeElement(item)" style="{{ item.style }}" class="af-gui-container af-gui-container-type-{{ item['#tag'] }}" entity-name="$ctrl.entityName" data-entity="{{ $ctrl.getDataEntity() }}" ></af-gui-container>
       <af-gui-container ng-switch-when="join" node="item" delete-this="$ctrl.removeElement(item)" style="{{ item.style }}" class="af-gui-container" join="item['af-join']" entity-name="$ctrl.entityName + '-join-' + item['af-join']" data-entity="{{ $ctrl.entityName + '-join-' + item['af-join'] }}" ></af-gui-container>
       <af-gui-field ng-switch-when="field" node="item" delete-this="$ctrl.removeElement(item)" ></af-gui-field>
       <af-gui-text ng-switch-when="text" node="item" delete-this="$ctrl.removeElement(item)" class="af-gui-element af-gui-text" ></af-gui-text>