commons-shared-web-ui 0.0.61 → 0.0.62

package/src/lib/modules/form-builder/models/field-selection.models.ts

@@ -0,0 +1,51 @@
+import { FieldConfig, SectionConfig } from '../../smart-form/models/form-schema.model';
+
+/**
+ * Wraps a FieldConfig leaf with selection metadata for the UI tree.
+ */
+export interface SelectionFieldNode {
+  /** Reference back to the original FieldConfig */
+  fieldConfig: FieldConfig;
+  /** Whether this field is selected (checkbox state) */
+  selected: boolean;
+  /** If true, the field cannot be deselected by the user */
+  isLocked: boolean;
+}
+
+/**
+ * Wraps a section (SUBFIELDS / nested sectionConfig) with toggle + tree metadata.
+ * Sections can recursively contain child sections.
+ */
+export interface SelectionSectionNode {
+  /** Section label */
+  label: string;
+  /** The original sectionConfig reference (if applicable) */
+  sectionConfig: SectionConfig | null;
+  /** The parent FieldConfig that owns this sectionConfig (type GROUP/SUBFIELDS) */
+  parentFieldConfig: FieldConfig | null;
+  /** Whether the section toggle is ON */
+  enabled: boolean;
+  /** Whether the section is visually expanded in the tree */
+  expanded: boolean;
+  /** Leaf fields inside this section */
+  fields: SelectionFieldNode[];
+  /** Recursive child sections */
+  subsections: SelectionSectionNode[];
+}
+
+/**
+ * Top-level group node (maps to a GROUP field in stepperConfig.children
+ * or a top-level sectionConfig in a SECTION form).
+ */
+export interface SelectionGroupNode {
+  /** Group label */
+  label: string;
+  /** The original FieldConfig of type GROUP (stepper forms) or null (section form) */
+  groupFieldConfig: FieldConfig | null;
+  /** Whether the entire group toggle is ON */
+  enabled: boolean;
+  /** Whether the group is visually expanded */
+  expanded: boolean;
+  /** Sections inside this group */
+  sections: SelectionSectionNode[];
+}

package/src/lib/modules/form-builder/services/field-configurator.service.ts

@@ -0,0 +1,258 @@
+import { Injectable, computed, signal } from '@angular/core';
+import { FormSchema, FieldConfig } from '../../smart-form/models/form-schema.model';
+import {
+  ConfiguratorTreeNode,
+  ConfiguratorFieldInfo,
+} from '../models/field-configurator.models';
+import { FormSchemaTreeService } from '../services/form-schema-tree.service';
+
+interface FieldConfiguratorState {
+  tree: ConfiguratorTreeNode[];
+  selectedFieldPath: number[] | null;
+  schema: FormSchema | null;
+}
+
+/**
+ * Signal-based service for the field-configurator component.
+ * Manages the tree + selected field + config panel state.
+ */
+@Injectable()
+export class FieldConfiguratorService {
+  private readonly _state = signal<FieldConfiguratorState>({
+    tree: [],
+    selectedFieldPath: null,
+    schema: null,
+  });
+
+  private readonly treeService = new FormSchemaTreeService();
+
+  // ── Computed slices ─────────────────────────────────────────────
+  readonly tree = computed(() => this._state().tree);
+  readonly schema = computed(() => this._state().schema);
+  readonly selectedFieldPath = computed(() => this._state().selectedFieldPath);
+
+  readonly selectedField = computed<FieldConfig | null>(() => {
+    const { schema, selectedFieldPath } = this._state();
+    if (!schema || !selectedFieldPath) return null;
+    return this.treeService.findFieldByPath(schema, selectedFieldPath);
+  });
+
+  readonly selectedFieldInfo = computed<ConfiguratorFieldInfo | null>(() => {
+    const field = this.selectedField();
+    const path = this.selectedFieldPath();
+    if (!field || !path) return null;
+
+    // Walk the tree to find group/section labels
+    const labels = this._getParentLabels(this._state().tree, path);
+
+    return {
+      fieldConfig: field,
+      groupLabel: labels.groupLabel,
+      sectionLabel: labels.sectionLabel,
+      path,
+    };
+  });
+
+  /**
+   * Returns the builder-compatible field type string for the currently selected field.
+   * Used to look up the config schema from field-type-schema.map.ts.
+   */
+  readonly selectedFieldBuilderType = computed<string | null>(() => {
+    const field = this.selectedField();
+    if (!field) return null;
+    return this.treeService.mapFieldTypeToBuilderType(field.type, field.subType);
+  });
+
+  // ── Mutators ────────────────────────────────────────────────────
+
+  /**
+   * Initialize the store from a FormSchema.
+   */
+  loadSchema(schema: FormSchema, preserveSelection = false): void {
+    // If it's the exact same object reference and we are not forcing a reset, skip.
+    if (this._state().schema === schema && preserveSelection) return;
+
+    const tree = this.treeService.parseSchemaToConfiguratorTree(schema);
+    
+    this._state.update(s => {
+      // If preserveSelection is truthy, we definitely keep it.
+      // Otherwise, we still try to keep it IF the path is still valid in the new schema.
+      let newPath = s.selectedFieldPath;
+      if (!preserveSelection && newPath) {
+        const stillExists = !!this.treeService.findFieldByPath(schema, newPath);
+        if (!stillExists) newPath = null;
+      }
+
+      return {
+        ...s,
+        tree,
+        selectedFieldPath: newPath,
+        schema: JSON.parse(JSON.stringify(schema)),
+      };
+    });
+  }
+
+  /**
+   * Select a field by its path. Pass null to deselect.
+   */
+  selectField(path: number[] | null): void {
+    this._state.update(s => ({ ...s, selectedFieldPath: path }));
+  }
+
+  /**
+   * Toggle a tree node's expanded state.
+   */
+  toggleNodeExpanded(nodeId: string): void {
+    this._state.update(s => ({
+      ...s,
+      tree: this._toggleExpanded(s.tree, nodeId),
+    }));
+  }
+
+  /**
+   * Apply a config patch to the currently selected field.
+   * Rebuilds the schema and tree nodes immutably.
+   */
+  patchSelectedField(patch: Partial<FieldConfig>): void {
+    const { schema, selectedFieldPath, tree } = this._state();
+    if (!schema || !selectedFieldPath) return;
+
+    const newSchema = this.treeService.applyFieldPatchToSchema(
+      selectedFieldPath,
+      patch,
+      schema,
+    );
+
+    // Rebuild the tree to reflect label changes etc.
+    const newTree = this.treeService.parseSchemaToConfiguratorTree(newSchema);
+    // Preserve expanded states from the old tree
+    this._restoreExpandedStates(tree, newTree);
+
+    this._state.set({
+      schema: newSchema,
+      selectedFieldPath,
+      tree: newTree,
+    });
+  }
+
+  /**
+   * Change the type (and optionally subType) of the currently selected field.
+   * Mapping goes from builderType keys (e.g. 'richText') → {type, subType?}.
+   * DROPDOWN fields cannot be changed and are guarded here as well.
+   */
+  changeFieldType(builderType: string): void {
+    const currentField = this.selectedField();
+    if (!currentField) return;
+    // Guard: never change a DROPDOWN-based field
+    const t = currentField.type?.toUpperCase();
+    if (t === 'DROPDOWN' || t === 'MULTI_SELECT') return;
+
+    const TYPE_MAP: Record<string, { type: string; subType?: string }> = {
+      shortText:     { type: 'TEXT_INPUT' },
+      longText:      { type: 'TEXT_INPUT', subType: 'LONG' },
+      email:         { type: 'TEXT_INPUT', subType: 'EMAIL' },
+      phone:         { type: 'TEXT_INPUT', subType: 'PHONE' },
+      password:      { type: 'TEXT_INPUT', subType: 'PASSWORD' },
+      number:        { type: 'NUMBER_INPUT', subType: 'INTEGER' },
+      decimal:       { type: 'NUMBER_INPUT', subType: 'DECIMAL' },
+      date:          { type: 'DATE', subType: 'SINGLE' },
+      time:          { type: 'TIME', subType: 'SINGLE' },
+      dateTime:      { type: 'DATE', subType: 'DATETIME' },
+      checkbox:      { type: 'CHECKBOX', subType: 'BOOL' },
+      multiCheckbox: { type: 'CHECKBOX', subType: 'LIST' },
+      radio:         { type: 'RADIO', subType: 'SINGLE' },
+      toggle:        { type: 'SWITCH', subType: 'BOOL' },
+      chip:          { type: 'CHIP', subType: 'MULTIPLE' },
+      richText:      { type: 'RICH_TEXT' },
+      file:          { type: 'FILE_UPLOAD', subType: 'SINGLE' },
+      rating:        { type: 'RATING', subType: 'STAR' },
+      location:      { type: 'LOCATION' },
+      generated:     { type: 'GENERATED', subType: 'FORMULA' },
+      multiSelect:   { type: 'MULTI_SELECT' },
+      autocomplete:  { type: 'AUTOCOMPLETE', subType: 'SINGLE' },
+      dropdown:      { type: 'DROPDOWN', subType: 'SINGLE' },
+      multiDropdown: { type: 'MULTI_SELECT' },
+    };
+
+    const mapping = TYPE_MAP[builderType];
+    if (!mapping) return;
+
+    const patch: Partial<FieldConfig> = { type: mapping.type };
+    if (mapping.subType !== undefined) {
+      patch.subType = mapping.subType;
+    } else {
+      // Clear stale subType from previous field type
+      patch.subType = undefined;
+    }
+    this.patchSelectedField(patch);
+  }
+
+  /**
+   * Get the current schema (with all applied modifications).
+   */
+  getCurrentSchema(): FormSchema | null {
+    return this._state().schema;
+  }
+
+  // ── Private helpers ─────────────────────────────────────────────
+
+  private _toggleExpanded(nodes: ConfiguratorTreeNode[], nodeId: string): ConfiguratorTreeNode[] {
+    return nodes.map(n => {
+      if (n.id === nodeId) {
+        return { ...n, expanded: !n.expanded };
+      }
+      if (n.children.length > 0) {
+        return { ...n, children: this._toggleExpanded(n.children, nodeId) };
+      }
+      return n;
+    });
+  }
+
+  private _restoreExpandedStates(
+    oldNodes: ConfiguratorTreeNode[],
+    newNodes: ConfiguratorTreeNode[],
+  ): void {
+    for (const newNode of newNodes) {
+      const oldNode = oldNodes.find(o => o.id === newNode.id);
+      if (oldNode) {
+        newNode.expanded = oldNode.expanded;
+        if (oldNode.children.length > 0 && newNode.children.length > 0) {
+          this._restoreExpandedStates(oldNode.children, newNode.children);
+        }
+      }
+    }
+  }
+
+  private _getParentLabels(
+    nodes: ConfiguratorTreeNode[],
+    path: number[],
+  ): { groupLabel: string; sectionLabel: string } {
+    let groupLabel = '';
+    let sectionLabel = '';
+
+    const findInNodes = (nodeList: ConfiguratorTreeNode[], targetPath: number[]): boolean => {
+      for (const node of nodeList) {
+        if (this._pathsEqual(node.path, targetPath)) {
+          return true;
+        }
+        if (node.children.length > 0) {
+          const found = findInNodes(node.children, targetPath);
+          if (found) {
+            if (node.type === 'group') groupLabel = node.label;
+            if (node.type === 'section') sectionLabel = node.label;
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    findInNodes(nodes, path);
+    return { groupLabel, sectionLabel };
+  }
+
+  private _pathsEqual(a: number[], b: number[]): boolean {
+    if (a.length !== b.length) return false;
+    return a.every((val, i) => val === b[i]);
+  }
+}

package/src/lib/modules/form-builder/services/field-selection.service.ts

@@ -0,0 +1,299 @@
+import { Injectable, computed, signal } from '@angular/core';
+import { FormSchema } from '../../smart-form/models/form-schema.model';
+import {
+  SelectionGroupNode,
+  SelectionSectionNode,
+  SelectionFieldNode,
+} from '../models/field-selection.models';
+import { FormSchemaTreeService } from '../services/form-schema-tree.service';
+
+interface FieldSelectionState {
+  groups: SelectionGroupNode[];
+  originalSchema: FormSchema | null;
+}
+
+/**
+ * Signal-based service for the field-selection component.
+ * Manages group/section/field enable/disable toggles.
+ */
+@Injectable()
+export class FieldSelectionService {
+  private readonly _state = signal<FieldSelectionState>({
+    groups: [],
+    originalSchema: null,
+  });
+
+  private readonly treeService = new FormSchemaTreeService();
+
+  // ── Computed slices ─────────────────────────────────────────────
+  readonly groups = computed(() => this._state().groups);
+  readonly originalSchema = computed(() => this._state().originalSchema);
+
+  readonly totalFieldCount = computed(() => {
+    let count = 0;
+    const countFields = (sections: SelectionSectionNode[]): void => {
+      for (const s of sections) {
+        count += s.fields.length;
+        countFields(s.subsections);
+      }
+    };
+    for (const g of this._state().groups) {
+      countFields(g.sections);
+    }
+    return count;
+  });
+
+  readonly selectedFieldCount = computed(() => {
+    let count = 0;
+    const countSelected = (sections: SelectionSectionNode[]): void => {
+      for (const s of sections) {
+        if (!s.enabled) continue;
+        count += s.fields.filter(f => f.selected).length;
+        countSelected(s.subsections);
+      }
+    };
+    for (const g of this._state().groups) {
+      if (!g.enabled) continue;
+      countSelected(g.sections);
+    }
+    return count;
+  });
+
+  // ── Mutators ────────────────────────────────────────────────────
+
+  /**
+   * Initialize the store from a FormSchema.
+   */
+  loadSchema(schema: FormSchema): void {
+    const groups = this.treeService.parseSchemaToSelectionGroups(schema);
+    this._state.set({ groups, originalSchema: schema });
+  }
+
+  /**
+   * Load a schema while preserving the expanded/collapsed state of sections and groups.
+   * Used when the schema structure hasn't changed but field selections have.
+   * This prevents the UI from unexpectedly collapsing sections when the user toggles a field.
+   */
+  loadSchemaPreservingExpanded(schema: FormSchema): void {
+    const oldGroups = this._state().groups;
+    const newGroups = this.treeService.parseSchemaToSelectionGroups(schema);
+    
+    // Merge old expansion states into new groups
+    const mergedGroups = newGroups.map((newGroup, gi) => ({
+      ...newGroup,
+      expanded: oldGroups[gi]?.expanded ?? newGroup.expanded,
+      sections: this._mergeExpandedSections(newGroup.sections, oldGroups[gi]?.sections ?? []),
+    }));
+
+    this._state.set({ groups: mergedGroups, originalSchema: schema });
+  }
+
+  /**
+   * Toggle a group's enabled state. Disabling cascades to all sections + fields.
+   * When enabling, all fields are selected (unless locked).
+   */
+  toggleGroup(groupIndex: number): void {
+    this._state.update(s => ({
+      ...s,
+      groups: s.groups.map((g, i) => {
+        if (i !== groupIndex) return g;
+        const enabled = !g.enabled;
+        return {
+          ...g,
+          enabled,
+          sections: enabled ? this._enableAllSections(g.sections) : this._disableAllSections(g.sections),
+        };
+      }),
+    }));
+  }
+
+  /**
+   * Toggle a section's enabled state.
+   * Disabling cascades to all child fields (and subsections).
+   */
+  toggleSection(groupIndex: number, sectionPath: number[]): void {
+    this._state.update(s => ({
+      ...s,
+      groups: s.groups.map((g, gi) => {
+        if (gi !== groupIndex) return g;
+        return {
+          ...g,
+          sections: this._toggleSectionAtPath(g.sections, sectionPath, 0),
+        };
+      }),
+    }));
+  }
+
+  /**
+   * Toggle a section's expanded (collapsed/expanded) state.
+   */
+  toggleSectionExpanded(groupIndex: number, sectionPath: number[]): void {
+    this._state.update(s => ({
+      ...s,
+      groups: s.groups.map((g, gi) => {
+        if (gi !== groupIndex) return g;
+        return {
+          ...g,
+          sections: this._toggleExpandedAtPath(g.sections, sectionPath, 0),
+        };
+      }),
+    }));
+  }
+
+  /**
+   * Toggle a group's expanded (collapsed/expanded) state.
+   */
+  toggleGroupExpanded(groupIndex: number): void {
+    this._state.update(s => ({
+      ...s,
+      groups: s.groups.map((g, i) =>
+        i === groupIndex ? { ...g, expanded: !g.expanded } : g
+      ),
+    }));
+  }
+
+  /**
+   * Toggle a field's selected (checkbox) state.
+   */
+  toggleField(groupIndex: number, sectionPath: number[], fieldIndex: number): void {
+    this._state.update(s => ({
+      ...s,
+      groups: s.groups.map((g, gi) => {
+        if (gi !== groupIndex) return g;
+        return {
+          ...g,
+          sections: this._toggleFieldAtPath(g.sections, sectionPath, 0, fieldIndex),
+        };
+      }),
+    }));
+  }
+
+  /**
+   * Build and return the updated FormSchema with selection changes applied.
+   */
+  buildUpdatedSchema(): FormSchema | null {
+    const { groups, originalSchema } = this._state();
+    if (!originalSchema) return null;
+    return this.treeService.applySelectionToSchema(groups, originalSchema);
+  }
+
+  // ── Private helpers ─────────────────────────────────────────────
+
+  private _disableAllSections(sections: SelectionSectionNode[]): SelectionSectionNode[] {
+    return sections.map(s => ({
+      ...s,
+      enabled: false,
+      fields: s.fields.map(f => ({ ...f, selected: false })),
+      subsections: this._disableAllSections(s.subsections),
+    }));
+  }
+
+  /**
+   * Enable all sections and their fields (except locked ones).
+   * Used when toggling a section/group back ON to restore field selections.
+   */
+  private _enableAllSections(sections: SelectionSectionNode[]): SelectionSectionNode[] {
+    return sections.map(s => ({
+      ...s,
+      enabled: true,
+      fields: s.fields.map(f => ({ ...f, selected: !f.isLocked })),
+      subsections: this._enableAllSections(s.subsections),
+    }));
+  }
+
+  private _toggleSectionAtPath(
+    sections: SelectionSectionNode[],
+    path: number[],
+    depth: number,
+  ): SelectionSectionNode[] {
+    return sections.map((s, i) => {
+      if (i !== path[depth]) return s;
+
+      if (depth === path.length - 1) {
+        // This is the target section
+        const enabled = !s.enabled;
+        return {
+          ...s,
+          enabled,
+          // When enabling: select all non-locked fields and enable subsections
+          // When disabling: deselect all fields and disable subsections
+          fields: enabled ? s.fields.map(f => ({ ...f, selected: !f.isLocked })) : s.fields.map(f => ({ ...f, selected: false })),
+          subsections: enabled ? this._enableAllSections(s.subsections) : this._disableAllSections(s.subsections),
+        };
+      }
+
+      // Recurse into subsections
+      return {
+        ...s,
+        subsections: this._toggleSectionAtPath(s.subsections, path, depth + 1),
+      };
+    });
+  }
+
+  private _toggleExpandedAtPath(
+    sections: SelectionSectionNode[],
+    path: number[],
+    depth: number,
+  ): SelectionSectionNode[] {
+    return sections.map((s, i) => {
+      if (i !== path[depth]) return s;
+
+      if (depth === path.length - 1) {
+        return { ...s, expanded: !s.expanded };
+      }
+
+      return {
+        ...s,
+        subsections: this._toggleExpandedAtPath(s.subsections, path, depth + 1),
+      };
+    });
+  }
+
+  private _toggleFieldAtPath(
+    sections: SelectionSectionNode[],
+    sectionPath: number[],
+    depth: number,
+    fieldIndex: number,
+  ): SelectionSectionNode[] {
+    return sections.map((s, i) => {
+      if (i !== sectionPath[depth]) return s;
+
+      if (depth === sectionPath.length - 1) {
+        return {
+          ...s,
+          fields: s.fields.map((f, fi) =>
+            fi === fieldIndex && !f.isLocked
+              ? { ...f, selected: !f.selected }
+              : f
+          ),
+        };
+      }
+
+      return {
+        ...s,
+        subsections: this._toggleFieldAtPath(s.subsections, sectionPath, depth + 1, fieldIndex),
+      };
+    });
+  }
+
+  /**
+   * Recursively merge expansion state from old sections into new sections.
+   * Preserves which sections were expanded/collapsed by the user.
+   */
+  private _mergeExpandedSections(
+    newSections: SelectionSectionNode[],
+    oldSections: SelectionSectionNode[],
+  ): SelectionSectionNode[] {
+    return newSections.map((newSection, ni) => {
+      const oldSection = oldSections[ni];
+      return {
+        ...newSection,
+        expanded: oldSection?.expanded ?? newSection.expanded,
+        subsections: this._mergeExpandedSections(
+          newSection.subsections,
+          oldSection?.subsections ?? [],
+        ),
+      };
+    });
+  }
+}