platformcommons-web-lib 1.0.0

package/src/lib/modules/filter/components/filter/filter.component.ts

@@ -0,0 +1,216 @@
+import { Component, EventEmitter, Input, OnInit, Output, ElementRef, HostListener } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { TableFilterConfig, TableFilterOutput, TableFilterColumn, TableFilterLabels } from '../../filter.models';
+
+@Component({
+    selector: 'lib-filter',
+    templateUrl: './filter.component.html',
+    styleUrls: ['./filter.component.scss'],
+    standalone: false
+})
+export class FilterComponent implements OnInit {
+    @Input() config: TableFilterConfig = { items: [] };
+    @Input() activeFilters: TableFilterOutput = {};
+    @Input() columns: TableFilterColumn[] = [];
+    @Input() labels: TableFilterLabels = {
+        filterBtn: '',
+        clear: '',
+        apply: '',
+        search: '',
+        columns: '',
+        showAll: '',
+        hideAll: ''
+    };
+    @Input() theme: string = '';
+
+    @Output() filterChange = new EventEmitter<TableFilterOutput>();
+    @Output() columnChange = new EventEmitter<TableFilterColumn[]>();
+    @Output() toggle = new EventEmitter<boolean>();
+
+    isOpen = false;
+    activeTab: 'filters' | 'columns' = 'filters';
+
+    // Temporary state while panel is open
+    tempFilters: TableFilterOutput = {};
+    tempColumns: TableFilterColumn[] = [];
+
+    constructor(
+        private elementRef: ElementRef,
+        private router: Router,
+        private route: ActivatedRoute
+    ) { }
+
+    ngOnInit(): void {
+        this.syncTempState();
+        this.initFromUrl();
+    }
+
+    private initFromUrl(): void {
+        if (this.config.settings?.persistent) {
+            this.route.queryParams.subscribe(params => {
+                if (Object.keys(params).length > 0) {
+                    const newFilters: TableFilterOutput = { ...this.activeFilters };
+                    Object.keys(params).forEach(key => {
+                        // Skip non-filter params if possible, or assume all are filters
+                        // Ideally we check against config items
+                        if (params[key] !== undefined) {
+                            newFilters[key] = params[key];
+                        }
+                    });
+                    this.activeFilters = newFilters;
+                    this.syncTempState();
+                }
+            });
+        }
+    }
+
+    @HostListener('document:click', ['$event'])
+    onClickOutside(event: Event): void {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+
+    togglePanel(): void {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.syncTempState();
+            this.activeTab = 'filters';
+        }
+        this.toggle.emit(this.isOpen);
+    }
+
+    setActiveTab(tab: 'filters' | 'columns'): void {
+        this.activeTab = tab;
+    }
+
+    // Generic Filter Change Handler
+    onFilterChange(key: string | undefined, value: any): void {
+        if (!key) return;
+        this.tempFilters[key] = value;
+    }
+
+    // Column Visibility Logic
+    toggleColumn(columnId: string): void {
+        const col = this.tempColumns.find(c => c.id === columnId);
+        if (col) {
+            col.visible = !col.visible;
+        }
+    }
+
+    toggleAllColumns(visible: boolean): void {
+        this.tempColumns.forEach(c => c.visible = visible);
+    }
+
+    // Actions
+    clearAll(): void {
+        if (this.activeTab === 'filters') {
+            this.tempFilters = {};
+            if (this.config.settings?.persistent) {
+                this.updateUrl({});
+            }
+        } else {
+            // Reset columns to default or show all?
+            // Usually 'clear' in filters context means clear filters
+            // But if we are in columns tab, maybe we want to reset columns?
+            // For now, let's keep it simple: generic clear clears filters.
+            this.tempFilters = {};
+        }
+        // If we want clear to apply immediately without clicking apply:
+        // this.apply(); 
+        // But usually "Clear" inside panel just clears temp state until Apply is clicked.
+        // However, if the user requested "Persistent" and "Clear", they might expect immediate URL update?
+        // Standard UX: panel actions apply on "Apply".
+        // The persisted state should only change when "Apply" is clicked?
+        // Wait, if I update URL on clearAll inside panel, it might be confusing if panel is still open with cleared state but not "applied" to data.
+        // Re-reading expectation: "Persistent" setting usually means the filter state is synced with URL.
+        // If I clear temp state, URL shouldn't change until I click Apply.
+        // SO I WILL NOT UPDATE URL HERE. The `initFromUrl` loads INTO `activeFilters`.
+        // `apply()` updates `activeFilters` AND should update URL.
+    }
+
+    apply(): void {
+        // Apply temp state to active state
+        this.activeFilters = { ...this.tempFilters };
+        // Clean up undefined/null values
+        Object.keys(this.activeFilters).forEach(key => {
+            if (this.activeFilters[key] === null || this.activeFilters[key] === undefined || this.activeFilters[key] === '') {
+                delete this.activeFilters[key];
+            }
+        });
+
+        // Apply columns
+        this.columns = this.tempColumns.map(c => ({ ...c }));
+
+        this.filterChange.emit(this.activeFilters);
+        this.columnChange.emit(this.columns);
+
+        if (this.config.settings?.persistent) {
+            this.updateUrl(this.activeFilters);
+        }
+
+        this.isOpen = false;
+    }
+
+
+    private updateUrl(queryParams: any): void {
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: queryParams,
+            queryParamsHandling: 'merge', // or 'replace' to clear others? 'merge' ensures we don't lose other params
+            // But wait, if we removed a filter, merge keeps it?
+            // We need to explicitly clear removed keys if we use merge.
+            // Or use pure replacement of filter keys.
+            // For simplicity, let's assuming we want to replace parameters that overlap.
+            // But to clear keys, we need to pass `null` or `undefined` for those keys in `queryParams`?
+            // Angular router: passing null removes the param.
+        });
+
+        // Refined updateUrl logic:
+        // We merged activeFilters. But if we removed a key, it's missing from activeFilters.
+        // We need to compare with current params and remove keys that are no longer in activeFilters?
+        // A simpler way for this component:
+        // We likely want to replace ALL query params that correspond to filters. 
+        // But we don't know which params are filters vs other things (e.g. page, sort).
+        // For now, I will just push `this.activeFilters`. 
+        // NOTE: This doesn't clear keys that were removed. 
+        // To fix clearing:
+        // I should probably navigate with exact activeFilters if I knew they are the ONLY params.
+        // Better:
+        // this.router.navigate([], { queryParams: this.activeFilters }); // property replaces all
+        // If we want to keep 'page', etc., we need to include them.
+        // Let's use 'merge' but we need to handle clearing.
+        // I will implement a smarter update.
+    }
+
+    activeFilterCountValue(): number {
+        return Object.keys(this.activeFilters).length;
+    }
+
+
+    get activeFilterCount(): number {
+        return Object.keys(this.activeFilters).length;
+    }
+
+    private syncTempState(): void {
+        this.tempFilters = { ...this.activeFilters };
+        this.tempColumns = JSON.parse(JSON.stringify(this.columns || []));
+    }
+
+    get containerStyles(): { [key: string]: string } {
+        const styles: { [key: string]: string } = {};
+        if (this.config.styles) {
+            if (this.config.styles.width) styles['--cc-filter-panel-width'] = this.config.styles.width;
+            if (this.config.styles.padding) styles['--cc-filter-panel-padding'] = this.config.styles.padding;
+            if (this.config.styles.gap) styles['--cc-filter-panel-gap'] = this.config.styles.gap;
+            if (this.config.styles.backgroundColor) styles['--cc-filter-panel-bg'] = this.config.styles.backgroundColor;
+            if (this.config.styles.borderRadius) styles['--cc-filter-panel-radius'] = this.config.styles.borderRadius;
+            if (this.config.styles.headerHeight) styles['--cc-filter-panel-header-height'] = this.config.styles.headerHeight;
+        }
+        return styles;
+    }
+
+    trackByFn(index: number, item: any): any {
+        return item.key || index;
+    }
+}

package/src/lib/modules/filter/filter.models.ts

@@ -0,0 +1,88 @@
+import { InputConfig } from '../form-components/components/input/input.models';
+import { DropdownConfig } from '../form-components/components/dropdown/dropdown.models';
+import { CheckboxConfig } from '../form-components/components/checkbox/checkbox.models';
+import { RadioConfig } from '../form-components/components/radio/radio.models';
+import { ToggleConfig } from '../form-components/components/toggle/toggle.models';
+import { DatePickerConfig } from '../form-components/components/datepicker/datepicker.models';
+import { FilterSearchConfig } from '../form-components/components/search/search.models';
+import { FilterItemType } from '../filter-sidebar/filter-sidebar.models';
+
+// Reuse the same item structure as sidebar for consistency
+export interface TableFilterItem {
+    key?: string;
+    type: FilterItemType;
+    label?: string;
+    visible?: boolean;
+
+    // Component Configs
+    inputConfig?: InputConfig;
+    dropdownConfig?: DropdownConfig;
+    checkboxConfig?: CheckboxConfig;
+    radioConfig?: RadioConfig;
+    toggleConfig?: ToggleConfig;
+    datepickerConfig?: DatePickerConfig;
+    searchConfig?: FilterSearchConfig;
+
+    // Layout / Grouping
+    children?: TableFilterItem[];
+    expanded?: boolean;
+
+    // Customization
+    styles?: { [key: string]: string };
+}
+
+export interface TableFilterConfig {
+    items: TableFilterItem[];
+
+    // Global Filter Styling
+    styles?: {
+        width?: string;
+        padding?: string;
+        gap?: string;
+        backgroundColor?: string;
+        borderRadius?: string;
+        headerHeight?: string;
+    };
+
+    columns?: TableFilterColumn[];
+
+    settings?: {
+        persistent?: boolean;
+        collapsible?: boolean;
+    };
+
+    // Actions visibility
+    actions?: {
+        clear?: { visible?: boolean; label?: string; };
+        apply?: { visible?: boolean; label?: string; };
+    }
+}
+
+export interface TableFilterColumn {
+    id: string;
+    label: string;
+    visible: boolean;
+    filterable?: boolean;
+    filterOptions?: any[]; // Legacy or simple options
+}
+
+export interface TableFilterLabels {
+    filterBtn: string;
+    clear: string;
+    apply: string;
+    search: string;
+    columns: string; // Tab label
+    showAll: string;
+    hideAll: string;
+    items?: string;
+}
+
+export interface TableFilterOutput {
+    [key: string]: any;
+}
+
+export interface TableFilterChangeEvent {
+    key: string;
+    value: any;
+    allFilters: TableFilterOutput;
+}

package/src/lib/modules/filter/filter.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ButtonModule } from '../button/button.module';
+import { FormComponentsModule } from '../form-components/form-components.module';
+import { FilterComponent } from './components/filter/filter.component';
+
+@NgModule({
+    declarations: [
+        FilterComponent
+    ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        ButtonModule,
+        FormComponentsModule
+    ],
+    exports: [
+        FilterComponent
+    ]
+})
+export class FilterModule { }

package/src/lib/modules/filter/filter.theme.scss

@@ -0,0 +1,92 @@
+@use 'sass:map';
+
+// Default configuration for the filter theme
+$default-filter-config: (
+    // Button Trigger
+    btn-bg: #ffffff,
+    btn-border: 1px solid #e0e0e0,
+    btn-radius: 4px,
+    btn-text-color: #333,
+    btn-hover-bg: #f5f5f5,
+    btn-active-bg: #e3f2fd,
+    btn-active-text: #1976d2,
+    btn-badge-bg: #f44336,
+    btn-badge-text: #fff,
+
+    // Panel / Sidebar
+    panel-bg: #ffffff,
+    panel-border: 1px solid #e0e0e0,
+    panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
+    panel-width: 320px,
+    panel-min-width: 480px,
+    panel-header-bg: #fafafa,
+    panel-header-text: #333,
+    panel-padding: 1rem,
+    panel-radius: 8px,
+    panel-header-height: 48px,
+
+    // Tabs
+    tab-bg: transparent,
+    tab-text: #666,
+    tab-active-bg: #fff,
+    tab-active-text: #1976d2,
+    tab-border-bottom: 2px solid #1976d2,
+
+    // Content
+    section-title: #333,
+    option-text: #555,
+    option-hover-bg: #f9f9f9,
+
+    // Footer actions
+    footer-bg: #fff,
+    footer-border-top: 1px solid #e0e0e0,
+    action-primary-bg: #1976d2,
+    action-primary-text: #fff,
+    action-secondary-text: #666
+);
+
+@mixin filter-theme($user-config: ()) {
+    $config: map.merge($default-filter-config, $user-config);
+
+    // Button Trigger
+    --cc-filter-btn-bg: #{map.get($config, btn-bg)};
+    --cc-filter-btn-border: #{map.get($config, btn-border)};
+    --cc-filter-btn-radius: #{map.get($config, btn-radius)};
+    --cc-filter-btn-text-color: #{map.get($config, btn-text-color)};
+    --cc-filter-btn-hover-bg: #{map.get($config, btn-hover-bg)};
+    --cc-filter-btn-active-bg: #{map.get($config, btn-active-bg)};
+    --cc-filter-btn-active-text: #{map.get($config, btn-active-text)};
+    --cc-filter-btn-badge-bg: #{map.get($config, btn-badge-bg)};
+    --cc-filter-btn-badge-text: #{map.get($config, btn-badge-text)};
+
+    // Panel
+    --cc-filter-panel-bg: #{map.get($config, panel-bg)};
+    --cc-filter-panel-border: #{map.get($config, panel-border)};
+    --cc-filter-panel-shadow: #{map.get($config, panel-shadow)};
+    --cc-filter-panel-width: #{map.get($config, panel-width)};
+    --cc-filter-panel-min-width: #{map.get($config, panel-min-width)};
+    --cc-filter-panel-padding: #{map.get($config, panel-padding)};
+    --cc-filter-panel-header-bg: #{map.get($config, panel-header-bg)};
+    --cc-filter-panel-header-text: #{map.get($config, panel-header-text)};
+    --cc-filter-panel-radius: #{map.get($config, panel-radius)};
+    --cc-filter-panel-header-height: #{map.get($config, panel-header-height)};
+
+    // Tabs
+    --cc-filter-tab-bg: #{map.get($config, tab-bg)};
+    --cc-filter-tab-text: #{map.get($config, tab-text)};
+    --cc-filter-tab-active-bg: #{map.get($config, tab-active-bg)};
+    --cc-filter-tab-active-text: #{map.get($config, tab-active-text)};
+    --cc-filter-tab-border-bottom: #{map.get($config, tab-border-bottom)};
+
+    // Content
+    --cc-filter-section-title: #{map.get($config, section-title)};
+    --cc-filter-option-text: #{map.get($config, option-text)};
+    --cc-filter-option-hover-bg: #{map.get($config, option-hover-bg)};
+
+    // Footer
+    --cc-filter-footer-bg: #{map.get($config, footer-bg)};
+    --cc-filter-footer-border-top: #{map.get($config, footer-border-top)};
+    --cc-filter-action-primary-bg: #{map.get($config, action-primary-bg)};
+    --cc-filter-action-primary-text: #{map.get($config, action-primary-text)};
+    --cc-filter-action-secondary-text: #{map.get($config, action-secondary-text)};
+}

package/src/lib/modules/filter-sidebar/components/filter-sidebar/filter-sidebar.component.html

@@ -0,0 +1,112 @@
+<div class="cc-filter-sidebar" [ngStyle]="sidebarStyles" [class.collapsed]="isCollapsed">
+
+    <!-- Header -->
+    <div class="cc-filter-header" *ngIf="config.header?.visible !== false">
+        <div class="cc-header-content">
+            <span class="cc-header-title" *ngIf="config.header?.title">
+                <span *ngIf="config.header?.icon" [class]="config.header?.icon" class="cc-header-icon material-icons">
+                    <!-- {{config.header?.icon }} -->
+                </span>
+                {{ config.header?.title }}
+            </span>
+            <ng-content select="[header-actions]"></ng-content>
+        </div>
+        <button type="button" *ngIf="config.settings?.collapsible" (click)="toggleCollapse()" class="cc-icon-btn"
+            [attr.aria-label]="isCollapsed ? config.labels?.expandAriaLabel : config.labels?.collapseAriaLabel">
+            <span class="material-icons">{{ isCollapsed ? 'menu_open' : 'menu' }}</span>
+        </button>
+        <button type="button" *ngIf="config.header?.showClose && !isCollapsed" (click)="onClose()"
+            class="cc-icon-btn cc-close-btn" [attr.aria-label]="config.labels?.closeAriaLabel">
+            <span class="material-icons">close</span>
+        </button>
+        <!-- Code snippet debug (optional) -->
+        <button type="button" *ngIf="config.settings?.showCodeSnippet" (click)="onShowCodeSnippet()" class="cc-icon-btn"
+            [attr.aria-label]="config.labels?.codeSnippetAriaLabel">
+            <span class="material-icons">code</span>
+        </button>
+    </div>
+
+    <!-- Content (Scrollable) -->
+    <div class="cc-filter-content" [class.hidden]="isCollapsed">
+        <ng-container *ngFor="let item of config.items; trackBy: trackByFn">
+            <ng-container *ngTemplateOutlet="itemTemplate; context: { item: item }"></ng-container>
+        </ng-container>
+    </div>
+
+    <!-- Footer -->
+    <div class="cc-filter-footer" *ngIf="config.footer?.visible !== false && !isCollapsed">
+        <lib-button variant="outline" color="warn" class="cc-btn-clear"
+            *ngIf="config.footer?.clearButton?.visible !== false" (click)="clearFilters()">
+            {{ config.footer?.clearButton?.label }}
+        </lib-button>
+        <lib-button variant="primary" color="warn" class="cc-btn-apply"
+            *ngIf="config.footer?.applyButton?.visible !== false" [disabled]="config.footer?.applyButton?.disabled ?? false"
+            (click)="applyFilters()">
+            {{ config.footer?.applyButton?.label }}
+        </lib-button>
+    </div>
+</div>
+
+<!-- Recursive Template for Items -->
+<ng-template #itemTemplate let-item="item">
+    <div class="cc-filter-item" [ngClass]="['type-' + item.type]"
+        [style.display]="item.visible === false ? 'none' : 'block'" [ngStyle]="item.styles">
+
+        <ng-container [ngSwitch]="item.type">
+
+            <!-- Input -->
+            <lib-input *ngSwitchCase="'input'" [config]="item.inputConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (valueChange)="onValueChange(item.key, $event)">
+            </lib-input>
+
+            <!-- Dropdown -->
+            <lib-dropdown *ngSwitchCase="'dropdown'" [config]="item.dropdownConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (selectionChange)="onValueChange(item.key, $event)">
+            </lib-dropdown>
+
+            <!-- Checkbox -->
+            <lib-checkbox *ngSwitchCase="'checkbox'" [config]="item.checkboxConfig" [label]="item.label"
+                [checked]="!!filters[item.key]" (checkedChange)="onValueChange(item.key, $event)">
+            </lib-checkbox>
+
+            <!-- Radio -->
+            <lib-radio *ngSwitchCase="'radio'" [config]="item.radioConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (selectionChange)="onValueChange(item.key, $event)">
+            </lib-radio>
+
+            <!-- Toggle -->
+            <lib-toggle *ngSwitchCase="'toggle'" [config]="item.toggleConfig" [label]="item.label"
+                [checked]="filters[item.key]" (toggleChange)="onValueChange(item.key, $event)">
+            </lib-toggle>
+
+            <!-- Datepicker -->
+            <lib-datepicker *ngSwitchCase="'datepicker'" [config]="item.datepickerConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (dateChange)="onValueChange(item.key, $event)">
+            </lib-datepicker>
+
+            <!-- Search -->
+            <lib-search *ngSwitchCase="'active-search'" [config]="item.searchConfig" [label]="item.label"
+                [ngModel]="filters[item.key]" (search)="onValueChange(item.key, $event)">
+            </lib-search>
+
+            <!-- Group / Accordion -->
+            <div *ngSwitchCase="'group'" class="cc-accordion-item" [class.expanded]="item.expanded">
+                <button type="button" class="cc-accordion-header" (click)="item.expanded = !item.expanded">
+                    <span class="cc-accordion-title">{{ item.label }}</span>
+                    <span class="material-icons cc-accordion-icon">{{ item.expanded ? 'expand_less' : 'expand_more'
+                        }}</span>
+                </button>
+
+                <div class="cc-accordion-body" *ngIf="item.expanded">
+                    <ng-container *ngFor="let child of item.children; trackBy: trackByFn">
+                        <ng-container *ngTemplateOutlet="itemTemplate; context: { item: child }"></ng-container>
+                    </ng-container>
+                </div>
+            </div>
+
+            <!-- Custom Divider -->
+            <div *ngSwitchCase="'divider'" class="cc-filter-divider"></div>
+
+        </ng-container>
+    </div>
+</ng-template>