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

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

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

@@ -3,3 +3,14 @@
   gap: 0.5rem;
   align-items: center;
 }
+
+.metadata-edit {
+  display: flex;
+  gap: 0.5rem;
+
+  .metadata-edit-buttons {
+    padding-top: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+}

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

@@ -1,7 +1,8 @@
-import {Component, input, output, signal} from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
+import { Component, computed, input, model, OnInit, output, signal } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { MatFormField, MatInput } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
 
 interface MetaData {
   id: string;
@@ -11,17 +12,42 @@ interface MetaData {
 @Component({
   selector: 'app-metadata-form',
   imports: [
-    MatCardModule,
     MatIconModule,
-    MatButtonModule
+    MatButtonModule,
+    MatFormField,
+    MatInput,
+    FormsModule
   ],
   templateUrl: './metadata-form.component.html',
   styleUrl: './metadata-form.component.scss'
 })
-export class MetadataFormComponent {
+export class MetadataFormComponent implements OnInit {
   public metadata = input.required<MetaData>();
-
   public newMetaData = output<MetaData>();
 
+  public name = model('');
+  public nameValid = computed(() => {
+    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(),
+      name: this.name()
+    });
+  }
+
+  public reset(): void {
+    this.editing.set(false);
+    this.name.set(this.metadata().name);
+  }
 }