Update flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.ts

flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.ts

@@ -14,8 +14,9 @@ import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatChipsModule } from '@angular/material/chips';
-import { ApiService } from '../../services/api.service';
 import { MatMenuModule } from '@angular/material/menu';
+import { ApiService } from '../../services/api.service';
+import { JsonEditorComponent } from '../../shared/json-editor/json-editor.component';
 
 @Component({
   selector: 'app-api-edit-dialog',
@@ -36,7 +37,8 @@ import { MatMenuModule } from '@angular/material/menu';
     MatDividerModule,
     MatExpansionModule,
     MatChipsModule,
-    MatMenuModule  // ✅ MatMenuModule eklendi
+    MatMenuModule,
+    JsonEditorComponent
   ],
   templateUrl: './api-edit-dialog.component.html',
   styleUrls: ['./api-edit-dialog.component.scss']
@@ -51,17 +53,9 @@ export default class ApiEditDialogComponent implements OnInit {
   responseMappingVariables: string[] = [];
   activeTabIndex = 0;
 
-  variablePanelsExpanded: { [key: string]: boolean } = {
-    'body_template': false,
-    'auth.token_request_body': false,
-    'auth.token_refresh_body': false
-  };
-  
   httpMethods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
   retryStrategies = ['static', 'exponential'];
   variableTypes = ['str', 'int', 'float', 'bool', 'date'];
-
-  private cursorPositions: { [key: string]: number } = {};
   
   constructor(
     private fb: FormBuilder,
@@ -71,19 +65,15 @@ export default class ApiEditDialogComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) public data: any
   ) {}
 
-  toggleVariablePanel(field: string): void {
-    this.variablePanelsExpanded[field] = !this.variablePanelsExpanded[field];
-  }
-  
   ngOnInit() {
     this.initializeForm();
     this.loadIntentParameters();
-  
+
     // Aktif tab'ı ayarla
     if (this.data.activeTab !== undefined) {
       this.activeTabIndex = this.data.activeTab;
     }
-  
+
     if ((this.data.mode === 'edit' || this.data.mode === 'test') && this.data.api) {
       this.populateForm(this.data.api);
     } else if (this.data.mode === 'duplicate' && this.data.api) {
@@ -92,110 +82,20 @@ export default class ApiEditDialogComponent implements OnInit {
       delete duplicateData.last_update_date;
       this.populateForm(duplicateData);
     }
-  
+
     // Test modunda açıldıysa test JSON'ını hazırla
     if (this.data.mode === 'test') {
       setTimeout(() => {
         this.updateTestRequestJson();
       }, 100);
     }
-  
+
     // Watch response mappings changes
     this.form.get('response_mappings')?.valueChanges.subscribe(() => {
       this.updateResponseMappingVariables();
     });
-    
-    // JSON alanlarını izle (validation göstergesi için)
-    this.form.get('body_template')?.valueChanges.subscribe(() => {
-      this.form.get('body_template')?.updateValueAndValidity({ emitEvent: false });
-    });
-    
-    this.form.get('auth.token_request_body')?.valueChanges.subscribe(() => {
-      this.form.get('auth.token_request_body')?.updateValueAndValidity({ emitEvent: false });
-    });
-    
-    this.form.get('auth.token_refresh_body')?.valueChanges.subscribe(() => {
-      this.form.get('auth.token_refresh_body')?.updateValueAndValidity({ emitEvent: false });
-    });
-  }
-
-  // Tab tuşu handler
-  handleTabKey(event: KeyboardEvent, field: string): void {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-      
-      const textarea = event.target as HTMLTextAreaElement;
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const value = textarea.value;
-      
-      // Tab karakteri ekle
-      const newValue = value.substring(0, start) + '\t' + value.substring(end);
-      
-      // Form kontrolünü güncelle
-      const control = this.form.get(field);
-      if (control) {
-        control.setValue(newValue);
-        
-        // Cursor pozisyonunu ayarla
-        setTimeout(() => {
-          textarea.selectionStart = textarea.selectionEnd = start + 1;
-          textarea.focus();
-        }, 0);
-      }
-    }
-  }
-
-  // Shift+Tab için outdent (opsiyonel)
-  handleShiftTab(event: KeyboardEvent, field: string): void {
-    if (event.key === 'Tab' && event.shiftKey) {
-      event.preventDefault();
-      
-      const textarea = event.target as HTMLTextAreaElement;
-      const start = textarea.selectionStart;
-      const value = textarea.value;
-      
-      // Cursor'dan önceki en yakın tab'ı bul ve sil
-      const beforeCursor = value.substring(0, start);
-      const lastTabIndex = beforeCursor.lastIndexOf('\t');
-      
-      if (lastTabIndex !== -1 && start - lastTabIndex <= 4) { // Tab'a yakınsa
-        const newValue = value.substring(0, lastTabIndex) + value.substring(lastTabIndex + 1);
-        
-        const control = this.form.get(field);
-        if (control) {
-          control.setValue(newValue);
-          
-          setTimeout(() => {
-            textarea.selectionStart = textarea.selectionEnd = lastTabIndex;
-            textarea.focus();
-          }, 0);
-        }
-      }
-    }
   }
 
-  // Test request için özel tab handler
-  handleTestRequestTab(event: KeyboardEvent): void {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-      
-      const textarea = event.target as HTMLTextAreaElement;
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const value = textarea.value;
-      
-      // Tab karakteri ekle
-      this.testRequestJson = value.substring(0, start) + '\t' + value.substring(end);
-      
-      // Cursor pozisyonunu ayarla
-      setTimeout(() => {
-        textarea.selectionStart = textarea.selectionEnd = start + 1;
-        textarea.focus();
-      }, 0);
-    }
-  }
-  
   initializeForm() {
     this.form = this.fb.group({
       // General Tab
@@ -419,21 +319,8 @@ export default class ApiEditDialogComponent implements OnInit {
     }
   }
 
-  validateJSON(field: string): boolean {
-    const control = this.form.get(field);
-    if (!control || !control.value) return true;
-
-    try {
-      const jsonStr = control.value;
-      const processedJson = this.replaceVariablesForValidation(jsonStr);
-      JSON.parse(processedJson);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  replaceVariablesForValidation(jsonStr: string): string {
+  // JSON validation için replacer fonksiyonu
+  replaceVariablesForValidation = (jsonStr: string): string => {
     let processed = jsonStr;
   
     processed = processed.replace(/\{\{([^}]+)\}\}/g, (match, variablePath) => {
@@ -513,15 +400,6 @@ export default class ApiEditDialogComponent implements OnInit {
     }
   }
 
-  prepareTestRequest(): any {
-    try {
-      const requestData = JSON.parse(this.testRequestJson);
-      return requestData;
-    } catch {
-      return {};
-    }
-  }
-
   updateTestRequestJson() {
     const formValue = this.form.getRawValue();
     let bodyTemplate = {};
@@ -644,17 +522,6 @@ export default class ApiEditDialogComponent implements OnInit {
       Object.keys(this.form.controls).forEach(key => {
         this.form.get(key)?.markAsTouched();
       });
-      
-      const jsonFields = ['body_template', 'auth.token_request_body', 'auth.token_refresh_body'];
-      for (const field of jsonFields) {
-        if (!this.validateJSON(field)) {
-          this.snackBar.open(`Invalid JSON in ${field}`, 'Close', { 
-            duration: 3000,
-            panelClass: 'error-snackbar' 
-          });
-          return;
-        }
-      }
 
       this.snackBar.open('Please fix validation errors', 'Close', { duration: 3000 });
       return;
@@ -688,44 +555,4 @@ export default class ApiEditDialogComponent implements OnInit {
   cancel() {
     this.dialogRef.close(false);
   }
-
-  saveCursorPosition(field: string, event: any) {
-    const textarea = event.target;
-    this.cursorPositions[field] = textarea.selectionStart;
-  }
-
-  insertTemplateVariable(field: string, variable: string) {
-    const control = field.includes('.') 
-      ? this.form.get(field)
-      : this.form.get(field);
-    
-    if (control) {
-      const currentValue = control.value || '';
-      const variableText = `{{${variable}}}`;
-      const cursorPos = this.cursorPositions[field] || currentValue.length;
-      
-      const newValue = 
-        currentValue.slice(0, cursorPos) + 
-        variableText + 
-        currentValue.slice(cursorPos);
-      
-      control.setValue(newValue);
-      
-      setTimeout(() => {
-        let selector = `textarea[formControlName="${field}"]`;
-        if (field === 'auth.token_request_body') {
-          selector = 'div[formGroupName="auth"] textarea[formControlName="token_request_body"]';
-        } else if (field === 'auth.token_refresh_body') {
-          selector = 'div[formGroupName="auth"] textarea[formControlName="token_refresh_body"]';
-        }
-        
-        const textarea = document.querySelector(selector) as HTMLTextAreaElement;
-        if (textarea) {
-          const newPos = cursorPos + variableText.length;
-          textarea.setSelectionRange(newPos, newPos);
-          textarea.focus();
-        }
-      }, 0);
-    }
-  }
 }