From f084c10de9d989ce89d4600f73f5885d768959db Mon Sep 17 00:00:00 2001
From: Joe Arndt <jmarndt@users.noreply.github.com>
Date: Mon, 16 Feb 2026 15:41:15 -0600
Subject: [PATCH] added expense view mode

---
 src/app/app.routes.ts                         |  8 +-
 .../expense-list/expense-list.component.ts    |  5 +-
 .../components/expense/expense.component.html | 93 +++++++++++++------
 .../components/expense/expense.component.scss | 22 +++++
 .../components/expense/expense.component.ts   | 24 ++++-
 ...enses.html => expense-page.component.html} |  0
 ...enses.scss => expense-page.component.scss} |  0
 ...{expenses.ts => expense-page.component.ts} |  6 +-
 .../{home.html => home-page.component.html}   |  0
 .../{home.scss => home-page.component.scss}   |  0
 .../home/{home.ts => home-page.component.ts}  |  6 +-
 11 files changed, 121 insertions(+), 43 deletions(-)
 rename src/app/pages/expenses/{expenses.html => expense-page.component.html} (100%)
 rename src/app/pages/expenses/{expenses.scss => expense-page.component.scss} (100%)
 rename src/app/pages/expenses/{expenses.ts => expense-page.component.ts} (72%)
 rename src/app/pages/home/{home.html => home-page.component.html} (100%)
 rename src/app/pages/home/{home.scss => home-page.component.scss} (100%)
 rename src/app/pages/home/{home.ts => home-page.component.ts} (59%)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index a24f70e..5a89bba 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,14 +1,14 @@
 import { Routes } from '@angular/router';
-import { Expenses } from './pages/expenses/expenses';
-import { Home } from './pages/home/home';
+import { ExpensePage } from './pages/expenses/expense-page.component';
+import { HomePage } from './pages/home/home-page.component';
 
 export const routes: Routes = [
   {
     path: '',
-    component: Home
+    component: HomePage
   },
   {
     path: 'expenses',
-    component: Expenses
+    component: ExpensePage
   }
 ];
diff --git a/src/app/components/expense-list/expense-list.component.ts b/src/app/components/expense-list/expense-list.component.ts
index 6ebaf88..e05ca25 100644
--- a/src/app/components/expense-list/expense-list.component.ts
+++ b/src/app/components/expense-list/expense-list.component.ts
@@ -1,13 +1,12 @@
 import { Component, computed } from '@angular/core';
 import { ExpenseService } from '../../services/expense.service';
 import { MatTableModule } from '@angular/material/table';
-import { CurrencyPipe, DatePipe } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
-import {ExpenseComponent} from '../expense/expense.component';
+import { ExpenseComponent } from '../expense/expense.component';
 
 @Component({
   selector: 'app-expense-list',
-  imports: [MatTableModule, MatCardModule, DatePipe, CurrencyPipe, ExpenseComponent],
+  imports: [MatTableModule, MatCardModule, ExpenseComponent],
   templateUrl: './expense-list.component.html',
   styleUrl: './expense-list.component.scss',
 })
diff --git a/src/app/components/expense/expense.component.html b/src/app/components/expense/expense.component.html
index 66f6e56..4e17951 100644
--- a/src/app/components/expense/expense.component.html
+++ b/src/app/components/expense/expense.component.html
@@ -1,17 +1,25 @@
 <div class="expense-container">
   <mat-card appearance="outlined">
     <mat-card-header>
-      @if (state() === 'add') {
+      @if (state() === 'add' || state() === 'edit') {
         <div class="expense-header">
-          <mat-card-title>Track new Expense</mat-card-title>
+          <mat-card-title>
+            @if (state() === 'add') {
+              Track new Expense
+            } @else {
+              Edit Expense
+            }
+          </mat-card-title>
           <button matButton="tonal" [disabled]="!enableSaveButton()" (click)="saveClick()">Save</button>
         </div>
       }
       @if (state() === 'view') {
         <div class="expense-header">
-          <mat-card-title>{{ `${expense()?.year}-${expense()?.month}-${expense()?.day}` | date }}</mat-card-title>
+          <mat-card-title>
+            {{ `${expense()?.year}-${expense()?.month}-${expense()?.day}` | date }}: {{ expense()?.cents! / 100 | currency}}
+          </mat-card-title>
 
-          <button matIconButton>
+          <button matIconButton (click)="editClick()">
             <mat-icon>edit</mat-icon>
           </button>
         </div>
@@ -19,13 +27,18 @@
     </mat-card-header>
 
     <mat-card-content>
-      @if (state() === 'add') {
+<!--      @if (state() === 'add' || state() === 'edit') {-->
         <div class="expense-content">
           <mat-form-field appearance="outline">
             <mat-label>Date</mat-label>
-            <input matInput [matDatepicker]="expenseDatePicker" [formField]="expenseForm.date">
+            @if (state() === 'view') {
+              <!--              <input matInput disabled="true" [matDatepicker]="expenseDatePicker" [placeholder]="expense()?.year! + '-' +  expense()?.month! + '-' + expense()?.day!">-->
+              <input matInput disabled="true" [matDatepicker]="expenseDatePicker" [placeholder]="'2026-12-03'" [value]="expenseForm.date().value()">
+            } @else {
+              <input matInput [matDatepicker]="expenseDatePicker" [formField]="expenseForm.date">
+            }
             <mat-datepicker-toggle matIconSuffix [for]="expenseDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker  #expenseDatePicker></mat-datepicker>
+            <mat-datepicker #expenseDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field appearance="outline">
@@ -67,30 +80,56 @@
             </mat-select>
           </mat-form-field>
         </div>
-      }
-      @if (state() === 'view') {
-        <div class="expense-content">
-          <div>
-            Amount: {{ expense()?.cents! / 100 | currency}}
-          </div>
+<!--      }-->
+<!--      @if (state() === 'view') {-->
+<!--        <div class="expense-content">-->
+<!--          <mat-form-field appearance="outline">-->
+<!--            <input matInput disabled="true" [matDatepicker]="expenseDatePicker" [placeholder]="expense()?.year! + '-' +  expense()?.month! + '-' + expense()?.day!">-->
+<!--            <mat-datepicker-toggle matIconSuffix [for]="expenseDatePicker"></mat-datepicker-toggle>-->
+<!--            <mat-datepicker #expenseDatePicker></mat-datepicker>-->
+<!--          </mat-form-field>-->
 
-          <div>
-            Category: {{ expense()?.category!.name }}
-          </div>
+<!--          <mat-form-field appearance="outline">-->
+<!--            <mat-label>Cents</mat-label>-->
+<!--            <input type="number" matInput disabled="true" [value]="expense()?.cents">-->
+<!--          </mat-form-field>-->
 
-          <div>
-            Merchant: {{ expense()?.merchant?.name ?? '--' }}
-          </div>
-        </div>
+<!--          <mat-form-field appearance="outline">-->
+<!--            <mat-label>Category</mat-label>-->
+<!--            <input type="text" matInput [matAutocomplete]="categoryAuto" [value]="expense()?.category!.name" disabled="true">-->
+<!--            <mat-autocomplete [displayWith]="autocompleteDisplay" autoActiveFirstOption #categoryAuto="matAutocomplete">-->
+<!--              @for (category of categories(); track category.id) {-->
+<!--                <mat-option [value]="category">{{ category.name }}</mat-option>-->
+<!--              }-->
+<!--            </mat-autocomplete>-->
+<!--          </mat-form-field>-->
 
-        <div>
-          Note: {{ expense()?.note ?? '--' }}
-        </div>
+<!--          <mat-form-field appearance="outline">-->
+<!--            <mat-label>Merchant</mat-label>-->
+<!--            <input type="text" matInput [matAutocomplete]="merchantAuto" [value]="expense()?.merchant?.name ?? 'N/A'" disabled="true">-->
+<!--            <mat-autocomplete [displayWith]="autocompleteDisplay" autoActiveFirstOption #merchantAuto="matAutocomplete">-->
+<!--              @for (merchant of merchants(); track merchant.id) {-->
+<!--                <mat-option [value]="merchant">{{ merchant.name }}</mat-option>-->
+<!--              }-->
+<!--            </mat-autocomplete>-->
+<!--          </mat-form-field>-->
 
-        <div>
-          Tags:
-        </div>
-      }
+<!--          <mat-form-field appearance="outline" class="view-note">-->
+<!--            <mat-label>Note</mat-label>-->
+<!--            <textarea rows="1" matInput disabled="true" [value]="expense()?.note ?? 'N/A'"></textarea>-->
+<!--          </mat-form-field>-->
+
+<!--          <div class="view-tags">-->
+<!--            <mat-card-subtitle>Tags:</mat-card-subtitle>-->
+<!--            @if (!expense()?.tags?.length) {-->
+<!--              N/A-->
+<!--            }-->
+<!--            @for (tag of expense()?.tags; track tag.id) {-->
+<!--              <mat-chip>{{ tag.name }}</mat-chip>-->
+<!--            }-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      }-->
     </mat-card-content>
   </mat-card>
 </div>
diff --git a/src/app/components/expense/expense.component.scss b/src/app/components/expense/expense.component.scss
index 08a52af..96c5a02 100644
--- a/src/app/components/expense/expense.component.scss
+++ b/src/app/components/expense/expense.component.scss
@@ -29,15 +29,37 @@ mat-form-field {
   width: 100%;
 }
 
+.view-tags {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
 @media (min-width: 550px) {
   .expense-content {
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
   }
+
+  .view-note {
+    grid-column: 1 / span 2;
+  }
+
+  .view-tags {
+    grid-column: 1 / span 2;
+  }
 }
 
 @media (min-width: 800px) {
   .expense-content {
     grid-template-columns: 1fr 1fr 1fr;
   }
+
+  .view-note {
+    grid-column: 2 / span 2;
+  }
+
+  .view-tags {
+    grid-column: 1 / span 3;
+  }
 }
diff --git a/src/app/components/expense/expense.component.ts b/src/app/components/expense/expense.component.ts
index 11dd70a..451f076 100644
--- a/src/app/components/expense/expense.component.ts
+++ b/src/app/components/expense/expense.component.ts
@@ -12,8 +12,9 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatButtonModule } from '@angular/material/button';
 import { provideNativeDateAdapter } from '@angular/material/core';
 import { CreateExpense, Expense, ExpenseService } from '../../services/expense.service';
-import {CurrencyPipe, DatePipe} from '@angular/common';
-import {MatIcon} from '@angular/material/icon';
+import { CurrencyPipe, DatePipe } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+// import { MatChip } from '@angular/material/chips';
 
 interface ExpenseForm {
   date: Date | string;
@@ -26,7 +27,20 @@ interface ExpenseForm {
 
 @Component({
   selector: 'app-expense',
-  imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField, DatePipe, MatIcon, CurrencyPipe],
+  imports: [
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCardModule,
+    MatAutocompleteModule,
+    MatSelectModule,
+    MatButtonModule,
+    FormField,
+    DatePipe,
+    MatIcon,
+    CurrencyPipe,
+    // MatChip
+  ],
   providers: [provideNativeDateAdapter(), DatePipe],
   templateUrl: './expense.component.html',
   styleUrl: './expense.component.scss',
@@ -106,6 +120,10 @@ export class ExpenseComponent {
     }
   }
 
+  public editClick(): void {
+    this.expenseMode.set('edit');
+  }
+
   public autocompleteDisplay(value: Merchant | Category) {
     return value.name ?? null;
   }
diff --git a/src/app/pages/expenses/expenses.html b/src/app/pages/expenses/expense-page.component.html
similarity index 100%
rename from src/app/pages/expenses/expenses.html
rename to src/app/pages/expenses/expense-page.component.html
diff --git a/src/app/pages/expenses/expenses.scss b/src/app/pages/expenses/expense-page.component.scss
similarity index 100%
rename from src/app/pages/expenses/expenses.scss
rename to src/app/pages/expenses/expense-page.component.scss
diff --git a/src/app/pages/expenses/expenses.ts b/src/app/pages/expenses/expense-page.component.ts
similarity index 72%
rename from src/app/pages/expenses/expenses.ts
rename to src/app/pages/expenses/expense-page.component.ts
index 3132b93..18f24e0 100644
--- a/src/app/pages/expenses/expenses.ts
+++ b/src/app/pages/expenses/expense-page.component.ts
@@ -8,7 +8,7 @@ import { ExpenseComponent } from '../../components/expense/expense.component';
     ExpenseListComponent,
     ExpenseComponent
   ],
-  templateUrl: './expenses.html',
-  styleUrl: './expenses.scss'
+  templateUrl: './expense-page.component.html',
+  styleUrl: './expense-page.component.scss'
 })
-export class Expenses { }
+export class ExpensePage { }
diff --git a/src/app/pages/home/home.html b/src/app/pages/home/home-page.component.html
similarity index 100%
rename from src/app/pages/home/home.html
rename to src/app/pages/home/home-page.component.html
diff --git a/src/app/pages/home/home.scss b/src/app/pages/home/home-page.component.scss
similarity index 100%
rename from src/app/pages/home/home.scss
rename to src/app/pages/home/home-page.component.scss
diff --git a/src/app/pages/home/home.ts b/src/app/pages/home/home-page.component.ts
similarity index 59%
rename from src/app/pages/home/home.ts
rename to src/app/pages/home/home-page.component.ts
index 7c1a5e2..724172f 100644
--- a/src/app/pages/home/home.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -6,7 +6,7 @@ import { RouterLink } from '@angular/router';
   imports: [
     RouterLink
   ],
-  templateUrl: './home.html',
-  styleUrl: './home.scss',
+  templateUrl: './home-page.component.html',
+  styleUrl: './home-page.component.scss',
 })
-export class Home { }
+export class HomePage { }