commons-shared-web-ui 0.0.53 → 0.0.54

package/src/lib/modules/filter-table-selector/components/filter-table-selector/filter-table-selector.component.ts

@@ -1,361 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  OnInit,
-  OnChanges,
-  SimpleChanges,
-  OnDestroy,
-  ChangeDetectorRef,
-  NgZone,
-} from '@angular/core';
-import { Subject } from 'rxjs';
-
-import {
-  FilterTableSelectorConfig,
-  FilterParamMap,
-} from '../../filter-table-selector.models';
-import { FilterTableConfig } from '../../filter-table-selector.models';
-
-@Component({
-  selector: 'lib-filter-table-selector',
-  templateUrl: './filter-table-selector.component.html',
-  styleUrls: ['./filter-table-selector.component.scss'],
-  standalone: false,
-})
-export class FilterTableSelectorComponent implements OnInit, OnChanges, OnDestroy {
-  /** Full config object driven by consuming MFE JSON. */
-  @Input() config!: FilterTableSelectorConfig;
-
-  /**
-   * Flat i18n labels map from the consuming MFE.
-   * Mirrors the pattern used by SmartFormComponent.
-   */
-  @Input() labels: Record<string, string> = {};
-
-  /**
-   * Pre-selected row identifiers.
-   * When provided, matching rows are pre-checked on first load and
-   * re-checked after each page navigation.
-   * Must be an array of row objects (the same shape returned by the API).
-   */
-  @Input() preSelectedRows: any[] = [];
-
-  /** Emits the array of currently selected row objects on "Add / Submit". */
-  @Output() onSubmit = new EventEmitter<any[]>();
-
-  /** Emits void on "Back / Cancel". */
-  @Output() onCancel = new EventEmitter<void>();
-
-  // ── Internal state ──────────────────────────────────────────────────────────
-
-  /** A deep-copy of tableConfig with the current filter params baked-in. */
-  resolvedTableConfig!: FilterTableConfig;
-
-  /** Current active filter params (merged from form submission). */
-  activeFilterParams: Record<string, string> = {};
-
-  /** The base API URL without any filter query params. */
-  private baseApiUrl: string = '';
-
-  /** All rows selected so far, tracked across pagination pages. */
-  selectedRows: any[] = [];
-
-  /** Total rows currently loaded in the table (reported by SmartTable rowSelect). */
-  totalTableItems: number = 0;
-
-  /** Serialised SmartForm JSON (with labels translated + disabled fields applied). */
-  resolvedFormJson: string = '';
-
-  /**
-   * Default values to prefill the SmartForm.
-   * Updated on each initialize() call and reset to config defaults on Clear Filter.
-   */
-  resolvedInitialValues: Record<string, any> = {};
-
-  /**
-   * Version counter — bumping this forces *ngIf to re-create the SmartForm
-   * component with fresh initial values (used by Clear Filter).
-   */
-  formVersion: number = 0;
-
-  /** Whether the filter panel is visible (toggled on mobile, always visible on desktop). */
-  filterPanelVisible: boolean = true;
-
-  /**
-   * Tracks the live form values as the user changes fields.
-   * Updated via SmartForm's (valueChange) output.
-   * Used when the user clicks the "Apply Filter" button in the component.
-   */
-  currentFormValues: Record<string, any> = {};
-
-  private destroy$ = new Subject<void>();
-
-  constructor(private cdr: ChangeDetectorRef, private ngZone: NgZone) { }
-
-  // ── Lifecycle ────────────────────────────────────────────────────────────────
-
-  ngOnInit(): void {
-    this.initialize();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['config'] && !changes['config'].isFirstChange()) {
-      this.initialize();
-    }
-    if (changes['preSelectedRows'] && !changes['preSelectedRows'].isFirstChange()) {
-      this.syncPreselection();
-    }
-    if (changes['labels'] && !changes['labels'].isFirstChange()) {
-      this.buildFormJson();
-      this.applyFilterParamsToTable();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  // ── Initialisation ───────────────────────────────────────────────────────────
-
-  private initialize(): void {
-    if (!this.config) return;
-
-    this.baseApiUrl = this.config.tableConfig.apiUrl || '';
-    this.selectedRows = [...(this.preSelectedRows || [])];
-
-    const defaults = this.config.filterConfig.defaultValues || {};
-
-    // Build default filter params from defaultValues for the initial API call
-    this.activeFilterParams = this.buildFilterParams(defaults);
-
-    // Synchronize currentFormValues so Apply Filter works even if no changes are made yet
-    this.currentFormValues = { ...defaults };
-
-    this.buildFormJson();
-    this.applyFilterParamsToTable();
-
-    // Bump version to force SmartForm re-creation with the new defaultValues
-    this.formVersion++;
-  }
-
-  // ── Form JSON construction ───────────────────────────────────────────────────
-
-  /**
-   * Serialises the SmartForm config JSON.
-   * Applies disabledFields from filterPanelConfig.
-   */
-  private buildFormJson(overrideValues?: Record<string, any>): void {
-    if (!this.config?.filterConfig?.smartFormConfig) return;
-
-    // Deep-clone to avoid mutating the original config
-    const schema = JSON.parse(
-      JSON.stringify(this.config.filterConfig.smartFormConfig)
-    );
-
-    // Apply disabled fields and TRANSLATE LABELS
-    const disabled = this.config.filterConfig.disabledFields || [];
-    if (schema.sectionConfig?.children) {
-      schema.sectionConfig.children = schema.sectionConfig.children.map(
-        (field: any) => {
-          // Translate label and placeholder
-          if (field.label) field.label = this.translate(field.label);
-          if (field.placeholder) field.placeholder = this.translate(field.placeholder);
-
-          if (disabled.includes(field.name)) {
-            return { ...field, disabled: true };
-          }
-          return field;
-        }
-      );
-    }
-
-    this.resolvedFormJson = JSON.stringify(schema);
-
-    // Use override (e.g. after clear) or fall back to config defaults
-    const values = overrideValues !== undefined
-      ? overrideValues
-      : { ...(this.config.filterConfig.defaultValues || {}) };
-    this.resolvedInitialValues = values;
-  }
-
-  // ── Table URL resolution ─────────────────────────────────────────────────────
-
-  /**
-   * Rebuilds resolvedTableConfig with the current activeFilterParams appended
-   * to the base API URL.
-   */
-  private applyFilterParamsToTable(): void {
-    const paramString = Object.entries(this.activeFilterParams)
-      .filter(([, v]) => v !== null && v !== undefined && v !== '')
-      .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
-      .join('&');
-
-    const separator = this.baseApiUrl.includes('?') ? '&' : '?';
-    const newUrl = paramString
-      ? `${this.baseApiUrl}${separator}${paramString}`
-      : this.baseApiUrl;
-
-    // Translate Column Labels
-    const translatedColumns = (this.config.tableConfig.columns || []).map(col => ({
-      ...col,
-      label: this.translate(col.label)
-    }));
-
-    // Assign a new object reference so SmartTable's ngOnChanges fires
-    this.resolvedTableConfig = {
-      ...this.config.tableConfig,
-      columns: translatedColumns,
-      apiUrl: newUrl,
-      selectable: true,
-      multiSelect: this.config.selectionConfig.multiSelect,
-    };
-  }
-
-  // ── Filter param helpers ─────────────────────────────────────────────────────
-
-  /**
-   * Converts a flat form-value map to API param key/value pairs
-   * using the configured filterParamMapping.
-   */
-  private buildFilterParams(
-    formValues: Record<string, any>
-  ): Record<string, string> {
-    const mapping = this.config.filterConfig.filterParamMapping || [];
-    const params: Record<string, string> = {};
-
-    mapping.forEach((map: FilterParamMap) => {
-      const rawVal = formValues[map.formFieldName];
-      if (rawVal !== null && rawVal !== undefined && rawVal !== '') {
-        // Support arrays (multiselect) → comma-separated
-        const val = Array.isArray(rawVal) ? rawVal.join(',') : String(rawVal);
-        params[map.apiParamKey] = val;
-      }
-    });
-
-    return params;
-  }
-
-  // ── SmartForm event handlers ─────────────────────────────────────────────────
-
-  /**
-   * Called every time a form field value changes (SmartForm valueChange output).
-   * We track the current values so the component-level "Apply Filter" button
-   * can read them without relying on a form submit button inside the JSON config.
-   */
-  onFormValueChange(values: Record<string, any>): void {
-    this.currentFormValues = values || {};
-  }
-
-  /**
-   * Called when the user clicks the "Apply Filter" button rendered by the component.
-   * Builds API params from the tracked form values and reloads the table.
-   */
-  applyCurrentFilter(): void {
-    this.activeFilterParams = this.buildFilterParams(this.currentFormValues);
-    this.applyFilterParamsToTable();
-  }
-
-  /**
-   * Clear Filter: resets form to default values (preserving disabled-field values),
-   * reloads the table with default params.
-   * The form is re-created via formVersion bump so SmartForm gets fresh initialValues.
-   */
-  onClearFilter(): void {
-    const defaults = this.config.filterConfig.defaultValues || {};
-    const disabled = this.config.filterConfig.disabledFields || [];
-
-    // Build reset values: keep default values for disabled fields, clear the rest
-    const resetValues: Record<string, any> = {};
-    disabled.forEach(fieldName => {
-      if (defaults[fieldName] !== undefined) {
-        resetValues[fieldName] = defaults[fieldName];
-      }
-    });
-
-    this.currentFormValues = { ...resetValues };
-    this.activeFilterParams = this.buildFilterParams(resetValues);
-
-    // Destroy and recreate SmartForm with clean initial values
-    this.resolvedFormJson = '';
-    this.formVersion++;
-
-    // Use NgZone + setTimeout to ensure the *ngIf toggles in one tick, then re-renders
-    this.ngZone.run(() => {
-      setTimeout(() => {
-        this.buildFormJson(resetValues);
-        this.applyFilterParamsToTable();
-      }, 0);
-    });
-  }
-
-  // ── SmartTable event handlers ────────────────────────────────────────────────
-
-  /**
-   * Called by SmartTable's (rowSelect) output.
-   * Merges page-level selection with the cross-page tracking set.
-   */
-  onRowSelect(globalSelection: any[]): void {
-    this.selectedRows = globalSelection || [];
-  }
-
-  /**
-   * Syncs preSelectedRows into the local selectedRows (called when input changes).
-   */
-  private syncPreselection(): void {
-    this.selectedRows = [...(this.preSelectedRows || [])];
-  }
-
-  // ── Action handlers ──────────────────────────────────────────────────────────
-
-  handleSubmit(): void {
-    this.onSubmit.emit([...this.selectedRows]);
-  }
-
-  handleCancel(): void {
-    this.onCancel.emit();
-  }
-
-  // ── Label helpers ─────────────────────────────────────────────────────────────
-
-  translate(key: string): string {
-    return this.labels[key] || key;
-  }
-
-  get titleLabel(): string {
-    return this.translate(this.config?.title || '');
-  }
-
-  get submitButtonLabel(): string {
-    return this.translate(this.config?.selectionConfig?.submitButtonLabel || '');
-  }
-
-  get cancelButtonLabel(): string {
-    return this.translate(this.config?.selectionConfig?.cancelButtonLabel || '');
-  }
-
-  get clearFilterButtonLabel(): string {
-    const key = this.config?.filterConfig?.clearFilterLabel || 'COMMON.FILTER_TABLE.CLEAR_FILTER';
-    return this.translate(key) || 'Clear Filter';
-  }
-
-  get applyFilterButtonLabel(): string {
-    const key = this.config?.filterConfig?.applyFilterLabel || 'COMMON.FILTER_TABLE.APPLY_FILTER';
-    return this.translate(key) || 'Apply Filter';
-  }
-
-  get selectionCountText(): string {
-    if (!this.config?.selectionConfig?.selectionCountLabel) return '';
-    const raw = this.translate(this.config.selectionConfig.selectionCountLabel);
-    return raw
-      .replace('{selected}', String(this.selectedRows.length))
-      .replace('{total}', String(this.totalTableItems));
-  }
-
-  get hasActiveFilters(): boolean {
-    return Object.keys(this.activeFilterParams).length > 0;
-  }
-
-}

package/src/lib/modules/filter-table-selector/filter-table-selector.models.ts

@@ -1,91 +0,0 @@
-import { FormSchema } from '../smart-form/models/form-schema.model';
-import { TableConfig } from '../smart-table/models/table-config.model';
-
-/**
- * Maps a SmartForm field name to its corresponding API query-param key.
- */
-export interface FilterParamMap {
-  /** Field name as declared in sectionConfig.children (e.g. "country") */
-  formFieldName: string;
-  /** Actual query-param key sent to the table API (e.g. "currentCountryCode") */
-  apiParamKey: string;
-}
-
-/**
- * Configuration for the left-hand filter panel (powered by SmartForm).
- */
-export interface FilterPanelConfig {
-  /** Full SmartForm JSON schema (entityType, sectionConfig, actionBarConfig, etc.) */
-  smartFormConfig: FormSchema;
-  /** Maps each form field to the API query-param that the table expects */
-  filterParamMapping: FilterParamMap[];
-  /**
-   * Optional default values pre-filled when the component opens AND restored on Clear Filter.
-   * Key = formFieldName, Value = the field value.
-   * When provided, the initial table load will include these params.
-   */
-  defaultValues?: Record<string, any>;
-  /**
-   * List of field names that should be rendered as disabled/read-only.
-   * The values are still used when building API params, but users cannot change them.
-   * Their values are preserved when Clear Filter is triggered.
-   */
-  disabledFields?: string[];
-  /**
-   * i18n key or literal text for the "Clear Filter" button.
-   * Defaults to 'COMMON.FILTER_TABLE.CLEAR_FILTER'.
-   */
-  clearFilterLabel?: string;
-  /**
-   * i18n key or literal text for the "Apply Filter" button.
-   * Defaults to 'COMMON.FILTER_TABLE.APPLY_FILTER'.
-   */
-  applyFilterLabel?: string;
-}
-
-/**
- * Controls selection behaviour and bottom action bar labels.
- */
-export interface SelectionConfig {
-  /** Allow selecting multiple rows (true = checkbox per row, false = radio). */
-  multiSelect: boolean;
-  /**
-   * i18n token for the "X of Y users Selected" counter.
-   * Use placeholders {selected} and {total}.
-   * Example: "COMMON.FILTER_TABLE.SELECTION_COUNT"
-   */
-  selectionCountLabel: string;
-  /** i18n token (or literal text) for the primary submit button. */
-  submitButtonLabel: string;
-  /** i18n token (or literal text) for the secondary cancel/back button. */
-  cancelButtonLabel: string;
-}
-
-/**
- * Top-level configuration object for FilterTableSelectorComponent.
- */
-export interface FilterTableSelectorConfig {
-  /** Dialog / modal heading. */
-  title?: string;
-  /** Left-panel filter form configuration. */
-  filterConfig: FilterPanelConfig;
-  /**
-   * Right-panel table configuration.
-   * Extends the standard SmartTable config; `selectable` should be true.
-   * `multiSelect` is controlled via selectionConfig.multiSelect.
-   */
-  tableConfig: FilterTableConfig;
-  /** Selection behaviour and bottom action bar labels. */
-  selectionConfig: SelectionConfig;
-}
-
-/**
- * Extended TableConfig for FilterTableSelector — adds multiSelect support.
- */
-export interface FilterTableConfig extends TableConfig {
-  /**
-   * When true (and selectable=true), multiple rows can be selected simultaneously.
-   * When false, only one row can be selected at a time (radio behaviour).
-   */
-  multiSelect?: boolean;
-}

package/src/lib/modules/filter-table-selector/filter-table-selector.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FilterTableSelectorComponent } from './components/filter-table-selector/filter-table-selector.component';
-import { SmartFormModule } from '../smart-form/smart-form.module';
-import { SmartTableModule } from '../smart-table/smart-table.module';
-import { ButtonModule } from '../button/button.module';
-
-@NgModule({
-  declarations: [
-    FilterTableSelectorComponent
-  ],
-  imports: [
-    CommonModule,
-    SmartFormModule,
-    SmartTableModule,
-    ButtonModule
-  ],
-  exports: [
-    FilterTableSelectorComponent
-  ]
-})
-export class FilterTableSelectorModule { }

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

@@ -1,63 +0,0 @@
-<div class="fb-config-panel">
-  @if (!selectedField) {
-    <div class="fb-config-panel__empty">
-      <div class="fb-config-panel__empty-icon">
-        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-          <line x1="3" y1="9" x2="21" y2="9"/>
-          <line x1="9" y1="21" x2="9" y2="9"/>
-        </svg>
-      </div>
-      <p class="fb-config-panel__empty-text">
-        Select a field from the tree panel to edit its configuration.
-      </p>
-    </div>
-  } @else {
-    <div class="fb-config-panel__header">
-      <div class="fb-config-panel__header-left">
-        <h3 class="fb-config-panel__title">
-          {{ selectedField.label || selectedField.name || 'Field Settings' }}
-        </h3>
-        @if (selectedField.type) {
-          <span class="fb-config-panel__badge">{{ selectedField.type }}</span>
-        }
-      </div>
-
-      <!-- Field Type Switcher: hidden for DROPDOWN / MULTI_SELECT fields -->
-      @if (!isDropdownType) {
-        <div class="fb-config-panel__type-switcher">
-          <label class="fb-config-panel__type-label" for="fb-field-type-select">Field Type</label>
-          <select
-            id="fb-field-type-select"
-            class="fb-config-panel__type-select"
-            [value]="currentBuilderType"
-            (change)="onTypeSelectChange($event)"
-          >
-            @for (opt of switchableFieldTypes; track opt.value) {
-              <option [value]="opt.value">{{ opt.label }}</option>
-            }
-          </select>
-        </div>
-      }
-    </div>
-
-    <div class="fb-config-panel__form-wrapper">
-      @if (showConfigForm && configFormJson) {
-        <div class="fb-config-card">
-          <lib-smart-form
-            [formJson]="configFormJson"
-            [initialValues]="configInitialValues"
-            (actionClick)="onActionClick($event)"
-          />
-        </div>
-      } @else if (!showConfigForm) {
-        <!-- intentionally empty — SmartForm is being recycled -->
-      } @else {
-        <div class="fb-config-panel__error">
-          No configuration schema available for this field type.
-        </div>
-      }
-    </div>
-  }
-</div>