@codex-ts/core-lib 1.0.1 → 1.0.2

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

@@ -0,0 +1,328 @@
+import { Component, OnInit, Injectable, Input } from '@angular/core';
+import { ComponentContext } from '../enums/component-context.enum';
+import { FormGroup } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+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, filter, take } from 'rxjs';
+import { FormlyConfigService } from '../services/formly-config.service';
+import { EntityService } from '../services/entity.service';
+
+@Injectable()
+@Component({
+    template: ''
+})
+export abstract class BaseFormComponent<T extends { uuid: string }>
+    extends BasePageComponent implements OnInit {
+
+    form = new FormGroup({});
+    fields: FormlyFieldConfig[] = [];
+    isNew = true;
+    mode: PageMode = AppConstants.PAGE_MODE.CREATE;
+    currentFormData: any = {};
+    protected originalFormData: T | null = null;
+    protected hasChanges: boolean = false;
+    @Input() context: ComponentContext = ComponentContext.STANDALONE;
+
+    constructor(
+        protected route: ActivatedRoute,
+        protected router: Router,
+        protected override notificationService: NotificationService,
+        protected override utilsService: UtilsService,
+        protected formlyConfigService: FormlyConfigService
+    ) {
+        super(utilsService, notificationService);
+    }
+
+    ngOnInit() {
+        try {
+            this.fields = this.getFormlyFieldConfig();
+
+            this.form.valueChanges.subscribe(() => {
+                console.log('[BaseFormComponent] Form value changed:', this.form.value);
+                this.currentFormData = { ...this.form.value };
+                this.hasChanges = this.hasFormChanges(this.currentFormData);
+            });
+
+            // Use queryParams instead of 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() {
+        console.log('[BaseFormComponent] Initializing form data');
+        console.log('[BaseFormComponent] Current mode:', this.mode);
+
+        if (this.mode === AppConstants.PAGE_MODE.CREATE) {
+            console.log('[BaseFormComponent] Create mode, using defaults');
+            return;
+        }
+
+        const state = {
+            ...this.router.getCurrentNavigation()?.extras?.state,
+            ...window.history.state,
+            ...this.route.snapshot.data
+        };
+        console.log('[BaseFormComponent] Combined state:', state);
+        console.log('[BaseFormComponent] Final state being used:', state);
+        
+        if (state && 'formData' in state) {
+            console.log('[BaseFormComponent] Found form data in state:', state['formData']);
+            this.patchFormData(state['formData']);
+        } else {
+            console.log('[BaseFormComponent] No form data, loading from UUID');
+            this.loadFromUuid();
+        }
+    }
+
+    private loadFromUuid() {
+        this.route.queryParams.pipe(take(1)).subscribe(params => {
+            const uuid = params[AppConstants.FORM.UUID];
+            if (!uuid) {
+                throw new Error(`UUID is required for ${this.mode} mode when no formData is provided`);
+            }
+            this.loadEntity(uuid);
+        });
+    }
+
+    private initializeForm(params: any) {
+        console.log('[BaseFormComponent] Initializing form with params:', params);
+        const routeMode = params[AppConstants.FORM.MODE];
+        this.initializeFormMode(routeMode);
+        this.setupFormState();
+
+        // Check for context in router state
+        const state = window.history.state;
+        if (state?.context) {
+            this.context = state.context;
+            console.log('[BaseFormComponent] Context set from router state:', this.context);
+        }
+
+        this.initializeFormData();
+    }
+
+    protected patchFormData(data: any) {
+        console.log('[BaseFormComponent] Patching form data:', data);
+        if (data) {
+            if (!this.fields || this.fields.length === 0) {
+                console.warn('[BaseFormComponent] Fields not initialized yet, reinitializing');
+                this.fields = this.getFormlyFieldConfig();
+            }
+            this.currentFormData = { ...data };
+            this.originalFormData = data;
+            this.isNew = false;
+            
+            console.log('[BaseFormComponent] Form data updated:', this.currentFormData);
+            console.log('[BaseFormComponent] Fields available:', this.fields);
+            
+            setTimeout(() => {
+                if (!this.form.valid) {
+                    console.warn('[BaseFormComponent] Form validation issues after data patch');
+                }
+                console.log('[BaseFormComponent] Form state after sync:', {
+                    valid: this.form.valid,
+                    values: this.form.value,
+                    currentData: this.currentFormData
+                });
+            }, 100);
+        }
+    }
+
+    private initializeFormMode(routeMode: string | undefined) {
+        if (!routeMode) {
+            this.mode = AppConstants.PAGE_MODE.CREATE;
+        } else if (this.isValidPageMode(routeMode)) {
+            this.mode = routeMode;
+        } else {
+            throw new Error(`Invalid page mode: ${routeMode}`);
+        }
+    }
+
+    private setupFormState() {
+        console.log('[BaseFormComponent] Setting up form state, mode:', this.mode);
+        this.fields = this.getFormlyFieldConfig();
+
+        if (this.mode === AppConstants.PAGE_MODE.CREATE) {
+            console.log('[BaseFormComponent] Create mode setup');
+            this.isNew = true;
+            this.loading = false;
+            this.originalFormData = null;
+        }
+
+        if (this.mode === AppConstants.PAGE_MODE.VIEW) {
+            console.log('[BaseFormComponent] View mode setup');
+            this.form.disable();
+        }
+    }
+
+    protected getFormlyFieldConfig(): FormlyFieldConfig[] {
+        return this.formlyConfigService.getFormConfig(
+            this.getJsonFields(),
+            this.mode,
+            this.getDropdownOptions()
+        );
+    }
+
+    protected onSubmitRoute(): string[] {
+        return [`/${this.getEntityName().toLowerCase()}s`];
+    }
+
+    protected getEntityOperations(): {
+        create: (data: Omit<T, typeof AppConstants.FORM.UUID>) => Observable<T>;
+        update: (uuid: string, data: Omit<T, typeof AppConstants.FORM.UUID>) => Observable<T>;
+        getById: (uuid: string) => Observable<T>;
+    } {
+        const entityService = this.getEntityService();
+        return {
+            create: (data) => entityService.create(data),
+            update: (uuid, data) => entityService.update(uuid, { ...data, uuid } as T),
+            getById: (uuid) => entityService.getById(uuid)
+        };
+    }
+
+    protected onSubmit() {
+        console.log('[BaseFormComponent] Form submission:', {
+            formValid: this.form.valid,
+            formData: this.currentFormData,
+            formState: this.form.value
+        });
+
+        if (!this.currentFormData || Object.keys(this.currentFormData).length === 0) {
+            this.notificationService.showError('No data to save');
+            return;
+        }
+
+        if (this.form.valid) {
+            if (this.isNew) {
+                console.log('[BaseFormComponent] Saving new entity');
+                this.saveEntity();
+                return;
+            }
+
+            const hasChanges = this.hasFormChanges(this.currentFormData);
+            console.log('[BaseFormComponent] Change detection:', {
+                hasChanges,
+                currentData: this.currentFormData,
+                originalData: this.originalFormData
+            });
+
+            if (!hasChanges) {
+                this.notificationService.showSuccess('No changes to save');
+                return;
+            }
+
+            console.log('[BaseFormComponent] Saving changes');
+            this.saveEntity();
+        } else {
+            console.warn('[BaseFormComponent] Form validation failed:', this.form.errors);
+            this.notificationService.showError('Please check form errors');
+        }
+    }
+
+    protected hasFormChanges(currentData: any): boolean {
+        if (!this.originalFormData || this.isNew) {
+            return true;
+        }
+
+        console.log('[BaseFormComponent] Checking for changes:', {
+            currentData,
+            originalData: this.originalFormData
+        });
+
+        const hasChanges = Object.keys(currentData).some(key => {
+            const currentValue = currentData[key];
+            const originalValue = (this.originalFormData as any)[key];
+            const changed = currentValue !== originalValue;
+            
+            if (changed) {
+                console.log(`[BaseFormComponent] Field '${key}' changed:`, {
+                    from: originalValue,
+                    to: currentValue
+                });
+            }
+            
+            return changed;
+        });
+
+        console.log('[BaseFormComponent] Changes detected:', hasChanges);
+        return hasChanges;
+    }
+
+    protected saveEntity() {
+        this.loading = true;
+        const formData = this.currentFormData as Omit<T, typeof AppConstants.FORM.UUID>;
+        const entityName = this.getEntityName();
+        const entityOperations = this.getEntityOperations();
+
+        const request$ = this.isNew
+            ? entityOperations.create(formData)
+            : entityOperations.update(this.originalFormData!.uuid, formData);
+
+        request$.subscribe({
+            next: () => {
+                this.loading = false;
+                this.notificationService.showSuccess(`${entityName} ${AppMessages.FORM.SUCCESS.SAVE}`);
+                this.router.navigate(this.onSubmitRoute());
+            },
+            error: (error: any) => {
+                const errorMessage = error.error?.message || `${AppMessages.FORM.ERROR.SAVE} ${entityName}`;
+                this.showError(errorMessage);
+                this.loading = false;
+            }
+        });
+    }
+
+    protected loadEntity(uuid: string) {
+        this.loading = true;
+        this.isNew = false;
+        const entityName = this.getEntityName();
+
+        this.getEntityOperations().getById(uuid).subscribe({
+            next: (data: T) => {
+                this.originalFormData = data;
+                this.currentFormData = { ...data };
+                this.loading = false;
+                console.log('[BaseFormComponent] Original data loaded:', this.originalFormData);
+                console.log('[BaseFormComponent] Form data updated:', this.currentFormData);
+            },
+            error: () => {
+                this.showError(`${AppMessages.FORM.ERROR.LOAD} ${entityName}`);
+                this.loading = false;
+            }
+        });
+    }
+
+    protected abstract getEntityService(): EntityService<T>;
+
+    private isValidPageMode(mode: string): mode is PageMode {
+        return Object.values(AppConstants.PAGE_MODE).includes(mode as PageMode);
+    }
+
+    protected getDropdownOptions(): Record<string, any> {
+        return {};
+    }
+
+    protected abstract getJsonFields(): any;
+    protected abstract getEntityName(): string;
+
+    /**
+     * Checks if the component is running in a specific context
+     * @param contextType The context type to check against
+     */
+    protected isInContext(contextType: ComponentContext): boolean {
+        return this.context === contextType;
+    }
+}

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

@@ -0,0 +1,328 @@
+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 {
+        // Navigate to the form route and pass the mode as a query parameter
+        this.navigateTo([this.getFormRoute()], { [AppConstants.FORM.MODE]: 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);
+    }
+}