77 lines
4.1 KiB
HTML
77 lines
4.1 KiB
HTML
<mat-card class="defaultCard">
|
|
<mat-card-header>
|
|
<mat-card-title>
|
|
{{account?.description}} ({{account?.id}})
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<mat-accordion>
|
|
<mat-expansion-panel (opened)="collapse = true"
|
|
(closed)="collapse = false">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title *ngIf="!collapse">
|
|
Kontoübersicht, Saldo: {{saldo?.saldo | number:'1.2-2'}} €
|
|
</mat-panel-title>
|
|
<mat-panel-description>
|
|
</mat-panel-description>
|
|
</mat-expansion-panel-header>
|
|
<div id="firstBlock">
|
|
<form (ngSubmit)="addAccountEntry()">
|
|
<mat-form-field appearance="outline" id="addEntryfield">
|
|
<mat-label>Datum</mat-label>
|
|
<input matInput name="createdAt" [(ngModel)]="newAccountEntry.created_at" [matDatepicker]="createdAtPicker"/>
|
|
<mat-datepicker-toggle matSuffix [for]="createdAtPicker"></mat-datepicker-toggle>
|
|
<mat-datepicker #createdAtPicker></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Kategorie</mat-label>
|
|
<mat-select [(ngModel)]="newAccountEntry.account_entry_category" name="category" disabled="shallBeRentPayment">
|
|
<mat-option *ngFor="let p of accountEntryCategories" [value]="p.id">{{p.description}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Betrag (€)</mat-label>
|
|
<input matInput type="number" name="amount" [(ngModel)]="newAccountEntry.amount"/>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<mat-label>Beschreibung</mat-label>
|
|
<input matInput name="description" [(ngModel)]="newAccountEntry.description"/>
|
|
</mat-form-field>
|
|
<button #addAccountEntryButton type="submit" mat-raised-button color="primary">Buchung speichern</button>
|
|
</form>
|
|
</div>
|
|
<div class="large">
|
|
Saldo: {{saldo?.saldo | number:'1.2-2'}} €
|
|
</div>
|
|
<div id="secondBlock">
|
|
<table mat-table [dataSource]="accountEntriesDataSource" #zftable>
|
|
<ng-container matColumnDef="createdAt">
|
|
<th mat-header-cell *matHeaderCellDef>Datum</th>
|
|
<td mat-cell *matCellDef="let element">{{element.rawAccountEntry.created_at | date}}</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="description">
|
|
<th mat-header-cell *matHeaderCellDef>Beschreibung</th>
|
|
<td mat-cell *matCellDef="let element">{{element.rawAccountEntry.description}}</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="amount">
|
|
<th mat-header-cell *matHeaderCellDef>Betrag</th>
|
|
<td mat-cell *matCellDef="let element" class="rightaligned">{{element.rawAccountEntry.amount | number:'1.2-2'}} €</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="category">
|
|
<th mat-header-cell *matHeaderCellDef>Kategorie</th>
|
|
<td mat-cell *matCellDef="let element">{{element.accountEntryCategory}}</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="overhead_relevant">
|
|
<th mat-header-cell *matHeaderCellDef>BK relevant</th>
|
|
<td mat-cell *matCellDef="let element">{{element.overheadRelevant}}</td>
|
|
</ng-container>
|
|
<tr mat-header-row *matHeaderRowDef="accountEntriesDisplayedColumns"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: accountEntriesDisplayedColumns;"></tr>
|
|
</table>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
|
|
</mat-card-content>
|
|
</mat-card>
|