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,4 +1,4 @@
-// project-edit-dialog.component.ts (TÜMÜ) - Template inline olarak
+// project-edit-dialog.component.ts
 import { Component, Inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
@@ -12,7 +12,9 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDividerModule } from '@angular/material/divider';
 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';
 
 export interface ProjectDialogData {
   mode: 'create' | 'edit';
@@ -34,7 +36,8 @@ export interface ProjectDialogData {
     MatIconModule,
     MatChipsModule,
     MatDividerModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatProgressSpinnerModule
   ],
   template: `
     <h2 mat-dialog-title>{{ data.mode === 'create' ? 'Create New Project' : 'Edit Project' }}</h2>
@@ -75,22 +78,54 @@ export interface ProjectDialogData {
           <textarea matInput formControlName="description" rows="3"></textarea>
         </mat-form-field>
 
+        <!-- Default Language -->
         <mat-form-field appearance="outline" class="full-width">
           <mat-label>Default Language</mat-label>
-          <mat-select formControlName="defaultLanguage">
-            @for (lang of languages; track lang.code) {
-              <mat-option [value]="lang.code">{{ lang.name }}</mat-option>
+          <mat-select 
+            formControlName="defaultLanguage"
+            (selectionChange)="onDefaultLanguageChange()"
+            [disabled]="loadingLocales">
+            @if (loadingLocales) {
+              <mat-option disabled>
+                <mat-spinner diameter="20"></mat-spinner>
+                Loading languages...
+              </mat-option>
+            }
+            @for (locale of availableLocales; track locale.code) {
+              <mat-option [value]="locale.code">
+                {{ locale.name }}
+                <span class="locale-code">{{ locale.code }}</span>
+              </mat-option>
             }
           </mat-select>
+          <mat-icon matPrefix>translate</mat-icon>
+          <mat-hint>Primary language for this project</mat-hint>
         </mat-form-field>
 
+        <!-- Supported Languages -->
         <mat-form-field appearance="outline" class="full-width">
           <mat-label>Supported Languages</mat-label>
-          <mat-select formControlName="supportedLanguages" multiple>
-            @for (lang of languages; track lang.code) {
-              <mat-option [value]="lang.code">{{ lang.name }}</mat-option>
+          <mat-select 
+            formControlName="supportedLanguages" 
+            (selectionChange)="onSupportedLanguagesChange()"
+            [disabled]="loadingLocales"
+            multiple>
+            <mat-select-trigger>
+              <div class="selected-languages">
+                @for (lang of form.get('supportedLanguages')?.value || []; track lang; let last = $last) {
+                  <span>{{ getLocaleName(lang) }}@if (!last) {, }</span>
+                }
+              </div>
+            </mat-select-trigger>
+            @for (locale of availableLocales; track locale.code) {
+              <mat-option [value]="locale.code">
+                {{ locale.name }}
+                <span class="locale-code">{{ locale.code }}</span>
+              </mat-option>
             }
           </mat-select>
+          <mat-icon matPrefix>language</mat-icon>
+          <mat-hint>Languages available in this project</mat-hint>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="full-width">
@@ -123,14 +158,11 @@ export interface ProjectDialogData {
 export default class ProjectEditDialogComponent implements OnInit {
   form!: FormGroup;
   saving = false;
+  loadingLocales = true;
+  availableLocales: Locale[] = [];
+  
   projectIcons = ['folder', 'work', 'shopping_cart', 'school', 'local_hospital', 'restaurant', 'home', 'business'];
-  languages = [
-    { code: 'tr', name: 'Turkish' },
-    { code: 'en', name: 'English' },
-    { code: 'de', name: 'German' },
-    { code: 'fr', name: 'French' },
-    { code: 'es', name: 'Spanish' }
-  ];
+  
   timezones = [
     'Europe/Istanbul',
     'Europe/London',
@@ -143,6 +175,7 @@ export default class ProjectEditDialogComponent implements OnInit {
   constructor(
     private fb: FormBuilder,
     private apiService: ApiService,
+    private localeManager: LocaleManagerService,
     private snackBar: MatSnackBar,
     public dialogRef: MatDialogRef<ProjectEditDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: ProjectDialogData
@@ -150,40 +183,119 @@ export default class ProjectEditDialogComponent implements OnInit {
 
   ngOnInit() {
     this.initializeForm();
+    this.loadAvailableLocales();
+  }
+
+  initializeForm() {
+    const defaultValues = this.data.mode === 'edit' && this.data.project ? {
+      name: this.data.project.name,
+      caption: this.data.project.caption || '',
+      icon: this.data.project.icon || 'folder',
+      description: this.data.project.description || '',
+      defaultLanguage: this.data.project.default_language || 'tr-TR',
+      supportedLanguages: this.data.project.supported_languages || ['tr-TR'],
+      timezone: this.data.project.timezone || 'Europe/Istanbul',
+      region: this.data.project.region || 'tr-TR'
+    } : {
+      name: '',
+      caption: '',
+      icon: 'folder',
+      description: '',
+      defaultLanguage: 'tr-TR',
+      supportedLanguages: ['tr-TR'],
+      timezone: 'Europe/Istanbul',
+      region: 'tr-TR'
+    };
+
+    this.form = this.fb.group({
+      name: [defaultValues.name, [Validators.required, Validators.pattern(/^[a-z0-9_]+$/)]],
+      caption: [defaultValues.caption, Validators.required],
+      icon: [defaultValues.icon],
+      description: [defaultValues.description],
+      defaultLanguage: [defaultValues.defaultLanguage],
+      supportedLanguages: [defaultValues.supportedLanguages],
+      timezone: [defaultValues.timezone],
+      region: [defaultValues.region]
+    });
+
+    // Disable name field in edit mode
+    if (this.data.mode === 'edit') {
+      this.form.get('name')?.disable();
+    }
+  }
+
+  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)' }
+        ];
+      }
+    });
+  }
+
+  validateSelectedLanguages() {
+    const availableCodes = this.availableLocales.map(l => l.code);
+    const currentSupported = this.form.get('supportedLanguages')?.value || [];
+    const currentDefault = this.form.get('defaultLanguage')?.value;
+    
+    // Filter out any unsupported languages
+    const validSupported = currentSupported.filter((lang: string) => 
+      availableCodes.includes(lang)
+    );
+    
+    // Update form if any languages were removed
+    if (validSupported.length !== currentSupported.length) {
+      this.form.patchValue({ supportedLanguages: validSupported });
+    }
+    
+    // Ensure default language is valid
+    if (!availableCodes.includes(currentDefault)) {
+      const newDefault = availableCodes[0] || 'tr-TR';
+      this.form.patchValue({ 
+        defaultLanguage: newDefault,
+        supportedLanguages: [...validSupported, newDefault]
+      });
+    }
+  }
+
+  onDefaultLanguageChange() {
+    const defaultLang = this.form.get('defaultLanguage')?.value;
+    const supportedLangs = this.form.get('supportedLanguages')?.value || [];
     
-    if (this.data.mode === 'edit' && this.data.project) {
+    // Ensure default language is in supported languages
+    if (defaultLang && !supportedLangs.includes(defaultLang)) {
       this.form.patchValue({
-        name: this.data.project.name,
-        caption: this.data.project.caption || '',
-        icon: this.data.project.icon || 'folder',
-        description: this.data.project.description || '',
-        defaultLanguage: this.data.project.default_language || 'tr',
-        supportedLanguages: this.data.project.supported_languages || ['tr'],
-        timezone: this.data.project.timezone || 'Europe/Istanbul',
-        region: this.data.project.region || 'tr-TR'
+        supportedLanguages: [...supportedLangs, defaultLang]
       });
-      
-      // Rebuild test users form array
-      const testUsersArray = this.form.get('testUsers') as FormArray;
-      testUsersArray.clear();
-      (this.data.project.test_users || []).forEach((phoneNumber: string) => {
-        testUsersArray.push(this.fb.control(phoneNumber, Validators.required));
+    }
+  }
+
+  onSupportedLanguagesChange() {
+    const defaultLang = this.form.get('defaultLanguage')?.value;
+    const supportedLangs = this.form.get('supportedLanguages')?.value || [];
+    
+    // If default language was removed, change default to first supported
+    if (defaultLang && !supportedLangs.includes(defaultLang)) {
+      this.form.patchValue({
+        defaultLanguage: supportedLangs[0] || 'tr-TR'
       });
     }
   }
 
-  initializeForm() {
-    this.form = this.fb.group({
-      name: ['', [Validators.required, Validators.pattern(/^[a-z0-9_]+$/)]],
-      caption: ['', Validators.required],
-      icon: ['folder'],
-      description: [''],
-      defaultLanguage: ['tr'],
-      supportedLanguages: [['tr']],
-      timezone: ['Europe/Istanbul'],
-      region: ['tr-TR']
-      // testUsers kaldırıldı
-    });
+  getLocaleName(code: string): string {
+    const locale = this.availableLocales.find(l => l.code === code);
+    return locale ? locale.name : code;
   }
 
   async save() {
@@ -194,10 +306,10 @@ export default class ProjectEditDialogComponent implements OnInit {
   
     this.saving = true;
     try {
-      const formValue = this.form.value;
+      const formValue = this.form.getRawValue(); // getRawValue to include disabled fields
       
-      // Base project data
-      const baseProjectData = {
+      // Project data format matching backend expectations
+      const projectData = {
         name: formValue.name,
         caption: formValue.caption,
         icon: formValue.icon,
@@ -210,40 +322,36 @@ export default class ProjectEditDialogComponent implements OnInit {
   
       let result;
       if (this.data.mode === 'create') {
-        result = await this.apiService.createProject(baseProjectData).toPromise();
-        this.showMessage('Project created successfully!', false);
+        result = await this.apiService.createProject(projectData).toPromise();
+        this.showMessage('Project created successfully!');
       } else {
-        // Edit mode için ek alanlarla birlikte gönder
-        const updateProjectData = {
-          ...baseProjectData,
-          id: this.data.project.id,
-          last_update_date: this.data.project.last_update_date
+        // Add last_update_date for edit mode
+        const updateData = {
+          ...projectData,
+          last_update_date: this.data.project.last_update_date || ''
         };
-        
-        result = await this.apiService.updateProject(this.data.project.id, updateProjectData).toPromise();
-        this.showMessage('Project updated successfully!', false);
+        result = await this.apiService.updateProject(this.data.project.id, updateData).toPromise();
+        this.showMessage('Project updated successfully!');
       }
-  
+      
       this.dialogRef.close(result);
     } catch (error: any) {
-      if (error.status === 409) {
-        this.showMessage('This record was modified by another user. Please reload and try again.', true);
-      } else {
-        this.showMessage(error.error?.detail || 'Operation failed', true);
-      }
+      this.showMessage(error.error?.detail || 'Operation failed', 'error');
     } finally {
       this.saving = false;
     }
   }
-  
-  private showMessage(message: string, isError: boolean) {
-    this.snackBar.open(message, 'Close', {
-      duration: isError ? 5000 : 3000,
-      panelClass: isError ? 'error-snackbar' : 'success-snackbar'
-    });
-  }
 
   close() {
     this.dialogRef.close();
   }
+
+  private showMessage(message: string, type: 'success' | 'error' = 'success') {
+    this.snackBar.open(message, 'Close', {
+      duration: 5000,
+      panelClass: type === 'error' ? 'error-snackbar' : 'success-snackbar',
+      horizontalPosition: 'right',
+      verticalPosition: 'top'
+    });
+  }
 }