From 410c84b3e5ba85cf77156272bc0877d375888040 Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Thu, 26 Feb 2026 12:32:30 -0600
Subject: [PATCH] updated tag tab

---
 .../metadata/tags/tags.component.html         | 33 +++++++++++--------
 .../metadata/tags/tags.component.scss         | 25 +++++---------
 .../metadata/tags/tags.component.ts           | 18 ++++++++--
 src/app/services/tag.service.ts               | 12 +++++++
 4 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/src/app/components/metadata/tags/tags.component.html b/src/app/components/metadata/tags/tags.component.html
index c5e59e0..d0ec707 100644
--- a/src/app/components/metadata/tags/tags.component.html
+++ b/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>
diff --git a/src/app/components/metadata/tags/tags.component.scss b/src/app/components/metadata/tags/tags.component.scss
index 5772b6d..d841d0f 100644
--- a/src/app/components/metadata/tags/tags.component.scss
+++ b/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;
 }
diff --git a/src/app/components/metadata/tags/tags.component.ts b/src/app/components/metadata/tags/tags.component.ts
index 04979e6..2d1ae29 100644
--- a/src/app/components/metadata/tags/tags.component.ts
+++ b/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();
+  }
 }
diff --git a/src/app/services/tag.service.ts b/src/app/services/tag.service.ts
index a3d493e..c23ccab 100644
--- a/src/app/services/tag.service.ts
+++ b/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;
+}