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

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

@@ -2,120 +2,165 @@ import { Component, inject, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatTableModule } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { ApiService, API } from '../../services/api.service';
 
 @Component({
   selector: 'app-apis',
   standalone: true,
-  imports: [CommonModule, FormsModule, MatDialogModule],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule,
+    MatTableModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatProgressBarModule,
+    MatChipsModule,
+    MatMenuModule,
+    MatTooltipModule,
+    MatSnackBarModule
+  ],
   template: `
     <div class="apis-container">
       <div class="toolbar">
         <h2>API Definitions</h2>
         <div class="toolbar-actions">
-          <button class="btn btn-primary" (click)="createAPI()">
+          <button mat-raised-button color="primary" (click)="createAPI()">
+            <mat-icon>add</mat-icon>
             New API
           </button>
-          <button class="btn btn-secondary" (click)="importAPIs()">
+          <button mat-button (click)="importAPIs()">
+            <mat-icon>upload</mat-icon>
             Import
           </button>
-          <button class="btn btn-secondary" (click)="exportAPIs()">
+          <button mat-button (click)="exportAPIs()">
+            <mat-icon>download</mat-icon>
             Export
           </button>
-          <input
-            type="text"
-            placeholder="Search APIs..."
-            [(ngModel)]="searchTerm"
-            (input)="filterAPIs()"
-            class="search-input"
-          >
-          <label class="checkbox-label">
-            <input
-              type="checkbox"
-              [(ngModel)]="showDeleted"
-              (change)="loadAPIs()"
-            >
+          <mat-form-field appearance="outline" class="search-field">
+            <mat-label>Search APIs</mat-label>
+            <input matInput [(ngModel)]="searchTerm" (input)="filterAPIs()">
+            <mat-icon matSuffix>search</mat-icon>
+          </mat-form-field>
+          <mat-checkbox [(ngModel)]="showDeleted" (change)="loadAPIs()">
             Display Deleted
-          </label>
+          </mat-checkbox>
         </div>
       </div>
 
-      @if (loading) {
-        <div class="loading">
-          <span class="spinner"></span> Loading APIs...
-        </div>
-      } @else if (filteredAPIs.length === 0) {
+      <mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
+
+      @if (!loading && filteredAPIs.length === 0) {
         <div class="empty-state">
+          <mat-icon>api</mat-icon>
           <p>No APIs found.</p>
-          <button class="btn btn-primary" (click)="createAPI()">
+          <button mat-raised-button color="primary" (click)="createAPI()">
             Create your first API
           </button>
         </div>
-      } @else {
-        <table class="table">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>URL</th>
-              <th>Method</th>
-              <th>Timeout</th>
-              <th>Auth</th>
-              <th>Deleted</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (api of filteredAPIs; track api.name) {
-              <tr [class.deleted]="api.deleted">
-                <td>{{ api.name }}</td>
-                <td class="url-cell">{{ api.url }}</td>
-                <td>
-                  <span class="method-badge" [class]="'method-' + api.method.toLowerCase()">
-                    {{ api.method }}
-                  </span>
-                </td>
-                <td>{{ api.timeout_seconds }}s</td>
-                <td>
-                  @if (api.auth?.enabled) {
-                    <span class="status-badge enabled">✓</span>
-                  } @else {
-                    <span class="status-badge">✗</span>
-                  }
-                </td>
-                <td>
-                  @if (api.deleted) {
-                    <span class="status-badge deleted">✓</span>
-                  } @else {
-                    <span class="status-badge">✗</span>
-                  }
-                </td>
-                <td class="actions">
-                  <button class="action-btn" title="Edit" (click)="editAPI(api)">
-                    🖊️
-                  </button>
-                  <button class="action-btn" title="Test" (click)="testAPI(api)">
-                    🧪
+      } @else if (!loading) {
+        <table mat-table [dataSource]="filteredAPIs" class="apis-table">
+          <!-- Name Column -->
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef>Name</th>
+            <td mat-cell *matCellDef="let api">{{ api.name }}</td>
+          </ng-container>
+
+          <!-- URL Column -->
+          <ng-container matColumnDef="url">
+            <th mat-header-cell *matHeaderCellDef>URL</th>
+            <td mat-cell *matCellDef="let api" class="url-cell">
+              <span [matTooltip]="api.url">{{ api.url }}</span>
+            </td>
+          </ng-container>
+
+          <!-- Method Column -->
+          <ng-container matColumnDef="method">
+            <th mat-header-cell *matHeaderCellDef>Method</th>
+            <td mat-cell *matCellDef="let api">
+              <mat-chip [class]="'method-' + api.method.toLowerCase()">
+                {{ api.method }}
+              </mat-chip>
+            </td>
+          </ng-container>
+
+          <!-- Timeout Column -->
+          <ng-container matColumnDef="timeout">
+            <th mat-header-cell *matHeaderCellDef>Timeout</th>
+            <td mat-cell *matCellDef="let api">{{ api.timeout_seconds }}s</td>
+          </ng-container>
+
+          <!-- Auth Column -->
+          <ng-container matColumnDef="auth">
+            <th mat-header-cell *matHeaderCellDef>Auth</th>
+            <td mat-cell *matCellDef="let api">
+              <mat-icon [color]="api.auth?.enabled ? 'primary' : ''">
+                {{ api.auth?.enabled ? 'lock' : 'lock_open' }}
+              </mat-icon>
+            </td>
+          </ng-container>
+
+          <!-- Deleted Column -->
+          <ng-container matColumnDef="deleted">
+            <th mat-header-cell *matHeaderCellDef>Deleted</th>
+            <td mat-cell *matCellDef="let api">
+              @if (api.deleted) {
+                <mat-icon color="warn">delete</mat-icon>
+              }
+            </td>
+          </ng-container>
+
+          <!-- Actions Column -->
+          <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-menu #menu="matMenu">
+                <button mat-menu-item (click)="editAPI(api)">
+                  <mat-icon>edit</mat-icon>
+                  <span>Edit</span>
+                </button>
+                <button mat-menu-item (click)="testAPI(api)">
+                  <mat-icon>play_arrow</mat-icon>
+                  <span>Test</span>
+                </button>
+                <button mat-menu-item (click)="duplicateAPI(api)">
+                  <mat-icon>content_copy</mat-icon>
+                  <span>Duplicate</span>
+                </button>
+                @if (!api.deleted) {
+                  <mat-divider></mat-divider>
+                  <button mat-menu-item (click)="deleteAPI(api)">
+                    <mat-icon color="warn">delete</mat-icon>
+                    <span>Delete</span>
                   </button>
-                  <button class="action-btn" title="Duplicate" (click)="duplicateAPI(api)">
-                    📋
-                  </button>
-                  @if (!api.deleted) {
-                    <button class="action-btn danger" title="Delete" (click)="deleteAPI(api)">
-                      🗑️
-                    </button>
-                  }
-                </td>
-              </tr>
-            }
-          </tbody>
+                }
+              </mat-menu>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+              [class.deleted-row]="row.deleted"
+              (click)="editAPI(row)"></tr>
         </table>
       }
-
-      @if (message) {
-        <div class="alert" [class.alert-success]="!isError" [class.alert-danger]="isError">
-          {{ message }}
-        </div>
-      }
     </div>
   `,
   styles: [`
@@ -124,95 +169,102 @@ import { ApiService, API } from '../../services/api.service';
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 1.5rem;
+        margin-bottom: 24px;
+        flex-wrap: wrap;
+        gap: 16px;
 
         h2 {
           margin: 0;
+          font-size: 24px;
         }
 
         .toolbar-actions {
           display: flex;
-          gap: 0.5rem;
+          gap: 16px;
           align-items: center;
-        }
-      }
+          flex-wrap: wrap;
 
-      .search-input {
-        padding: 0.375rem 0.75rem;
-        border: 1px solid #ced4da;
-        border-radius: 0.25rem;
-        width: 200px;
-      }
-
-      .checkbox-label {
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        cursor: pointer;
+          .search-field {
+            width: 250px;
+          }
+        }
       }
 
-      .loading, .empty-state {
+      .empty-state {
         text-align: center;
-        padding: 3rem;
+        padding: 60px 20px;
         background-color: white;
-        border-radius: 0.25rem;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+        mat-icon {
+          font-size: 64px;
+          width: 64px;
+          height: 64px;
+          color: #e0e0e0;
+          margin-bottom: 16px;
+        }
 
         p {
-          margin-bottom: 1rem;
-          color: #6c757d;
+          margin-bottom: 24px;
+          color: #666;
+          font-size: 16px;
         }
       }
 
-      .url-cell {
-        max-width: 300px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
+      .apis-table {
+        width: 100%;
+        background: white;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+        .url-cell {
+          max-width: 300px;
+          
+          span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: block;
+          }
+        }
 
-      .method-badge {
-        padding: 0.25rem 0.5rem;
-        border-radius: 0.25rem;
-        font-size: 0.75rem;
-        font-weight: 600;
-
-        &.method-get { background-color: #28a745; color: white; }
-        &.method-post { background-color: #007bff; color: white; }
-        &.method-put { background-color: #ffc107; color: #333; }
-        &.method-patch { background-color: #17a2b8; color: white; }
-        &.method-delete { background-color: #dc3545; color: white; }
-      }
+        mat-chip {
+          font-size: 12px;
+          min-height: 24px;
+          padding: 4px 12px;
 
-      .status-badge {
-        &.enabled { color: #28a745; }
-        &.deleted { color: #dc3545; }
-      }
+          &.method-get { background-color: #4caf50; color: white; }
+          &.method-post { background-color: #2196f3; color: white; }
+          &.method-put { background-color: #ff9800; color: white; }
+          &.method-patch { background-color: #9c27b0; color: white; }
+          &.method-delete { background-color: #f44336; color: white; }
+        }
 
-      .actions {
-        display: flex;
-        gap: 0.25rem;
-      }
+        tr.mat-mdc-row {
+          cursor: pointer;
+          transition: background-color 0.2s;
 
-      .action-btn {
-        background: none;
-        border: none;
-        cursor: pointer;
-        font-size: 1.1rem;
-        padding: 0.25rem;
-        border-radius: 0.25rem;
+          &:hover {
+            background-color: #f5f5f5;
+          }
 
-        &:hover {
-          background-color: #f8f9fa;
+          &.deleted-row {
+            opacity: 0.6;
+            background-color: #fafafa;
+          }
         }
+      }
+    }
 
-        &.danger:hover {
-          background-color: #f8d7da;
-        }
+    ::ng-deep {
+      .mat-mdc-form-field {
+        font-size: 14px;
       }
 
-      tr.deleted {
-        opacity: 0.6;
-        background-color: #f8f9fa;
+      .mat-mdc-checkbox {
+        .mdc-form-field {
+          font-size: 14px;
+        }
       }
     }
   `]
@@ -220,14 +272,15 @@ import { ApiService, API } from '../../services/api.service';
 export class ApisComponent implements OnInit {
   private apiService = inject(ApiService);
   private dialog = inject(MatDialog);
+  private snackBar = inject(MatSnackBar);
 
   apis: API[] = [];
   filteredAPIs: API[] = [];
   loading = true;
   showDeleted = false;
   searchTerm = '';
-  message = '';
-  isError = false;
+  
+  displayedColumns: string[] = ['name', 'url', 'method', 'timeout', 'auth', 'deleted', 'actions'];
 
   ngOnInit() {
     this.loadAPIs();
@@ -242,7 +295,10 @@ export class ApisComponent implements OnInit {
         this.loading = false;
       },
       error: (err) => {
-        this.showMessage('Failed to load APIs', true);
+        this.snackBar.open('Failed to load APIs', 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
         this.loading = false;
       }
     });
@@ -290,13 +346,21 @@ export class ApisComponent implements OnInit {
     this.apiService.testAPI(api).subscribe({
       next: (result) => {
         if (result.success) {
-          this.showMessage(`API test successful! Status: ${result.status_code}`, false);
+          this.snackBar.open(`API test successful! Status: ${result.status_code}`, 'Close', {
+            duration: 3000
+          });
         } else {
-          this.showMessage(`API test failed: ${result.error}`, true);
+          this.snackBar.open(`API test failed: ${result.error}`, 'Close', {
+            duration: 5000,
+            panelClass: 'error-snackbar'
+          });
         }
       },
       error: (err) => {
-        this.showMessage('Failed to test API', true);
+        this.snackBar.open('Failed to test API', 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
       }
     });
   }
@@ -316,18 +380,37 @@ export class ApisComponent implements OnInit {
     });
   }
 
-  deleteAPI(api: API) {
-    if (confirm(`Are you sure you want to delete "${api.name}"?`)) {
-      this.apiService.deleteAPI(api.name).subscribe({
-        next: () => {
-          this.showMessage(`API "${api.name}" deleted successfully`, false);
-          this.loadAPIs();
-        },
-        error: (err) => {
-          this.showMessage(err.error?.detail || 'Failed to delete API', true);
-        }
-      });
-    }
+  async deleteAPI(api: API) {
+    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'
+            });
+          }
+        });
+      }
+    });
   }
 
   importAPIs() {
@@ -344,7 +427,10 @@ export class ApisComponent implements OnInit {
         const apis = JSON.parse(text);
 
         if (!Array.isArray(apis)) {
-          this.showMessage('Invalid file format. Expected an array of APIs.', true);
+          this.snackBar.open('Invalid file format. Expected an array of APIs.', 'Close', {
+            duration: 5000,
+            panelClass: 'error-snackbar'
+          });
           return;
         }
 
@@ -361,10 +447,15 @@ export class ApisComponent implements OnInit {
           }
         }
 
-        this.showMessage(`Imported ${imported} APIs. ${failed} failed.`, failed > 0);
+        this.snackBar.open(`Imported ${imported} APIs. ${failed} failed.`, 'Close', {
+          duration: 5000
+        });
         this.loadAPIs();
       } catch (error) {
-        this.showMessage('Failed to read file', true);
+        this.snackBar.open('Failed to read file', 'Close', {
+          duration: 5000,
+          panelClass: 'error-snackbar'
+        });
       }
     };
 
@@ -375,7 +466,9 @@ export class ApisComponent implements OnInit {
     const selectedAPIs = this.filteredAPIs.filter(api => !api.deleted);
     
     if (selectedAPIs.length === 0) {
-      this.showMessage('No APIs to export', true);
+      this.snackBar.open('No APIs to export', 'Close', {
+        duration: 3000
+      });
       return;
     }
 
@@ -388,15 +481,8 @@ export class ApisComponent implements OnInit {
     link.click();
     window.URL.revokeObjectURL(url);
 
-    this.showMessage(`Exported ${selectedAPIs.length} APIs`, false);
-  }
-
-  private showMessage(message: string, isError: boolean) {
-    this.message = message;
-    this.isError = isError;
-
-    setTimeout(() => {
-      this.message = '';
-    }, 5000);
+    this.snackBar.open(`Exported ${selectedAPIs.length} APIs`, 'Close', {
+      duration: 3000
+    });
   }
 }