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

added material design components

Browse source
This commit is contained in:
Joe Arndt 2026-02-13 22:41:01 -06:00
parent 8bf9875e8e
commit 17531f7c29
16 changed files with 236 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,44 +1,96 @@
<div class="add-expense-container">
<app-card [header]="'Add Expense'">
<div class="add-expense-body">
<div>
Date: <input type="date" [formField]="expenseForm.date">
<mat-card appearance="outlined">
<mat-card-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>
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>
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>
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>
<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>
Note (optional): <input type="text" [formField]="expenseForm.note">
</div>
<div>Tags</div>
<div>Tags</div>
<div class="card-footer">
<button>Save</button>
</div>
</mat-card-content>
</mat-card>
<div class="card-footer">
<button>Save</button>
</div>
</app-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>