brewman/overlord/src/app/receipt/receipt.component.html

114 lines
5.2 KiB
HTML
Raw Normal View History

<mat-card>
<mat-card-title-group>
<mat-card-title>Receipt</mat-card-title>
</mat-card-title-group>
<mat-card-content>
<form [formGroup]="form" fxLayout="column">
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
fxLayoutGap.lt-md="0px">
<mat-form-field fxFlex="40">
<input matInput [matDatepicker]="date" (focus)="date.open()" placeholder="Date" formControlName="date"
autocomplete="off">
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
<mat-datepicker #date></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex="40">
<mat-select formControlName="receiptAccount">
<mat-option *ngFor="let account of receiptAccounts" [value]="account.id">
{{ account.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="20">
<mat-label>Receipt Amount</mat-label>
<span matPrefix></span>
<input type="text" matInput formControlName="receiptAmount">
</mat-form-field>
</div>
<div formGroupName="addRow" fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column"
fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<mat-form-field fxFlex="55">
<input type="text" matInput placeholder="Account" #accountElement [matAutocomplete]="auto"
formControlName="account" autocomplete="off">
<mat-hint *ngIf="accBal">
Balance as on Date: <strong>{{accBal.date | currency:'INR' | accounting}}</strong> /
Final balance: <strong>{{accBal.total | currency:'INR' | accounting}}</strong>
</mat-hint>
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption [displayWith]="displayAccount"
(optionSelected)="accountSelected($event)">
<mat-option *ngFor="let account of accounts | async" [value]="account">{{account.name}}</mat-option>
</mat-autocomplete>
<mat-form-field fxFlex="25">
<mat-label>Amount</mat-label>
<span matPrefix></span>
<input type="text" matInput placeholder="Amount" formControlName="amount" autocomplete="off">
</mat-form-field>
<button mat-raised-button color="primary" (click)="addRow()" fxFlex="20">Add</button>
</div>
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
<!-- Account Column -->
<ng-container matColumnDef="account">
<mat-header-cell *matHeaderCellDef>Account</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.account.name}}</mat-cell>
</ng-container>
<!-- Amount Column -->
<ng-container matColumnDef="amount">
<mat-header-cell *matHeaderCellDef class="right">Amount</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{row.amount | currency:'INR'}}</mat-cell>
</ng-container>
<!-- Action Column -->
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef class="center">Action</mat-header-cell>
<mat-cell *matCellDef="let row" class="center">
<button mat-icon-button (click)="editRow(row)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="deleteRow(row)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-form-field>
<mat-label>Narration</mat-label>
<textarea matInput placeholder="Narration" formControlName="narration"></textarea>
</mat-form-field>
<div fxLayout="row" fxLayoutGap="0.5%" fxLayoutAlign="center">
<div class="img-container" fxFlex="20%" *ngFor="let item of voucher.files">
<img [src]="item.thumbnail" (click)="zoomImage(item)">
<button mat-icon-button class="overlay" (click)="deleteImage(item)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
<input type="file" multiple accept="image/*" (change)="detectFiles($event)">
</form>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
{{(voucher.id) ? 'Update' : 'Save'}}
</button>
<button mat-raised-button (click)="post()" *ngIf="voucher.id"
[disabled]="voucher.posted || auth.user.perms.indexOf('Post Vouchers') === -1">
{{(voucher.posted) ? 'Posted' : 'Post'}}
</button>
<button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
Delete
</button>
</mat-card-actions>
<mat-card-subtitle *ngIf="voucher.id">
Created on <strong>{{voucher.creationDate | localTime}}</strong> and
Last Edited on <strong>{{voucher.lastEditDate | localTime}}</strong>
by <strong>{{voucher.user.name}}</strong>. {{(voucher.poster) ? 'Posted by ' + voucher.poster : ''}}
</mat-card-subtitle>
</mat-card>