added expense view mode

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
   }
 ];

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',
 })

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>

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;
+  }
 }

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;
   }

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 { }

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 { }