platformcommons-web-lib 1.0.0

package/src/lib/modules/form-builder/services/form-schema-tree.service.ts

@@ -0,0 +1,652 @@
+import { Injectable } from '@angular/core';
+import {
+  FormSchema,
+  FieldConfig,
+  SectionConfig,
+} from '../../smart-form/models/form-schema.model';
+import {
+  SelectionGroupNode,
+  SelectionSectionNode,
+  SelectionFieldNode,
+} from '../models/field-selection.models';
+import {
+  ConfiguratorTreeNode,
+} from '../models/field-configurator.models';
+
+/**
+ * Service to parse a FormSchema into selection/configurator tree structures,
+ * and to rebuild a modified FormSchema from those trees.
+ */
+@Injectable({ providedIn: 'root' })
+export class FormSchemaTreeService {
+
+  // ────────────────────────────────────────────────────────────────────────────
+  // SELECTION TREE
+  // ────────────────────────────────────────────────────────────────────────────
+
+  /**
+   * Parse a FormSchema into SelectionGroupNodes for the field-selection UI.
+   * Stepper forms produce one group per step; section forms produce one group.
+   */
+  parseSchemaToSelectionGroups(schema: FormSchema): SelectionGroupNode[] {
+    if (schema.formType === 'STEPPER' && schema.stepperConfig?.children?.length) {
+      return schema.stepperConfig.children
+        .filter(child => child.type === 'GROUP')
+        .map(groupField => this._buildGroupNode(groupField));
+    }
+
+    // SECTION form → single virtual group
+    if (schema.sectionConfig?.children?.length) {
+      return [{
+        label: schema.label || 'Form',
+        groupFieldConfig: null,
+        enabled: true,
+        expanded: true, // Collapse by default for better UX
+        sections: this._buildSectionsFromChildren(schema.sectionConfig.children),
+      }];
+    }
+
+    return [];
+  }
+
+  /**
+   * Rebuild a FormSchema from the selection tree, updating visible/disabled/required
+   * flags on each FieldConfig. Does NOT mutate the original schema.
+   */
+  applySelectionToSchema(
+    groups: SelectionGroupNode[],
+    originalSchema: FormSchema,
+  ): FormSchema {
+    const schema: FormSchema = JSON.parse(JSON.stringify(originalSchema));
+
+    if (schema.formType === 'STEPPER' && schema.stepperConfig?.children?.length) {
+      const stepChildren = schema.stepperConfig.children.filter(c => c.type === 'GROUP');
+      groups.forEach((group, gi) => {
+        if (gi < stepChildren.length) {
+          const groupField = stepChildren[gi];
+          groupField.isEnabled = group.enabled;
+          groupField.visible = group.enabled; // Backward compatibility
+          groupField.disabled = !group.enabled;
+          if (groupField.sectionConfig?.children) {
+            this._applySectionsToChildren(group.sections, groupField.sectionConfig.children);
+          }
+        }
+      });
+    } else if (schema.sectionConfig?.children?.length && groups.length > 0) {
+      this._applySectionsToChildren(groups[0].sections, schema.sectionConfig.children);
+    }
+
+    return schema;
+  }
+
+  // ────────────────────────────────────────────────────────────────────────────
+  // CONFIGURATOR TREE
+  // ────────────────────────────────────────────────────────────────────────────
+
+  /**
+   * Parse a FormSchema into a flat ConfiguratorTreeNode[] for the left-panel tree.
+   */
+  parseSchemaToConfiguratorTree(schema: FormSchema): ConfiguratorTreeNode[] {
+    if (schema.formType === 'STEPPER' && schema.stepperConfig?.children?.length) {
+      return schema.stepperConfig.children
+        .filter(c => c.type === 'GROUP')
+        .map((groupField, gi) => this._buildConfiguratorGroupNode(groupField, [gi]));
+    }
+
+    if (schema.sectionConfig?.children?.length) {
+      return this._buildConfiguratorChildNodes(schema.sectionConfig.children, []);
+    }
+
+    return [];
+  }
+
+  /**
+   * Find a FieldConfig inside a FormSchema by its index path.
+   */
+  findFieldByPath(schema: FormSchema, path: number[]): FieldConfig | null {
+    if (path.length === 0) return null;
+
+    let children: FieldConfig[] | undefined;
+    if (schema.formType === 'STEPPER') {
+      children = schema.stepperConfig?.children;
+    } else {
+      children = schema.sectionConfig?.children;
+    }
+    if (!children) return null;
+
+    let current: FieldConfig | undefined;
+    for (let i = 0; i < path.length; i++) {
+      const idx = path[i];
+      if (!children || idx >= children.length) return null;
+      current = children[idx];
+
+      if (i < path.length - 1) {
+        // Navigate deeper
+        if (current.sectionConfig?.children) {
+          children = current.sectionConfig.children;
+        } else if (current.children) {
+          children = current.children;
+        } else {
+          return null;
+        }
+      }
+    }
+
+    return current ?? null;
+  }
+
+  /**
+   * Apply a partial patch to a FieldConfig located at the given path.
+   * Returns a new FormSchema (does not mutate the original).
+   */
+  /**
+   * Known top-level keys of FieldConfig.
+   * Used to strip stale group-name keys (e.g. textConstraintsTextConfig) that
+   * may have been introduced by previous incorrect patch operations.
+   */
+  private readonly _VALID_FIELD_KEYS = new Set([
+    'name', 'type', 'subType', 'label', 'placeholder', 'hint',
+    'required', 'disabled', 'readonly', 'isEnabled', 'visible',
+    'colSpan', 'defaultValue', 'prefix', 'suffix', 'className',
+    'payloadPath', 'errorMessage', 'visibilityExpression', 'onValidate',
+    'children', 'sectionConfig', 'rows',
+    'textConfig', 'emailConfig', 'phoneConfig', 'numberConfig',
+    'dateConfig', 'optionConfig', 'attachmentConfig', 'richTextConfig',
+    'ratingConfig', 'locationConfig', 'generatedConfig', 'rangeConfig',
+  ]);
+
+  applyFieldPatchToSchema(
+    path: number[],
+    patch: Partial<FieldConfig>,
+    originalSchema: FormSchema,
+  ): FormSchema {
+    const schema: FormSchema = JSON.parse(JSON.stringify(originalSchema));
+    const field = this.findFieldByPath(schema, path) as Record<string, any> | null;
+    if (field) {
+      // 1. Strip stale keys that don't belong to FieldConfig (e.g. old group names)
+      for (const key of Object.keys(field)) {
+        if (!this._VALID_FIELD_KEYS.has(key)) {
+          delete field[key];
+        }
+      }
+      // 2. Deep-merge the new patch on top of the cleaned field
+      FormSchemaTreeService.deepMerge(field, patch as any);
+      // 3. Clean up empty-string / null leaves from nested config objects.
+      //    e.g. user clears minDate → dateConfig.minDate becomes "" → remove it.
+      //    If the entire config object ends up empty → remove the key.
+      FormSchemaTreeService.cleanEmptyConfigValues(field);
+    }
+    return schema;
+  }
+
+  /**
+   * Remove empty-string and null values from all typed config sub-objects on a field.
+   * If all values in a config sub-object are empty, the key is deleted entirely.
+   */
+  public static cleanEmptyConfigValues(field: Record<string, any>): void {
+    const CONFIG_KEYS = [
+      'textConfig', 'emailConfig', 'phoneConfig', 'numberConfig',
+      'dateConfig', 'optionConfig', 'attachmentConfig', 'richTextConfig',
+      'ratingConfig', 'locationConfig', 'generatedConfig', 'rangeConfig',
+    ];
+    for (const key of CONFIG_KEYS) {
+      if (field[key] && typeof field[key] === 'object' && !Array.isArray(field[key])) {
+        field[key] = FormSchemaTreeService._removeEmptyLeaves(field[key]);
+        if (Object.keys(field[key]).length === 0) {
+          delete field[key];
+        }
+      }
+    }
+  }
+
+  /**
+   * Recursively strip empty-string, null, and undefined values from a plain object.
+   * Nested objects that become empty after stripping are also removed.
+   */
+  private static _removeEmptyLeaves(obj: Record<string, any>): Record<string, any> {
+    const result: Record<string, any> = {};
+    for (const [key, val] of Object.entries(obj)) {
+      if (val === '' || val === null || val === undefined) continue;
+      if (typeof val === 'object' && !Array.isArray(val)) {
+        const nested = FormSchemaTreeService._removeEmptyLeaves(val);
+        if (Object.keys(nested).length > 0) result[key] = nested;
+      } else {
+        result[key] = val;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Recursively merge `source` into `target` in-place.
+   * Objects are merged key-by-key; primitives/arrays replace the existing value.
+   */
+  public static deepMerge(target: Record<string, any>, source: Record<string, any>): void {
+    for (const key of Object.keys(source)) {
+      const srcVal = source[key];
+      const tgtVal = target[key];
+      if (
+        srcVal !== null &&
+        typeof srcVal === 'object' &&
+        !Array.isArray(srcVal) &&
+        tgtVal !== null &&
+        typeof tgtVal === 'object' &&
+        !Array.isArray(tgtVal)
+      ) {
+        // Both sides are plain objects — merge recursively
+        this.deepMerge(tgtVal, srcVal);
+      } else {
+        target[key] = srcVal;
+      }
+    }
+  }
+
+  /**
+   * Convert a flat object with dot-notation keys into a nested object.
+   * E.g. { 'a.b.c': 1 } -> { a: { b: { c: 1 } } }
+   */
+  public static inflatePatch(flatPatch: Record<string, any>): Record<string, any> {
+    const nested: Record<string, any> = {};
+
+    for (const [key, value] of Object.entries(flatPatch)) {
+      const parts = key.split('.');
+      let current = nested;
+
+      for (let i = 0; i < parts.length - 1; i++) {
+        const part = parts[i];
+        if (!(part in current) || typeof current[part] !== 'object' || current[part] === null) {
+          current[part] = {};
+        }
+        current = current[part];
+      }
+
+      current[parts[parts.length - 1]] = value;
+    }
+
+    return nested;
+  }
+
+  /**
+   * Convert a nested object into a flat object with dot-notation keys.
+   * E.g. { a: { b: { c: 1 } } } -> { 'a.b.c': 1 }
+   */
+  public static flattenObject(obj: Record<string, any>, prefix = ''): Record<string, any> {
+    const flat: Record<string, any> = {};
+
+    for (const [key, value] of Object.entries(obj)) {
+      const newKey = prefix ? `${prefix}.${key}` : key;
+      if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+        Object.assign(flat, this.flattenObject(value, newKey));
+      } else {
+        flat[newKey] = value;
+      }
+    }
+
+    return flat;
+  }
+
+  // ────────────────────────────────────────────────────────────────────────────
+  // FIELD TYPE MAPPING (FormSchema type → builder field type)
+  // ────────────────────────────────────────────────────────────────────────────
+
+  /**
+   * Map a FormSchema FieldConfig.type to the builder fieldType key
+   * used in field-type-schema.map.ts for config UI generation.
+   */
+  mapFieldTypeToBuilderType(type: string, subType?: string): string {
+    const typeMap: Record<string, string> = {
+      'TEXT_INPUT': 'shortText',
+      'TEXT': 'shortText',
+      'TEXTAREA': 'longText',
+      'RICH_TEXT': 'richText',
+      'NUMBER_INPUT': 'number',
+      'NUMBER': 'number',
+      'DATE': 'date',
+      'TIME': 'time',
+      'DROPDOWN': 'dropdown',
+      'SELECT': 'dropdown',
+      'MULTI_SELECT': 'multiSelect',
+      'AUTOCOMPLETE': 'autocomplete',
+      'RADIO': 'radio',
+      'CHECKBOX': 'checkbox',
+      'SWITCH': 'toggle',
+      'FILE_UPLOAD': 'file',
+      'RATING': 'rating',
+      'GENERATED': 'generated',
+      'CHIP': 'chip',
+      'LOCATION': 'location',
+      'GROUP': 'group',
+      'SUBFIELDS': 'section',
+    };
+
+    // Refinement by subType
+    if (type === 'TEXT_INPUT' && subType) {
+      switch (subType) {
+        case 'LONG':     return 'longText';
+        case 'EMAIL':    return 'email';
+        case 'PHONE':    return 'phone';
+        case 'PASSWORD': return 'password';
+        default:         return 'shortText';
+      }
+    }
+
+    if (type === 'NUMBER_INPUT') {
+      if (subType === 'DECIMAL') return 'decimal';
+      return 'number';
+    }
+
+    if (type === 'DATE') {
+      if (subType === 'DATETIME') return 'dateTime';
+      return 'date';
+    }
+
+    if (type === 'CHECKBOX' && subType === 'LIST') {
+      return 'multiCheckbox';
+    }
+
+    return typeMap[type] ?? 'shortText';
+  }
+
+  // ────────────────────────────────────────────────────────────────────────────
+  // PRIVATE — Selection tree builders
+  // ────────────────────────────────────────────────────────────────────────────
+
+  private _buildGroupNode(groupField: FieldConfig): SelectionGroupNode {
+    const sections: SelectionSectionNode[] = [];
+
+    if (groupField.sectionConfig?.children) {
+      const built = this._buildSectionsFromChildren(groupField.sectionConfig.children);
+      sections.push(...built);
+    }
+
+    return {
+      label: groupField.sectionConfig?.label || groupField.label || groupField.name || 'Group',
+      groupFieldConfig: groupField,
+      enabled: groupField.isEnabled ?? groupField.visible ?? true,
+      expanded: true, // Collapse by default for better UX - user can expand as needed
+      sections,
+    };
+  }
+
+  /**
+   * Build sections from a children array. Fields that are GROUP/SUBFIELDS
+   * become sections; other leaf fields are collected into a "default" section.
+   */
+  private _buildSectionsFromChildren(children: FieldConfig[]): SelectionSectionNode[] {
+    const sections: SelectionSectionNode[] = [];
+    let leafFields: SelectionFieldNode[] = [];
+
+    for (const child of children) {
+      if (child.type === 'GROUP' || (child.type === 'SUBFIELDS') || child.sectionConfig) {
+        // Flush any accumulated leaf fields into a default section
+        if (leafFields.length > 0) {
+          sections.push(this._createDefaultSection(leafFields));
+          leafFields = [];
+        }
+        sections.push(this._buildSectionNode(child));
+      } else if (child.type === 'ROW' && child.children?.length) {
+        // ROW children are leaf fields
+        for (const rowChild of child.children) {
+          leafFields.push(this._buildFieldNode(rowChild));
+        }
+      } else {
+        leafFields.push(this._buildFieldNode(child));
+      }
+    }
+
+    // Flush remaining leaf fields
+    if (leafFields.length > 0) {
+      sections.push(this._createDefaultSection(leafFields));
+    }
+
+    return sections;
+  }
+
+  private _buildSectionNode(field: FieldConfig): SelectionSectionNode {
+    const subsections: SelectionSectionNode[] = [];
+    const fields: SelectionFieldNode[] = [];
+
+    const children = field.sectionConfig?.children ?? field.children ?? [];
+    for (const child of children) {
+      if (child.type === 'GROUP' || child.sectionConfig) {
+        subsections.push(this._buildSectionNode(child));
+      } else if (child.type === 'ROW' && child.children?.length) {
+        for (const rowChild of child.children) {
+          fields.push(this._buildFieldNode(rowChild));
+        }
+      } else {
+        fields.push(this._buildFieldNode(child));
+      }
+    }
+
+    const isVisible = field.isEnabled ?? field.visible ?? true;
+    return {
+      label: field.sectionConfig?.label || field.label || field.name || 'Section',
+      sectionConfig: field.sectionConfig ?? null,
+      parentFieldConfig: field,
+      enabled: isVisible && field.disabled !== true,
+      expanded: false, // Collapse by default for better UX - user can expand as needed
+      fields,
+      subsections,
+    };
+  }
+
+  private _createDefaultSection(fields: SelectionFieldNode[]): SelectionSectionNode {
+    return {
+      label: 'Fields',
+      sectionConfig: null,
+      parentFieldConfig: null,
+      enabled: true,
+      expanded: false, // Collapse by default for better UX - user can expand as needed
+      fields,
+      subsections: [],
+    };
+  }
+
+  private _buildFieldNode(field: FieldConfig): SelectionFieldNode {
+    return {
+      fieldConfig: field,
+      selected: field.isEnabled ?? field.visible ?? true,
+      isLocked: field.readonly === true,
+    };
+  }
+
+  // ────────────────────────────────────────────────────────────────────────────
+  // PRIVATE — Apply selection back to FormSchema children
+  // ────────────────────────────────────────────────────────────────────────────
+
+  private _applySectionsToChildren(
+    sections: SelectionSectionNode[],
+    children: FieldConfig[],
+  ): void {
+    let sectionIdx = 0;
+    let fieldIdx = 0;
+
+    for (const child of children) {
+      if (child.type === 'GROUP' || child.sectionConfig) {
+        if (sectionIdx < sections.length) {
+          const section = sections[sectionIdx];
+          child.isEnabled = section.enabled;
+          child.visible = section.enabled; // Backward compatibility
+          child.disabled = !section.enabled;
+          const innerChildren = child.sectionConfig?.children ?? child.children ?? [];
+          if (innerChildren.length > 0) {
+            this._applySectionsToChildren(section.subsections, innerChildren);
+            // Also apply field selections
+            this._applyFieldsToChildren(section.fields, innerChildren);
+          }
+          sectionIdx++;
+        }
+      } else if (child.type === 'ROW' && child.children?.length) {
+        for (const rowChild of child.children) {
+          const matchedField = this._findSelectionField(sections, rowChild, fieldIdx);
+          if (matchedField) {
+            rowChild.isEnabled = matchedField.selected;
+            rowChild.visible = matchedField.selected; // Backward compatibility
+            fieldIdx++;
+          }
+        }
+      } else {
+        const matchedField = this._findSelectionField(sections, child, fieldIdx);
+        if (matchedField) {
+          child.isEnabled = matchedField.selected;
+          child.visible = matchedField.selected; // Backward compatibility
+          fieldIdx++;
+        }
+      }
+    }
+  }
+
+  private _applyFieldsToChildren(
+    selectionFields: SelectionFieldNode[],
+    children: FieldConfig[],
+  ): void {
+    let fi = 0;
+    for (const child of children) {
+      if (child.type === 'GROUP' || child.sectionConfig) continue;
+      if (child.type === 'ROW' && child.children?.length) {
+        for (const rowChild of child.children) {
+          if (fi < selectionFields.length) {
+            rowChild.isEnabled = selectionFields[fi].selected;
+            rowChild.visible = selectionFields[fi].selected; // Backward compatibility
+            fi++;
+          }
+        }
+      } else {
+        if (fi < selectionFields.length) {
+          child.isEnabled = selectionFields[fi].selected;
+          child.visible = selectionFields[fi].selected; // Backward compatibility
+          fi++;
+        }
+      }
+    }
+  }
+
+  private _findSelectionField(
+    sections: SelectionSectionNode[],
+    _field: FieldConfig,
+    _index: number,
+  ): SelectionFieldNode | null {
+    // Flatten all fields from all sections
+    for (const section of sections) {
+      for (const f of section.fields) {
+        if (f.fieldConfig === _field || f.fieldConfig.name === _field.name) {
+          return f;
+        }
+      }
+    }
+    return null;
+  }
+
+  // ────────────────────────────────────────────────────────────────────────────
+  // PRIVATE — Configurator tree builders
+  // ────────────────────────────────────────────────────────────────────────────
+
+  private _buildConfiguratorGroupNode(
+    groupField: FieldConfig,
+    basePath: number[],
+  ): ConfiguratorTreeNode {
+    const children: ConfiguratorTreeNode[] = [];
+    const sectionChildren = groupField.sectionConfig?.children ?? [];
+
+    sectionChildren.forEach((child, ci) => {
+      if (child.isEnabled === false || child.visible === false) return;
+      const childPath = [...basePath, ci];
+      if (child.type === 'GROUP' || child.type === 'SUBFIELDS' || child.subType === 'SECTION' || child.sectionConfig) {
+        children.push(this._buildConfiguratorSectionNode(child, childPath));
+      } else if (child.type === 'ROW' && child.children?.length) {
+        child.children.forEach((rowChild, ri) => {
+          if (rowChild.isEnabled !== false && rowChild.visible !== false) {
+            children.push(this._buildConfiguratorFieldNode(rowChild, [...childPath, ri]));
+          }
+        });
+      } else {
+        children.push(this._buildConfiguratorFieldNode(child, childPath));
+      }
+    });
+
+    return {
+      id: groupField.name || `group-${basePath.join('-')}`,
+      label: groupField.sectionConfig?.label || groupField.label || 'Group',
+      type: 'group',
+      expanded: false,
+      fieldConfig: groupField,
+      path: basePath,
+      children,
+    };
+  }
+
+  private _buildConfiguratorSectionNode(
+    field: FieldConfig,
+    basePath: number[],
+  ): ConfiguratorTreeNode {
+    const children: ConfiguratorTreeNode[] = [];
+    const sectionChildren = field.sectionConfig?.children ?? field.children ?? [];
+
+    sectionChildren.forEach((child, ci) => {
+      if (child.isEnabled === false || child.visible === false) return;
+      const childPath = [...basePath, ci];
+      if (child.type === 'GROUP' || child.type === 'SUBFIELDS' || child.subType === 'SECTION' || child.sectionConfig) {
+        children.push(this._buildConfiguratorSectionNode(child, childPath));
+      } else if (child.type === 'ROW' && child.children?.length) {
+        child.children.forEach((rowChild, ri) => {
+          if (rowChild.isEnabled !== false && rowChild.visible !== false) {
+            children.push(this._buildConfiguratorFieldNode(rowChild, [...childPath, ri]));
+          }
+        });
+      } else {
+        children.push(this._buildConfiguratorFieldNode(child, childPath));
+      }
+    });
+
+    return {
+      id: field.name || `section-${basePath.join('-')}`,
+      label: field.sectionConfig?.label || field.label || 'Section',
+      type: 'section',
+      expanded: false,
+      fieldConfig: field,
+      path: basePath,
+      children,
+    };
+  }
+
+  private _buildConfiguratorFieldNode(
+    field: FieldConfig,
+    path: number[],
+  ): ConfiguratorTreeNode {
+    return {
+      id: field.name || `field-${path.join('-')}`,
+      label: field.label || field.name || 'Field',
+      type: 'field',
+      expanded: false,
+      fieldConfig: field,
+      path,
+      children: [],
+    };
+  }
+
+  private _buildConfiguratorChildNodes(
+    children: FieldConfig[],
+    basePath: number[],
+  ): ConfiguratorTreeNode[] {
+    const nodes: ConfiguratorTreeNode[] = [];
+
+    children.forEach((child, ci) => {
+      if (child.isEnabled === false || child.visible === false) return;
+      const childPath = [...basePath, ci];
+      if (child.type === 'GROUP' || child.sectionConfig) {
+        nodes.push(this._buildConfiguratorSectionNode(child, childPath));
+      } else if (child.type === 'ROW' && child.children?.length) {
+        child.children.forEach((rowChild, ri) => {
+          if (rowChild.isEnabled !== false && rowChild.visible !== false) {
+            nodes.push(this._buildConfiguratorFieldNode(rowChild, [...childPath, ri]));
+          }
+        });
+      } else {
+        nodes.push(this._buildConfiguratorFieldNode(child, childPath));
+      }
+    });
+
+    return nodes;
+  }
+}

package/src/lib/modules/form-builder/tokens/builder.tokens.ts

@@ -0,0 +1,10 @@
+import { InjectionToken } from '@angular/core';
+import { FieldTypeSchemaMap } from '../models/builder.models';
+
+/**
+ * Optional token to override the field-type → config-schema mapping
+ * used by the standalone FieldConfiguratorComponent.
+ */
+export const BUILDER_FIELD_TYPE_SCHEMA_MAP = new InjectionToken<FieldTypeSchemaMap>(
+  'BUILDER_FIELD_TYPE_SCHEMA_MAP'
+);