fix(material/form-builder): can't edit form starting from an empty sc…

…hema
gnucoop · Jan 14, 2020 · 830ba87 · 830ba87
1 parent dff923f
commit 830ba87
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/material/form-builder/form-builder-service.ts b/src/material/form-builder/form-builder-service.ts
@@ -414,14 +414,17 @@ export class AjfFormBuilderService {
       node = createContainerNode({
         id,
         nodeType: nodeType.nodeType.node,
-        parent: parent.id,
+        parent: parent != null ? parent.id : 0,
         parentNode,
         name: '',
         nodes: [],
       });
     }
     this._beforeNodesUpdate.emit();
     this._nodesUpdates.next((nodes: AjfNode[]): AjfNode[] => {
+      if (node.parent === 0) {
+        return [node];
+      }
       const cn = isContainerNode(parent) && inContent ?
         (<AjfContainerNode>parent) :
         getNodeContainer({nodes}, parent);

diff --git a/src/material/form-builder/node-entry.html b/src/material/form-builder/node-entry.html
@@ -1,4 +1,4 @@
-<ng-template [ngIf]="nodeEntry != null">
+<ng-container *ngIf="nodeEntry != null ; else rootEmpty">
   <ng-template [ngIf]="isNodeEntry">
     <ajf-fb-branch-line
         *ngFor="let childNodeEntry of realNodeEntry.children; let idx = index"
@@ -55,4 +55,12 @@
         [firstBranchColor]="branchColors[idx]"
         [nodeEntry]="childNodeEntry"></ajf-fb-node-entry>
   </ng-template>
+</ng-container>
+<ng-template #rootEmpty>
+  <div class="mat-card-container">
+    <mat-card class="ajf-empty"
+        cdkDropList
+        [cdkDropListEnterPredicate]="emptyAreaDropPredicate()"
+        (cdkDropListDropped)="onDropSuccess($event)">&nbsp;</mat-card>
+  </div>
 </ng-template>
diff --git a/src/material/form-builder/node-entry.ts b/src/material/form-builder/node-entry.ts
@@ -162,8 +162,11 @@ export class AjfFbNodeEntry implements AfterViewInit, OnDestroy {
   }
 
   onDropSuccess(evt: CdkDragDrop<AjfFormBuilderNodeTypeEntry>, content = false): void {
-    if (this._nodeEntry == null) { return; }
     const dd = evt.item.data as AjfFormBuilderNodeTypeEntry;
+    if (this._nodeEntry == null) {
+      this._service.insertNode(dd, null as any, 0, content);
+      return;
+    }
     if (dd.nodeType !== void 0 && (!this.isNodeEntry || (this.isNodeEntry && content))) {
       const emptySlot = content ?
         {parent: (<AjfFormBuilderNodeEntry>this.nodeEntry).node, parentNode: 0} :