Update flare-ui/src/app/components/projects/projects.component.ts

flare-ui/src/app/components/projects/projects.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -16,9 +16,12 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatDividerModule } from '@angular/material/divider';
 import { ApiService, Project } from '../../services/api.service';
-import ProjectEditDialogComponent from '../../dialogs/project-edit-dialog/project-edit-dialog.component';
-import VersionEditDialogComponent from '../../dialogs/version-edit-dialog/version-edit-dialog.component';
-import ConfirmDialogComponent from '../../dialogs/confirm-dialog/confirm-dialog.component';
+import { Subject, takeUntil } from 'rxjs';
+
+// Dynamic imports for dialogs
+const loadProjectEditDialog = () => import('../../dialogs/project-edit-dialog/project-edit-dialog.component');
+const loadVersionEditDialog = () => import('../../dialogs/version-edit-dialog/version-edit-dialog.component');
+const loadConfirmDialog = () => import('../../dialogs/confirm-dialog/confirm-dialog.component');
 
 @Component({
   selector: 'app-projects',
@@ -44,7 +47,7 @@ import ConfirmDialogComponent from '../../dialogs/confirm-dialog/confirm-dialog.
   templateUrl: './projects.component.html',
   styleUrls: ['./projects.component.scss']
 })
-export class ProjectsComponent implements OnInit {
+export class ProjectsComponent implements OnInit, OnDestroy {
   projects: Project[] = [];
   filteredProjects: Project[] = [];
   searchTerm = '';
@@ -56,6 +59,9 @@ export class ProjectsComponent implements OnInit {
   
   // For table view
   displayedColumns: string[] = ['name', 'caption', 'versions', 'status', 'lastUpdate', 'actions'];
+  
+  // Memory leak prevention
+  private destroyed$ = new Subject<void>();
 
   constructor(
     private apiService: ApiService,
@@ -68,6 +74,11 @@ export class ProjectsComponent implements OnInit {
     this.loadEnvironment();
   }
 
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+
   isSparkTabVisible(): boolean {
     // Environment bilgisini cache'ten al (eğer varsa)
     const env = localStorage.getItem('flare_environment');
@@ -78,27 +89,35 @@ export class ProjectsComponent implements OnInit {
     return true; // Default olarak göster
   }
 
-  async loadProjects() {
+  loadProjects() {
     this.loading = true;
-    try {
-      this.projects = await this.apiService.getProjects(this.showDeleted).toPromise() || [];
-      this.applyFilter();
-    } catch (error) {
-      this.showMessage('Failed to load projects', true);
-    } finally {
-      this.loading = false;
-    }
+    this.apiService.getProjects(this.showDeleted)
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe({
+        next: (projects) => {
+          this.projects = projects || [];
+          this.applyFilter();
+          this.loading = false;
+        },
+        error: (error) => {
+          this.loading = false;
+          this.showMessage('Failed to load projects', true);
+          console.error('Load projects error:', error);
+        }
+      });
   }
 
   private loadEnvironment() {
-    this.apiService.getEnvironment().subscribe({
-      next: (env) => {
-        localStorage.setItem('flare_environment', JSON.stringify(env));
-      },
-      error: (err) => {
-        console.error('Failed to load environment:', err);
-      }
-    });
+    this.apiService.getEnvironment()
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe({
+        next: (env) => {
+          localStorage.setItem('flare_environment', JSON.stringify(env));
+        },
+        error: (err) => {
+          console.error('Failed to load environment:', err);
+        }
+      });
   }  
 
   applyFilter() {
@@ -125,114 +144,175 @@ export class ProjectsComponent implements OnInit {
     this.loadProjects();
   }
 
-  createProject() {
-    const dialogRef = this.dialog.open(ProjectEditDialogComponent, {
-      width: '500px',
-      data: { mode: 'create' }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.loadProjects();
-      }
-    });
+  async createProject() {
+    try {
+      const { default: ProjectEditDialogComponent } = await loadProjectEditDialog();
+      
+      const dialogRef = this.dialog.open(ProjectEditDialogComponent, {
+        width: '500px',
+        data: { mode: 'create' }
+      });
+
+      dialogRef.afterClosed()
+        .pipe(takeUntil(this.destroyed$))
+        .subscribe(result => {
+          if (result) {
+            this.loadProjects();
+            this.showMessage('Project created successfully', false);
+          }
+        });
+    } catch (error) {
+      console.error('Failed to load dialog:', error);
+      this.showMessage('Failed to open dialog', true);
+    }
   }
   
-  editProject(project: Project) {
-    const dialogRef = this.dialog.open(ProjectEditDialogComponent, {
-      width: '500px',
-      data: { mode: 'edit', project: { ...project } }
-    });
-  
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        // Listeyi güncelle
-        const index = this.projects.findIndex(p => p.id === result.id);
-        if (index !== -1) {
-          this.projects[index] = result;
-          this.applyFilter(); // Filtreyi yeniden uygula
-        } else {
-          this.loadProjects(); // Bulunamazsa tüm listeyi yenile
-        }
-      }
-    });
-  }
-
-  async toggleProject(project: Project) {
+  async editProject(project: Project, event?: Event) {
+    if (event) {
+      event.stopPropagation();
+    }
+    
     try {
-      const result = await this.apiService.toggleProject(project.id).toPromise();
-      project.enabled = result.enabled;
-      this.showMessage(
-        `Project "${project.name}" ${project.enabled ? 'enabled' : 'disabled'} successfully`,
-        false
-      );
+      const { default: ProjectEditDialogComponent } = await loadProjectEditDialog();
+      
+      const dialogRef = this.dialog.open(ProjectEditDialogComponent, {
+        width: '500px',
+        data: { mode: 'edit', project: { ...project } }
+      });
+    
+      dialogRef.afterClosed()
+        .pipe(takeUntil(this.destroyed$))
+        .subscribe(result => {
+          if (result) {
+            // Listeyi güncelle
+            const index = this.projects.findIndex(p => p.id === result.id);
+            if (index !== -1) {
+              this.projects[index] = result;
+              this.applyFilter(); // Filtreyi yeniden uygula
+            } else {
+              this.loadProjects(); // Bulunamazsa tüm listeyi yenile
+            }
+            this.showMessage('Project updated successfully', false);
+          }
+        });
     } catch (error) {
-      this.showMessage('Failed to toggle project', true);
+      console.error('Failed to load dialog:', error);
+      this.showMessage('Failed to open dialog', true);
     }
   }
 
-  manageVersions(project: Project) {
-    const dialogRef = this.dialog.open(VersionEditDialogComponent, {
-      width: '90vw',
-      maxWidth: '1200px',
-      height: '90vh',
-      data: { project }
-    });
+  toggleProject(project: Project, event?: Event) {
+    if (event) {
+      event.stopPropagation();
+    }
 
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.loadProjects();
+    const action = project.enabled ? 'disable' : 'enable';
+    const confirmMessage = `Are you sure you want to ${action} "${project.caption}"?`;
+
+    this.confirmAction(
+      `${action.charAt(0).toUpperCase() + action.slice(1)} Project`,
+      confirmMessage,
+      action.charAt(0).toUpperCase() + action.slice(1),
+      !project.enabled
+    ).then(confirmed => {
+      if (confirmed) {
+        this.apiService.toggleProject(project.id)
+          .pipe(takeUntil(this.destroyed$))
+          .subscribe({
+            next: (result) => {
+              project.enabled = result.enabled;
+              this.showMessage(
+                `Project ${project.enabled ? 'enabled' : 'disabled'} successfully`,
+                false
+              );
+            },
+            error: (error) => this.handleUpdateError(error, project.caption)
+          });
       }
     });
   }
 
-  async deleteProject(project: Project) {
+  async manageVersions(project: Project, event?: Event) {
+    if (event) {
+      event.stopPropagation();
+    }
+    
+    try {
+      const { default: VersionEditDialogComponent } = await loadVersionEditDialog();
+      
+      const dialogRef = this.dialog.open(VersionEditDialogComponent, {
+        width: '90vw',
+        maxWidth: '1200px',
+        height: '90vh',
+        data: { project }
+      });
+
+      dialogRef.afterClosed()
+        .pipe(takeUntil(this.destroyed$))
+        .subscribe(result => {
+          if (result) {
+            this.loadProjects();
+          }
+        });
+    } catch (error) {
+      console.error('Failed to load dialog:', error);
+      this.showMessage('Failed to open dialog', true);
+    }
+  }
+
+  deleteProject(project: Project, event?: Event) {
+    if (event) {
+      event.stopPropagation();
+    }
+
     const hasVersions = project.versions && project.versions.length > 0;
     const message = hasVersions ?
       `Project "${project.name}" has ${project.versions.length} version(s). Are you sure you want to delete it?` :
       `Are you sure you want to delete project "${project.name}"?`;
 
-    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '400px',
-      data: {
-        title: 'Delete Project',
-        message: message,
-        confirmText: 'Delete',
-        confirmColor: 'warn'
-      }
-    });
-
-    dialogRef.afterClosed().subscribe(async confirmed => {
+    this.confirmAction('Delete Project', message, 'Delete', true).then(confirmed => {
       if (confirmed) {
-        try {
-          await this.apiService.deleteProject(project.id).toPromise();
-          this.showMessage('Project deleted successfully', false);
-          this.loadProjects();
-        } catch (error: any) {
-          const message = error.error?.detail || 'Failed to delete project';
-          this.showMessage(message, true);
-        }
+        this.apiService.deleteProject(project.id)
+          .pipe(takeUntil(this.destroyed$))
+          .subscribe({
+            next: () => {
+              this.showMessage('Project deleted successfully', false);
+              this.loadProjects();
+            },
+            error: (error) => {
+              const message = error.error?.detail || 'Failed to delete project';
+              this.showMessage(message, true);
+            }
+          });
       }
     });
   }
 
-  async exportProject(project: Project) {
-    try {
-      const data = await this.apiService.exportProject(project.id).toPromise();
-
-      // Create and download file
-      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = `${project.name}_export_${new Date().getTime()}.json`;
-      link.click();
-      window.URL.revokeObjectURL(url);
-
-      this.showMessage('Project exported successfully', false);
-    } catch (error) {
-      this.showMessage('Failed to export project', true);
+  exportProject(project: Project, event?: Event) {
+    if (event) {
+      event.stopPropagation();
     }
+    
+    this.apiService.exportProject(project.id)
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe({
+        next: (data) => {
+          // Create and download file
+          const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+          const url = window.URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = `${project.name}_export_${new Date().getTime()}.json`;
+          link.click();
+          window.URL.revokeObjectURL(url);
+
+          this.showMessage('Project exported successfully', false);
+        },
+        error: (error) => {
+          this.showMessage('Failed to export project', true);
+          console.error('Export error:', error);
+        }
+      });
   }
 
   importProject() {
@@ -248,12 +328,20 @@ export class ProjectsComponent implements OnInit {
         const text = await file.text();
         const data = JSON.parse(text);
 
-        await this.apiService.importProject(data).toPromise();
-        this.showMessage('Project imported successfully', false);
-        this.loadProjects();
-      } catch (error: any) {
-        const message = error.error?.detail || 'Failed to import project';
-        this.showMessage(message, true);
+        this.apiService.importProject(data)
+          .pipe(takeUntil(this.destroyed$))
+          .subscribe({
+            next: () => {
+              this.showMessage('Project imported successfully', false);
+              this.loadProjects();
+            },
+            error: (error) => {
+              const message = error.error?.detail || 'Failed to import project';
+              this.showMessage(message, true);
+            }
+          });
+      } catch (error) {
+        this.showMessage('Invalid file format', true);
       }
     };
 
@@ -285,6 +373,65 @@ export class ProjectsComponent implements OnInit {
     return project.id;
   }
 
+  handleUpdateError(error: any, projectName?: string): void {
+    if (error.status === 409 || error.raceCondition) {
+      const details = error.error?.details || error;
+      const lastUpdateUser = details.last_update_user || error.lastUpdateUser || 'another user';
+      const lastUpdateDate = details.last_update_date || error.lastUpdateDate;
+      
+      const message = projectName 
+        ? `Project "${projectName}" was modified by ${lastUpdateUser}. Please reload.`
+        : `Project was modified by ${lastUpdateUser}. Please reload.`;
+      
+      this.snackBar.open(
+        message,
+        'Reload',
+        { 
+          duration: 0,
+          panelClass: ['error-snackbar', 'race-condition-snackbar']
+        }
+      ).onAction().subscribe(() => {
+        this.loadProjects();
+      });
+      
+      // Log additional info if available
+      if (lastUpdateDate) {
+        console.info(`Last updated at: ${lastUpdateDate}`);
+      }
+    } else {
+      // Generic error handling
+      this.snackBar.open(
+        error.error?.detail || error.message || 'Operation failed',
+        'Close',
+        { 
+          duration: 5000,
+          panelClass: ['error-snackbar']
+        }
+      );
+    }
+  }
+
+  private async confirmAction(title: string, message: string, confirmText: string, dangerous: boolean): Promise<boolean> {
+    try {
+      const { default: ConfirmDialogComponent } = await loadConfirmDialog();
+      
+      const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+        width: '400px',
+        data: {
+          title,
+          message,
+          confirmText,
+          confirmColor: dangerous ? 'warn' : 'primary'
+        }
+      });
+
+      return await dialogRef.afterClosed().toPromise() || false;
+    } catch (error) {
+      console.error('Failed to load confirm dialog:', error);
+      return false;
+    }
+  }
+
   private showMessage(message: string, isError: boolean) {
     this.message = message;
     this.isError = isError;