Upload json-editor.component.ts

flare-ui/src/app/shared/json-editor/json-editor.component.ts

@@ -0,0 +1,451 @@
+import { Component, Input, forwardRef, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+@Component({
+  selector: 'app-json-editor',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatChipsModule,
+    MatExpansionModule
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => JsonEditorComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <mat-form-field appearance="outline" 
+                    class="full-width" 
+                    [class.json-valid]="isValidJson()"
+                    [class.json-invalid]="!isValidJson() && value">
+      <mat-label>{{ label }}</mat-label>
+      <textarea matInput 
+                #textareaRef
+                [(ngModel)]="value"
+                [rows]="rows"
+                [placeholder]="placeholder"
+                (keydown)="handleKeydown($event)"
+                (click)="handleCursorMove($event)"
+                (keyup)="handleCursorMove($event)"
+                (blur)="onTouched()"
+                class="code-editor"></textarea>
+      <mat-hint>{{ hint }}</mat-hint>
+      @if (!isValidJson() && value) {
+        <mat-error>Invalid JSON format</mat-error>
+      }
+    </mat-form-field>
+
+    <!-- JSON Validation Indicator -->
+    <div class="json-validation-status">
+      @if (isValidJson()) {
+        <mat-icon class="valid">check_circle</mat-icon>
+        <span class="valid">Valid JSON</span>
+      } @else if (value) {
+        <mat-icon class="invalid">error</mat-icon>
+        <span class="invalid">Invalid JSON</span>
+      }
+    </div>
+
+    <!-- Collapsible Variables Panel -->
+    @if (availableVariables && availableVariables.length > 0) {
+      <mat-expansion-panel class="variables-panel">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <mat-icon>code</mat-icon>
+            Available Variables
+          </mat-panel-title>
+          <mat-panel-description>
+            Click to insert template variables
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        
+        <mat-chip-set>
+          @for (variable of availableVariables; track variable) {
+            <mat-chip (click)="insertVariable(variable)">
+              {{ variable }}
+            </mat-chip>
+          }
+        </mat-chip-set>
+      </mat-expansion-panel>
+    }
+  `,
+  styles: [`
+    :host {
+      display: block;
+      margin-bottom: 16px;
+    }
+
+    .full-width {
+      width: 100%;
+    }
+
+    .code-editor {
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
+      font-size: 13px;
+      line-height: 1.5;
+      tab-size: 2;
+      -moz-tab-size: 2;
+      white-space: pre;
+    }
+
+    .json-validation-status {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin-top: -12px;
+      margin-bottom: 16px;
+      font-size: 12px;
+      
+      mat-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+        
+        &.valid {
+          color: #4caf50;
+        }
+        
+        &.invalid {
+          color: #f44336;
+        }
+      }
+      
+      span {
+        &.valid {
+          color: #4caf50;
+        }
+        
+        &.invalid {
+          color: #f44336;
+        }
+      }
+    }
+
+    .variables-panel {
+      margin-bottom: 16px;
+      box-shadow: none;
+      border: 1px solid rgba(0, 0, 0, 0.12);
+      
+      .mat-expansion-panel-header {
+        padding: 0 16px;
+        height: 40px;
+        
+        .mat-panel-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 13px;
+          color: #666;
+          
+          mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+          }
+        }
+        
+        .mat-panel-description {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+      
+      .mat-expansion-panel-body {
+        padding: 8px 16px 16px;
+      }
+      
+      mat-chip-set {
+        mat-chip {
+          font-size: 12px;
+          min-height: 24px;
+          padding: 4px 8px;
+          cursor: pointer;
+          transition: all 0.2s;
+          
+          &:hover {
+            background-color: #e3f2fd;
+            color: #1976d2;
+          }
+        }
+      }
+    }
+
+    // JSON field background colors
+    .json-valid {
+      textarea {
+        background-color: rgba(76, 175, 80, 0.05) !important;
+      }
+    }
+    
+    .json-invalid {
+      textarea {
+        background-color: rgba(244, 67, 54, 0.05) !important;
+      }
+    }
+  `]
+})
+export class JsonEditorComponent implements ControlValueAccessor, OnInit {
+  @ViewChild('textareaRef') textareaRef!: ElementRef<HTMLTextAreaElement>;
+  
+  @Input() label = 'JSON Editor';
+  @Input() placeholder = '{}';
+  @Input() hint = 'Enter valid JSON';
+  @Input() rows = 8;
+  @Input() availableVariables: string[] = [];
+  @Input() variableReplacer?: (json: string) => string;
+
+  value = '';
+  onChange: (value: string) => void = () => {};
+  onTouched: () => void = () => {};
+
+  private bracketPairs: { [key: string]: string } = {
+    '{': '}',
+    '[': ']',
+    '(': ')'
+  };
+
+  private cursorPosition = 0;
+
+  ngOnInit() {}
+
+  writeValue(value: string): void {
+    this.value = value || '';
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    // Handle disabled state if needed
+  }
+
+  isValidJson(): boolean {
+    if (!this.value || !this.value.trim()) return true;
+    
+    try {
+      let jsonStr = this.value;
+      
+      // If variableReplacer is provided, use it to replace variables for validation
+      if (this.variableReplacer) {
+        jsonStr = this.variableReplacer(jsonStr);
+      } else {
+        // Default variable replacement for validation
+        jsonStr = this.replaceVariablesForValidation(jsonStr);
+      }
+      
+      JSON.parse(jsonStr);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  private replaceVariablesForValidation(jsonStr: string): string {
+    let processed = jsonStr;
+  
+    processed = processed.replace(/\{\{([^}]+)\}\}/g, (match, variablePath) => {
+      if (variablePath.includes('variables.')) {
+        const varName = variablePath.split('.').pop()?.toLowerCase() || '';
+        
+        const numericVars = ['count', 'passenger_count', 'timeout_seconds', 'retry_count', 'amount', 'price', 'quantity', 'age', 'id'];
+        const booleanVars = ['enabled', 'published', 'is_active', 'confirmed', 'canceled', 'deleted', 'required'];
+        
+        if (numericVars.some(v => varName.includes(v))) {
+          return '1';
+        } else if (booleanVars.some(v => varName.includes(v))) {
+          return 'true';
+        } else {
+          return '"placeholder"';
+        }
+      }
+      
+      return '"placeholder"';
+    });
+  
+    return processed;
+  }
+
+  handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Tab') {
+      this.handleTabKey(event);
+    } else if (event.key === 'Enter') {
+      this.handleEnterKey(event);
+    } else if (event.key in this.bracketPairs || Object.values(this.bracketPairs).includes(event.key)) {
+      this.handleBracketInput(event);
+    }
+  }
+
+  handleTabKey(event: KeyboardEvent): void {
+    event.preventDefault();
+    
+    const textarea = event.target as HTMLTextAreaElement;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    
+    if (start !== end) {
+      this.handleBlockIndent(textarea, !event.shiftKey);
+    } else {
+      const newValue = this.value.substring(0, start) + '\t' + this.value.substring(end);
+      this.updateValue(newValue);
+      
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 1;
+        textarea.focus();
+      }, 0);
+    }
+  }
+
+  private handleBlockIndent(textarea: HTMLTextAreaElement, indent: boolean): void {
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const value = this.value;
+    
+    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+    const lineEnd = value.indexOf('\n', end);
+    const actualEnd = lineEnd === -1 ? value.length : lineEnd;
+    
+    const selectedLines = value.substring(lineStart, actualEnd);
+    const lines = selectedLines.split('\n');
+    
+    let newLines: string[];
+    if (indent) {
+      newLines = lines.map(line => '\t' + line);
+    } else {
+      newLines = lines.map(line => line.startsWith('\t') ? line.substring(1) : line);
+    }
+    
+    const newText = newLines.join('\n');
+    const newValue = value.substring(0, lineStart) + newText + value.substring(actualEnd);
+    
+    this.updateValue(newValue);
+    
+    setTimeout(() => {
+      const lengthDiff = newText.length - selectedLines.length;
+      textarea.selectionStart = lineStart;
+      textarea.selectionEnd = actualEnd + lengthDiff;
+      textarea.focus();
+    }, 0);
+  }
+
+  handleEnterKey(event: KeyboardEvent): void {
+    event.preventDefault();
+    
+    const textarea = event.target as HTMLTextAreaElement;
+    const start = textarea.selectionStart;
+    const value = this.value;
+    
+    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+    const currentLine = value.substring(lineStart, start);
+    const indent = currentLine.match(/^[\t ]*/)?.[0] || '';
+    
+    const prevChar = value[start - 1];
+    const nextChar = value[start];
+    
+    let newLineContent = '\n' + indent;
+    let cursorOffset = newLineContent.length;
+    
+    if (prevChar in this.bracketPairs) {
+      newLineContent = '\n' + indent + '\t';
+      cursorOffset = newLineContent.length;
+      
+      if (nextChar === this.bracketPairs[prevChar]) {
+        newLineContent += '\n' + indent;
+      }
+    }
+    
+    const newValue = value.substring(0, start) + newLineContent + value.substring(start);
+    this.updateValue(newValue);
+    
+    setTimeout(() => {
+      textarea.selectionStart = textarea.selectionEnd = start + cursorOffset;
+      textarea.focus();
+    }, 0);
+  }
+
+  handleBracketInput(event: KeyboardEvent): void {
+    const textarea = event.target as HTMLTextAreaElement;
+    const char = event.key;
+    
+    if (char in this.bracketPairs) {
+      event.preventDefault();
+      
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const value = this.value;
+      
+      const selectedText = value.substring(start, end);
+      const closingBracket = this.bracketPairs[char];
+      
+      let newValue: string;
+      let cursorPos: number;
+      
+      if (selectedText) {
+        newValue = value.substring(0, start) + char + selectedText + closingBracket + value.substring(end);
+        cursorPos = start + 1 + selectedText.length;
+      } else {
+        newValue = value.substring(0, start) + char + closingBracket + value.substring(end);
+        cursorPos = start + 1;
+      }
+      
+      this.updateValue(newValue);
+      
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = cursorPos;
+        textarea.focus();
+      }, 0);
+    } else if (Object.values(this.bracketPairs).includes(char)) {
+      const start = textarea.selectionStart;
+      const value = this.value;
+      const nextChar = value[start];
+      
+      if (nextChar === char) {
+        event.preventDefault();
+        textarea.selectionStart = textarea.selectionEnd = start + 1;
+      }
+    }
+  }
+
+  handleCursorMove(event: any): void {
+    this.cursorPosition = event.target.selectionStart;
+  }
+
+  insertVariable(variable: string): void {
+    const textarea = this.textareaRef.nativeElement;
+    const start = this.cursorPosition;
+    const variableText = `{{${variable}}}`;
+    
+    const newValue = this.value.substring(0, start) + variableText + this.value.substring(start);
+    this.updateValue(newValue);
+    
+    setTimeout(() => {
+      const newPos = start + variableText.length;
+      textarea.selectionStart = textarea.selectionEnd = newPos;
+      textarea.focus();
+    }, 0);
+  }
+
+  private updateValue(newValue: string): void {
+    this.value = newValue;
+    this.onChange(newValue);
+  }
+}