@team-codeme/crud-forge 0.0.0-stage → 1.0.0

package/src/templates/angular/shared/base/base-filter.component.ts.ejs

@@ -0,0 +1,245 @@
+import { Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FilterField, FilterFieldOperator, FilterValueType, FilterChip } from './filter-types';
+
+@Component({
+  template: ''
+})
+export abstract class BaseFilterComponent implements OnInit {
+  protected readonly fb = inject(FormBuilder);
+
+  @Input() activeFilters: Record<string, string> = {};
+  @Output() applied = new EventEmitter<Record<string, string>>();
+  @Output() closed = new EventEmitter<void>();
+
+  filtersForm!: FormGroup;
+
+  abstract filterFields: FilterField[];
+
+  readonly filterChipColorClasses = [
+    'bg-blue-50 text-blue-700 ring-blue-200',
+    'bg-emerald-50 text-emerald-700 ring-emerald-200',
+    'bg-amber-50 text-amber-700 ring-amber-200',
+    'bg-fuchsia-50 text-fuchsia-700 ring-fuchsia-200',
+    'bg-cyan-50 text-cyan-700 ring-cyan-200',
+    'bg-rose-50 text-rose-700 ring-rose-200',
+    'bg-violet-50 text-violet-700 ring-violet-200',
+    'bg-lime-50 text-lime-700 ring-lime-200',
+  ];
+
+  ngOnInit(): void {
+    this.filtersForm = this.buildFiltersForm();
+    this.populateFormFromActiveFilters();
+  }
+
+  applyFilters(): void {
+    const filters: Record<string, string> = {};
+
+    this.filterFields.forEach(field => {
+      const group = this.fieldGroup(field.key);
+      const operator = group?.get('operator')?.value as string | undefined;
+      if (!operator) {
+        return;
+      }
+      const operatorConfig = field.operators.find(item => item.key === operator);
+      if (!operatorConfig) {
+        return;
+      }
+      const rawValue = group.get('value')?.value;
+      if (operatorConfig.requiresValue) {
+        if (rawValue === null || rawValue === '' || (Array.isArray(rawValue) && rawValue.length === 0)) {
+          return;
+        }
+      }
+
+      let paramValue: string | null = null;
+      switch (operatorConfig.valueType) {
+        case 'boolean': {
+          const boolValue = rawValue === true || rawValue === 'true';
+          paramValue = boolValue ? 'true' : 'false';
+          break;
+        }
+        case 'number': {
+          const numeric = typeof rawValue === 'number' ? rawValue : Number(rawValue);
+          if (Number.isNaN(numeric)) {
+            return;
+          }
+          paramValue = String(numeric);
+          break;
+        }
+        case 'date': {
+          if (rawValue instanceof Date) {
+            if (field.rawFieldType === 'LocalDate') {
+              const iso = rawValue.toISOString();
+              paramValue = iso.split('T')[0];
+            } else {
+              paramValue = rawValue.toISOString();
+            }
+          } else if (typeof rawValue === 'string' && rawValue) {
+            paramValue = rawValue;
+          }
+          break;
+        }
+        default: {
+          if (rawValue !== null && rawValue !== undefined) {
+            paramValue = String(rawValue);
+          }
+        }
+      }
+
+      if (paramValue === null) {
+        return;
+      }
+
+      filters[`${field.key}.${operator}`] = paramValue;
+    });
+
+    this.applied.emit(filters);
+  }
+
+  clearFilters(): void {
+    this.filterFields.forEach(field => this.clearField(field.key));
+    this.applied.emit({});
+  }
+
+  clearField(key: string): void {
+    const group = this.fieldGroup(key);
+    group?.setValue({ operator: '', value: null });
+  }
+
+  fieldGroup(key: string): FormGroup {
+    return this.filtersForm.get(key) as FormGroup;
+  }
+
+  operatorRequiresInput(field: FilterField): boolean {
+    const config = this.currentOperatorConfig(field);
+    return !!config?.requiresValue;
+  }
+
+  currentOperatorValueType(field: FilterField): FilterValueType {
+    return this.currentOperatorConfig(field)?.valueType ?? field.valueType;
+  }
+
+  getEnumOptions(field: FilterField): string[] {
+    if (!field.enumOptionsKey) {
+      return [];
+    }
+    return (this as any)[field.enumOptionsKey] ?? [];
+  }
+
+  getSelectedFilterChips(): FilterChip[] {
+    return this.filterFields
+      .map(field => {
+        const group = this.fieldGroup(field.key);
+        const operator = group?.get('operator')?.value as string | undefined;
+        if (!operator) {
+          return null;
+        }
+
+        const operatorConfig = field.operators.find(item => item.key === operator);
+        if (!operatorConfig) {
+          return null;
+        }
+
+        const rawValue = group.get('value')?.value;
+        const formattedValue = this.formatFilterChipValue(field, operatorConfig, rawValue);
+        const label = operatorConfig.requiresValue && formattedValue
+          ? `${field.label}: ${operatorConfig.label} ${formattedValue}`
+          : `${field.label}: ${operatorConfig.label}`;
+
+        return {
+          key: `${field.key}.${operator}`,
+          label,
+          colorClass: this.getFilterChipColorClass(`${field.key}.${operator}`),
+        };
+      })
+      .filter((chip): chip is FilterChip => chip !== null);
+  }
+
+  closeFilterDrawer(): void {
+    this.closed.emit();
+  }
+
+  private buildFiltersForm(): FormGroup {
+    const groupConfig = this.filterFields.reduce((acc, field) => {
+      acc[field.key] = this.fb.group({
+        operator: [''],
+        value: [null],
+      });
+      return acc;
+    }, {} as Record<string, FormGroup>);
+    return this.fb.group(groupConfig);
+  }
+
+  private currentOperatorConfig(field: FilterField): FilterFieldOperator | undefined {
+    const group = this.fieldGroup(field.key);
+    if (!group) {
+      return undefined;
+    }
+    const operator = group.get('operator')?.value as string | undefined;
+    return field.operators.find(item => item.key === operator);
+  }
+
+  private formatFilterChipValue(
+    field: FilterField,
+    operator: FilterFieldOperator,
+    rawValue: unknown
+  ): string {
+    if (!operator.requiresValue || rawValue === null || rawValue === undefined || rawValue === '') {
+      return '';
+    }
+
+    switch (operator.valueType) {
+      case 'boolean':
+        return rawValue === true || rawValue === 'true' ? 'True' : 'False';
+      case 'date':
+        if (rawValue instanceof Date) {
+          return field.rawFieldType === 'LocalDate'
+            ? rawValue.toISOString().split('T')[0]
+            : rawValue.toLocaleString();
+        }
+        return String(rawValue);
+      default:
+        return String(rawValue);
+    }
+  }
+
+  private getFilterChipColorClass(key: string): string {
+    let hash = 0;
+    for (let index = 0; index < key.length; index += 1) {
+      hash = (hash * 31 + key.charCodeAt(index)) >>> 0;
+    }
+    return this.filterChipColorClasses[hash % this.filterChipColorClasses.length];
+  }
+
+  private populateFormFromActiveFilters(): void {
+    if (!this.activeFilters) return;
+
+    Object.entries(this.activeFilters).forEach(([fullKey, value]) => {
+      const lastDotIndex = fullKey.lastIndexOf('.');
+      if (lastDotIndex === -1) return;
+
+      const fieldKey = fullKey.substring(0, lastDotIndex);
+      const operator = fullKey.substring(lastDotIndex + 1);
+
+      const field = this.filterFields.find(f => f.key === fieldKey);
+      if (!field) return;
+
+      const group = this.fieldGroup(fieldKey);
+      if (group) {
+        let typedValue: any = value;
+        const operatorConfig = field.operators.find(op => op.key === operator);
+        if (operatorConfig) {
+          if (operatorConfig.valueType === 'number') {
+            typedValue = Number(value);
+          } else if (operatorConfig.valueType === 'boolean') {
+            typedValue = value === 'true';
+          } else if (operatorConfig.valueType === 'date') {
+            typedValue = new Date(value);
+          }
+        }
+        group.setValue({ operator, value: typedValue });
+      }
+    });
+  }
+}

package/src/templates/angular/shared/base/base-form.component.ts.ejs

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, Output, inject, ChangeDetectorRef, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormGroup } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Observable } from 'rxjs';
+import { finalize } from 'rxjs/operators';
+import { HttpResponse } from '@angular/common/http';
+
+export type BaseFormDialogData<T> = {
+  entity?: T;
+  defaults?: Partial<T>;
+  heading?: string;
+};
+
+@Component({
+  template: ''
+})
+export abstract class BaseFormComponent<T extends { id?: number | null }> {
+  protected readonly formDestroyRef = inject(DestroyRef);
+  protected readonly cdr = inject(ChangeDetectorRef);
+  protected readonly snackBar = inject(MatSnackBar);
+
+  @Input() entity: T | null = null;
+  @Input() heading?: string;
+
+  @Output() saved = new EventEmitter<T>();
+  @Output() cancelled = new EventEmitter<void>();
+
+  abstract form: FormGroup;
+  abstract entityName: string;
+  abstract snackbarPositionTop: boolean;
+
+  isSaving = false;
+  isInitialized = false;
+  errorMessage: string | null = null;
+
+  protected abstract save(payload: any): Observable<HttpResponse<T>>;
+  protected abstract getPayload(): any;
+  protected abstract resetForm(entity: Partial<T>): void;
+  protected abstract getDialogData(): BaseFormDialogData<T> | null;
+  protected abstract getDialogRef(): MatDialogRef<any> | null;
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    this.errorMessage = null;
+    this.isSaving = true;
+    const payload = this.getPayload();
+
+    this.save(payload).pipe(takeUntilDestroyed(this.formDestroyRef), finalize(() => {
+        this.isSaving = false;
+        this.cdr.markForCheck();
+    })).subscribe({
+      next: response => {
+        if (response.body) {
+          this.resetToDefaults();
+          this.saved.emit(response.body);
+          this.getDialogRef()?.close(response.body);
+        }
+      },
+      error: () => {
+        this.errorMessage = 'Unable to save record. Please try again.';
+        this.snackBar.open('Unable to save record. Please try again.', 'Close', {
+          duration: 3000,
+          horizontalPosition: 'center',
+          verticalPosition: this.snackbarPositionTop ? 'top' : 'bottom',
+          panelClass: ['error-snackbar'],
+        });
+      },
+    });
+  }
+
+  onCancel(): void {
+    this.cancelled.emit();
+    this.getDialogRef()?.close();
+  }
+
+  get isEditMode(): boolean {
+    return !!this.form.controls['id']?.value;
+  }
+
+  protected initializeFormFromInputs(): void {
+    const dialogData = this.getDialogData();
+    if (!this.heading && dialogData?.heading) {
+      this.heading = dialogData.heading;
+    }
+    const entity = this.entity ?? dialogData?.entity ?? null;
+    const defaults = dialogData?.defaults ?? {};
+    if (entity) {
+      this.resetForm(entity);
+    } else {
+      this.resetForm({ id: null, ...defaults } as Partial<T>);
+    }
+  }
+
+  protected resetToDefaults(): void {
+    this.entity = null;
+    this.errorMessage = null;
+    const dialogData = this.getDialogData();
+    const defaults = dialogData?.defaults ?? {};
+    this.resetForm({ id: null, ...defaults } as Partial<T>);
+    this.form.markAsPristine();
+    this.form.markAsUntouched();
+  }
+}