added new metadata to form

src/app/components/metadata/categories/categories.component.html

@@ -5,6 +5,10 @@
     </mat-card-header>
 
     <mat-card-content>
+      <div class="new-category">
+        <app-metadata-form (newMetaData)="createCategory($event.name)" [editing]="true" [label]="'New Category'"/>
+      </div>
+
       <div class="category-list">
         @for (category of categories(); track category.id) {
           <app-metadata-form [metadata]="category" (newMetaData)="updateCategory($event)" />

src/app/components/metadata/categories/categories.component.scss

@@ -12,7 +12,10 @@
   }
 }
 
+.new-category {
+  padding-top: 0.5rem;
+}
+
 .category-list {
-  padding-top: 1rem;
   display: grid;
 }

src/app/components/metadata/categories/categories.component.ts

@@ -17,6 +17,10 @@ export class CategoriesComponent {
 
   public constructor(private readonly categoryService: CategoryService) { }
 
+  public async createCategory(name: string): Promise<void> {
+    console.log('Creating new category', name);
+  }
+
   public async updateCategory(category: Category): Promise<void> {
     await this.categoryService.updateCategory(category);
     await this.categoryService.fetchCategories();

src/app/components/metadata/metadata-form/metadata-form.component.html

@@ -1,6 +1,6 @@
 <div class="metadata-form-container">
   @if (!editing()) {
-    <div>{{ metadata().name }}</div>
+    <div>{{ metadata()?.name }}</div>
 
     <button matIconButton (click)="editing.set(true)">
       <mat-icon>edit</mat-icon>
@@ -8,13 +8,18 @@
   } @else {
     <div class="metadata-edit">
       <mat-form-field appearance="outline">
+        @if (label()) {
+          <mat-label>{{ label() }}</mat-label>
+        }
         <input type="text" matInput [(ngModel)]="name">
       </mat-form-field>
 
       <div class="metadata-edit-buttons">
-        <button matIconButton (click)="reset()">
-          <mat-icon>undo</mat-icon>
-        </button>
+        @if (metadata()) {
+          <button matIconButton (click)="reset()">
+            <mat-icon>undo</mat-icon>
+          </button>
+        }
 
         <button matIconButton (click)="saveMetaData()" [disabled]="!nameValid()">
           <mat-icon>save</mat-icon>

src/app/components/metadata/metadata-form/metadata-form.component.ts

@@ -1,7 +1,7 @@
-import { Component, computed, input, model, OnInit, output, signal } from '@angular/core';
+import { Component, computed, input, model, OnInit, output } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { MatFormField, MatInput } from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 
 interface MetaData {
@@ -14,40 +14,40 @@ interface MetaData {
   imports: [
     MatIconModule,
     MatButtonModule,
-    MatFormField,
-    MatInput,
-    FormsModule
+    MatInputModule,
+    FormsModule,
   ],
   templateUrl: './metadata-form.component.html',
   styleUrl: './metadata-form.component.scss'
 })
 export class MetadataFormComponent implements OnInit {
-  public metadata = input.required<MetaData>();
+  public editing = model(false);
+  public label = input<string>();
+  public metadata = input<MetaData>();
   public newMetaData = output<MetaData>();
 
   public name = model('');
   public nameValid = computed(() => {
-    const existingName = this.metadata().name;
+    const existingName = this.metadata()?.name;
     const newName = this.name();
 
     return !!newName && newName !== existingName;
   });
-  public editing = signal(false);
 
   public ngOnInit(): void {
     this.reset();
   }
 
   public saveMetaData(): void {
-    this.editing.set(false);
     this.newMetaData.emit({
-      ...this.metadata(),
+      ...this.metadata()!,
       name: this.name()
     });
+    this.reset();
   }
 
   public reset(): void {
-    this.editing.set(false);
-    this.name.set(this.metadata().name);
+    this.name.set(this.metadata()?.name ?? '');
+    this.editing.set(!this.metadata());
   }
 }