From fbcd8c17d575f7d963c99e23697fcaef56eeea76 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Wed, 27 Jan 2021 14:24:01 -0500 Subject: [PATCH] Afform Gui - Support editing blocks --- .../ang/afAdmin/afAdminList.controller.js | 49 +++++++++++++++++-- ext/afform/admin/ang/afAdmin/afAdminList.html | 37 +++++++++----- ext/afform/admin/ang/afGuiEditor.css | 6 +-- ext/afform/admin/ang/afGuiEditor.js | 8 ++- .../ang/afGuiEditor/afGuiEditor.component.js | 26 ++++++++-- .../ang/afGuiEditor/afGuiEditorCanvas.html | 2 +- .../ang/afGuiEditor/afGuiEditorPalette.html | 7 +-- .../ang/afGuiEditor/afGuiEntity.component.js | 3 ++ .../admin/ang/afGuiEditor/afGuiEntity.html | 4 +- .../elements/afGuiContainer.component.js | 4 +- .../afGuiEditor/elements/afGuiContainer.html | 2 +- 11 files changed, 115 insertions(+), 33 deletions(-) diff --git a/ext/afform/admin/ang/afAdmin/afAdminList.controller.js b/ext/afform/admin/ang/afAdmin/afAdminList.controller.js index 682b17aa33..10f4e7fc9d 100644 --- a/ext/afform/admin/ang/afAdmin/afAdminList.controller.js +++ b/ext/afform/admin/ang/afAdmin/afAdminList.controller.js @@ -8,11 +8,20 @@ $scope.crmUrl = CRM.url; this.tabs = CRM.afAdmin.afform_type; + $scope.tabs = _.indexBy(ctrl.tabs, 'name'); + _.each(['form', 'block', 'search'], function(type) { + if ($scope.tabs[type]) { + $scope.tabs[type].options = []; + if (type === 'form') { + $scope.tabs.form.default = '#create/form/Individual'; + } + } + }); this.afforms = _.transform(afforms, function(afforms, afform) { - var type = afform.type || 'system'; - afforms[type] = afforms[type] || []; - afforms[type].push(afform); + afform.type = afform.type || 'system'; + afforms[afform.type] = afforms[afform.type] || []; + afforms[afform.type].push(afform); }, {}); $scope.$bindToRoute({ @@ -22,6 +31,40 @@ default: ctrl.tabs[0].name }); + this.createLinks = function() { + ctrl.searchCreateLinks = ''; + if ($scope.tabs[ctrl.tab].options.length) { + return; + } + var links = []; + + if (ctrl.tab === 'form') { + _.each(CRM.afGuiEditor.entities, function(entity, name) { + if (entity.defaults) { + links.push({ + url: '#create/form/' + name, + label: entity.label, + icon: entity.icon + }); + } + }); + $scope.tabs.form.options = _.sortBy(links, 'Label'); + } + + if (ctrl.tab === 'block') { + _.each(CRM.afGuiEditor.entities, function(entity, name) { + if (entity.defaults) { + links.push({ + url: '#create/block/' + name, + label: entity.label, + icon: entity.icon + }); + } + }); + $scope.tabs.block.options = _.sortBy(links, 'Label'); + } + }; + this.revert = function(afform) { var index = _.findIndex(ctrl.afforms[ctrl.tab], {name: afform.name}); if (index > -1) { diff --git a/ext/afform/admin/ang/afAdmin/afAdminList.html b/ext/afform/admin/ang/afAdmin/afAdminList.html index 80af2d876c..5ab6d0cc12 100644 --- a/ext/afform/admin/ang/afAdmin/afAdminList.html +++ b/ext/afform/admin/ang/afAdmin/afAdminList.html @@ -1,21 +1,36 @@

{{:: ts('Configurable Forms') }}

-
- - - {{:: ts('New Form') }} - -
-
- + + +
+ + {{ ts('New %1', {1: tabs[$ctrl.tab].label }) }} + + + +
@@ -29,7 +44,7 @@ - +
{{afform.title}} {{afform.name}} @@ -41,7 +56,7 @@ {{afform.is_public ? ts('Frontend') : ts('Backend')}} - {{ ts('Edit') }} + {{ ts('Edit') }} {{ afform.has_base ? ts('Revert') : ts('Delete') }} diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css index ccacca1d67..55703580bf 100644 --- a/ext/afform/admin/ang/afGuiEditor.css +++ b/ext/afform/admin/ang/afGuiEditor.css @@ -81,15 +81,15 @@ font-size: 12px; } -#afGuiEditor input[type=search]::placeholder { +#bootstrap-theme input[type=search]::placeholder { font-family: FontAwesome; text-align: right; } -#afGuiEditor input[type=search]:-ms-input-placeholder { +#bootstrap-theme input[type=search]:-ms-input-placeholder { font-family: FontAwesome; text-align: right; } -#afGuiEditor input[type=search]::-ms-input-placeholder { +#bootstrap-theme input[type=search]::-ms-input-placeholder { font-family: FontAwesome; text-align: right; } diff --git a/ext/afform/admin/ang/afGuiEditor.js b/ext/afform/admin/ang/afGuiEditor.js index 5b1253fc92..ca6947e87f 100644 --- a/ext/afform/admin/ang/afGuiEditor.js +++ b/ext/afform/admin/ang/afGuiEditor.js @@ -115,8 +115,12 @@ meta: CRM.afGuiEditor, - getField: function(entityType, fieldName) { - return CRM.afGuiEditor.entities[entityType].fields[fieldName]; + getEntity: function(entityName) { + return CRM.afGuiEditor.entities[entityName]; + }, + + getField: function(entityName, fieldName) { + return CRM.afGuiEditor.entities[entityName].fields[fieldName]; }, // Recursively searches a collection and its children using _.filter diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js index 68fa65a9c6..80ce49a798 100644 --- a/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js +++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditor.component.js @@ -33,12 +33,28 @@ } $scope.canvasTab = 'layout'; $scope.layoutHtml = ''; - editor.layout = afGui.findRecursive($scope.afform.layout, {'#tag': 'af-form'})[0]; - $scope.entities = afGui.findRecursive(editor.layout['#children'], {'#tag': 'af-entity'}, 'name'); + editor.layout = {'#children': []}; + $scope.entities = {}; - if (editor.mode === 'create') { - editor.addEntity(editor.entity); - editor.layout['#children'].push(afGui.meta.elements.submit.element); + if ($scope.afform.type === 'form') { + editor.allowEntityConfig = true; + editor.layout['#children'] = afGui.findRecursive($scope.afform.layout, {'#tag': 'af-form'})[0]['#children']; + $scope.entities = afGui.findRecursive(editor.layout['#children'], {'#tag': 'af-entity'}, 'name'); + + if (editor.mode === 'create') { + editor.addEntity(editor.entity); + editor.layout['#children'].push(afGui.meta.elements.submit.element); + } + } + + else if ($scope.afform.type === 'block') { + editor.layout['#children'] = $scope.afform.layout; + editor.blockEntity = $scope.afform.join || $scope.afform.block; + $scope.entities[editor.blockEntity] = { + type: editor.blockEntity, + name: editor.blockEntity, + label: afGui.getEntity(editor.blockEntity).label + }; } // Set changesSaved to true on initial load, false thereafter whenever changes are made to the model diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditorCanvas.html b/ext/afform/admin/ang/afGuiEditor/afGuiEditorCanvas.html index 53365daad9..497c219ace 100644 --- a/ext/afform/admin/ang/afGuiEditor/afGuiEditorCanvas.html +++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditorCanvas.html @@ -25,7 +25,7 @@
- +

{{:: ts('This is a read-only preview of the auto-generated markup.') }}

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html b/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html index 9307e904c7..f166d96ed1 100644 --- a/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html +++ b/ext/afform/admin/ang/afGuiEditor/afGuiEditorPalette.html @@ -7,12 +7,13 @@
  • - {{ entity.label }} + {{ entity.label }} + {{ entity.label }}
    • -
    - + -
    +
    {{:: ts('Options') }}
    diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js index 0953d61916..5ebe110b48 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js @@ -16,7 +16,7 @@ ctrl = this; this.$onInit = function() { - if ((ctrl.node['#tag'] in afGui.meta.blocks) || ctrl.join) { + if (ctrl.node['#tag'] && ((ctrl.node['#tag'] in afGui.meta.blocks) || ctrl.join)) { var blockNode = getBlockNode(), blockTag = blockNode ? blockNode['#tag'] : null; if (blockTag && (blockTag in afGui.meta.blocks) && !afGui.meta.blocks[blockTag].layout) { @@ -234,7 +234,7 @@ this.node = ctrl.node; this.getNodeType = function(node) { - if (!node) { + if (!node || !node['#tag']) { return null; } if (node['#tag'] === 'af-field') { diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html index a1ae54be3e..bf90576942 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html @@ -1,4 +1,4 @@ -
    +
    {{ $ctrl.editor.getEntity($ctrl.entityName).label }} {{ $ctrl.join ? ts($ctrl.join) + ':' : ts('Block:') }} -- 2.25.1