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

add-expense-mobile-friendly

Browse source
This commit is contained in:
Joe Arndt 2026-02-14 21:51:33 -06:00
parent ca88144629
commit 23132741a9
4 changed files with 81 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,71 +1,56 @@
<div class="add-expense-container">
<mat-card appearance="outlined">
<mat-card-header class="add-expense-header">
<mat-card-header>
<mat-card-title>Track new Expense</mat-card-title>
<button matButton="tonal" [disabled]="!enableSaveButton()" (click)="saveClick()">Save</button>
</mat-card-header>
<mat-card-content>
<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>
<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>
<mat-form-field appearance="outline">
<mat-label>Cents</mat-label>
<input type="number" matInput [formField]="expenseForm.cents">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Cents</mat-label>
<input type="number" matInput [formField]="expenseForm.cents">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.category" [value]="expenseForm.category()">
<mat-autocomplete [displayWith]="display" autoActiveFirstOption #categoryAuto="matAutocomplete">
@for (category of categories(); track category.id) {
<mat-option [value]="category">{{ category.name }}</mat-option>
}
</mat-autocomplete>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<input type="text" matInput [matAutocomplete]="categoryAuto" [formField]="expenseForm.category" [value]="expenseForm.category()">
<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>
<mat-form-field appearance="outline">
<mat-label>Merchant</mat-label>
<input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchant">
<mat-autocomplete [displayWith]="display" autoActiveFirstOption #merchantAuto="matAutocomplete">
@for (merchant of merchants(); track merchant.id) {
<mat-option [value]="merchant">{{ merchant.name }}</mat-option>
}
</mat-autocomplete>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
<mat-label>Merchant</mat-label>
<input type="text" matInput [matAutocomplete]="merchantAuto" [formField]="expenseForm.merchant">
<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 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">{{ tag.name }}</mat-option>
}
</mat-select>
</mat-form-field>
<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">{{ tag.name }}</mat-option>
}
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="add-expense-note">
<mat-label>Note</mat-label>
<textarea rows="1" matInput [formField]="expenseForm.note"></textarea>
</mat-form-field>
</div>
<mat-form-field appearance="outline">
<mat-label>Note</mat-label>
<textarea rows="1" matInput [formField]="expenseForm.note"></textarea>
</mat-form-field>
</mat-card-content>
<mat-card-footer class="add-expense-footer">
<mat-card-actions>
<button matButton="tonal" [disabled]="!enableSaveButton()" (click)="saveClick()">Save</button>
</mat-card-actions>
@if (errorSaving()) {
<mat-error>
{{ errorSaving() }}
</mat-error>
}
</mat-card-footer>
</mat-card>
</div>