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

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

@@ -1,12 +1,13 @@
 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 { ApiService, API } from '../../services/api.service';
 
 @Component({
   selector: 'app-apis',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, FormsModule, MatDialogModule],
   template: `
     <div class="apis-container">
       <div class="toolbar">
@@ -15,10 +16,10 @@ import { ApiService, API } from '../../services/api.service';
           <button class="btn btn-primary" (click)="createAPI()">
             New API
           </button>
-          <button class="btn btn-secondary" disabled>
+          <button class="btn btn-secondary" (click)="importAPIs()">
             Import
           </button>
-          <button class="btn btn-secondary" disabled>
+          <button class="btn btn-secondary" (click)="exportAPIs()">
             Export
           </button>
           <input
@@ -218,6 +219,7 @@ import { ApiService, API } from '../../services/api.service';
 })
 export class ApisComponent implements OnInit {
   private apiService = inject(ApiService);
+  private dialog = inject(MatDialog);
 
   apis: API[] = [];
   filteredAPIs: API[] = [];
@@ -254,26 +256,30 @@ export class ApisComponent implements OnInit {
     );
   }
 
-  createAPI() {
+  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' }
     });
 
-    dialogRef.afterClosed().subscribe(result => {
+    dialogRef.afterClosed().subscribe((result: any) => {
       if (result) {
         this.loadAPIs();
       }
     });
   }
 
-  editAPI(api: API) {
+  async editAPI(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: 'edit', api: { ...api } }
     });
 
-    dialogRef.afterClosed().subscribe(result => {
+    dialogRef.afterClosed().subscribe((result: any) => {
       if (result) {
         this.loadAPIs();
       }
@@ -295,13 +301,15 @@ export class ApisComponent implements OnInit {
     });
   }
 
-  duplicateAPI(api: API) {
+  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 } }
     });
 
-    dialogRef.afterClosed().subscribe(result => {
+    dialogRef.afterClosed().subscribe((result: any) => {
       if (result) {
         this.loadAPIs();
       }
@@ -322,6 +330,67 @@ export class ApisComponent implements OnInit {
     }
   }
 
+  importAPIs() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+
+    input.onchange = async (event: any) => {
+      const file = event.target.files[0];
+      if (!file) return;
+
+      try {
+        const text = await file.text();
+        const apis = JSON.parse(text);
+
+        if (!Array.isArray(apis)) {
+          this.showMessage('Invalid file format. Expected an array of APIs.', true);
+          return;
+        }
+
+        let imported = 0;
+        let failed = 0;
+
+        for (const api of apis) {
+          try {
+            await this.apiService.createAPI(api).toPromise();
+            imported++;
+          } catch (err: any) {
+            failed++;
+            console.error(`Failed to import API ${api.name}:`, err);
+          }
+        }
+
+        this.showMessage(`Imported ${imported} APIs. ${failed} failed.`, failed > 0);
+        this.loadAPIs();
+      } catch (error) {
+        this.showMessage('Failed to read file', true);
+      }
+    };
+
+    input.click();
+  }
+
+  exportAPIs() {
+    const selectedAPIs = this.filteredAPIs.filter(api => !api.deleted);
+    
+    if (selectedAPIs.length === 0) {
+      this.showMessage('No APIs to export', true);
+      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);
+
+    this.showMessage(`Exported ${selectedAPIs.length} APIs`, false);
+  }
+
   private showMessage(message: string, isError: boolean) {
     this.message = message;
     this.isError = isError;