updated merchant tab

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

@@ -18,12 +18,12 @@ export class CategoriesComponent {
   public constructor(private readonly categoryService: CategoryService) { }
 
   public async createCategory(name: string): Promise<void> {
-    await this.categoryService.createCategory({ name });
-    await this.categoryService.fetchCategories();
+    await this.categoryService.create({ name });
+    await this.categoryService.fetch();
   }
 
   public async updateCategory(category: Category): Promise<void> {
-    await this.categoryService.updateCategory(category);
-    await this.categoryService.fetchCategories();
+    await this.categoryService.update(category);
+    await this.categoryService.fetch();
   }
 }

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

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

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

@@ -1,28 +1,21 @@
-.merchants-container {
-  display: grid;
-  gap: 1rem;
-}
+@use "variables";
 
-.merchant-list-header {
-  padding-top: 1rem;
+.merchants-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-merchant {
+  padding-top: 0.5rem;
+}
+
 .merchant-list {
   display: grid;
-  gap: 1rem;
-  justify-content: center;
 }

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

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