making metadata form component

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...-->
+          <app-metadata-form [metadata]="category" (newMetaData)="updateCategory($event)" />
-          <div class="category-item">
-            <div>{{ category.name }}</div>
-
-            <button matIconButton><mat-icon>edit</mat-icon></button>
-          </div>
         }
         @if (!categories().length) {
           <div>

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;
-}

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 { MetadataFormComponent } from '../metadata-form/metadata-form.component';
-import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-categories',
   imports: [
     MatCardModule,
-    MatIconModule,
+    MetadataFormComponent
-    MatButtonModule
   ],
   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
+  }
 }

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>

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;
+}

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);
+}