platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,321 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// FilterTableSelector — Layout SCSS
+//
+// Layout goal:
+//   [host] fills the modal-body (flex child of cc-modal-container)
+//     └── .fts-container  flex-column, clips overflow
+//           ├── .fts-header      flex-shrink:0
+//           ├── .fts-body        flex:1, min-height:0  ← the scroll zone
+//           │     ├── .fts-filter-panel    fixed width, scrolls independently
+//           │     │     └── .__content     flex:1, overflow-y:auto
+//           │     └── .fts-table-panel     flex:1, clips inner table
+//           │           └── .fts-table-wrapper  → st-table-container scrolls
+//           └── .fts-footer      flex-shrink:0  ← always visible
+// ─────────────────────────────────────────────────────────────────────────────
+
+:host {
+  // CSS custom properties
+  --fts-panel-bg: #ffffff;
+  --fts-filter-panel-width: 300px;
+  --fts-filter-panel-border: 1px solid #dee2e6;
+  --fts-header-bg: #ffffff;
+  --fts-header-border: 1px solid #f1f3f4;
+  --fts-header-height: 60px;
+  --fts-header-padding: 0 24px;
+  --fts-header-title-color: #111827;
+  --fts-header-title-font-size: 1.125rem;
+  --fts-header-title-font-weight: 600;
+  --fts-footer-bg: #ffffff;
+  --fts-footer-border: 1px solid #f1f3f4;
+  --fts-footer-height: 72px;
+  --fts-footer-padding: 0 24px;
+  --fts-footer-gap: 12px;
+  --fts-body-bg: #ffffff;
+  --fts-filter-section-title-color: var(--text-muted, #6b7280);
+  --fts-filter-section-title-font-size: 0.75rem;
+  --fts-filter-section-title-font-weight: 600;
+  --fts-selection-count-color: var(--text-muted, #6b7280);
+  --fts-selection-count-font-size: 0.875rem;
+  --fts-toolbar-border: 1px solid #f1f3f4;
+  --fts-divider-color: #f1f3f4;
+  --fts-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --fts-border-radius: 12px;
+
+  // Host must stretch to fill the flex modal body
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+// ── Container ─────────────────────────────────────────────────────────────────
+.fts-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0; // Lets children shrink so scrolling activates
+  width: 100%;
+  overflow: hidden; // Must clip — prevents container from growing to content
+  background-color: var(--fts-panel-bg);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: var(--fts-border-radius);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
+// ── Optional Title Header ──────────────────────────────────────────────────────
+.fts-header {
+  display: flex;
+  align-items: center;
+  min-height: var(--fts-header-height);
+  padding: var(--fts-header-padding);
+  border-bottom: var(--fts-header-border);
+  background-color: var(--fts-header-bg);
+  flex-shrink: 0; // Never shrinks
+
+  &__title {
+    margin: 0;
+    font-size: var(--fts-header-title-font-size);
+    font-weight: var(--fts-header-title-font-weight);
+    color: var(--fts-header-title-color);
+    letter-spacing: -0.01em;
+  }
+}
+
+// ── Body: side-by-side panels ─────────────────────────────────────────────────
+.fts-body {
+  display: flex;
+  flex: 1;
+  min-height: 0; // Critical: prevents body from expanding past container
+  background-color: var(--fts-body-bg);
+  // No overflow on body itself — each child panel manages its own scroll
+}
+
+// ── Left: Filter Panel ────────────────────────────────────────────────────────
+.fts-filter-panel {
+  width: var(--fts-filter-panel-width);
+  min-width: var(--fts-filter-panel-width);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // Panel itself clips; __content handles the scroll
+  background-color: #fcfcfd;
+  border-right: 1px solid var(--fts-divider-color);
+
+  &--hidden {
+    display: none;
+  }
+
+  &__header {
+    padding: 20px 20px 12px 20px;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: var(--fts-filter-section-title-font-size);
+    font-weight: var(--fts-filter-section-title-font-weight);
+    color: var(--fts-filter-section-title-color);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  // This is the scrolling region — grows to fill panel, scrolls on overflow
+  &__content {
+    flex: 1;
+    min-height: 0; // Allows this flex child to shrink & scroll
+    overflow-y: auto;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #d1d5db;
+      border-radius: 10px;
+    }
+  }
+
+  // SmartForm overrides (scoped to filter panel only)
+  ::ng-deep {
+
+    .smart-form-container,
+    .smart-form-wrapper {
+      padding: 0;
+    }
+
+    .form-header,
+    .form-actions {
+      display: none;
+    }
+
+    .form-section {
+      padding: 0;
+    }
+
+    .form-field-wrapper {
+      margin-bottom: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .field-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: #374151;
+      margin-bottom: 4px;
+    }
+
+    input,
+    select,
+    .mat-select-trigger {
+      font-size: 13px !important;
+      border-color: #e5e7eb !important;
+      background-color: #ffffff !important;
+
+      &:focus {
+        border-color: var(--primary-color) !important;
+        box-shadow: 0 0 0 2px rgba(194, 30, 37, 0.05) !important;
+      }
+    }
+  }
+}
+
+
+// Override the 12-col grid gap — tight layout for the narrow filter panel
+.form-section-container .section-fields.sf-grid {
+  gap: 2px !important;
+}
+
+// ── Right: Table Panel ────────────────────────────────────────────────────────
+.fts-table-panel {
+  flex: 1;
+  min-width: 0; // Prevents horizontal overflow
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // Clips; inner st-table-container does the scroll
+  background-color: var(--fts-panel-bg);
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    min-height: 48px;
+    padding: 0 24px;
+    background-color: var(--fts-panel-bg);
+  }
+}
+
+.fts-table-wrapper {
+  flex: 1;
+  min-height: 0; // Flex child must have min-height:0 to allow scroll
+  display: flex;
+  flex-direction: column;
+  // overflow: hidden;
+  overflow-y: auto;
+
+  ::ng-deep {
+
+    // Root outer — must be a flex column that fills the wrapper
+    .smart-table-outer {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    // Card — grows to fill remaining space, clips so table scrolls inside
+    .smart-table-wrapper {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    // The actual table scroll area.
+    // SmartTable hardcodes overflow-y:visible, so !important is required.
+    .st-table-container {
+      flex: 1;
+      min-height: 0;
+      overflow-x: auto;
+      overflow-y: auto !important; // Override SmartTable's own overflow-y:visible
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #d1d5db;
+        border-radius: 3px;
+      }
+    }
+
+    // Pagination sits outside .smart-table-wrapper — keep it pinned at bottom
+    .st-pagination {
+      flex-shrink: 0;
+      padding: 12px 24px;
+      border-top: 1px solid var(--fts-divider-color);
+      background-color: var(--fts-panel-bg);
+    }
+  }
+}
+
+// ── Selection Count Pill ──────────────────────────────────────────────────────
+.fts-selection-count {
+  font-size: 13px;
+  color: #4b5563;
+  white-space: nowrap;
+  background: #f3f4f6;
+  padding: 4px 14px;
+  border-radius: 100px;
+  font-weight: 500;
+  border: 1px solid #e5e7eb;
+}
+
+// ── Footer: always visible at bottom ─────────────────────────────────────────
+.fts-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--fts-footer-height);
+  padding: var(--fts-footer-padding);
+  border-top: var(--fts-footer-border);
+  flex-shrink: 0; // Never shrinks — always visible at the bottom
+  background-color: var(--fts-footer-bg);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
+  z-index: 10;
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: var(--fts-footer-gap);
+  }
+
+  ::ng-deep lib-button button {
+    min-width: 100px;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+  }
+}
+
+// ── Modal Integration ─────────────────────────────────────────────────────────
+// Makes the cc-modal-body behave as a flex column so :host can fill it fully.
+// Without this the body grows to content height and our overflow clips nothing.
+::ng-deep {
+  .cc-modal-footer {
+    display: none !important;
+  }
+
+  .cc-modal-body:has(lib-filter-table-selector) {
+    padding: 0 !important;
+    overflow: hidden !important;
+    display: flex !important;
+    flex-direction: column !important;
+    // flex:1 is already set by confirmation-modal — no height:100% needed
+  }
+}

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

@@ -0,0 +1,361 @@
+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;
+  }
+
+}