feat(material/forms): replace ajf-icons with material icons

projects/material/form-builder/src/form-builder-service.ts

@@ -71,11 +71,7 @@ import {
 
 export interface AjfFormBuilderNodeTypeEntry {
   label: string;
-  icon: {fontSet: string; fontIcon: string};
-  nodeType: {
-    node: AjfNodeType;
-    field?: AjfFieldType;
-  };
+  node: any;
   isSlide?: boolean;
 }
 
@@ -245,75 +241,77 @@ export class AjfFormBuilderService {
   private _availableNodeTypes: AjfFormBuilderNodeTypeEntry[] = [
     {
       label: 'Slide',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-slide'},
-      nodeType: {node: AjfNodeType.AjfSlide},
+      node: {nodeType: AjfNodeType.AjfSlide},
       isSlide: true,
     },
     {
       label: 'Repeating slide',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-repeatingslide'},
-      nodeType: {node: AjfNodeType.AjfRepeatingSlide},
+      node: {nodeType: AjfNodeType.AjfRepeatingSlide},
       isSlide: true,
     },
     {
       label: 'String',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-string'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.String},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.String},
     },
     {
       label: 'Text',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-text'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Text},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Text},
     },
     {
       label: 'Number',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-number'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Number},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Number},
     },
     {
       label: 'Boolean',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-boolean'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Boolean},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Boolean},
     },
     {
       label: 'Single choice',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-singlechoice'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.SingleChoice},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.SingleChoice},
     },
     {
       label: 'Multiple choice',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-multiplechoice'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.MultipleChoice},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.MultipleChoice},
     },
     {
       label: 'Formula',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-formula'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Formula},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Formula},
     },
     {
       label: 'Date',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-date'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Date},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Date},
     },
     {
       label: 'Date input',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-dateinput'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.DateInput},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.DateInput},
     },
     {
       label: 'Time',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-time'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Time},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Time},
     },
     {
       label: 'Table',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-table'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Table},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Table},
+    },
+    {
+      label: 'Geolocation',
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Geolocation},
+    },
+    {
+      label: 'Barcode',
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Barcode},
+    },
+    {
+      label: 'File',
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.File},
+    },
+    {
+      label: 'Image',
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Image},
     },
     {
       label: 'Range',
-      icon: {fontSet: 'ajf-icon', fontIcon: 'field-range'},
-      nodeType: {node: AjfNodeType.AjfField, field: AjfFieldType.Range},
+      node: {nodeType: AjfNodeType.AjfField, fieldType: AjfFieldType.Range},
     },
   ];
   /**
@@ -505,20 +503,20 @@ export class AjfFormBuilderService {
   ): void {
     let node: AjfNode | AjfField;
     const id = ++nodeUniqueId;
-    const isFieldNode = nodeType.nodeType?.field != null;
+    const isFieldNode = nodeType.node.fieldType != null;
     if (isFieldNode) {
       node = createField({
         id,
         nodeType: AjfNodeType.AjfField,
-        fieldType: nodeType.nodeType.field!,
+        fieldType: nodeType.node.fieldType!,
         parent: parent.id,
         parentNode,
         name: '',
       });
     } else {
       node = createContainerNode({
         id,
-        nodeType: nodeType.nodeType.node,
+        nodeType: nodeType.node.nodeType,
         parent: 0,
         parentNode,
         name: '',

projects/material/form-builder/src/node-type-entry.html

@@ -1,5 +1,3 @@
 <ng-container *ngIf="nodeType">
-  <mat-icon
-    [fontSet]="nodeType.icon.fontSet" [fontIcon]="nodeType.icon.fontIcon"></mat-icon>
-  {{ nodeType.label }}
+  <ajf-node-icon [node]="nodeType.node"></ajf-node-icon>&nbsp;{{nodeType.label}}
 </ng-container>

projects/material/node-icon/src/node-icon.html

@@ -1,3 +1,3 @@
 <ng-template [ngIf]="node">
-  <mat-icon [fontSet]="fontSet" [fontIcon]="fontIcon"></mat-icon>
+  <mat-icon>{{matIcon(node)}}</mat-icon>
 </ng-template>

projects/material/node-icon/src/node-icon.ts

@@ -20,6 +20,7 @@
  *
  */
 
+import {AjfField, AjfFieldType, AjfNode, AjfNodeType} from '@ajf/core/forms';
 import {AjfNodeIcon as CoreNodeIcon} from '@ajf/core/node-icon';
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 
@@ -30,4 +31,50 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AjfNodeIcon extends CoreNodeIcon {}
+export class AjfNodeIcon extends CoreNodeIcon {
+  matIcon(node: AjfNode): string {
+    if (node.nodeType === AjfNodeType.AjfSlide || node.nodeType === AjfNodeType.AjfRepeatingSlide) {
+      return 'topic';
+    }
+    if (node.nodeType !== AjfNodeType.AjfField) {
+      return 'broken_image';
+    }
+    switch ((node as AjfField).fieldType as AjfFieldType) {
+      case AjfFieldType.String:
+      case AjfFieldType.Text:
+        return 'abc';
+      case AjfFieldType.Number:
+      case AjfFieldType.Range:
+        return 'pin';
+      case AjfFieldType.Boolean:
+        return 'toggle_off';
+      case AjfFieldType.SingleChoice:
+        return 'format_list_bulleted';
+      case AjfFieldType.MultipleChoice:
+        return 'format_list_numbered';
+      case AjfFieldType.Formula:
+        return 'code';
+      case AjfFieldType.Empty:
+        return 'html';
+      case AjfFieldType.Date:
+      case AjfFieldType.DateInput:
+        return 'calendar_month';
+      case AjfFieldType.Time:
+        return 'access_time';
+      case AjfFieldType.Table:
+        return 'grid_on';
+      case AjfFieldType.Geolocation:
+        return 'location_on';
+      case AjfFieldType.Barcode:
+        return 'qr_code_2';
+      case AjfFieldType.File:
+        return 'attach_file';
+      case AjfFieldType.Image:
+        return 'image';
+      case AjfFieldType.VideoUrl:
+        return 'videocam';
+      default:
+        return 'broken_image';
+    }
+  }
+}