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

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

@@ -1,198 +1,199 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatListModule } from '@angular/material/list';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-
-@Component({
-  selector: 'app-intent-edit-dialog',
-  standalone: true,
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    MatCheckboxModule,
-    MatButtonModule,
-    MatIconModule,
-    MatChipsModule,
-    MatTableModule,
-    MatTabsModule,
-    MatExpansionModule,
-    MatListModule,
-    MatSnackBarModule
-  ],
-  templateUrl: './intent-edit-dialog.component.html',
-  styleUrls: ['./intent-edit-dialog.component.scss']
-})
-export default class IntentEditDialogComponent implements OnInit {
-  form!: FormGroup;
-  availableAPIs: any[] = [];
-  parameterTypes = ['str', 'int', 'float', 'bool', 'date'];
-  
-  newExample = '';
-
-  constructor(
-    private fb: FormBuilder,
-    private snackBar: MatSnackBar,
-    public dialogRef: MatDialogRef<IntentEditDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
-    this.availableAPIs = data.apis || [];
-  }
-
-  ngOnInit() {
-    this.initializeForm();
-    if (this.data.intent) {
-      this.populateForm(this.data.intent);
-    }
-  }
-
-  initializeForm() {
-    this.form = this.fb.group({
-      name: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9-]+$/)]],
-      caption: [''],
-      locale: ['tr-TR'],
-      detection_prompt: ['', Validators.required],
-      examples: this.fb.array([]),
-      parameters: this.fb.array([]),
-      action: ['', Validators.required],
-      fallback_timeout_prompt: [''],
-      fallback_error_prompt: ['']
-    });
-  }
-
-  populateForm(intent: any) {
-    this.form.patchValue({
-      name: intent.name,
-      caption: intent.caption,
-      locale: intent.locale,
-      detection_prompt: intent.detection_prompt,
-      action: intent.action,
-      fallback_timeout_prompt: intent.fallback_timeout_prompt,
-      fallback_error_prompt: intent.fallback_error_prompt
-    });
-
-    // Populate examples
-    if (intent.examples) {
-      const examplesArray = this.form.get('examples') as FormArray;
-      intent.examples.forEach((example: string) => {
-        examplesArray.push(this.fb.control(example));
-      });
-    }
-
-    // Populate parameters
-    if (intent.parameters) {
-      const parametersArray = this.form.get('parameters') as FormArray;
-      intent.parameters.forEach((param: any) => {
-        parametersArray.push(this.createParameterFormGroup(param));
-      });
-    }
-  }
-
-  createParameterFormGroup(param: any = {}): FormGroup {
-    return this.fb.group({
-      name: [param.name || '', [Validators.required, Validators.pattern(/^[a-zA-Z0-9_]+$/)]],
-      caption: [param.caption || ''],
-      type: [param.type || 'str', Validators.required],
-      required: [param.required !== false],
-      variable_name: [param.variable_name || '', Validators.required],
-      extraction_prompt: [param.extraction_prompt || ''],
-      validation_regex: [param.validation_regex || ''],
-      invalid_prompt: [param.invalid_prompt || ''],
-      type_error_prompt: [param.type_error_prompt || '']
-    });
-  }
-
-  get examples() {
-    return this.form.get('examples') as FormArray;
-  }
-
-  get parameters() {
-    return this.form.get('parameters') as FormArray;
-  }
-
-  addExample() {
-    if (this.newExample.trim()) {
-      this.examples.push(this.fb.control(this.newExample.trim()));
-      this.newExample = '';
-    }
-  }
-
-  removeExample(index: number) {
-    this.examples.removeAt(index);
-  }
-
-  addParameter() {
-    this.parameters.push(this.createParameterFormGroup());
-  }
-
-  removeParameter(index: number) {
-    this.parameters.removeAt(index);
-  }
-
-  moveParameter(index: number, direction: 'up' | 'down') {
-    const newIndex = direction === 'up' ? index - 1 : index + 1;
-    if (newIndex >= 0 && newIndex < this.parameters.length) {
-      const param = this.parameters.at(index);
-      this.parameters.removeAt(index);
-      this.parameters.insert(newIndex, param);
-    }
-  }
-
-  async testRegex(index: number) {
-    const param = this.parameters.at(index);
-    const regex = param.get('validation_regex')?.value;
-    
-    if (!regex) {
-      this.snackBar.open('No regex pattern to test', 'Close', { duration: 2000 });
-      return;
-    }
-
-    const testValue = prompt('Enter a test value:');
-    if (testValue !== null) {
-      try {
-        const pattern = new RegExp(regex);
-        const matches = pattern.test(testValue);
-        
-        this.snackBar.open(
-          matches ? '✓ Pattern matches!' : '✗ Pattern does not match',
-          'Close',
-          { duration: 3000 }
-        );
-      } catch (error) {
-        this.snackBar.open('Invalid regex pattern', 'Close', { 
-          duration: 3000,
-          panelClass: 'error-snackbar'
-        });
-      }
-    }
-  }
-
-  save() {
-    if (this.form.invalid) {
-      this.snackBar.open('Please fix all validation errors', 'Close', { duration: 3000 });
-      return;
-    }
-
-    const formValue = this.form.value;
-    this.dialogRef.close(formValue);
-  }
-
-  cancel() {
-    this.dialogRef.close(null);
-  }
+import { Component, Inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';  // FormsModule EKLE
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatListModule } from '@angular/material/list';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-intent-edit-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,  // BU SATIRI EKLE
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatIconModule,
+    MatChipsModule,
+    MatTableModule,
+    MatTabsModule,
+    MatExpansionModule,
+    MatListModule,
+    MatSnackBarModule
+  ],
+  templateUrl: './intent-edit-dialog.component.html',
+  styleUrls: ['./intent-edit-dialog.component.scss']
+})
+export default class IntentEditDialogComponent implements OnInit {
+  form!: FormGroup;
+  availableAPIs: any[] = [];
+  parameterTypes = ['str', 'int', 'float', 'bool', 'date'];
+  
+  newExample = '';
+
+  constructor(
+    private fb: FormBuilder,
+    private snackBar: MatSnackBar,
+    public dialogRef: MatDialogRef<IntentEditDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.availableAPIs = data.apis || [];
+  }
+
+  ngOnInit() {
+    this.initializeForm();
+    if (this.data.intent) {
+      this.populateForm(this.data.intent);
+    }
+  }
+
+  initializeForm() {
+    this.form = this.fb.group({
+      name: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9-]+$/)]],
+      caption: [''],
+      locale: ['tr-TR'],
+      detection_prompt: ['', Validators.required],
+      examples: this.fb.array([]),
+      parameters: this.fb.array([]),
+      action: ['', Validators.required],
+      fallback_timeout_prompt: [''],
+      fallback_error_prompt: ['']
+    });
+  }
+
+  populateForm(intent: any) {
+    this.form.patchValue({
+      name: intent.name,
+      caption: intent.caption,
+      locale: intent.locale,
+      detection_prompt: intent.detection_prompt,
+      action: intent.action,
+      fallback_timeout_prompt: intent.fallback_timeout_prompt,
+      fallback_error_prompt: intent.fallback_error_prompt
+    });
+
+    // Populate examples
+    if (intent.examples) {
+      const examplesArray = this.form.get('examples') as FormArray;
+      intent.examples.forEach((example: string) => {
+        examplesArray.push(this.fb.control(example));
+      });
+    }
+
+    // Populate parameters
+    if (intent.parameters) {
+      const parametersArray = this.form.get('parameters') as FormArray;
+      intent.parameters.forEach((param: any) => {
+        parametersArray.push(this.createParameterFormGroup(param));
+      });
+    }
+  }
+
+  createParameterFormGroup(param: any = {}): FormGroup {
+    return this.fb.group({
+      name: [param.name || '', [Validators.required, Validators.pattern(/^[a-zA-Z0-9_]+$/)]],
+      caption: [param.caption || ''],
+      type: [param.type || 'str', Validators.required],
+      required: [param.required !== false],
+      variable_name: [param.variable_name || '', Validators.required],
+      extraction_prompt: [param.extraction_prompt || ''],
+      validation_regex: [param.validation_regex || ''],
+      invalid_prompt: [param.invalid_prompt || ''],
+      type_error_prompt: [param.type_error_prompt || '']
+    });
+  }
+
+  get examples() {
+    return this.form.get('examples') as FormArray;
+  }
+
+  get parameters() {
+    return this.form.get('parameters') as FormArray;
+  }
+
+  addExample() {
+    if (this.newExample.trim()) {
+      this.examples.push(this.fb.control(this.newExample.trim()));
+      this.newExample = '';
+    }
+  }
+
+  removeExample(index: number) {
+    this.examples.removeAt(index);
+  }
+
+  addParameter() {
+    this.parameters.push(this.createParameterFormGroup());
+  }
+
+  removeParameter(index: number) {
+    this.parameters.removeAt(index);
+  }
+
+  moveParameter(index: number, direction: 'up' | 'down') {
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+    if (newIndex >= 0 && newIndex < this.parameters.length) {
+      const param = this.parameters.at(index);
+      this.parameters.removeAt(index);
+      this.parameters.insert(newIndex, param);
+    }
+  }
+
+  async testRegex(index: number) {
+    const param = this.parameters.at(index);
+    const regex = param.get('validation_regex')?.value;
+    
+    if (!regex) {
+      this.snackBar.open('No regex pattern to test', 'Close', { duration: 2000 });
+      return;
+    }
+
+    const testValue = prompt('Enter a test value:');
+    if (testValue !== null) {
+      try {
+        const pattern = new RegExp(regex);
+        const matches = pattern.test(testValue);
+        
+        this.snackBar.open(
+          matches ? '✓ Pattern matches!' : '✗ Pattern does not match',
+          'Close',
+          { duration: 3000 }
+        );
+      } catch (error) {
+        this.snackBar.open('Invalid regex pattern', 'Close', { 
+          duration: 3000,
+          panelClass: 'error-snackbar'
+        });
+      }
+    }
+  }
+
+  save() {
+    if (this.form.invalid) {
+      this.snackBar.open('Please fix all validation errors', 'Close', { duration: 3000 });
+      return;
+    }
+
+    const formValue = this.form.value;
+    this.dialogRef.close(formValue);
+  }
+
+  cancel() {
+    this.dialogRef.close(null);
+  }
 }