@codex-ts/core-lib 1.0.2 → 1.0.3

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

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

package/src/lib/components/formly/core-formly.module.ts

@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FormlyModule } from '@ngx-formly/core';
-import { TextInputType } from './types/text-input.type';
-import { SelectType } from './types/select.type';
-import { RadioType } from './types/radio.type';
-import { NumericInputType } from './types/numeric-input.type';
-import { MultiselectType } from './types/multiselect.type';
-import { DateType } from './types/date.type';
-import { CheckboxType } from './types/checkbox.type';
-import { TextareaType } from './types/textarea.type'; // Added import
-import { FormFieldWrapper } from './form-field.wrapper';
-import { FORMLY_TYPES, FORMLY_WRAPPERS } from './formly.constants'; // Added import
-
-@NgModule({
-  imports: [
-    FormlyModule.forRoot({
-      types: [
-        { name: FORMLY_TYPES.TEXT, component: TextInputType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
-        { name: FORMLY_TYPES.NUMBER, component: NumericInputType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
-        { name: FORMLY_TYPES.DATE, component: DateType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
-        { name: FORMLY_TYPES.CHECKBOX, component: CheckboxType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
-        { name: FORMLY_TYPES.RADIO, component: RadioType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
-        { name: FORMLY_TYPES.SELECT, component: SelectType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
-        { name: FORMLY_TYPES.MULTISELECT, component: MultiselectType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
-        { name: FORMLY_TYPES.TEXTAREA, component: TextareaType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] }, // Added textarea type
-      ],
-      wrappers: [
-        { name: FORMLY_WRAPPERS.FORM_FIELD, component: FormFieldWrapper }
-      ]
-    })
-  ],
-  exports: [FormlyModule]
-})
-export class CoreFormlyModule { }

package/src/lib/components/formly/field.interface.ts

@@ -1,15 +0,0 @@
-export interface FormlyFieldProps {
-  label?: string;         // Field label text
-  placeholder?: string;   // Placeholder text for input fields 
-  required?: boolean;     // Whether field is required
-  disabled?: boolean;     // Disabled state
-  description?: string;   // Help/description text
-  validation?: {
-    messages?: { [key: string]: string };
-    rules?: { [key: string]: any };
-  };
-  attributes?: { [key: string]: any };
-  appearance?: 'outlined' | 'filled';
-  size?: 'small' | 'normal' | 'large';
-  tooltip?: string;
-}

package/src/lib/components/formly/form-field.wrapper.ts

@@ -1,94 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FieldWrapper, FormlyFieldConfig } from '@ngx-formly/core';
-import { TooltipModule } from 'primeng/tooltip';
-
-interface FormlyValidationMessage {
-  [key: string]: string;
-}
-
-interface FormlyFieldProps {
-  label?: string;
-  required?: boolean;
-  tooltip?: string;
-  description?: string;
-  validation?: {
-    messages?: FormlyValidationMessage;
-  };
-}
-
-@Component({
-  selector: 'formly-wrapper-form-field',
-  standalone: true,
-  imports: [CommonModule, TooltipModule],
-  template: `
-    <div class="field mb-4">
-      <label *ngIf="props.label" [for]="id" class="font-medium">
-        {{ props.label }}
-        <span class="required-star" *ngIf="props.required">*</span>
-        <i *ngIf="props.tooltip" 
-           class="pi pi-info-circle ml-2" 
-           [pTooltip]="props.tooltip">
-        </i>
-      </label>
-      
-      <div [class.p-input-error]="showError">
-        <ng-container #fieldComponent></ng-container>
-      </div>
-      
-      <small *ngIf="props.description" class="block mt-1">
-        {{ props.description }}
-      </small>
-      
-      <small *ngIf="showError" class="p-error block">
-        <i class="pi pi-exclamation-circle mr-2"></i>
-        {{ errorMessage }}
-      </small>
-    </div>
-  `,
-  styles: [`
-    :host ::ng-deep {
-      .required-star {
-        color: var(--red-500);
-        margin-left: 0.25rem;
-      }
-      
-      .p-input-error :where(input, .p-inputtext) {
-        border-color: var(--red-500);
-      }
-
-      .p-input-error :where(input:enabled:focus, .p-inputtext:enabled:focus) {
-        border-color: var(--red-500);
-        box-shadow: 0 0 0 1px var(--red-500);
-      }
-
-      .p-error {
-        color: var(--red-500);
-        margin-top: 0.5rem;
-      }
-
-      small {
-        color: var(--text-color-secondary);
-      }
-    }
-  `]
-})
-export class FormFieldWrapper extends FieldWrapper<FormlyFieldConfig<FormlyFieldProps>> {
-  get errorMessage(): string {
-    if (!this.field.formControl?.errors) {
-      return '';
-    }
-    
-    const firstErrorKey = Object.keys(this.field.formControl.errors)[0];
-    return this.props.validation?.messages?.[firstErrorKey] || 'This field is required';
-  }
-
-  override get showError(): boolean {
-    if (!this.field.formControl) {
-      return false;
-    }
-    
-    const { touched, dirty, invalid } = this.field.formControl;
-    return invalid && (touched || dirty);
-  }
-}

package/src/lib/components/formly/formly.constants.ts

@@ -1,14 +0,0 @@
-export const FORMLY_TYPES = {
-  TEXT: 'text',
-  NUMBER: 'number',
-  DATE: 'date',
-  CHECKBOX: 'checkbox',
-  RADIO: 'radio',
-  SELECT: 'select',
-  MULTISELECT: 'multiselect',
-  TEXTAREA: 'textarea'
-};
-
-export const FORMLY_WRAPPERS = {
-  FORM_FIELD: 'form-field'
-};

package/src/lib/components/formly/primeng-formly.module.ts

@@ -1,77 +0,0 @@
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule } from '@ngx-formly/core';
-import { CommonModule } from '@angular/common';
-
-import { InputTextModule } from 'primeng/inputtext';
-import { DropdownModule } from 'primeng/dropdown';
-import { DatePickerModule } from 'primeng/datepicker';
-import { CheckboxModule } from 'primeng/checkbox';
-import { RadioButtonModule } from 'primeng/radiobutton';
-import { MultiSelectModule } from 'primeng/multiselect';
-
-import { FormFieldWrapper } from './form-field.wrapper';
-import { TextInputType } from './types/text-input.type';
-import { NumericInputType } from './types/numeric-input.type';
-import { CheckboxType } from './types/checkbox.type';
-import { DateType } from './types/date.type';
-import { RadioType } from './types/radio.type';
-import { SelectType } from './types/select.type';
-import { MultiselectType } from './types/multiselect.type';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        InputTextModule,
-        DropdownModule,
-        DatePickerModule,
-        CheckboxModule,
-        RadioButtonModule,
-        MultiSelectModule,
-        FormlyModule.forRoot({
-            wrappers: [
-                { name: 'form-field', component: FormFieldWrapper }
-            ],
-            types: [
-                {
-                    name: 'text-input',
-                    component: TextInputType,
-                    wrappers: ['form-field']
-                },
-                {
-                    name: 'numeric-input',
-                    component: NumericInputType,
-                    wrappers: ['form-field']
-                },
-                {
-                    name: 'checkbox',
-                    component: CheckboxType,
-                    wrappers: ['form-field']
-                },
-                {
-                    name: 'radio',
-                    component: RadioType,
-                    wrappers: ['form-field']
-                },
-                {
-                    name: 'date',
-                    component: DateType,
-                    wrappers: ['form-field']
-                },
-                {
-                    name: 'select',
-                    component: SelectType,
-                    wrappers: ['form-field']
-                },
-                {
-                    name: 'multiselect',
-                    component: MultiselectType,
-                    wrappers: ['form-field']
-                }
-            ]
-        })
-    ],
-    exports: [FormlyModule]
-})
-export class PrimeNGFormlyModule { }

package/src/lib/components/formly/types/checkbox.type.ts

@@ -1,43 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FieldType, FormlyModule } from '@ngx-formly/core';
-import { CheckboxModule } from 'primeng/checkbox';
-
-@Component({
-  selector: 'formly-field-checkbox',
-  standalone: true,
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    FormlyModule,
-    CheckboxModule
-  ],
-  template: `
-    <div class="checkbox-container">
-      <p-checkbox
-        [formControl]="$any(formControl)"
-        [formlyAttributes]="field"
-        [binary]="!props['options']"
-        [trueValue]="props['trueValue']"
-        [falseValue]="props['falseValue']">
-        {{props['checkboxLabel'] || ''}}
-      </p-checkbox>
-    </div>
-  `,
-  styles: [`
-    .checkbox-container {
-      display: flex;
-      align-items: center;
-      height: 40px;
-    }
-  `]
-})
-export class CheckboxType extends FieldType {
-  override defaultOptions = {
-    props: {
-      trueValue: true,
-      falseValue: false
-    }
-  };
-}