Afform Gui - Support editing entity-agnostic Content Blocks

[civicrm-core.git] / ext / afform / admin / ang / afGuiEditor / afGuiEntity.html

diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
index f7c8e823573a44c98b78b04583dd7e2b59158067..eed6f6e7c9c560df12bebe27c10b02bb79c4b57a 100644 (file)
--- a/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
+++ b/ext/afform/admin/ang/afGuiEditor/afGuiEntity.html
@@ -1,5 +1,5 @@
-<div class="af-gui-columns crm-flex-box">
-  <fieldset class="af-gui-entity-values">
+<div class="af-gui-columns crm-flex-box" ng-if="!$ctrl.entity.loading">
+  <fieldset class="af-gui-entity-values" ng-if="$ctrl.editor.getAfform().type !== 'block'">
     <legend>{{:: ts('Values:') }}</legend>
     <div class="form-inline" ng-if="getMeta().fields[fieldName]" ng-repeat="(fieldName, value) in $ctrl.entity.data">
       <label>{{ getMeta().fields[fieldName].label }}:</label><br />
@@ -17,31 +17,31 @@
   <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="blockList.length">
-        <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] }}
-          </div>
-        </div>
-      </div>
       <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>
+      <div ng-if="blockList.length">
+        <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] }}
           </div>
         </div>
       </div>
       <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]', placeholder: 'af-gui-dropzone'}" ui-sortable-update="$ctrl.editor.onDrop" ng-model="fieldGroup.fields">
+          <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>
@@ -50,11 +50,11 @@
   </fieldset>
 </div>
 
-<a href ng-click="$ctrl.editor.removeEntity($ctrl.entity.name)" class="btn btn-sm btn-danger-outline af-gui-remove-entity" title="{{ ts('Remove %1', {1: getMeta().label}) }}">
+<a ng-if="!$ctrl.entity.loading && $ctrl.editor.allowEntityConfig" href ng-click="$ctrl.editor.removeEntity($ctrl.entity.name)" class="btn btn-sm btn-danger-outline af-gui-remove-entity" title="{{ ts('Remove %1', {1: getMeta().label}) }}">
   <i class="crm-i fa-trash"></i>
 </a>
 
-<fieldset>
+<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>