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

@@ -1,17 +1,24 @@
 <div class="tags-container">
-  <div class="tag-list-header">
-    <p>Tags</p>
-    <app-divider />
-  </div>
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>Tags</mat-card-title>
+    </mat-card-header>
 
-  <div class="tag-list">
-    @for (tag of tags(); track tag.id) {
-      <div>{{ tag.name }}</div>
-    }
-    @if (!tags().length) {
-      <div class="tag-list-empty">
-        No tags to display
+    <mat-card-content>
+      <div class="new-tag">
+        <app-metadata-form (newMetaData)="createTag($event.name)" [editing]="true" [label]="'New Tag'"/>
       </div>
-    }
-  </div>
+
+      <div class="tag-list">
+        @for (tag of tags(); track tag.id) {
+          <app-metadata-form [metadata]="tag" (newMetaData)="updateTag($event)" />
+        }
+        @if (!tags().length) {
+          <div>
+            No tags to display
+          </div>
+        }
+      </div>
+    </mat-card-content>
+  </mat-card>
 </div>

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

@@ -1,28 +1,21 @@
-.tags-container {
-  display: grid;
-  gap: 1rem;
-}
+@use "variables";
 
-.tag-list-header {
-  padding-top: 1rem;
+.tags-container {
+  padding-top: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  p {
-    font-size: 1.8rem;
-    line-height: 100%;
-    font-weight: 400;
-    margin: 0;
-  }
-
-  app-divider {
+  mat-card {
+    max-width: variables.$wide-screen;
     width: 100%;
   }
 }
 
+.new-tag {
+  padding-top: 0.5rem;
+}
+
 .tag-list {
   display: grid;
-  gap: 1rem;
-  justify-content: center;
 }

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

@@ -1,11 +1,13 @@
 import { Component, computed } from '@angular/core';
-import { TagService } from '../../../services/tag.service';
-import { DividerComponent } from '../../divider/divider.component';
+import { Tag, TagService } from '../../../services/tag.service';
+import { MatCardModule } from '@angular/material/card';
+import { MetadataFormComponent } from '../metadata-form/metadata-form.component';
 
 @Component({
   selector: 'app-tags',
   imports: [
-    DividerComponent
+    MatCardModule,
+    MetadataFormComponent
   ],
   templateUrl: './tags.component.html',
   styleUrl: './tags.component.scss'
@@ -14,4 +16,14 @@ export class TagsComponent {
   protected tags = computed(() => this.tagService.tags());
 
   public constructor(private readonly tagService: TagService) { }
+
+  public async createTag(name: string): Promise<void> {
+    await this.tagService.create({ name });
+    await this.tagService.fetch();
+  }
+
+  public async updateTag(tag: Tag): Promise<void> {
+    await this.tagService.update(tag);
+    await this.tagService.fetch();
+  }
 }

src/app/services/tag.service.ts

@@ -16,9 +16,21 @@ export class TagService {
   public async fetch(): Promise<void> {
     this.internalTags.set(await this.http.get<Tag[]>(this.tagPath));
   }
+
+  public async create(tag: CreateTag): Promise<Tag> {
+    return await this.http.post<Tag>(this.tagPath, tag);
+  }
+
+  public async update(tag: Tag): Promise<Tag> {
+    return await this.http.put<Tag>(this.tagPath, tag);
+  }
 }
 
 export interface Tag {
   id: string;
   name: string;
 }
+
+export interface CreateTag {
+  name: string;
+}