fix(material/forms): fix bug with form builder icons

gnucoop · Jul 20, 2023 · 6e3f24b · 6e3f24b
1 parent 1251ab6
commit 6e3f24b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 23 deletions.
diff --git a/projects/material/form-builder/src/form-builder-service.ts b/projects/material/form-builder/src/form-builder-service.ts
@@ -71,7 +71,7 @@ import {
 
 export interface AjfFormBuilderNodeTypeEntry {
   label: string;
-  node: any;
+  nodeType: {node: AjfNodeType, field?: AjfFieldType};
   isSlide?: boolean;
 }
 
@@ -241,77 +241,77 @@ export class AjfFormBuilderService {
   private _availableNodeTypes: AjfFormBuilderNodeTypeEntry[] = [
     {
       label: 'Slide',
-      node: {nodeType: AjfNodeType.AjfSlide},
+      nodeType: {node: AjfNodeType.AjfSlide},
       isSlide: true,
     },
     {
       label: 'Repeating slide',
-      node: {nodeType: AjfNodeType.AjfRepeatingSlide},
+      nodeType: {node: AjfNodeType.AjfRepeatingSlide},
       isSlide: true,
     },
     {
       label: 'String',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.String},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.String},
     },
     {
       label: 'Text',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Text},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Text},
     },
     {
       label: 'Number',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Number},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Number},
     },
     {
       label: 'Boolean',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Boolean},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Boolean},
     },
     {
       label: 'Single choice',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.SingleChoice},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.SingleChoice},
     },
     {
       label: 'Multiple choice',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.MultipleChoice},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.MultipleChoice},
     },
     {
       label: 'Formula',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Formula},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Formula},
     },
     {
       label: 'Date',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Date},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Date},
     },
     {
       label: 'Date input',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.DateInput},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.DateInput},
     },
     {
       label: 'Time',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Time},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Time},
     },
     {
       label: 'Table',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Table},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Table},
     },
     {
       label: 'Geolocation',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Geolocation},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Geolocation},
     },
     {
       label: 'Barcode',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Barcode},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Barcode},
     },
     {
       label: 'File',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.File},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.File},
     },
     {
       label: 'Image',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Image},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Image},
     },
     {
       label: 'Range',
-      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Range},
+      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Range},
     },
   ];
   /**
@@ -503,20 +503,20 @@ export class AjfFormBuilderService {
   ): void {
     let node: AjfNode | AjfField;
     const id = ++nodeUniqueId;
-    const isFieldNode = nodeType.node.fieldType != null;
+    const isFieldNode = nodeType.nodeType?.field != null;
     if (isFieldNode) {
       node = createField({
         id,
         nodeType: AjfNodeType.AjfField,
-        fieldType: nodeType.node.fieldType!,
+        fieldType: nodeType.nodeType.field!,
         parent: parent.id,
         parentNode,
         name: '',
       });
     } else {
       node = createContainerNode({
         id,
-        nodeType: nodeType.node.nodeType,
+        nodeType: nodeType.nodeType.node,
         parent: 0,
         parentNode,
         name: '',

diff --git a/projects/material/form-builder/src/node-entry.html b/projects/material/form-builder/src/node-entry.html
@@ -57,6 +57,7 @@
       <ng-template #cardTitle>
         <div class="ajf-title-row">
           <ajf-node-icon [node]="realNodeEntry.node"></ajf-node-icon>
+          &nbsp;
           <span
             class="ajf-title"
             [innerHTML]="(realNodeEntry.node.label || realNodeEntry.node.name)  | transloco"

diff --git a/projects/material/form-builder/src/node-type-entry.html b/projects/material/form-builder/src/node-type-entry.html
@@ -1,3 +1,3 @@
 <ng-container *ngIf="nodeType">
-  <ajf-node-icon [node]="nodeType.node"></ajf-node-icon>&nbsp;{{nodeType.label}}
+  <ajf-node-icon [node]="node"></ajf-node-icon>&nbsp;{{nodeType.label}}
 </ng-container>
diff --git a/projects/material/form-builder/src/node-type-entry.ts b/projects/material/form-builder/src/node-type-entry.ts
@@ -47,6 +47,9 @@ export class AjfFbNodeTypeEntry {
     this._nodeType = nodeType;
     this._cdr.markForCheck();
   }
+  get node(): any {
+    return {nodeType: this.nodeType?.nodeType.node, fieldType: this.nodeType?.nodeType.field};
+  }
 
   constructor(private _cdr: ChangeDetectorRef) {}
 }