From 5f3dabb8b72f11fae54a0eb963eafaa37dffbbf1 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 10:50:16 -0600
Subject: [PATCH] making metadata form component

---
 .../categories/categories.component.html      |  7 +----
 .../categories/categories.component.scss      |  6 -----
 .../categories/categories.component.ts        | 12 +++++----
 .../metadata-form.component.html              |  7 +++++
 .../metadata-form.component.scss              |  5 ++++
 .../metadata-form/metadata-form.component.ts  | 27 +++++++++++++++++++
 6 files changed, 47 insertions(+), 17 deletions(-)
 create mode 100644 src/app/components/metadata/metadata-form/metadata-form.component.html
 create mode 100644 src/app/components/metadata/metadata-form/metadata-form.component.scss
 create mode 100644 src/app/components/metadata/metadata-form/metadata-form.component.ts

diff --git a/src/app/components/metadata/categories/categories.component.html b/src/app/components/metadata/categories/categories.component.html
index 09b6480..3d34373 100644
--- a/src/app/components/metadata/categories/categories.component.html
+++ b/src/app/components/metadata/categories/categories.component.html
@@ -7,12 +7,7 @@
     <mat-card-content>
       <div class="category-list">
         @for (category of categories(); track category.id) {
-<!--          TODO: Convert to form...-->
-          <div class="category-item">
-            <div>{{ category.name }}</div>
-
-            <button matIconButton><mat-icon>edit</mat-icon></button>
-          </div>
+          <app-metadata-form [metadata]="category" (newMetaData)="updateCategory($event)" />
         }
         @if (!categories().length) {
           <div>
diff --git a/src/app/components/metadata/categories/categories.component.scss b/src/app/components/metadata/categories/categories.component.scss
index f6161f0..06fb27c 100644
--- a/src/app/components/metadata/categories/categories.component.scss
+++ b/src/app/components/metadata/categories/categories.component.scss
@@ -16,9 +16,3 @@
   padding-top: 1rem;
   display: grid;
 }
-
-.category-item {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
diff --git a/src/app/components/metadata/categories/categories.component.ts b/src/app/components/metadata/categories/categories.component.ts
index 4b55827..633212b 100644
--- a/src/app/components/metadata/categories/categories.component.ts
+++ b/src/app/components/metadata/categories/categories.component.ts
@@ -1,15 +1,13 @@
 import { Component, computed } from '@angular/core';
-import { CategoryService } from '../../../services/category.service';
+import { Category, CategoryService } from '../../../services/category.service';
 import { MatCardModule } from '@angular/material/card';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
+import { MetadataFormComponent } from '../metadata-form/metadata-form.component';
 
 @Component({
   selector: 'app-categories',
   imports: [
     MatCardModule,
-    MatIconModule,
-    MatButtonModule
+    MetadataFormComponent
   ],
   templateUrl: './categories.component.html',
   styleUrl: './categories.component.scss'
@@ -18,4 +16,8 @@ export class CategoriesComponent {
   protected categories = computed(() => this.categoryService.categories());
 
   public constructor(private readonly categoryService: CategoryService) { }
+
+  public async updateCategory(category: Category): Promise<void> {
+    console.log('updated category', category); // TODO: Remove
+  }
 }
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.html b/src/app/components/metadata/metadata-form/metadata-form.component.html
new file mode 100644
index 0000000..b89bc21
--- /dev/null
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.html
@@ -0,0 +1,7 @@
+<div class="metadata-form-container">
+  <div>{{ metadata().name }}</div>
+
+  <button matIconButton>
+    <mat-icon>edit</mat-icon>
+  </button>
+</div>
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.scss b/src/app/components/metadata/metadata-form/metadata-form.component.scss
new file mode 100644
index 0000000..fc26b52
--- /dev/null
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.scss
@@ -0,0 +1,5 @@
+.metadata-form-container {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
diff --git a/src/app/components/metadata/metadata-form/metadata-form.component.ts b/src/app/components/metadata/metadata-form/metadata-form.component.ts
new file mode 100644
index 0000000..5cf848f
--- /dev/null
+++ b/src/app/components/metadata/metadata-form/metadata-form.component.ts
@@ -0,0 +1,27 @@
+import {Component, input, output, signal} from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+interface MetaData {
+  id: string;
+  name: string;
+}
+
+@Component({
+  selector: 'app-metadata-form',
+  imports: [
+    MatCardModule,
+    MatIconModule,
+    MatButtonModule
+  ],
+  templateUrl: './metadata-form.component.html',
+  styleUrl: './metadata-form.component.scss'
+})
+export class MetadataFormComponent {
+  public metadata = input.required<MetaData>();
+
+  public newMetaData = output<MetaData>();
+
+  public editing = signal(false);
+}