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,14 +1,23 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
 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 { ApiService } from '../../services/api.service';
 
+export interface ProjectDialogData {
+  mode: 'create' | 'edit';
+  project?: any;
+}
+
 @Component({
   selector: 'app-project-edit-dialog',
   standalone: true,
@@ -18,114 +27,43 @@ import { ApiService } from '../../services/api.service';
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
+    MatSelectModule,
+    MatCheckboxModule,
     MatButtonModule,
     MatIconModule,
+    MatChipsModule,
+    MatDividerModule,
     MatSnackBarModule
   ],
-  template: `
-    <h2 mat-dialog-title>{{ data.mode === 'create' ? 'Create New Project' : 'Edit Project' }}</h2>
-    
-    <mat-dialog-content>
-      <form [formGroup]="form">
-        <mat-form-field appearance="outline" class="full-width">
-          <mat-label>Name*</mat-label>
-          <input matInput formControlName="name" 
-                 [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-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-form-field>
-
-        <div class="metadata" *ngIf="data.mode === 'edit' && data.project">
-          <div class="metadata-item">
-            <mat-icon>calendar_today</mat-icon>
-            <span>Created: {{ formatDate(data.project.created_date) }} by <strong>{{ data.project.created_by || 'unknown' }}</strong></span>
-          </div>
-          <div class="metadata-item">
-            <mat-icon>update</mat-icon>
-            <span>Modified: {{ formatDate(data.project.last_update_date) }} by <strong>{{ data.project.last_update_user || 'unknown' }}</strong></span>
-          </div>
-        </div>
-      </form>
-    </mat-dialog-content>
-    
-    <mat-dialog-actions align="end">
-      <button mat-button (click)="cancel()">Cancel</button>
-      <button mat-raised-button color="primary" 
-              (click)="save()" 
-              [disabled]="form.invalid || saving">
-        {{ saving ? 'Saving...' : 'Save' }}
-      </button>
-    </mat-dialog-actions>
-  `,
-  styles: [`
-    mat-dialog-content {
-      padding: 20px 24px;
-      min-width: 400px;
-    }
-
-    .full-width {
-      width: 100%;
-      margin-bottom: 16px;
-    }
-
-    .metadata {
-      margin-top: 24px;
-      padding: 16px;
-      background-color: #f5f5f5;
-      border-radius: 4px;
-
-      .metadata-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-bottom: 8px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        mat-icon {
-          color: #666;
-          font-size: 20px;
-          width: 20px;
-          height: 20px;
-        }
-
-        span {
-          color: #666;
-          font-size: 14px;
-
-          strong {
-            color: #333;
-          }
-        }
-      }
-    }
-
-    mat-dialog-actions {
-      padding: 16px 24px;
-      margin: 0;
-    }
-  `]
+  templateUrl: './project-edit-dialog.component.html',
+  styleUrls: ['./project-edit-dialog.component.scss']
 })
 export default class ProjectEditDialogComponent implements OnInit {
   form!: FormGroup;
   saving = false;
+  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',
+    'Europe/Berlin',
+    'America/New_York',
+    'America/Los_Angeles',
+    'Asia/Tokyo'
+  ];
 
   constructor(
     private fb: FormBuilder,
     private apiService: ApiService,
     private snackBar: MatSnackBar,
     public dialogRef: MatDialogRef<ProjectEditDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
+    @Inject(MAT_DIALOG_DATA) public data: ProjectDialogData
   ) {}
 
   ngOnInit() {
@@ -147,18 +85,36 @@ export default class ProjectEditDialogComponent implements OnInit {
       // Rebuild test users form array
       const testUsersArray = this.form.get('testUsers') as FormArray;
       testUsersArray.clear();
-      (this.data.project.test_users || []).forEach(phoneNumber => {
+      (this.data.project.test_users || []).forEach((phoneNumber: string) => {
         testUsersArray.push(this.fb.control(phoneNumber, Validators.required));
       });
-    } else if (this.data.mode === 'create') {
-      // Yeni proje için boş bir versiyon otomatik ekle
-      this.data.autoCreateVersion = true;
     }
   }
 
-  formatDate(dateString: string | undefined): string {
-    if (!dateString) return 'Unknown';
-    return new Date(dateString).toLocaleDateString();
+  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: this.fb.array([])
+    });
+  }
+
+  get testUsers() {
+    return this.form.get('testUsers') as FormArray;
+  }
+
+  addTestUser() {
+    this.testUsers.push(this.fb.control('', Validators.required));
+  }
+
+  removeTestUser(index: number) {
+    this.testUsers.removeAt(index);
   }
 
   async save() {
@@ -166,7 +122,7 @@ export default class ProjectEditDialogComponent implements OnInit {
       this.form.markAllAsTouched();
       return;
     }
-  
+
     this.saving = true;
     try {
       const formValue = this.form.value;
@@ -176,14 +132,15 @@ export default class ProjectEditDialogComponent implements OnInit {
         default_language: formValue.defaultLanguage,
         supported_languages: formValue.supportedLanguages
       };
-  
+
       let result;
       if (this.data.mode === 'create') {
         result = await this.apiService.createProject(projectData).toPromise();
         
         // Otomatik boş versiyon oluştur
-        if (this.data.autoCreateVersion && result) {
+        if (result) {
           const defaultVersion = {
+            caption: 'Version 1',
             description: 'Initial version',
             default_api: '',
             published: false,
@@ -203,17 +160,21 @@ export default class ProjectEditDialogComponent implements OnInit {
             parameters: []
           };
           
-          await this.apiService.createVersion(result.id, defaultVersion).toPromise();
+          try {
+            await this.apiService.createVersion(result.id, defaultVersion).toPromise();
+          } catch (versionError) {
+            console.error('Failed to create initial version:', versionError);
+          }
         }
         
         this.showMessage('Project created successfully!', false);
       } else {
         projectData.id = this.data.project.id;
         projectData.last_update_date = this.data.project.last_update_date;
-        result = await this.apiService.updateProject(projectData).toPromise();
+        result = await this.apiService.updateProject(this.data.project.id, projectData).toPromise();
         this.showMessage('Project updated successfully!', false);
       }
-  
+
       this.dialogRef.close(result);
     } catch (error: any) {
       if (error.status === 409) {
@@ -226,7 +187,14 @@ export default class ProjectEditDialogComponent implements OnInit {
     }
   }
 
-  cancel() {
-    this.dialogRef.close(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();
   }
 }