rough migration to material design inputs

src/app/components/add-expense/add-expense.component.html

@@ -1,96 +1,65 @@
 <div class="add-expense-container">
   <mat-card appearance="outlined">
-    <mat-card-header>
+    <mat-card-header class="add-expense-header">
       <mat-card-title>Track new Expense</mat-card-title>
     </mat-card-header>
 
-
     <mat-card-content>
-      <div class="add-expense-body">
-        <div>
-          Date: <input type="date" [formField]="expenseForm.date">
-        </div>
+      <div class="add-expense-dropdowns">
+        <mat-form-field appearance="outline">
+          <mat-label>Date</mat-label>
+          <input matInput [matDatepicker]="expenseDatePicker" [formField]="expenseForm.date">
+          <mat-datepicker-toggle matIconSuffix [for]="expenseDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #expenseDatePicker></mat-datepicker>
+        </mat-form-field>
 
-        <div>
-          Cents (required):
-          <input type="number" placeholder="Enter amount" [formField]="expenseForm.amount">
-        </div>
+        <mat-form-field appearance="outline">
+          <mat-label>Cents</mat-label>
+          <input type="number" matInput [formField]="expenseForm.amount">
+        </mat-form-field>
 
-        <div>
-          Category (required):
-          <select [formField]="expenseForm.categoryId">
-            <option value="">Select a category</option>
+        <mat-form-field appearance="outline">
+          <mat-label>Category</mat-label>
+          <input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.categoryId">
+          <mat-autocomplete autoActiveFirstOption #categoryAuto="matAutocomplete">
             @for (category of categories(); track category.id) {
-              <option [value]="category.id">{{ category.name }}</option>
+              <mat-option [value]="category.name">{{ category.name }}</mat-option>
             }
-          </select>
-        </div>
-      </div>
+          </mat-autocomplete>
+        </mat-form-field>
 
-      <div>
-        Merchant (optional):
-        <select [formField]="expenseForm.merchantId">
-          <option value="">Select a merchant</option>
+        <mat-form-field appearance="outline">
+          <mat-label>Merchant</mat-label>
+          <input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchantId">
+          <mat-autocomplete autoActiveFirstOption #merchantAuto="matAutocomplete">
             @for (merchant of merchants(); track merchant.id) {
-            <option [value]="merchant.id">{{ merchant.name }}</option>
+              <mat-option [value]="merchant.name">{{ merchant.name }}</mat-option>
             }
-        </select>
+          </mat-autocomplete>
+        </mat-form-field>
       </div>
 
-      <div>
-        Note (optional): <input type="text" [formField]="expenseForm.note">
-      </div>
+      <div class="add-expense-additional">
+        <mat-form-field appearance="outline">
+          <mat-label>Tags</mat-label>
+          <mat-select disableRipple multiple [formField]="expenseForm.tags">
+            @for (tag of tags(); track tag.id) {
+              <mat-option [value]="tag.name">{{ tag.name }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
 
-      <div>Tags</div>
-
-      <div class="card-footer">
-        <button>Save</button>
+        <mat-form-field appearance="outline" class="add-expense-note">
+          <mat-label>Note</mat-label>
+          <textarea rows="1" matInput></textarea>
+        </mat-form-field>
       </div>
     </mat-card-content>
+
+    <mat-card-footer class="add-expense-footer">
+      <mat-card-actions>
+        <button matButton="tonal" disabled="true">Save</button>
+      </mat-card-actions>
+    </mat-card-footer>
   </mat-card>
-
-
-
-<!--  <app-card [header]="'Add Expense'">-->
-<!--    <div class="add-expense-body">-->
-<!--      <div>-->
-<!--        Date: <input type="date" [formField]="expenseForm.date">-->
-<!--      </div>-->
-
-<!--      <div>-->
-<!--        Cents (required):-->
-<!--        <input type="number" placeholder="Enter amount" [formField]="expenseForm.amount">-->
-<!--      </div>-->
-
-<!--      <div>-->
-<!--        Category (required):-->
-<!--        <select [formField]="expenseForm.categoryId">-->
-<!--          <option value="">Select a category</option>-->
-<!--          @for (category of categories(); track category.id) {-->
-<!--            <option [value]="category.id">{{ category.name }}</option>-->
-<!--          }-->
-<!--        </select>-->
-<!--      </div>-->
-<!--    </div>-->
-
-<!--    <div>-->
-<!--      Merchant (optional):-->
-<!--      <select [formField]="expenseForm.merchantId">-->
-<!--        <option value="">Select a merchant</option>-->
-<!--        @for (merchant of merchants(); track merchant.id) {-->
-<!--          <option [value]="merchant.id">{{ merchant.name }}</option>-->
-<!--        }-->
-<!--      </select>-->
-<!--    </div>-->
-
-<!--    <div>-->
-<!--      Note (optional): <input type="text" [formField]="expenseForm.note">-->
-<!--    </div>-->
-
-<!--    <div>Tags</div>-->
-
-<!--    <div class="card-footer">-->
-<!--      <button>Save</button>-->
-<!--    </div>-->
-<!--  </app-card>-->
 </div>

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

@@ -1,5 +1,23 @@
-//.add-expense-body {
-//  display: flex;
-//  justify-content: flex-start;
-//  gap: 0.5rem;
-//}
+.add-expense-header {
+  padding-bottom: 1rem;
+}
+
+.add-expense-footer {
+  padding: 0 0 1rem 0.5rem;
+}
+
+.add-expense-dropdowns {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.add-expense-additional {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.add-expense-note {
+  width: 100%;
+}

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

@@ -1,9 +1,16 @@
 import { Component, computed, signal } from '@angular/core';
-import {Category, CategoryService} from '../../services/category.service';
-import {Merchant, MerchantService} from '../../services/merchant.service';
-import { Tag } from '../../services/tag.service';
+import { CategoryService } from '../../services/category.service';
+import { MerchantService } from '../../services/merchant.service';
+import { Tag, TagService } from '../../services/tag.service';
 import { form, FormField } from '@angular/forms/signals';
-import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { provideNativeDateAdapter } from '@angular/material/core';
 
 interface AddExpenseForm {
   date: Date,
@@ -16,19 +23,15 @@ interface AddExpenseForm {
 
 @Component({
   selector: 'app-add-expense',
-  imports: [
-    FormField,
-    MatCard,
-    MatCardHeader,
-    MatCardTitle,
-    MatCardContent
-  ],
+  imports: [MatDatepickerModule, MatFormFieldModule, MatInputModule, MatCardModule, MatAutocompleteModule, MatSelectModule, MatButtonModule, FormField],
+  providers: [provideNativeDateAdapter()],
   templateUrl: './add-expense.component.html',
   styleUrl: './add-expense.component.scss',
 })
 export class AddExpenseComponent {
   protected categories = computed(() => this.categoryService.categories());
   protected merchants = computed(() => this.merchantService.merchants());
+  protected tags = computed(() => this.tagService.tags());
   private addExpenseModel = signal<AddExpenseForm>({
     date: new Date(),
     amount: '',
@@ -40,5 +43,6 @@ export class AddExpenseComponent {
   public expenseForm = form(this.addExpenseModel);
 
   public constructor(private readonly categoryService: CategoryService,
-                     private readonly merchantService: MerchantService) { }
+                     private readonly merchantService: MerchantService,
+                     private readonly tagService: TagService) { }
 }

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

@@ -1,37 +1,12 @@
 import { Component, computed } from '@angular/core';
 import { ExpenseService } from '../../services/expense.service';
-import {
-  MatCell,
-  MatCellDef,
-  MatColumnDef,
-  MatHeaderCell,
-  MatHeaderCellDef,
-  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
-  MatTable
-} from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
 import { CurrencyPipe, DatePipe } from '@angular/common';
-import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
   selector: 'app-expense-list',
-  imports: [
-    MatTable,
-    MatColumnDef,
-    MatHeaderCell,
-    MatHeaderCellDef,
-    DatePipe,
-    MatCell,
-    MatCellDef,
-    CurrencyPipe,
-    MatHeaderRow,
-    MatHeaderRowDef,
-    MatRow,
-    MatRowDef,
-    MatCard,
-    MatCardHeader,
-    MatCardTitle,
-    MatCardContent
-  ],
+  imports: [MatTableModule, MatCardModule, DatePipe, CurrencyPipe],
   templateUrl: './expense-list.component.html',
   styleUrl: './expense-list.component.scss',
 })