showbridge-webui/src/app/components/route/route.component.ts

import { Component, computed, inject, input, model, output, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { ProcessorConfig, RouteConfig } from '../../models/config.models';
import { SchemaService } from '../../services/schema.service';
import { JsonPipe } from '@angular/common';
import { ProcessorComponent } from '../processor/processor.component';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { EventsService } from '../../services/events.service';
import { debounceTime, tap } from 'rxjs';
import { ConfigService } from '../../services/config.service';

@Component({
  selector: 'app-route',
  imports: [
    MatFormFieldModule,
    MatIconModule,
    ReactiveFormsModule,
    MatMenuModule,
    JsonPipe,
    ProcessorComponent,
    MatTooltipModule,
  ],
  templateUrl: './route.component.html',
  styleUrl: './route.component.css',
})
export class RouteComponent {
  path = input<string>('');

  index = computed(() => {
    const path = this.path();
    if (path) {
      const parts = path.split('/');
      const lastPart = parts[parts.length - 1];
      return parseInt(lastPart, 10);
    }
    return undefined;
  });

  route = model<RouteConfig>();
  moduleIds = input<string[]>([]);
  delete = output<void>();

  processors = computed(() => {
    const route = this.route();
    if (route) {
      return route.processors;
    }
    return [];
  });

  routeConfigErrors = computed(() => {
    const index = this.index();
    const routeErrors = this.configService.routeErrors();
    if (index !== undefined) {
      return routeErrors.filter((error) => error.index === index);
    }
    return [];
  });

  formGroup: FormGroup = new FormGroup({
    input: new FormControl('', [Validators.required]),
  });

  public schemaService = inject(SchemaService);
  private snackBar = inject(MatSnackBar);
  private eventsService = inject(EventsService);
  private configService = inject(ConfigService);

  indicatorColor = signal<string>('gray');

  ngOnInit(): void {
    this.formGroup.patchValue({
      input: this.route()?.input,
    });

    this.formGroup.valueChanges.subscribe((value) => {
      this.route.update((route) => {
        if (route) {
          route.input = value.input;
          return {
            ...route,
            input: route.input,
          };
        }
        return undefined;
      });
    });

    if (this.index() !== undefined) {
      this.eventsService.getRouteEventsForIndex(this.index()!).pipe(
        tap((routeEvent)=>{
          this.indicatorColor.set(routeEvent.error ? 'red' : 'greenyellow');
        }),
        debounceTime(100)
      ).subscribe((routeEvent) => {
        this.indicatorColor.set('gray')
      })
    }
  }

  isInError(): boolean {
    const path = this.path();
    if (path) {
      return this.schemaService.errorPaths.includes(path);
    }
    return false;
  }

  addProcessor(processorType: string) {
    const processorTemplate = this.schemaService.getSkeletonForProcessor(processorType);
    this.route.update((route) => {
      if (route) {
        const processors = route.processors || [];
  
        processors.push(processorTemplate);
        return {
          ...route,
          processors: [...processors],
        };
      }
      return route;
    });
    this.snackBar.open('Processor Added', 'Dismiss', {
      duration: 3000,
    });
  }

  processorUpdated(index: number, processor: ProcessorConfig | undefined) {
    if (processor === undefined) {
      console.error('processor is undefined, not updating');
      return;
    }
    this.route.update((route) => {
      if (route && route.processors) {
        route.processors[index].type = processor.type;
        if (processor.params !== undefined) {
          route.processors[index].params = processor.params;
        }
        return {
          ...route,
          processors: [...route.processors],
        };
      }
      return route;
    });
  }

  deleteProcessor(index: number) {
    this.route.update((route) => {
      if (route && route.processors) {
        route?.processors?.splice(index, 1);
        return {
          ...route,
          processors: [...route.processors],
        };
      }
      return route;
    });
    this.snackBar.open('Processor Removed', 'Dismiss', {
      duration: 3000,
    });
  }
}