Create apis.component.html

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

@@ -0,0 +1,115 @@
+<div class="apis-container">
+  <div class="toolbar">
+    <div class="toolbar-left">
+      <button mat-raised-button color="primary" (click)="createAPI()">
+        <mat-icon>add</mat-icon>
+        New API
+      </button>
+      <button mat-button (click)="importAPIs()">
+        <mat-icon>upload</mat-icon>
+        Import
+      </button>
+      <button mat-button (click)="exportAPIs()">
+        <mat-icon>download</mat-icon>
+        Export
+      </button>
+    </div>
+    
+    <div class="toolbar-right">
+      <mat-form-field appearance="outline" class="search-field">
+        <mat-label>Search APIs</mat-label>
+        <input matInput [(ngModel)]="searchTerm" (ngModelChange)="onSearchChange()">
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
+      
+      <mat-checkbox [(ngModel)]="showDeleted" (change)="onShowDeletedChange()">
+        Show Deleted
+      </mat-checkbox>
+    </div>
+  </div>
+
+  <div class="table-container">
+    <mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
+    
+    <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}}
+          <mat-icon *ngIf="api.deleted" class="deleted-icon" 
+                    matTooltip="This API is deleted">delete</mat-icon>
+        </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 class="url-text" [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">
+          <span class="method-badge" [class.method-{{api.method.toLowerCase()}}">
+            {{api.method}}
+          </span>
+        </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 *ngIf="api.auth?.enabled" class="auth-icon" color="primary">lock</mat-icon>
+          <mat-icon *ngIf="!api.auth?.enabled" class="auth-icon">lock_open</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 (click)="editAPI(api)" 
+                  matTooltip="Edit API"
+                  [disabled]="api.deleted">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button mat-icon-button (click)="testAPI(api)" 
+                  matTooltip="Test API"
+                  [disabled]="api.deleted">
+            <mat-icon>play_arrow</mat-icon>
+          </button>
+          <button mat-icon-button (click)="duplicateAPI(api)" 
+                  matTooltip="Duplicate API"
+                  [disabled]="api.deleted">
+            <mat-icon>content_copy</mat-icon>
+          </button>
+          <button mat-icon-button (click)="deleteAPI(api)" 
+                  matTooltip="Delete API"
+                  [disabled]="api.deleted">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
+          [class.deleted-row]="row.deleted"></tr>
+    </table>
+
+    <div class="no-data" *ngIf="!loading && filteredApis.length === 0">
+      <mat-icon>cloud_off</mat-icon>
+      <p>No APIs found</p>
+    </div>
+  </div>
+</div>