commons-shared-web-ui 0.0.50 → 0.0.51

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

@@ -1,51 +0,0 @@
-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

@@ -1,258 +0,0 @@
-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

@@ -1,299 +0,0 @@
-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 ?? [],
-        ),
-      };
-    });
-  }
-}