platformcommons-web-lib 1.0.0

package/src/lib/modules/form-builder/components/field-configurator/configurator-config-panel/configurator-config-panel.component.ts

@@ -0,0 +1,445 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { FieldConfig, FormSchema } from '../../../../smart-form/models/form-schema.model';
+import { ConfiguratorFieldInfo } from '../../../models/field-configurator.models';
+import { SWITCHABLE_FIELD_TYPES } from '../../../utils/constants';
+import { SnackbarService } from '../../../../snackbar/services/snackbar.service';
+
+@Component({
+  selector: 'lib-configurator-config-panel',
+  standalone: false,
+  templateUrl: './configurator-config-panel.component.html',
+  styleUrls: ['./configurator-config-panel.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfiguratorConfigPanelComponent implements OnChanges {
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private snackbarService: SnackbarService
+  ) {}
+
+  @Input() selectedField: FieldConfig | null = null;
+  @Input() selectedFieldInfo: ConfiguratorFieldInfo | null = null;
+  @Input() builderFieldType: string | null = null;
+  @Input() fieldTypeSchemaMap: Record<string, FormSchema> = {};
+
+  @Output() configChange = new EventEmitter<Record<string, unknown>>();
+  @Output() typeChange = new EventEmitter<string>();
+
+  /**
+   * When false, all `optionConfig.*` fields (apiUrl, dataPath, labelPath, etc.)
+   * are hidden from the config panel. Business users don't need to configure
+   * option URLs — these are pre-filled by the developer in the master JSON.
+   */
+  @Input() showOptionConfig: boolean = true;
+
+  /**
+   * Field names that are mandatory and cannot be disabled.
+   * When the currently selected field is in this list, IS ENABLED / READ ONLY /
+   * DISABLED controls are hidden from the Field State step.
+   */
+  @Input() lockedFieldNames: string[] = [];
+
+  /** Exposed to the template for the native type-switcher select */
+  readonly switchableFieldTypes = SWITCHABLE_FIELD_TYPES;
+
+  configFormJson: string = '';
+  configInitialValues: Record<string, unknown> = {};
+  showConfigForm: boolean = false;
+
+  /**
+   * The type currently being PREVIEWED in the config form.
+   * Starts equal to builderFieldType; changes as user picks a new type.
+   * Emitted to the parent on Apply.
+   */
+  currentBuilderType: string | null = null;
+
+  /** Identity key of the currently rendered field — used to detect real field switches. */
+  private _currentFieldKey: string = '';
+
+  /** True when the current field type is DROPDOWN — type switching is disabled for these fields. */
+  get isDropdownType(): boolean {
+    const t = this.selectedField?.type?.toUpperCase();
+    return t === 'DROPDOWN' || t === 'MULTI_SELECT';
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (
+      (changes['selectedField'] || changes['builderFieldType'] || changes['fieldTypeSchemaMap'])
+      && this.selectedField
+      && this.builderFieldType
+    ) {
+      const key = `${this.selectedField.name}__${this.builderFieldType}`;
+      if (key !== this._currentFieldKey) {
+        this._currentFieldKey = key;
+        // Reset the previewed type whenever we switch to a different field
+        this.currentBuilderType = this.builderFieldType;
+        this._buildConfigFormForType(this.builderFieldType);
+      }
+    }
+  }
+
+  // ─── Type Switcher ────────────────────────────────────────────────────────
+
+  /**
+   * Called when the user picks a new type from the native select in the header.
+   * Immediately rebuilds the config form to show fields for the new type.
+   * The actual field-level type change is only committed when Apply is clicked.
+   */
+  onTypeSelectChange(event: Event): void {
+    const newType = (event.target as HTMLSelectElement).value;
+    if (!newType || newType === this.currentBuilderType) return;
+    if (!this.fieldTypeSchemaMap[newType]) {
+      console.warn(`[ConfigPanel] No schema found for field type: ${newType}`);
+      return;
+    }
+    this.currentBuilderType = newType;
+    this._buildConfigFormForType(newType);
+  }
+
+  // ─── Form Actions ─────────────────────────────────────────────────────────
+
+  onActionClick(event: { id: string; formData: Record<string, unknown> }): void {
+    if (event.id === 'apply') {
+      const patch = this._buildPatchFromFormData(event.formData);
+
+      // Emit type change only if the user picked a different type
+      if (this.currentBuilderType && this.currentBuilderType !== this.builderFieldType) {
+        this.typeChange.emit(this.currentBuilderType);
+      }
+
+      this.configChange.emit(patch);
+
+      // Show success notification to user
+      const fieldLabel = this.selectedField?.label || this.selectedField?.name || 'Field';
+      this.snackbarService.success(`${fieldLabel} configuration updated successfully`);
+    }
+  }
+
+  // ─── Private: Build the config form JSON ─────────────────────────────────
+
+  /**
+   * Rebuild the SmartForm for the given builder type key.
+   * Uses a destroy/recreate cycle (showConfigForm toggle + setTimeout) to
+   * guarantee a completely fresh SmartForm instance is mounted.
+   */
+  private _buildConfigFormForType(builderType: string): void {
+    if (!this.fieldTypeSchemaMap || !this.selectedField) return;
+
+    let schema = this.fieldTypeSchemaMap[builderType];
+    if (!schema) {
+      this.showConfigForm = false;
+      this.configFormJson = '';
+      this.cdr.markForCheck();
+      return;
+    }
+
+    // When optionConfig should be hidden, filter it out of the schema
+    if (!this.showOptionConfig) {
+      schema = this._filterSchemaForOptionConfig(schema);
+    }
+
+    // When a mandatory/locked field is selected, hide IS ENABLED / READ ONLY / DISABLED
+    const isLockedField = this.selectedField?.name
+      ? this.lockedFieldNames.includes(this.selectedField.name)
+      : false;
+    if (isLockedField) {
+      schema = this._filterSchemaForLockedField(schema);
+    }
+
+    // 1. Hide current SmartForm instance (renders false in the current CD cycle
+    //    since ngOnChanges fires before the view is rendered)
+    this.showConfigForm = false;
+
+    // 2. Prepare new schema + initial values
+    this.configFormJson = JSON.stringify(schema);
+    this.configInitialValues = this._extractInitialValuesFromField(this.selectedField);
+
+    // 3. Re-mount on next tick — markForCheck schedules a proper CD pass
+    //    rather than forcing a synchronous check mid-cycle
+    setTimeout(() => {
+      this.showConfigForm = true;
+      this.cdr.markForCheck();
+    });
+  }
+
+  /**
+   * Deep-clones the schema and removes any field whose `name` matches developer-only fields.
+   * This prevents end users from modifying system-level configurations like:
+   * - optionConfig.* (API URLs, data paths, etc.)
+   * - payloadPath (payload mapping)
+   * - className (CSS styling)
+   * - name (system identifier)
+   * 
+   * Also removes entire sections that become empty after filtering.
+   */
+  private _filterSchemaForOptionConfig(schema: FormSchema): FormSchema {
+    // List of developer-only field names that should be hidden from end users
+    const DEVELOPER_ONLY_FIELDS = [
+      'payloadPath',      // Payload mapping configuration
+      'className',        // CSS class for styling
+      'name',             // System field identifier
+    ];
+
+    const isDeveloperOnlyField = (f: any): boolean => {
+      if (typeof f?.name !== 'string') return false;
+      
+      // Hide optionConfig.* fields (API URL, data path, label path, etc.)
+      if (f.name.startsWith('optionConfig.')) return true;
+      
+      // Hide other developer-only fields
+      if (DEVELOPER_ONLY_FIELDS.includes(f.name)) return true;
+      
+      return false;
+    };
+
+    const filterChildren = (children: any[]): any[] =>
+      children
+        .map((child: any) => {
+          // ROW — filter its inline children
+          if (child.type === 'ROW' && Array.isArray(child.children)) {
+            const filtered = child.children.filter((c: any) => !isDeveloperOnlyField(c));
+            return filtered.length ? { ...child, children: filtered } : null;
+          }
+          // GROUP / section wrapper — recurse into sectionConfig.children
+          if (child.sectionConfig?.children) {
+            const filteredChildren = filterChildren(child.sectionConfig.children);
+            // Drop the entire section if it becomes empty
+            if (!filteredChildren.length) return null;
+            return {
+              ...child,
+              sectionConfig: { ...child.sectionConfig, children: filteredChildren },
+            };
+          }
+          // Leaf field
+          if (isDeveloperOnlyField(child)) return null;
+          return child;
+        })
+        .filter(Boolean);
+
+    const topChildren = schema.sectionConfig?.children
+      ? filterChildren(schema.sectionConfig.children)
+      : [];
+
+    return {
+      ...schema,
+      sectionConfig: schema.sectionConfig
+        ? { ...schema.sectionConfig, children: topChildren }
+        : schema.sectionConfig,
+    } as FormSchema;
+  }
+
+  /**
+   * Remove IS ENABLED, READ ONLY, and DISABLED controls from the config schema
+   * when the selected field is a mandatory/locked field.
+   */
+  private _filterSchemaForLockedField(schema: FormSchema): FormSchema {
+    const LOCKED_HIDDEN_FIELDS = new Set(['isEnabled', 'readonly', 'disabled']);
+
+    const filterChildren = (children: any[]): any[] =>
+      children
+        .map((child: any) => {
+          if (child.type === 'ROW' && Array.isArray(child.children)) {
+            const filtered = child.children.filter((c: any) => !LOCKED_HIDDEN_FIELDS.has(c.name));
+            return filtered.length ? { ...child, children: filtered } : null;
+          }
+          if (child.sectionConfig?.children) {
+            const filteredChildren = filterChildren(child.sectionConfig.children);
+            if (!filteredChildren.length) return null;
+            return { ...child, sectionConfig: { ...child.sectionConfig, children: filteredChildren } };
+          }
+          if (LOCKED_HIDDEN_FIELDS.has(child.name)) return null;
+          return child;
+        })
+        .filter(Boolean);
+
+    const topChildren = schema.sectionConfig?.children
+      ? filterChildren(schema.sectionConfig.children)
+      : [];
+
+    return {
+      ...schema,
+      sectionConfig: schema.sectionConfig
+        ? { ...schema.sectionConfig, children: topChildren }
+        : schema.sectionConfig,
+    } as FormSchema;
+  }
+
+  // ─── Private: Extract initial values from FieldConfig ─────────────────────
+
+  private _extractInitialValuesFromField(field: FieldConfig): Record<string, unknown> {
+    const v: Record<string, unknown> = {};
+
+    const set = (key: string, val: unknown) => {
+      if (val !== undefined && val !== null) v[key] = val;
+    };
+
+    // ── Common FieldConfig properties ─────────────────────────────────────────
+    set('label',             field.label);
+    set('name',              field.name);
+    set('colSpan',           field.colSpan);
+    set('placeholder',       field.placeholder);
+    set('hint',              field.hint);
+    set('defaultValue',      field.defaultValue);
+    set('payloadPath',       field.payloadPath);
+    set('className',         field.className);
+    set('prefix',            field.prefix);
+    set('suffix',            field.suffix);
+    set('required',          field.required);
+    set('readonly',          field.readonly);
+    set('disabled',          field.disabled);
+    set('isEnabled',         field.isEnabled ?? field.visible);
+    set('errorMessage',      field.errorMessage);
+    set('visibilityExpression', field.visibilityExpression);
+
+    if (field.textConfig) {
+      const tc = field.textConfig;
+      set('textConfig.length.min',   tc.length?.min);
+      set('textConfig.length.max',   tc.length?.max);
+      set('textConfig.pattern',      tc.pattern);
+      set('textConfig.patternMessage', tc.patternMessage);
+      set('textConfig.showCharCount', tc.showCharCount);
+      set('textConfig.matchField',   tc.matchField);
+    }
+    if (field.emailConfig) {
+      const ec = field.emailConfig;
+      set('emailConfig.defaultDomain',    ec.defaultDomain);
+      set('emailConfig.allowedDomains',   ec.allowedDomains?.join(', '));
+      set('emailConfig.blockedDomains',   ec.blockedDomains?.join(', '));
+    }
+    if (field.phoneConfig) {
+      const pc = field.phoneConfig;
+      set('phoneConfig.defaultCountryCode',           pc.defaultCountryCode);
+      set('phoneConfig.prefixCountryCode',            pc.prefixCountryCode);
+      set('phoneConfig.supportedCountryCodeLocale',   pc.supportedCountryCodeLocale?.join(', '));
+    }
+    if (field.numberConfig) {
+      const nc = field.numberConfig;
+      set('numberConfig.min',       nc.min);
+      set('numberConfig.max',       nc.max);
+      set('numberConfig.step',      nc.step);
+      set('numberConfig.precision', nc.precision);
+    }
+    if (field.dateConfig) {
+      const dc = field.dateConfig;
+      set('dateConfig.minDate',     dc.minDate);
+      set('dateConfig.maxDate',     dc.maxDate);
+      set('dateConfig.allowFuture', dc.allowFuture);
+    }
+    if (field.optionConfig) {
+      const oc = field.optionConfig;
+      if (oc.optionList?.length) set('optionConfig.optionList', JSON.stringify(oc.optionList, null, 2));
+      set('optionConfig.apiUrl',       oc.apiUrl || oc.optionUrl);
+      set('optionConfig.dataPath',     oc.dataPath);
+      set('optionConfig.labelPath',    oc.labelPath);
+      set('optionConfig.valuePath',    oc.valuePath);
+      set('optionConfig.sortBy',       oc.sortBy);
+      set('optionConfig.layout',       oc.layout);
+    }
+    if (field.attachmentConfig) {
+      const ac = field.attachmentConfig;
+      set('attachmentConfig.multiple',    ac.multiple);
+      set('attachmentConfig.maxFiles',    ac.maxFiles);
+      set('attachmentConfig.maxSizeMB',   ac.maxSizeMB);
+      set('attachmentConfig.accept',      ac.accept);
+      set('attachmentConfig.acceptLabel', ac.acceptLabel);
+      set('attachmentConfig.uploadUrl',   ac.uploadUrl);
+      set('attachmentConfig.deleteUrl',   ac.deleteUrl);
+    }
+    if (field.richTextConfig) {
+      const rc = field.richTextConfig;
+      set('richTextConfig.height',       rc.height);
+      set('richTextConfig.maxLength',    rc.maxLength);
+      set('richTextConfig.placeholder',  rc.placeholder);
+      set('richTextConfig.showCharCount', rc.showCharCount);
+    }
+    if (field.ratingConfig) {
+      const rat = field.ratingConfig;
+      set('ratingConfig.maxRating', rat.maxRating);
+      set('ratingConfig.allowHalf', rat.allowHalf);
+    }
+    if (field.locationConfig) {
+      const lc = field.locationConfig;
+      set('locationConfig.defaultTab',            lc.defaultTab);
+      set('locationConfig.maxLocations',          lc.maxLocations);
+      set('locationConfig.allowMulti',            lc.allowMulti);
+      set('locationConfig.showMap',               lc.showMap);
+      set('locationConfig.googleMapsApiKey',      lc.googleMapsApiKey);
+      set('locationConfig.venuePlaceholder',      lc.venuePlaceholder);
+      set('locationConfig.onlinePlaceholder',     lc.onlinePlaceholder);
+    }
+
+    return v;
+  }
+
+  // ─── Private: Convert flat dot-notation form data → nested FieldConfig patch
+
+  private _buildPatchFromFormData(formData: Record<string, unknown>): Record<string, unknown> {
+    const patch: Record<string, unknown> = {};
+
+    const setNested = (obj: any, dotPath: string, val: unknown): void => {
+      const parts = dotPath.split('.');
+      let cur = obj;
+      for (let i = 0; i < parts.length - 1; i++) {
+        const part = parts[i];
+        if (typeof cur[part] !== 'object' || cur[part] === null) {
+          cur[part] = {};
+        }
+        cur = cur[part];
+      }
+      cur[parts[parts.length - 1]] = val;
+    };
+
+    const flatData: Record<string, unknown> = {};
+    for (const [key, val] of Object.entries(formData)) {
+      if (val !== null && typeof val === 'object' && !Array.isArray(val)) {
+        for (const [innerKey, innerVal] of Object.entries(val as Record<string, unknown>)) {
+          flatData[innerKey] = innerVal;
+        }
+      } else {
+        flatData[key] = val;
+      }
+    }
+
+    for (const [key, val] of Object.entries(flatData)) {
+      if (val === null || val === undefined) continue;
+      if (key.startsWith('row-')) continue;
+      setNested(patch, key, val);
+    }
+
+    // Post-process: parse JSON strings for optionConfig.optionList
+    if (patch['optionConfig'] && (patch['optionConfig'] as any)['optionList']) {
+      try {
+        const raw = (patch['optionConfig'] as any)['optionList'];
+        if (typeof raw === 'string') {
+          (patch['optionConfig'] as any)['optionList'] = JSON.parse(raw);
+        }
+      } catch {
+        // Ignore invalid JSON — leave as-is
+      }
+    }
+
+    // Post-process: split comma-separated strings for email/phone arrays
+    if (patch['emailConfig']) {
+      const ec = patch['emailConfig'] as any;
+      if (typeof ec['allowedDomains'] === 'string') ec['allowedDomains'] = ec['allowedDomains'].split(',').map((s: string) => s.trim()).filter(Boolean);
+      if (typeof ec['blockedDomains'] === 'string') ec['blockedDomains'] = ec['blockedDomains'].split(',').map((s: string) => s.trim()).filter(Boolean);
+    }
+    if (patch['phoneConfig']) {
+      const pc = patch['phoneConfig'] as any;
+      if (typeof pc['supportedCountryCodeLocale'] === 'string') {
+        pc['supportedCountryCodeLocale'] = pc['supportedCountryCodeLocale'].split(',').map((s: string) => s.trim()).filter(Boolean);
+      }
+    }
+
+    return patch;
+  }
+}

package/src/lib/modules/form-builder/components/field-configurator/configurator-tree/configurator-tree.component.html

@@ -0,0 +1,75 @@
+<div class="fb-cfg-tree">
+  <div class="fb-cfg-tree__header">
+    <h4 class="fb-cfg-tree__title">Field Tree</h4>
+    <p class="fb-cfg-tree__subtitle">Select a field to configure</p>
+  </div>
+
+  <div class="fb-cfg-tree__scrollable">
+    @for (node of tree; track trackByNodeId($index, node)) {
+      <ng-container *ngTemplateOutlet="treeNodeTpl; context: { $implicit: node, depth: 0 }"></ng-container>
+    }
+
+    @if (tree.length === 0) {
+      <div class="fb-cfg-tree__empty">
+        No fields to configure.
+      </div>
+    }
+  </div>
+</div>
+
+<!-- Recursive tree node template -->
+<ng-template #treeNodeTpl let-node let-depth="depth">
+  @if (node.type === 'field') {
+    <!-- Field node (clickable leaf) -->
+    <div
+      class="fb-cfg-tree-item"
+      [class.fb-cfg-tree-item--active]="isSelected(node)"
+      (click)="onFieldSelect(node)"
+      [style.padding-left.px]="16 + depth * 16"
+    >
+      <span class="fb-cfg-tree-item__drag" title="Drag to reorder">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+          stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/>
+          <circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/>
+          <circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/>
+        </svg>
+      </span>
+      <div class="fb-cfg-tree-item__content">
+        <span class="fb-cfg-tree-item__label">{{ node.label }}</span>
+        @if (node.fieldConfig?.type) {
+          <span class="fb-cfg-tree-item__type">{{ node.fieldConfig.type }}</span>
+        }
+      </div>
+    </div>
+  } @else {
+    <!-- Group or Section node (expandable) -->
+    <div
+      class="fb-cfg-tree-section"
+      [style.padding-left.px]="8 + depth * 12"
+    >
+      <div class="fb-cfg-tree-section__header" (click)="onNodeClick(node)">
+        <div class="fb-cfg-tree-section__title-group">
+          <span
+            class="fb-cfg-tree-section__chevron"
+            [class.fb-cfg-tree-section__chevron--expanded]="node.expanded"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+              stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+          </span>
+          <span class="fb-cfg-tree-section__label">{{ node.label }}</span>
+        </div>
+      </div>
+
+      @if (node.expanded && node.children.length > 0) {
+        <div class="fb-cfg-tree-section__children">
+          @for (child of node.children; track trackByNodeId($index, child)) {
+            <ng-container *ngTemplateOutlet="treeNodeTpl; context: { $implicit: child, depth: depth + 1 }"></ng-container>
+          }
+        </div>
+      }
+    </div>
+  }
+</ng-template>