From fd6c081442973045dde85b1850bc8d966f7cda9e Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Sat, 2 Nov 2019 20:14:47 -0400
Subject: [PATCH] Add forms, add/remove entities

---
 ext/afform/gui/ang/afGuiEditor.js             | 74 +++++++++++--------
 .../gui/ang/afGuiEditor/config-form.html      |  4 +
 ext/afform/gui/ang/afGuiEditor/palette.html   |  2 +-
 ext/afform/gui/ang/afGuiList.aff.html         |  3 +
 4 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/ext/afform/gui/ang/afGuiEditor.js b/ext/afform/gui/ang/afGuiEditor.js
index 9569255426..1e65a946fe 100644
--- a/ext/afform/gui/ang/afGuiEditor.js
+++ b/ext/afform/gui/ang/afGuiEditor.js
@@ -15,37 +15,28 @@
         $scope.meta = CRM.afformAdminData;
         $scope.controls = {};
         $scope.fieldList = {};
-        $scope.editor = this;
+        var editor = $scope.editor = this;
         var newForm = {
           title: ts('Untitled Form'),
           layout: [{
             '#tag': 'af-form',
             ctrl: 'modelListCtrl',
-            '#children': [
-              {
-                '#tag': 'af-entity',
-                type: 'Contact',
-                data: {
-                  contact_type: 'Individual'
-                },
-                name: 'Contact1',
-                label: 'Contact 1',
-                'url-autofill': '1',
-                autofill: 'user'
-              }
-            ]
+            '#children': []
           }]
         };
-        if ($scope.afGuiEditor.name) {
+        if ($scope.afGuiEditor.name && $scope.afGuiEditor.name != '0') {
+          // Todo - show error msg if form is not found
           crmApi4('Afform', 'get', {where: [['name', '=', $scope.afGuiEditor.name]], layoutFormat: 'shallow'}, 0)
             .then(initialize);
         }
         else {
-          initialize(newForm);
+          $timeout(function() {
+            initialize(_.cloneDeep(newForm));
+            editor.addEntity('Contact');
+          });
         }
 
         function initialize(afform) {
-          // Todo - show error msg if form is not found
           $scope.afform = afform;
           $scope.layout = getTags($scope.afform.layout, 'af-form')[0];
           evaluate($scope.layout['#children']);
@@ -68,12 +59,29 @@
             label: entityType + ' ' + num
           };
           $scope.layout['#children'].unshift($scope.entities[entityType + num]);
-          this.selectEntity(entityType + num);
+          $scope.layout['#children'].push({
+            '#tag': 'fieldset',
+            'af-fieldset': entityType + num,
+            '#children': [
+              {
+                '#tag': 'legend',
+                'class': 'af-text',
+                '#children': [
+                  {
+                    '#text': entityType + ' ' + num
+                  }
+                ]
+              }
+            ]
+          });
+          buildFieldList(entityType + num);
+          return entityType + num;
         };
 
         this.removeEntity = function(entityName) {
           delete $scope.entities[entityName];
           _.remove($scope.layout['#children'], {'#tag': 'af-entity', name: entityName});
+          removeRecursive($scope.layout['#children'], {'af-fieldset': entityName});
           this.selectEntity(null);
         };
 
@@ -93,6 +101,11 @@
           return $scope.selectedEntity;
         };
 
+        $scope.addEntity = function(entityType) {
+          var entityName = editor.addEntity(entityType);
+          editor.selectEntity(entityName);
+        };
+
         $scope.rebuildFieldList = function() {
           $timeout(function() {
             $scope.$apply(function() {
@@ -181,11 +194,11 @@
           _.each(collection, function (item) {
             if (_.isPlainObject(item)) {
               if (item['af-fieldset']) {
-                expandFields(item['#children'], $scope.editor.getEntity(item['af-fieldset']).type);
+                expandFields(item['#children'], editor.getEntity(item['af-fieldset']).type);
               }
               else if (item['#tag'] === 'af-field') {
                 item.defn = item.defn || {};
-                _.defaults(item.defn, _.cloneDeep(_.pick($scope.editor.getField(entityType, item.name), ['title', 'input_type', 'input_attrs'])));
+                _.defaults(item.defn, _.cloneDeep(_.pick(editor.getField(entityType, item.name), ['title', 'input_type', 'input_attrs'])));
               } else {
                 expandFields(item['#children'], entityType);
               }
@@ -221,6 +234,15 @@
     return str ? _.unique(_.trim(str).split(/\s+/g)) : [];
   }
 
+  function removeRecursive(collection, removeParams) {
+    _.remove(collection, removeParams);
+    _.each(collection, function(item) {
+      if (_.isPlainObject(item) && item['#children']) {
+        removeRecursive(item['#children'], removeParams);
+      }
+    });
+  }
+
   angular.module('afGuiEditor').directive('afGuiBlock', function() {
     return {
       restrict: 'A',
@@ -320,19 +342,13 @@
         node: '=afGuiText'
       },
       require: '^^afGuiBlock',
-      link: {
-        pre: function($scope, element, attrs, block) {
-          $scope.block = block;
-        },
-        post: function($scope, element, attrs) {
-          if ($scope.block.node && $scope.block.node['#tag'] === 'fieldset') {
-            $scope.tags.legend = ts('Fieldset Legend');
-          }
-        }
+      link: function($scope, element, attrs, block) {
+        $scope.block = block;
       },
       controller: function($scope) {
         $scope.tags = {
           p: ts('Normal Text'),
+          legend: ts('Fieldset Legend'),
           h1: ts('Heading 1'),
           h2: ts('Heading 2'),
           h3: ts('Heading 3'),
diff --git a/ext/afform/gui/ang/afGuiEditor/config-form.html b/ext/afform/gui/ang/afGuiEditor/config-form.html
index 2af098cdb7..26794a3cbf 100644
--- a/ext/afform/gui/ang/afGuiEditor/config-form.html
+++ b/ext/afform/gui/ang/afGuiEditor/config-form.html
@@ -2,6 +2,10 @@
   {{ ts('Title:') }}
 </label>
 <input ng-model="afform.title" class="form-control" id="af_config_form_title" />
+<label for="af_config_form_description">
+  {{ ts('Description:') }}
+</label>
+<input ng-model="afform.description" class="form-control" id="af_config_form_description" />
 <label for="af_config_form_server_route">
   {{ ts('URL:') }}
 </label>
diff --git a/ext/afform/gui/ang/afGuiEditor/palette.html b/ext/afform/gui/ang/afGuiEditor/palette.html
index 5278c642fc..3e3517aa20 100644
--- a/ext/afform/gui/ang/afGuiEditor/palette.html
+++ b/ext/afform/gui/ang/afGuiEditor/palette.html
@@ -16,7 +16,7 @@
         </a>
         <ul class="dropdown-menu">
           <li ng-repeat="entity in meta.entities">
-            <a href ng-click="editor.addEntity(entity.name)">{{ entity.name }}</a>
+            <a href ng-click="addEntity(entity.name)">{{ entity.name }}</a>
           </li>
         </ul>
       </li>
diff --git a/ext/afform/gui/ang/afGuiList.aff.html b/ext/afform/gui/ang/afGuiList.aff.html
index ed4a6286ee..c87d00947a 100644
--- a/ext/afform/gui/ang/afGuiList.aff.html
+++ b/ext/afform/gui/ang/afGuiList.aff.html
@@ -1,3 +1,6 @@
+<a href="#/?name=0" class="btn btn-default">
+  <i class="crm-i fa-plus"></i> {{ ts('New Form') }}
+</a>
 <div
   af-api4="['Afform', 'get', {select: ['name','title','is_public','server_route'], orderBy: {name:'ASC'}}]"
   af-api4-ctrl="listCtrl">
-- 
2.25.1