From 1f0603578bc746aa7b0d6ad4ade9455a3d696e72 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Thu, 21 Nov 2019 17:11:37 -0500 Subject: [PATCH] GUI: Improve adding/removing entities in correct order --- ext/afform/gui/ang/afGuiEditor.js | 66 ++++++++++++--------- ext/afform/gui/ang/afGuiEditor/palette.html | 8 +-- 2 files changed, 42 insertions(+), 32 deletions(-) diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js index f4fb5fa81c..9c51eb7305 100644 --- a/ext/afform/gui/ang/afGuiEditor.js +++ b/ext/afform/gui/ang/afGuiEditor.js @@ -29,7 +29,7 @@ var ts = $scope.ts = CRM.ts(); $scope.afform = null; $scope.saving = false; - $scope.selectedEntity = null; + $scope.selectedEntityName = null; $scope.meta = this.meta = CRM.afformAdminData; this.scope = $scope; var editor = $scope.editor = this; @@ -71,9 +71,9 @@ removeRecursive($scope.afform.layout, function(item) { return ('#text' in item) && _.trim(item['#text']).length === 0; }); - $scope.layout = getTags($scope.afform.layout, 'af-form')[0]; + $scope.layout = findRecursive($scope.afform.layout, {'#tag': 'af-form'})[0]; evaluate($scope.layout['#children']); - $scope.entities = getTags($scope.layout['#children'], 'af-entity', 'name'); + $scope.entities = findRecursive($scope.layout['#children'], {'#tag': 'af-entity'}, 'name'); // Set changesSaved to true on initial load, false thereafter whenever changes are made to the model $scope.$watch('afform', function () { @@ -94,8 +94,11 @@ name: entityType + num, label: entityType + ' ' + num }); - $scope.layout['#children'].unshift($scope.entities[entityType + num]); - $scope.layout['#children'].push({ + // Add this af-entity tag after the last existing one + var pos = 1 + _.findLastIndex($scope.layout['#children'], {'#tag': 'af-entity'}); + $scope.layout['#children'].splice(pos, 0, $scope.entities[entityType + num]); + // Create a new af-fieldset container for the entity + var fieldset = { '#tag': 'fieldset', 'af-fieldset': entityType + num, '#children': [ @@ -109,19 +112,26 @@ ] } ] - }); + }; + // Attempt to place the new af-fieldset after the last one on the form + pos = 1 + _.findLastIndex($scope.layout['#children'], 'af-fieldset'); + if (pos) { + $scope.layout['#children'].splice(pos, 0, fieldset); + } else { + $scope.layout['#children'].push(fieldset); + } return entityType + num; }; this.removeEntity = function(entityName) { delete $scope.entities[entityName]; - _.remove($scope.layout['#children'], {'#tag': 'af-entity', name: entityName}); + removeRecursive($scope.layout['#children'], {'#tag': 'af-entity', name: entityName}); removeRecursive($scope.layout['#children'], {'af-fieldset': entityName}); this.selectEntity(null); }; this.selectEntity = function(entityName) { - $scope.selectedEntity = entityName; + $scope.selectedEntityName = entityName; }; this.getField = function(entityType, fieldName) { @@ -132,8 +142,8 @@ return $scope.entities[entityName]; }; - this.getSelectedEntity = function() { - return $scope.selectedEntity; + this.getselectedEntityName = function() { + return $scope.selectedEntityName; }; $scope.addEntity = function(entityType) { @@ -183,30 +193,22 @@ }; }); - function getTags(collection, tagName, indexBy) { - var items = []; + // Recursively searches a collection and its children using _.filter + // Returns an array of all matches, or an object if the indexBy param is used + function findRecursive(collection, predicate, indexBy) { + var items = _.filter(collection, predicate); _.each(collection, function(item) { - if (item && typeof item === 'object') { - if (item['#tag'] === tagName) { - items.push(item); - } - var childTags = item['#children'] ? getTags(item['#children'], tagName) : []; - if (childTags.length) { - Array.prototype.push.apply(items, childTags); + if (_.isPlainObject(item) && item['#children']) { + var childMatches = findRecursive(item['#children'], predicate); + if (childMatches.length) { + Array.prototype.push.apply(items, childMatches); } } }); return indexBy ? _.indexBy(items, indexBy) : items; } - // Turns a space-separated list (e.g. css classes) into an array - function splitClass(str) { - if (_.isArray(str)) { - return str; - } - return str ? _.unique(_.trim(str).split(/\s+/g)) : []; - } - + // Applies _.remove() to an item and its children function removeRecursive(collection, removeParams) { _.remove(collection, removeParams); _.each(collection, function(item) { @@ -216,6 +218,14 @@ }); } + // Turns a space-separated list (e.g. css classes) into an array + function splitClass(str) { + if (_.isArray(str)) { + return str; + } + return str ? _.unique(_.trim(str).split(/\s+/g)) : []; + } + angular.module('afGuiEditor').directive('afGuiEntity', function($timeout) { return { restrict: 'A', @@ -376,7 +386,7 @@ }; $scope.isSelectedFieldset = function(entityName) { - return entityName === $scope.editor.getSelectedEntity(); + return entityName === $scope.editor.getselectedEntityName(); }; $scope.selectEntity = function() { diff --git a/ext/afform/gui/ang/afGuiEditor/palette.html b/ext/afform/gui/ang/afGuiEditor/palette.html index 9249d3fa2f..43c7bf4079 100644 --- a/ext/afform/gui/ang/afGuiEditor/palette.html +++ b/ext/afform/gui/ang/afGuiEditor/palette.html @@ -1,11 +1,11 @@
-
-
+
+
-- 2.25.1