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

@@ -18,7 +18,6 @@ export class CategoriesComponent {
   public constructor(private readonly categoryService: CategoryService) { }
 
   public async updateCategory(category: Category): Promise<void> {
-    await this.categoryService.updateCategory(category);
-    await this.categoryService.fetchCategories();
+    console.log('updated category', category); // TODO: Remove
   }
 }

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

@@ -1,25 +1,7 @@
 <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>
-    </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>
-  }
+  <button matIconButton>
+    <mat-icon>edit</mat-icon>
+  </button>
 </div>

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

@@ -3,14 +3,3 @@
   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,8 +1,7 @@
-import { Component, computed, input, model, OnInit, output, signal } from '@angular/core';
+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';
-import { MatFormField, MatInput } from '@angular/material/input';
-import { FormsModule } from '@angular/forms';
 
 interface MetaData {
   id: string;
@@ -12,42 +11,17 @@ interface MetaData {
 @Component({
   selector: 'app-metadata-form',
   imports: [
+    MatCardModule,
     MatIconModule,
-    MatButtonModule,
-    MatFormField,
-    MatInput,
-    FormsModule
+    MatButtonModule
   ],
   templateUrl: './metadata-form.component.html',
   styleUrl: './metadata-form.component.scss'
 })
-export class MetadataFormComponent implements OnInit {
+export class MetadataFormComponent {
   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);
-  }
 }

src/app/services/category.service.ts

@@ -16,17 +16,9 @@ export class CategoryService {
   public async fetchCategories(): Promise<void> {
     this.internalCategories.set(await this.http.get<Category[]>(this.categoryPath));
   }
-
-  public async updateCategory(category: Category): Promise<Category> {
-    return await this.http.put<Category>(this.categoryPath, category);
-  }
 }
 
 export interface Category {
   id: string;
   name: string;
 }
-
-export interface CreateCategory {
-  name: string;
-}