Update flare-ui/src/app/dialogs/project-edit-dialog/project-edit-dialog.component.ts

flare-ui/src/app/dialogs/project-edit-dialog/project-edit-dialog.component.ts

@@ -1,5 +1,5 @@
 // project-edit-dialog.component.ts
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -15,6 +15,8 @@ import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ApiService } from '../../services/api.service';
 import { LocaleManagerService, Locale } from '../../services/locale-manager.service';
+import { Subject, takeUntil } from 'rxjs';
+import { HttpErrorResponse } from '@angular/common/http';
 
 export interface ProjectDialogData {
   mode: 'create' | 'edit';
@@ -50,15 +52,14 @@ export interface ProjectDialogData {
                  [readonly]="data.mode === 'edit'"
                  placeholder="e.g., airline_agent">
           <mat-hint>Use only letters, numbers, and underscores</mat-hint>
-          <mat-error *ngIf="form.get('name')?.hasError('required')">Name is required</mat-error>
-          <mat-error *ngIf="form.get('name')?.hasError('pattern')">Invalid characters in name</mat-error>
+          <mat-error>{{ getErrorMessage('name') }}</mat-error>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="full-width">
           <mat-label>Caption*</mat-label>
           <input matInput formControlName="caption" 
                  placeholder="e.g., Airline Customer Service Agent">
-          <mat-error *ngIf="form.get('caption')?.hasError('required')">Caption is required</mat-error>
+          <mat-error>{{ getErrorMessage('caption') }}</mat-error>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="full-width">
@@ -155,12 +156,15 @@ export interface ProjectDialogData {
   `,
   styleUrls: ['./project-edit-dialog.component.scss']
 })
-export default class ProjectEditDialogComponent implements OnInit {
+export default class ProjectEditDialogComponent implements OnInit, OnDestroy {
   form!: FormGroup;
   saving = false;
   loadingLocales = true;
   availableLocales: Locale[] = [];
   
+  // Memory leak prevention
+  private destroyed$ = new Subject<void>();
+  
   projectIcons = ['folder', 'work', 'shopping_cart', 'school', 'local_hospital', 'restaurant', 'home', 'business'];
   
   timezones = [
@@ -186,6 +190,11 @@ export default class ProjectEditDialogComponent implements OnInit {
     this.loadAvailableLocales();
   }
 
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+
   initializeForm() {
     const defaultValues = this.data.mode === 'edit' && this.data.project ? {
       name: this.data.project.name,
@@ -226,22 +235,24 @@ export default class ProjectEditDialogComponent implements OnInit {
 
   loadAvailableLocales() {
     this.loadingLocales = true;
-    this.localeManager.getAvailableLocales().subscribe({
-      next: (locales) => {
-        this.availableLocales = locales;
-        this.loadingLocales = false;
-        this.validateSelectedLanguages();
-      },
-      error: (err) => {
-        this.showMessage('Failed to load available languages', 'error');
-        this.loadingLocales = false;
-        // Use fallback locales
-        this.availableLocales = [
-          { code: 'tr-TR', name: 'Türkçe', english_name: 'Turkish' },
-          { code: 'en-US', name: 'English', english_name: 'English (US)' }
-        ];
-      }
-    });
+    this.localeManager.getAvailableLocales()
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe({
+        next: (locales) => {
+          this.availableLocales = locales;
+          this.loadingLocales = false;
+          this.validateSelectedLanguages();
+        },
+        error: (err) => {
+          this.showMessage('Failed to load available languages', 'error');
+          this.loadingLocales = false;
+          // Use fallback locales
+          this.availableLocales = [
+            { code: 'tr-TR', name: 'Türkçe', english_name: 'Turkish' },
+            { code: 'en-US', name: 'English', english_name: 'English (US)' }
+          ];
+        }
+      });
   }
 
   validateSelectedLanguages() {
@@ -291,48 +302,131 @@ export default class ProjectEditDialogComponent implements OnInit {
     return locale ? locale.name : code;
   }
 
-  async save() {
-    if (this.form.invalid) {
-      this.form.markAllAsTouched();
+  getErrorMessage(fieldName: string): string {
+    const control = this.form.get(fieldName);
+    if (!control) return '';
+    
+    if (control.hasError('required')) {
+      return `${this.getFieldLabel(fieldName)} is required`;
+    }
+    if (control.hasError('pattern')) {
+      return `${this.getFieldLabel(fieldName)} contains invalid characters`;
+    }
+    if (control.hasError('server')) {
+      return control.errors?.['server'];
+    }
+    return '';
+  }
+
+  private getFieldLabel(fieldName: string): string {
+    const labels: { [key: string]: string } = {
+      'name': 'Project Name',
+      'caption': 'Caption',
+      'description': 'Description',
+      'defaultLanguage': 'Default Language',
+      'supportedLanguages': 'Supported Languages',
+      'timezone': 'Timezone',
+      'region': 'Region',
+      'icon': 'Icon'
+    };
+    return labels[fieldName] || fieldName;
+  }
+
+  handleValidationError(error: HttpErrorResponse): void {
+    if (error.status === 422 && error.error?.details) {
+      // Show specific field errors
+      error.error.details.forEach((detail: any) => {
+        const control = this.form.get(detail.field);
+        if (control) {
+          control.setErrors({ server: detail.message });
+          control.markAsTouched();
+        }
+      });
+      
+      this.snackBar.open(
+        'Please fix the validation errors',
+        'Close',
+        { 
+          duration: 5000,
+          panelClass: ['error-snackbar']
+        }
+      );
+    } else {
+      // Generic error handling
+      this.showMessage(
+        error.error?.detail || error.message || 'Operation failed',
+        'error'
+      );
+    }
+  }
+
+  save() {
+    if (this.form.invalid || this.saving) {
+      // Mark all fields as touched to show validation errors
+      Object.keys(this.form.controls).forEach(key => {
+        this.form.get(key)?.markAsTouched();
+      });
       return;
     }
   
     this.saving = true;
-    try {
-      const formValue = this.form.getRawValue(); // getRawValue to include disabled fields
-      
-      // Project data format matching backend expectations
-      const projectData = {
-        name: formValue.name,
-        caption: formValue.caption,
-        icon: formValue.icon,
-        description: formValue.description,
-        default_language: formValue.defaultLanguage,
-        supported_languages: formValue.supportedLanguages,
-        timezone: formValue.timezone,
-        region: formValue.region
-      };
+    
+    const formValue = this.form.getRawValue(); // getRawValue to include disabled fields
+    
+    // Project data format matching backend expectations
+    const projectData = {
+      name: formValue.name,
+      caption: formValue.caption,
+      icon: formValue.icon,
+      description: formValue.description,
+      default_language: formValue.defaultLanguage,
+      supported_languages: formValue.supportedLanguages,
+      timezone: formValue.timezone,
+      region: formValue.region
+    };
   
-      let result;
-      if (this.data.mode === 'create') {
-        result = await this.apiService.createProject(projectData).toPromise();
-        this.showMessage('Project created successfully!');
-      } else {
-        // Add last_update_date for edit mode
-        const updateData = {
+    const saveOperation = this.data.mode === 'create' 
+      ? this.apiService.createProject(projectData)
+      : this.apiService.updateProject(this.data.project.id, {
           ...projectData,
           last_update_date: this.data.project.last_update_date || ''
-        };
-        result = await this.apiService.updateProject(this.data.project.id, updateData).toPromise();
-        this.showMessage('Project updated successfully!');
-      }
-      
-      this.dialogRef.close(result);
-    } catch (error: any) {
-      this.showMessage(error.error?.detail || 'Operation failed', 'error');
-    } finally {
-      this.saving = false;
-    }
+        });
+
+    saveOperation
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe({
+        next: (result) => {
+          this.saving = false;
+          this.showMessage(
+            this.data.mode === 'create' 
+              ? 'Project created successfully!' 
+              : 'Project updated successfully!'
+          );
+          this.dialogRef.close(result);
+        },
+        error: (error: HttpErrorResponse) => {
+          this.saving = false;
+          
+          // Race condition handling
+          if (error.status === 409) {
+            const details = error.error?.details || {};
+            this.snackBar.open(
+              `Project was modified by ${details.last_update_user || 'another user'}. Please reload.`,
+              'Reload',
+              { duration: 0 }
+            ).onAction().subscribe(() => {
+              this.dialogRef.close('reload');
+            });
+          } else if (error.status === 422) {
+            this.handleValidationError(error);
+          } else {
+            this.showMessage(
+              error.error?.detail || 'Operation failed',
+              'error'
+            );
+          }
+        }
+      });
   }
 
   close() {
@@ -342,7 +436,7 @@ export default class ProjectEditDialogComponent implements OnInit {
   private showMessage(message: string, type: 'success' | 'error' = 'success') {
     this.snackBar.open(message, 'Close', {
       duration: 5000,
-      panelClass: type === 'error' ? 'error-snackbar' : 'success-snackbar',
+      panelClass: type === 'error' ? ['error-snackbar'] : ['success-snackbar'],
       horizontalPosition: 'right',
       verticalPosition: 'top'
     });