56 lines
2.4 KiB
HTML
56 lines
2.4 KiB
HTML
<div class="add-expense-container">
|
|
<mat-card appearance="outlined">
|
|
<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>
|
|
<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>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]="autocompleteDisplay" autoActiveFirstOption #merchantAuto="matAutocomplete">
|
|
@for (merchant of merchants(); track merchant.id) {
|
|
<mat-option [value]="merchant">{{ merchant.name }}</mat-option>
|
|
}
|
|
</mat-autocomplete>
|
|
</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">
|
|
<mat-label>Note</mat-label>
|
|
<textarea rows="1" matInput [formField]="expenseForm.note"></textarea>
|
|
</mat-form-field>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|