relayout folders

src/app/components/module/module.component.html

@@ -0,0 +1,41 @@
+@if (module() && schema()) {
+    <div
+      class="flex flex-col bg-gray-800 border-2 {{
+        isInError() ? 'border-red-500' : 'border-gray-600'
+      }} border-solid w-full h-full"
+    >
+      <div class="flex items-center justify-center border-gray-600 border-b-2">
+        <div class="flex-grow ml-1 mr-3 text-white">
+          {{ schema().title || module()?.type }}
+        </div>
+        <div class="flex items-center justify-center" (click)="delete.emit()">
+          <mat-icon class="!text-red-500">close</mat-icon>
+        </div>
+      </div>
+      <div>
+        <form [formGroup]="formGroup" class="h-full">
+          <div class="m-2">
+            <div class="flex items-center m-1">
+              <label class="mr-2 text-white"> ID: </label>
+              <input
+                type="text"
+                class="pl-1 border-2 border-gray-200 text-white border-solid rounded-sm"
+                [placeholder]="'module-1'"
+                [formControlName]="'id'"
+              />
+              <mat-icon class="!text-white" matTooltip="String">abc</mat-icon>
+              @if (!formGroup.controls['id'].valid) {
+                <!-- TODO(jwetzell): better error displaying -->
+                <div class="ml-2 text-red-500">{{ formGroup.controls['id'].errors | json }}</div>
+              }
+            </div>
+            <app-params-form
+              [paramsSchema]="schema()?.properties?.params"
+              [data]="params()"
+              (updated)="paramsUpdated($event)"
+            ></app-params-form>
+          </div>
+        </form>
+      </div>
+    </div>
+}

src/app/components/module/module.component.ts

@@ -0,0 +1,93 @@
+import { Component, computed, inject, input, model, output } 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 { ModuleConfiguration } from '../../models/config.models';
+import { SchemaService } from '../../services/schema.service';
+import { ParamsFormComponent } from '../params-form/params-form.component';
+import { JsonPipe } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-module',
+  imports: [
+    MatFormFieldModule,
+    MatIconModule,
+    ParamsFormComponent,
+    ReactiveFormsModule,
+    MatMenuModule,
+    MatTooltipModule,
+    JsonPipe,
+  ],
+  templateUrl: './module.component.html',
+  styleUrl: './module.component.css',
+})
+export class ModuleComponent {
+  path = input<string>('');
+  module = model<ModuleConfiguration>();
+  delete = output<void>();
+
+  params = computed(() => this.module()!.params);
+  id = computed(() => this.module()!.id);
+
+  schema = computed(() => {
+    return this.module()?.type
+      ? this.schemaService.getSchemaForModuleType(this.module()!.type)
+      : undefined;
+  });
+
+  formGroup: FormGroup = new FormGroup({
+    id: new FormControl('', [Validators.required]),
+    type: new FormControl(''),
+  });
+
+  private schemaService = inject(SchemaService);
+
+  ngOnInit(): void {
+    this.formGroup.patchValue({
+      id: this.module()?.id,
+      type: this.module()?.type,
+    });
+
+    this.formGroup.valueChanges.subscribe((value) => {
+      this.module.update((module) => {
+        if (module) {
+          module.id = value.id;
+          module.type = value.type;
+          return {
+            ...module,
+            id: module.id,
+            type: module.type,
+          };
+        }
+        return undefined;
+      });
+    });
+  }
+
+  paramsUpdated(params: any) {
+    this.module.update((module) => {
+      if (module !== undefined && module.params !== undefined) {
+        module.params = params;
+        return {
+          ...module,
+          params: module.params,
+        };
+      }
+      return undefined;
+    });
+  }
+
+  deleteMe() {
+    this.delete.emit();
+  }
+
+  isInError(): boolean {
+    const path = this.path();
+    if (path) {
+      return this.schemaService.errorPaths.includes(path);
+    }
+    return false;
+  }
+}