@codex-ts/core-lib 1.0.0

package/src/lib/components/base-list-page.component.ts

@@ -0,0 +1,327 @@
+import { OnInit, OnDestroy, ViewChild, Directive } from '@angular/core';
+import { Router } from '@angular/router';
+import { Table, TableLazyLoadEvent } from 'primeng/table';
+import { ConfirmationService } from 'primeng/api';
+import { NotificationService } from '../services/notification.service';
+import { Subscription, Observable } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { Page } from '../models/pagination/page.interface';
+import { PageRequest } from '../models/pagination/page-request.interface';
+import { FilterCriteria, FilterOperator } from '../models/pagination/filter-criteria.interface';
+import { SortCriteria } from '../models/pagination/sort-criteria.interface';
+import { BasePageComponent } from './base-page.component';
+import { AppMessages } from '../constants/app.messages';
+import { UtilsService } from '../services/utils.service';
+import { AppConstants } from '../constants/app.constants';
+
+/**
+ * Base component for all list page components in the application.
+ * Provides common functionality for list operations like loading data,
+ * pagination, sorting, and CRUD operations.
+ */
+@Directive()
+export abstract class BaseListPageComponent<T extends { uuid: string }>
+    extends BasePageComponent implements OnInit, OnDestroy {
+
+    @ViewChild('dt') table!: Table;
+    items: T[] = [];
+    actionLoading: boolean = false;
+    rows: number = 10;
+    totalRecords: number = 0;
+    filters: FilterCriteria[] = [];
+    protected subscriptions: Subscription[] = [];
+
+    constructor(
+        protected router: Router,
+        protected override notificationService: NotificationService,
+        protected override utilsService: UtilsService,
+        protected confirmationService: ConfirmationService
+    ) {
+        super(utilsService, notificationService);
+    }
+
+    /**
+     * Initialize the component, subscribe to loading state if available,
+     * and load initial data.
+     */
+    ngOnInit() {
+        // Subscribe to loading state if available
+        const loadingObservable = this.getLoadingObservable();
+        if (loadingObservable) {
+            this.subscriptions.push(
+                loadingObservable.subscribe(
+                    isLoading => this.loading = isLoading
+                )
+            );
+        }
+        this.loadData();
+    }
+
+    /**
+     * Clean up any subscriptions when the component is destroyed
+     */
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+
+    /**
+     * Handle search event from the UI
+     * @param event The search event
+     */
+    onSearch(event: Event): void {
+        const element = event.target as HTMLInputElement;
+        if (this.table) {
+            this.table.filterGlobal(element.value, 'contains');
+        }
+    }
+
+    /**
+     * Load data with pagination and sorting
+     * @param event The lazy load event from PrimeNG table
+     */
+    /**
+     * Convert PrimeNG filter format to backend format
+     * @param filters The PrimeNG filters object
+     * @returns Converted filters object for backend
+     */
+    /**
+     * Convert PrimeNG filter format to backend format
+     * @param filters The PrimeNG filters object
+     * @returns Converted filters object for backend
+     */
+    /**
+     * Convert PrimeNG filters to backend format with proper operator mapping
+     */
+    protected convertFilters(filters: { [key: string]: any }): FilterCriteria[] {
+        const backendFilters: FilterCriteria[] = [];
+        if (!filters) return backendFilters;
+
+        console.log('Raw PrimeNG filters:', filters);
+
+        Object.entries(filters).forEach(([key, filterMeta]) => {
+            console.log(`Processing filter for ${key}:`, filterMeta);
+
+            // Handle array of filter metadata (multiple filters for same column)
+            if (Array.isArray(filterMeta)) {
+                const validFilters = filterMeta
+                    .filter(meta => meta.value !== null && meta.value !== undefined && meta.value !== '')
+                    .map(meta => ({
+                        field: key,
+                        value: this.transformFilterValue(String(meta.value)),
+                        operator: this.transformOperator(meta.matchMode)
+                    }));
+                backendFilters.push(...validFilters);
+            }
+            // Handle single filter metadata
+            else if (filterMeta?.value !== null && filterMeta?.value !== undefined && filterMeta?.value !== '') {
+                backendFilters.push({
+                    field: key,
+                    value: this.transformFilterValue(String(filterMeta.value)),
+                    operator: this.transformOperator(filterMeta.matchMode)
+                });
+            }
+        });
+
+        console.log('Converted filters:', backendFilters);
+        return backendFilters;
+    }
+
+    /**
+     * Transform filter value based on backend requirements - all values must be strings
+     */
+    protected transformFilterValue(value: any): string {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return value.trim();
+        }
+        if (Array.isArray(value)) {
+            return value.join(',');
+        }
+        if (value instanceof Date) {
+            return value.toISOString();
+        }
+        if (typeof value === 'number' || typeof value === 'boolean') {
+            return value.toString();
+        }
+        return String(value);
+    }
+
+    /**
+     * Map PrimeNG operators to backend operators
+     */
+    protected transformOperator(operator: string): FilterOperator {
+        const operatorMap: { [key: string]: FilterOperator } = {
+            'contains': 'CONTAINS',
+            'startsWith': 'STARTS_WITH',
+            'endsWith': 'ENDS_WITH',
+            'equals': 'EQUALS',
+            'notEquals': 'NOT_EQUALS',
+            'gt': 'GREATER_THAN',
+            'gte': 'GREATER_THAN_EQUALS',
+            'lt': 'LESS_THAN',
+            'lte': 'LESS_THAN_EQUALS'
+        };
+        return operatorMap[operator] || 'EQUALS'; // Default to EQUALS if operator not found
+    }
+
+    loadData(event?: TableLazyLoadEvent) {
+        console.log('LoadData called with event:', event);
+        this.loading = true;
+
+        // Create page request with default values
+        const pageRequest: PageRequest = {
+            page: 0,
+            size: 10,
+            sorts: [],
+            filters: []
+        };
+
+        if (event) {
+            // Handle pagination
+            if (event.first !== undefined && event.rows) {
+                pageRequest.page = Math.floor(event.first / event.rows);
+                pageRequest.size = event.rows;
+            }
+
+            // Handle sorting
+            if (event.sortField) {
+                pageRequest.sorts = [{
+                    field: Array.isArray(event.sortField) ? event.sortField[0] : event.sortField,
+                    direction: event.sortOrder === 1 ? 'asc' : 'desc'
+                }];
+            }
+
+            // Handle filtering
+            if (event.filters) {
+                const convertedFilters = this.convertFilters(event.filters);
+                console.log('Converted filters:', convertedFilters);
+                pageRequest.filters = convertedFilters;
+            }
+        }
+
+        console.log('Sending page request:', pageRequest);
+
+        this.getEntityService().getAll(pageRequest)
+            .pipe(finalize(() => this.loading = false))
+            .subscribe({
+                next: (response: Page<T>) => {
+                    this.items = [...response.content];
+                    this.totalRecords = response.page.totalElements;
+                },
+                error: (error) => {
+                    console.error('Failed to load data:', error);
+                    this.showError(`${AppMessages.LIST.ERROR.LOAD} ${this.getEntityName()}`);
+                }
+            });
+    }
+
+    /**
+     * Navigate to create a new entity
+     */
+    public onCreate(): void {
+        this.navigateTo([this.getFormRoute(), AppConstants.PAGE_MODE.CREATE]);
+    }
+
+    /**
+     * Navigate to view an entity
+     * @param item The entity to view
+     */
+    onView(item: T) {
+        if (!this.validateItemUuid(item, 'view')) return;
+        this.navigateTo([this.getFormRoute(), AppConstants.PAGE_MODE.VIEW], { uuid: item.uuid });
+    }
+
+    /**
+     * Navigate to edit an entity
+     * @param item The entity to edit
+     */
+    onEdit(item: T) {
+        if (!this.validateItemUuid(item, 'edit')) return;
+        this.navigateTo([this.getFormRoute(), AppConstants.PAGE_MODE.EDIT], { uuid: item.uuid });
+    }
+    
+    /**
+     * Navigate to a route with error handling
+     * @param path The route path
+     * @param matrixParams Optional matrix parameters
+     */
+    protected navigateTo(path: any[], matrixParams?: { [key: string]: any }): void {
+        this.router.navigate(path, { queryParams: matrixParams })
+            .catch(error => {
+                console.error('Navigation error:', error);
+                this.showError(AppMessages.LIST.ERROR.NAVIGATION);
+            });
+    }
+
+    /**
+     * Delete an entity with confirmation
+     * @param item The entity to delete
+     */
+    onDelete(item: T) {
+        if (!this.validateItemUuid(item, 'delete')) return;
+
+        this.confirmationService.confirm({
+            message: `Are you sure you want to delete this ${this.getEntityName()}?`,
+            header: 'Confirm Deletion',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.actionLoading = true;
+                this.getEntityService().delete(item.uuid)
+                    .pipe(finalize(() => this.actionLoading = false))
+                    .subscribe({
+                        next: () => {
+                            this.showSuccess(`${this.getEntityName()} ${AppMessages.LIST.SUCCESS.DELETE}`);
+                            this.loadData();
+                        },
+                        error: (error) => {
+                            console.error('Delete failed:', error);
+                            this.showError(`${AppMessages.LIST.ERROR.DELETE} ${this.getEntityName()}`);
+                        }
+                    });
+            }
+        });
+    }
+
+    /**
+     * Validate that an entity has a UUID
+     * @param item The entity to validate
+     * @param action The action being performed
+     * @returns true if valid, false otherwise
+     */
+    protected validateItemUuid(item: T, action: string): boolean {
+        if (!item?.uuid) {
+            this.showError(`${AppMessages.LIST.ERROR.INVALID_ID} ${action}`);
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * Get an observable for loading state from the entity service
+     * @returns An observable of loading state if available, null otherwise
+     */
+    protected getLoadingObservable(): Observable<boolean> | null {
+        const service = this.getEntityService() as any;
+        return service.loading$ || null;
+    }
+
+    /**
+     * Get the entity service for data operations
+     */
+    protected abstract getEntityService(): { 
+        getAll: (pageRequest?: PageRequest) => Observable<Page<T>>;
+        delete: (uuid: string) => Observable<any>;
+    };
+
+    /**
+     * Get the entity name for display in messages
+     */
+    protected abstract getEntityName(): string;
+
+    /**
+     * Get the route to the entity form
+     */
+    protected abstract getFormRoute(): string;
+}

package/src/lib/components/base-page.component.ts

@@ -0,0 +1,33 @@
+import { Directive } from '@angular/core';
+import { UtilsService } from '../services/utils.service';
+import { NotificationService } from '../services/notification.service';
+
+/**
+ * Base component for all page components in the application.
+ * Provides common functionality like loading state and message display.
+ */
+@Directive()
+export abstract class BasePageComponent {
+    protected loading: boolean = false;
+    
+    constructor(
+        protected utilsService: UtilsService,
+        protected notificationService: NotificationService
+    ) {}
+
+    /**
+     * Display an error message to the user
+     * @param detail The error message to display
+     */
+    protected showError(detail: string): void {
+        this.notificationService.showError(detail);
+    }
+
+    /**
+     * Display a success message to the user
+     * @param detail The success message to display
+     */
+    protected showSuccess(detail: string): void {
+        this.notificationService.showSuccess(detail);
+    }
+}

package/src/lib/components/base-tabbed-form.component.ts

@@ -0,0 +1,345 @@
+import { Component, OnInit, Injectable } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ComponentContext } from '../enums/component-context.enum';
+import { BasePageComponent } from './base-page.component';
+import { UtilsService } from '../services/utils.service';
+import { NotificationService } from '../services/notification.service';
+import { AppMessages } from '../constants/app.messages';
+import { AppConstants, PageMode } from '../constants/app.constants';
+import { Observable, take, map } from 'rxjs';
+import { EntityService } from '../services/entity.service';
+import { TabbedFormType } from '../enums/tabbed-form-type.enum';
+
+export interface TabConfig {
+    value: string;
+    title: string;
+    isParentModel?: boolean;
+}
+
+@Injectable()
+@Component({
+    template: ''
+})
+export abstract class BaseTabbedFormComponent<T extends { uuid: string }>
+    extends BasePageComponent implements OnInit {
+
+    // Tab specific properties
+    activeTab: string = '';
+    tabs: TabConfig[] = [];
+    formType = '';
+
+    // Form properties
+    isNew = true;
+    mode: PageMode = AppConstants.PAGE_MODE.CREATE;
+    currentFormData!: T;
+    protected originalFormData: T | null = null;
+    protected hasChanges: boolean = false;
+
+    private debug(message: string, ...args: any[]): void {
+        // Only log in development
+        if (process.env['NODE_ENV'] !== 'production') {
+            console.log(`[BaseTabbedFormComponent] ${message}`, ...args);
+        }
+    }
+
+    constructor(
+        protected route: ActivatedRoute,
+        protected router: Router,
+        protected override notificationService: NotificationService,
+        protected override utilsService: UtilsService
+    ) {
+        super(utilsService, notificationService);
+    }
+
+    ngOnInit() {
+        try {
+            // Initialize tabs
+            this.tabs = this.getTabs();
+            this.activeTab = this.tabs[0]?.value || '';
+
+            // Initialize form using query params
+            this.route.queryParams.pipe(take(1)).subscribe({
+                next: params => this.initializeForm(params),
+                error: error => {
+                    console.error('Error initializing form:', error);
+                    this.showError(AppMessages.FORM.ERROR.INIT);
+                }
+            });
+        } catch (error) {
+            console.error('Error in ngOnInit:', error);
+            this.showError(AppMessages.FORM.ERROR.INIT);
+        }
+    }
+
+
+    private initializeFormData() {
+        this.debug('Initializing form data');
+        this.debug('Current mode:', this.mode);
+
+        if (this.mode === AppConstants.PAGE_MODE.CREATE) {
+            this.debug('Create mode, using defaults');
+            this.loadDefaultTab();
+            return;
+        }
+
+        const state = {
+            ...this.router.getCurrentNavigation()?.extras?.state,
+            ...window.history.state
+        } as { formData?: T };
+
+        this.debug('Combined state:', state);
+
+        if (state?.formData) {
+            this.debug('Found form data in state:', state.formData);
+            this.patchFormData(state.formData);
+            this.loadDefaultTab();
+        } else {
+            this.debug('No form data, loading from UUID');
+            this.loadFromUuid();
+        }
+    }
+
+    private loadFromUuid() {
+        // Flatten nested subscriptions using RxJS operators
+        this.route.queryParams.pipe(
+            take(1),
+            map((params: { [key: string]: string }) => {
+                const uuid = params[AppConstants.FORM.UUID];
+                if (!uuid) {
+                    throw new Error(`UUID is required for ${this.mode} mode when no formData is provided`);
+                }
+                return uuid;
+            })
+        ).subscribe({
+            next: (uuid: string) => this.loadEntity(uuid),
+            error: (error: Error) => {
+                console.error('Error loading UUID:', error);
+                this.showError(`${AppMessages.FORM.ERROR.LOAD} UUID`);
+            }
+        });
+    }
+
+    private initializeForm(params: any) {
+        // Remove debug logging for production
+        const routeMode = params[AppConstants.FORM.MODE];
+        
+        try {
+            this.initializeFormMode(routeMode);
+            this.setupFormState();
+
+            if (this.formType === TabbedFormType.LIST) {
+                this.initializeListForm(params);
+            } else {
+                this.initializeFormData();
+            }
+        } catch (error) {
+            console.error('Error initializing form:', error);
+            this.showError(`${AppMessages.FORM.ERROR.INIT}: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    }
+
+    protected patchFormData(data: T | null) {
+        if (data) {
+            this.currentFormData = { ...data };
+            this.originalFormData = { ...data }; // Create a deep copy to avoid reference issues
+            this.isNew = false;
+        }
+    }
+
+    private initializeFormMode(routeMode: string | undefined) {
+        if (!routeMode) {
+            this.mode = AppConstants.PAGE_MODE.CREATE;
+            return;
+        }
+
+        // Validate mode more explicitly
+        if (!this.isValidPageMode(routeMode)) {
+            const validModes = Object.values(AppConstants.PAGE_MODE).join(', ');
+            throw new Error(`Invalid page mode: ${routeMode}. Valid modes are: ${validModes}`);
+        }
+        
+        this.mode = routeMode;
+    }
+
+    private setupFormState() {
+        this.debug('Setting up form state, mode:', this.mode);
+
+        if (this.mode === AppConstants.PAGE_MODE.CREATE) {
+            this.debug('Create mode setup');
+            this.isNew = true;
+            this.loading = false;
+            this.originalFormData = null;
+        }
+    }
+
+    protected loadEntity(uuid: string) {
+        this.loading = true;
+        this.isNew = false;
+        const entityName = this.getEntityName();
+
+        this.getEntityService().getById(uuid).subscribe({
+            next: (data: T) => {
+                this.originalFormData = data;
+                this.currentFormData = { ...data };
+                this.loading = false;
+                this.debug('Original data loaded:', this.originalFormData);
+                this.debug('Form data updated:', this.currentFormData);
+                this.loadDefaultTab();
+            },
+            error: (error: Error) => {
+                this.debug('Error loading entity:', error);
+                this.showError(`${AppMessages.FORM.ERROR.LOAD} ${entityName}`);
+                this.loading = false;
+            }
+        });
+    }
+
+    protected findTabByValue(value: string): TabConfig | undefined {
+        return this.tabs.find(tab => tab.value === value);
+    }
+
+    protected loadDefaultTab() {
+        this.debug('Loading default tab');
+        const defaultTab = this.tabs.find(tab => tab.isParentModel) || this.tabs[0];
+
+        if (!defaultTab) return;
+
+        if (this.formType === TabbedFormType.LIST) {
+            const state = this.router.getCurrentNavigation()?.extras?.state || window.history.state;
+            const formDataList = state?.formDataList || [];
+            const selectedData = formDataList.find((data: T) => data.uuid === defaultTab.value);
+
+            this.router.navigate([defaultTab.value], {
+                relativeTo: this.route,
+                state: {
+                    formData: selectedData,
+                    formDataList: formDataList,
+                    context: ComponentContext.TABBED
+                }
+            });
+        } else {
+            this.router.navigate([defaultTab.value], {
+                relativeTo: this.route,
+                queryParamsHandling: 'preserve',  // Keep existing query params (mode & uuid)
+                state: {
+                    formData: this.currentFormData,
+                    context: ComponentContext.TABBED
+                }
+            });
+        }
+    }
+
+    protected getTabFormData(tabConfig: TabConfig): T | null {
+        if (!tabConfig) return null;
+
+        if (tabConfig.isParentModel) {
+            return this.currentFormData;
+        }
+
+        const fieldName = this.utilsService.toCamelCase(tabConfig.value);
+        // Use type assertion since we know this is a valid field
+        return (this.currentFormData as any)[fieldName] as T;
+    }
+
+    private initializeListForm(params: any) {
+        const state = this.router.getCurrentNavigation()?.extras?.state || window.history.state;
+        const formDataList = state?.formDataList;
+        
+        if (!formDataList?.length) {
+            throw new Error('formDataList is required in state for LIST type');
+        }
+        
+        // Create tabs from list in state
+        this.tabs = formDataList.map((data: T) => ({
+            value: data.uuid,
+            title: this.getTabTitle(data),
+            isParentModel: true
+        }));
+        
+        // Select tab based on UUID in params or first tab
+        const uuid = params[AppConstants.FORM.UUID];
+        this.activeTab = uuid && this.tabs.find(t => t.value === uuid) 
+            ? uuid 
+            : this.tabs[0].value;
+            
+        // Set current form data from list
+        const selectedData = formDataList.find((d: T) => d.uuid === this.activeTab);
+        this.currentFormData = selectedData;
+        this.originalFormData = selectedData;
+    }
+
+    protected onTabChange(value: string | number): void {
+        const tabConfig = this.findTabByValue(value as string);
+        if (!tabConfig) {
+            console.warn(`Tab not found: ${value}`);
+            return;
+        }
+
+        this.activeTab = tabConfig.value;
+
+        if (this.formType === TabbedFormType.LIST) {
+            const state = this.router.getCurrentNavigation()?.extras?.state || window.history.state;
+            const formDataList = state?.formDataList || [];
+            const selectedData = formDataList.find((data: T) => data.uuid === value);
+
+            // Update current form data
+            this.currentFormData = selectedData;
+            this.originalFormData = selectedData;
+
+            this.router.navigate([value], {
+                relativeTo: this.route,
+                state: {
+                    formData: selectedData,
+                    formDataList: formDataList,
+                    context: ComponentContext.TABBED
+                }
+            });
+        } else {
+            const formData = this.getTabFormData(tabConfig);
+            this.router.navigate([this.activeTab], {
+                relativeTo: this.route,
+                queryParamsHandling: 'preserve',
+                state: {
+                    formData,
+                    context: ComponentContext.TABBED
+                }
+            });
+        }
+    }
+
+    protected hasFormChanges(currentData: T): boolean {
+        // For new forms or no original data, consider it changed
+        if (this.isNew || !this.originalFormData) {
+            return true;
+        }
+
+        // Deep comparison of objects
+        return !this.isEqual(currentData, this.originalFormData);
+    }
+
+    private isEqual<V extends Record<string, any>>(obj1: V, obj2: V): boolean {
+        if (obj1 === obj2) return true;
+        if (typeof obj1 !== 'object' || obj1 === null || 
+            typeof obj2 !== 'object' || obj2 === null) return false;
+
+        const keys1 = Object.keys(obj1);
+        const keys2 = Object.keys(obj2);
+
+        if (keys1.length !== keys2.length) return false;
+
+        return keys1.every(key => 
+            Object.prototype.hasOwnProperty.call(obj2, key) && 
+            this.isEqual(obj1[key], obj2[key])
+        );
+    }
+
+    private isValidPageMode(mode: string): mode is PageMode {
+        return Object.values(AppConstants.PAGE_MODE).includes(mode as PageMode);
+    }
+
+    // Abstract methods that must be implemented by child classes
+    protected abstract getTabs(): TabConfig[];
+    protected abstract getEntityService(): EntityService<T>;
+    protected abstract getEntityName(): string;
+    protected abstract getTabTitle(data: T): string;
+}