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

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

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -15,6 +15,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatDividerModule } from '@angular/material/divider'; 
 import { ApiService, API } from '../../services/api.service';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'app-apis',
@@ -41,15 +42,15 @@ import { ApiService, API } from '../../services/api.service';
       <div class="toolbar">
         <h2>API Definitions</h2>
         <div class="toolbar-actions">
-          <button mat-raised-button color="primary" (click)="createAPI()">
+          <button mat-raised-button color="primary" (click)="createAPI()" [disabled]="loading">
             <mat-icon>add</mat-icon>
             New API
           </button>
-          <button mat-button (click)="importAPIs()">
+          <button mat-button (click)="importAPIs()" [disabled]="loading">
             <mat-icon>upload</mat-icon>
             Import
           </button>
-          <button mat-button (click)="exportAPIs()">
+          <button mat-button (click)="exportAPIs()" [disabled]="loading || filteredAPIs.length === 0">
             <mat-icon>download</mat-icon>
             Export
           </button>
@@ -66,7 +67,16 @@ import { ApiService, API } from '../../services/api.service';
 
       <mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
 
-      @if (!loading && filteredAPIs.length === 0) {
+      @if (!loading && error) {
+        <div class="error-state">
+          <mat-icon>error_outline</mat-icon>
+          <p>{{ error }}</p>
+          <button mat-raised-button color="primary" (click)="loadAPIs()">
+            <mat-icon>refresh</mat-icon>
+            Retry
+          </button>
+        </div>
+      } @else if (!loading && filteredAPIs.length === 0 && !searchTerm) {
         <div class="empty-state">
           <mat-icon>api</mat-icon>
           <p>No APIs found.</p>
@@ -74,6 +84,14 @@ import { ApiService, API } from '../../services/api.service';
             Create your first API
           </button>
         </div>
+      } @else if (!loading && filteredAPIs.length === 0 && searchTerm) {
+        <div class="empty-state">
+          <mat-icon>search_off</mat-icon>
+          <p>No APIs match your search.</p>
+          <button mat-button (click)="searchTerm = ''; filterAPIs()">
+            Clear search
+          </button>
+        </div>
       } @else if (!loading) {
         <table mat-table [dataSource]="filteredAPIs" class="apis-table">
           <!-- Name Column -->
@@ -110,7 +128,8 @@ import { ApiService, API } from '../../services/api.service';
           <ng-container matColumnDef="auth">
             <th mat-header-cell *matHeaderCellDef>Auth</th>
             <td mat-cell *matCellDef="let api">
-              <mat-icon [color]="api.auth?.enabled ? 'primary' : ''">
+              <mat-icon [color]="api.auth?.enabled ? 'primary' : ''" 
+                        [matTooltip]="api.auth?.enabled ? 'Authentication enabled' : 'No authentication'">
                 {{ api.auth?.enabled ? 'lock' : 'lock_open' }}
               </mat-icon>
             </td>
@@ -118,10 +137,12 @@ import { ApiService, API } from '../../services/api.service';
 
           <!-- Deleted Column -->
           <ng-container matColumnDef="deleted">
-            <th mat-header-cell *matHeaderCellDef>Deleted</th>
+            <th mat-header-cell *matHeaderCellDef>Status</th>
             <td mat-cell *matCellDef="let api">
               @if (api.deleted) {
-                <mat-icon color="warn">delete</mat-icon>
+                <mat-icon color="warn" matTooltip="Deleted">delete</mat-icon>
+              } @else {
+                <mat-icon color="primary" matTooltip="Active">check_circle</mat-icon>
               }
             </td>
           </ng-container>
@@ -130,11 +151,17 @@ import { ApiService, API } from '../../services/api.service';
           <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef>Actions</th>
             <td mat-cell *matCellDef="let api">
-              <button mat-icon-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">
-                <mat-icon>more_vert</mat-icon>
+              <button mat-icon-button [matMenuTriggerFor]="menu" 
+                      (click)="$event.stopPropagation()"
+                      [disabled]="actionLoading[api.name]">
+                @if (actionLoading[api.name]) {
+                  <mat-spinner diameter="20"></mat-spinner>
+                } @else {
+                  <mat-icon>more_vert</mat-icon>
+                }
               </button>
               <mat-menu #menu="matMenu">
-                <button mat-menu-item (click)="editAPI(api)">
+                <button mat-menu-item (click)="editAPI(api)" [disabled]="api.deleted">
                   <mat-icon>edit</mat-icon>
                   <span>Edit</span>
                 </button>
@@ -152,6 +179,12 @@ import { ApiService, API } from '../../services/api.service';
                     <mat-icon color="warn">delete</mat-icon>
                     <span>Delete</span>
                   </button>
+                } @else {
+                  <mat-divider></mat-divider>
+                  <button mat-menu-item (click)="restoreAPI(api)">
+                    <mat-icon color="primary">restore</mat-icon>
+                    <span>Restore</span>
+                  </button>
                 }
               </mat-menu>
             </td>
@@ -192,7 +225,7 @@ import { ApiService, API } from '../../services/api.service';
         }
       }
 
-      .empty-state {
+      .empty-state, .error-state {
         text-align: center;
         padding: 60px 20px;
         background-color: white;
@@ -214,6 +247,12 @@ import { ApiService, API } from '../../services/api.service';
         }
       }
 
+      .error-state {
+        mat-icon {
+          color: #f44336;
+        }
+      }
+
       .apis-table {
         width: 100%;
         background: white;
@@ -253,8 +292,13 @@ import { ApiService, API } from '../../services/api.service';
           &.deleted-row {
             opacity: 0.6;
             background-color: #fafafa;
+            cursor: default;
           }
         }
+
+        mat-spinner {
+          display: inline-block;
+        }
       }
     }
 
@@ -271,16 +315,19 @@ import { ApiService, API } from '../../services/api.service';
     }
   `]
 })
-export class ApisComponent implements OnInit {
+export class ApisComponent implements OnInit, OnDestroy {
   private apiService = inject(ApiService);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
+  private destroyed$ = new Subject<void>();
 
   apis: API[] = [];
   filteredAPIs: API[] = [];
   loading = true;
+  error = '';
   showDeleted = false;
   searchTerm = '';
+  actionLoading: { [key: string]: boolean } = {};
   
   displayedColumns: string[] = ['name', 'url', 'method', 'timeout', 'auth', 'deleted', 'actions'];
 
@@ -288,16 +335,26 @@ export class ApisComponent implements OnInit {
     this.loadAPIs();
   }
 
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+
   loadAPIs() {
     this.loading = true;
-    this.apiService.getAPIs(this.showDeleted).subscribe({
+    this.error = '';
+    
+    this.apiService.getAPIs(this.showDeleted).pipe(
+      takeUntil(this.destroyed$)
+    ).subscribe({
       next: (apis) => {
         this.apis = apis;
         this.filterAPIs();
         this.loading = false;
       },
       error: (err) => {
-        this.snackBar.open('Failed to load APIs', 'Close', {
+        this.error = this.getErrorMessage(err);
+        this.snackBar.open(this.error, 'Close', {
           duration: 5000,
           panelClass: 'error-snackbar'
         });
@@ -307,107 +364,189 @@ export class ApisComponent implements OnInit {
   }
 
   filterAPIs() {
-    const term = this.searchTerm.toLowerCase();
-    this.filteredAPIs = this.apis.filter(api =>
-      api.name.toLowerCase().includes(term) ||
-      api.url.toLowerCase().includes(term)
-    );
+    const term = this.searchTerm.toLowerCase().trim();
+    if (!term) {
+      this.filteredAPIs = [...this.apis];
+    } else {
+      this.filteredAPIs = this.apis.filter(api =>
+        api.name.toLowerCase().includes(term) ||
+        api.url.toLowerCase().includes(term) ||
+        api.method.toLowerCase().includes(term)
+      );
+    }
   }
 
   async createAPI() {
-    const { default: ApiEditDialogComponent } = await import('../../dialogs/api-edit-dialog/api-edit-dialog.component');
-    
-    const dialogRef = this.dialog.open(ApiEditDialogComponent, {
-      width: '800px',
-      data: { mode: 'create' }
-    });
+    try {
+      const { default: ApiEditDialogComponent } = await import('../../dialogs/api-edit-dialog/api-edit-dialog.component');
+      
+      const dialogRef = this.dialog.open(ApiEditDialogComponent, {
+        width: '800px',
+        data: { mode: 'create' },
+        disableClose: true
+      });
 
-    dialogRef.afterClosed().subscribe((result: any) => {
-      if (result) {
-        this.loadAPIs();
-      }
-    });
+      dialogRef.afterClosed().pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe((result: any) => {
+        if (result) {
+          this.loadAPIs();
+        }
+      });
+    } catch (error) {
+      console.error('Failed to load dialog:', error);
+      this.snackBar.open('Failed to open dialog', 'Close', {
+        duration: 3000,
+        panelClass: 'error-snackbar'
+      });
+    }
   }
 
   async editAPI(api: API) {
-    const { default: ApiEditDialogComponent } = await import('../../dialogs/api-edit-dialog/api-edit-dialog.component');
+    if (api.deleted) return;
     
-    const dialogRef = this.dialog.open(ApiEditDialogComponent, {
-      width: '800px',
-      data: { mode: 'edit', api: { ...api } }
-    });
+    try {
+      const { default: ApiEditDialogComponent } = await import('../../dialogs/api-edit-dialog/api-edit-dialog.component');
+      
+      const dialogRef = this.dialog.open(ApiEditDialogComponent, {
+        width: '800px',
+        data: { mode: 'edit', api: { ...api } },
+        disableClose: true
+      });
 
-    dialogRef.afterClosed().subscribe((result: any) => {
-      if (result) {
-        this.loadAPIs();
-      }
-    });
+      dialogRef.afterClosed().pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe((result: any) => {
+        if (result) {
+          this.loadAPIs();
+        }
+      });
+    } catch (error) {
+      console.error('Failed to load dialog:', error);
+      this.snackBar.open('Failed to open dialog', 'Close', {
+        duration: 3000,
+        panelClass: 'error-snackbar'
+      });
+    }
   }
 
   async testAPI(api: API) {
-    const { default: ApiEditDialogComponent } = await import('../../dialogs/api-edit-dialog/api-edit-dialog.component');
-    
-    const dialogRef = this.dialog.open(ApiEditDialogComponent, {
-      width: '800px',
-      data: { 
-        mode: 'test',  // Test modunda açıyoruz
-        api: { ...api },
-        activeTab: 4   // Test tab'ını aktif yap (0-based index)
-      }
-    });
+    try {
+      const { default: ApiEditDialogComponent } = await import('../../dialogs/api-edit-dialog/api-edit-dialog.component');
+      
+      const dialogRef = this.dialog.open(ApiEditDialogComponent, {
+        width: '800px',
+        data: { 
+          mode: 'test',
+          api: { ...api },
+          activeTab: 4
+        },
+        disableClose: false
+      });
   
-    dialogRef.afterClosed().subscribe((result: any) => {
-      if (result) {
-        this.loadAPIs();
-      }
-    });
+      dialogRef.afterClosed().pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe((result: any) => {
+        if (result) {
+          this.loadAPIs();
+        }
+      });
+    } catch (error) {
+      console.error('Failed to load dialog:', error);
+      this.snackBar.open('Failed to open dialog', 'Close', {
+        duration: 3000,
+        panelClass: 'error-snackbar'
+      });
+    }
   }
 
   async duplicateAPI(api: API) {
-    const { default: ApiEditDialogComponent } = await import('../../dialogs/api-edit-dialog/api-edit-dialog.component');
-    
-    const dialogRef = this.dialog.open(ApiEditDialogComponent, {
-      width: '800px',
-      data: { mode: 'duplicate', api: { ...api } }
-    });
+    try {
+      const { default: ApiEditDialogComponent } = await import('../../dialogs/api-edit-dialog/api-edit-dialog.component');
+      
+      const duplicatedApi = { ...api };
+      duplicatedApi.name = `${api.name}_copy`;
+      delete (duplicatedApi as any).last_update_date;
+      
+      const dialogRef = this.dialog.open(ApiEditDialogComponent, {
+        width: '800px',
+        data: { mode: 'duplicate', api: duplicatedApi },
+        disableClose: true
+      });
 
-    dialogRef.afterClosed().subscribe((result: any) => {
-      if (result) {
-        this.loadAPIs();
-      }
-    });
+      dialogRef.afterClosed().pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe((result: any) => {
+        if (result) {
+          this.loadAPIs();
+        }
+      });
+    } catch (error) {
+      console.error('Failed to load dialog:', error);
+      this.snackBar.open('Failed to open dialog', 'Close', {
+        duration: 3000,
+        panelClass: 'error-snackbar'
+      });
+    }
   }
 
   async deleteAPI(api: API) {
-    const { default: ConfirmDialogComponent } = await import('../../dialogs/confirm-dialog/confirm-dialog.component');
+    if (api.deleted) return;
     
-    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-      width: '400px',
-      data: {
-        title: 'Delete API',
-        message: `Are you sure you want to delete "${api.name}"?`,
-        confirmText: 'Delete',
-        confirmColor: 'warn'
-      }
-    });
+    try {
+      const { default: ConfirmDialogComponent } = await import('../../dialogs/confirm-dialog/confirm-dialog.component');
+      
+      const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+        width: '400px',
+        data: {
+          title: 'Delete API',
+          message: `Are you sure you want to delete "${api.name}"?`,
+          confirmText: 'Delete',
+          confirmColor: 'warn'
+        }
+      });
 
-    dialogRef.afterClosed().subscribe((confirmed) => {
-      if (confirmed) {
-        this.apiService.deleteAPI(api.name).subscribe({
-          next: () => {
-            this.snackBar.open(`API "${api.name}" deleted successfully`, 'Close', {
-              duration: 3000
-            });
-            this.loadAPIs();
-          },
-          error: (err) => {
-            this.snackBar.open(err.error?.detail || 'Failed to delete API', 'Close', {
-              duration: 5000,
-              panelClass: 'error-snackbar'
-            });
-          }
-        });
-      }
+      dialogRef.afterClosed().pipe(
+        takeUntil(this.destroyed$)
+      ).subscribe((confirmed) => {
+        if (confirmed) {
+          this.actionLoading[api.name] = true;
+          
+          this.apiService.deleteAPI(api.name).pipe(
+            takeUntil(this.destroyed$)
+          ).subscribe({
+            next: () => {
+              this.snackBar.open(`API "${api.name}" deleted successfully`, 'Close', {
+                duration: 3000
+              });
+              this.loadAPIs();
+            },
+            error: (err) => {
+              const errorMsg = this.getErrorMessage(err);
+              this.snackBar.open(errorMsg, 'Close', {
+                duration: 5000,
+                panelClass: 'error-snackbar'
+              });
+              this.actionLoading[api.name] = false;
+            }
+          });
+        }
+      });
+    } catch (error) {
+      console.error('Failed to load dialog:', error);
+      this.snackBar.open('Failed to open dialog', 'Close', {
+        duration: 3000,
+        panelClass: 'error-snackbar'
+      });
+    }
+  }
+
+  async restoreAPI(api: API) {
+    if (!api.deleted) return;
+    
+    // Implement restore API functionality
+    this.snackBar.open('Restore functionality not implemented yet', 'Close', {
+      duration: 3000
     });
   }
 
@@ -422,7 +561,17 @@ export class ApisComponent implements OnInit {
 
       try {
         const text = await file.text();
-        const apis = JSON.parse(text);
+        let apis: any[];
+        
+        try {
+          apis = JSON.parse(text);
+        } catch (parseError) {
+          this.snackBar.open('Invalid JSON file format', 'Close', {
+            duration: 5000,
+            panelClass: 'error-snackbar'
+          });
+          return;
+        }
 
         if (!Array.isArray(apis)) {
           this.snackBar.open('Invalid file format. Expected an array of APIs.', 'Close', {
@@ -432,8 +581,10 @@ export class ApisComponent implements OnInit {
           return;
         }
 
+        this.loading = true;
         let imported = 0;
         let failed = 0;
+        const errors: string[] = [];
 
         for (const api of apis) {
           try {
@@ -441,15 +592,33 @@ export class ApisComponent implements OnInit {
             imported++;
           } catch (err: any) {
             failed++;
-            console.error(`Failed to import API ${api.name}:`, err);
+            const apiName = api.name || 'unnamed';
+            const errorMsg = err.error?.detail || err.message || 'Unknown error';
+            errors.push(`${apiName}: ${errorMsg}`);
+            console.error(`Failed to import API ${apiName}:`, err);
           }
         }
 
-        this.snackBar.open(`Imported ${imported} APIs. ${failed} failed.`, 'Close', {
-          duration: 5000
+        this.loading = false;
+        
+        if (imported > 0) {
+          this.loadAPIs();
+        }
+
+        let message = `Imported ${imported} APIs.`;
+        if (failed > 0) {
+          message += ` ${failed} failed.`;
+          if (errors.length > 0 && errors.length <= 3) {
+            message += '\n' + errors.join('\n');
+          }
+        }
+
+        this.snackBar.open(message, 'Close', {
+          duration: failed > 0 ? 8000 : 5000,
+          panelClass: failed > 0 ? 'error-snackbar' : undefined
         });
-        this.loadAPIs();
       } catch (error) {
+        this.loading = false;
         this.snackBar.open('Failed to read file', 'Close', {
           duration: 5000,
           panelClass: 'error-snackbar'
@@ -470,17 +639,42 @@ export class ApisComponent implements OnInit {
       return;
     }
 
-    const data = JSON.stringify(selectedAPIs, null, 2);
-    const blob = new Blob([data], { type: 'application/json' });
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `apis_export_${new Date().getTime()}.json`;
-    link.click();
-    window.URL.revokeObjectURL(url);
+    try {
+      const data = JSON.stringify(selectedAPIs, null, 2);
+      const blob = new Blob([data], { type: 'application/json' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `apis_export_${new Date().getTime()}.json`;
+      link.click();
+      window.URL.revokeObjectURL(url);
+
+      this.snackBar.open(`Exported ${selectedAPIs.length} APIs`, 'Close', {
+        duration: 3000
+      });
+    } catch (error) {
+      console.error('Export failed:', error);
+      this.snackBar.open('Failed to export APIs', 'Close', {
+        duration: 5000,
+        panelClass: 'error-snackbar'
+      });
+    }
+  }
 
-    this.snackBar.open(`Exported ${selectedAPIs.length} APIs`, 'Close', {
-      duration: 3000
-    });
+  private getErrorMessage(error: any): string {
+    if (error.status === 0) {
+      return 'Unable to connect to server. Please check your connection.';
+    } else if (error.status === 401) {
+      return 'Session expired. Please login again.';
+    } else if (error.status === 403) {
+      return 'You do not have permission to perform this action.';
+    } else if (error.status === 409) {
+      return 'This API was modified by another user. Please refresh and try again.';
+    } else if (error.error?.detail) {
+      return error.error.detail;
+    } else if (error.message) {
+      return error.message;
+    }
+    return 'An unexpected error occurred. Please try again.';
   }
 }