metadata-management (#10)

Co-authored-by: Joe Arndt <jmarndt@users.noreply.github.com>
Reviewed-on: #10

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

@@ -1,3 +1,5 @@
+@use "variables";
+
 .expense-form-container {
   display: grid;
 
@@ -6,14 +8,14 @@
   }
 }
 
-@media (min-width: 550px) {
+@media (min-width: variables.$mid-screen) {
   .expense-form-container {
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
 }
 
-@media (min-width: 800px) {
+@media (min-width: variables.$wide-screen) {
   .expense-form-container {
     grid-template-columns: 1fr 1fr 1fr;
   }

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

@@ -48,13 +48,18 @@ export class ExpenseFormComponent implements OnInit {
               private readonly merchantService: MerchantService,
               private readonly tagService: TagService) {
     effect(() => {
+      const form = this.form().value();
       const valid = this.formValid();
       const dirty = this.formDirty();
-      const value = this.form().value();
+      const value = {
+        ...form,
+        merchant: Boolean(form.merchant) ? form.merchant : null,
+        note: Boolean(form.note) ? form.note : null
+      };
 
       this.valid.emit(valid);
       this.dirty.emit(dirty);
-      this.value.emit(value);
+      this.value.emit(value as ExpenseForm);
       this.lastDate.set(value.date);
     });
   }
@@ -98,8 +103,8 @@ export class ExpenseFormComponent implements OnInit {
         date: new Date(year, month, day),
         cents: expense.cents,
         category: expense.category,
-        merchant: expense.merchant ?? {},
-        note: expense.note ?? '',
+        merchant: expense.merchant ?? null,
+        note: expense.note,
         tags: expense.tags ?? []
       } as ExpenseForm;
     }

src/app/components/expense/expense.component.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 .expense-container {
   width: 100%;
   display: flex;
@@ -5,7 +7,7 @@
   align-items: center;
 
   mat-card {
-    max-width: 800px;
+    max-width: variables.$wide-screen;
     width: 100%;
   }
 }

src/app/components/expense/expense.component.ts

@@ -38,15 +38,16 @@ export class ExpenseComponent {
     const postExpense: CreateExpense = {
       date: this.dateToPlainDate(form.date),
       cents: form.cents,
-      categoryId: form.category.id,
-      note: !!form.note ? form.note : undefined,
-      merchantId: !!form.merchant ? form.merchant.id : undefined,
-      tagIds: form.tags.map(tag => tag.id)
+      category: form.category,
+      merchant: form.merchant,
+      note: form.note,
+      tags: form.tags
     };
     this.savingExpense.set(true);
     const snackId = this.snackBar.staticBar('Tracking new expense...');
     try {
-      await this.expenseService.postExpense(postExpense);
+      await this.expenseService.create(postExpense);
+      await this.expenseService.fetch();
       this.resetForm();
       this.snackBar.dismiss(snackId);
       this.snackBar.autoBar('Expense tracked!');
@@ -70,15 +71,15 @@ export class ExpenseComponent {
       id: this.expense()!.id,
       date: this.dateToPlainDate(form.date),
       cents: form.cents,
-      categoryId: form.category.id,
-      note: !!form.note ? form.note : undefined,
-      merchantId: !!form.merchant ? form.merchant.id : undefined,
-      tagIds: form.tags.map(tag => tag.id)
+      category: form.category,
+      merchant: form.merchant,
+      note: form.note,
+      tags: form.tags
     };
     this.savingExpense.set(true);
     const snackId = this.snackBar.staticBar('Updating expense...');
     try {
-      const expense = await this.expenseService.updateExpense(putExpense);
+      const expense = await this.expenseService.update(putExpense);
       this.expense.set(expense);
       this.form()?.refresh(expense);
       this.editingExpense.set(false);