joe/common-cents-web
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

rough migration to material design inputs

Browse source
This commit is contained in:
Joe Arndt 2026-02-13 23:50:37 -06:00
parent 17531f7c29
commit 2c0a8da60d
4 changed files with 93 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

127
src/app/components/add-expense/add-expense.component.html
View file

@ -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>
</mat-autocomplete>
</mat-form-field>
<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) {
<mat-option [value]="merchant.name">{{ merchant.name }}</mat-option>
}
</mat-autocomplete>
</mat-form-field>
</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 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>
Note (optional): <input type="text" [formField]="expenseForm.note">
</div>
<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>