tanshu
1350870f9e
Added prettier and also prettied all the typescript files using prettier ESLint is using the AirBnB rules which are the most strict to lint the files.
101 lines
3.6 KiB
HTML
101 lines
3.6 KiB
HTML
<mat-card>
|
|
<mat-card-title-group>
|
|
<mat-card-title>Purchases</mat-card-title>
|
|
</mat-card-title-group>
|
|
<mat-card-content>
|
|
<form [formGroup]="form" fxLayout="column">
|
|
<div
|
|
fxLayout="row"
|
|
fxLayout.lt-md="column"
|
|
fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px"
|
|
fxLayoutAlign="space-around start"
|
|
>
|
|
<mat-form-field fxFlex="40">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="startDate"
|
|
(focus)="startDate.open()"
|
|
placeholder="Start Date"
|
|
formControlName="startDate"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #startDate></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="40">
|
|
<input
|
|
matInput
|
|
[matDatepicker]="finishDate"
|
|
(focus)="finishDate.open()"
|
|
placeholder="Finish Date"
|
|
formControlName="finishDate"
|
|
autocomplete="off"
|
|
/>
|
|
<mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
|
|
<mat-datepicker #finishDate></mat-datepicker>
|
|
</mat-form-field>
|
|
<button fxFlex="20" mat-raised-button color="primary" (click)="show()">Show</button>
|
|
</div>
|
|
</form>
|
|
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
|
|
<!-- Product Column -->
|
|
<ng-container matColumnDef="product">
|
|
<mat-header-cell *matHeaderCellDef>Product</mat-header-cell>
|
|
<mat-cell *matCellDef="let row"
|
|
><a
|
|
[routerLink]="row.url"
|
|
[queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }"
|
|
>{{ row.name }}</a
|
|
></mat-cell
|
|
>
|
|
<mat-footer-cell *matFooterCellDef>
|
|
{{ info.footer?.name }}
|
|
</mat-footer-cell>
|
|
</ng-container>
|
|
|
|
<!-- Quantity Column -->
|
|
<ng-container matColumnDef="quantity">
|
|
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
|
|
<mat-cell *matCellDef="let row" class="right">{{
|
|
row.quantity | number: '1.2-2'
|
|
}}</mat-cell>
|
|
<mat-footer-cell *matFooterCellDef class="right">
|
|
{{ info.footer?.quantity | number: '1.2-2' }}
|
|
</mat-footer-cell>
|
|
</ng-container>
|
|
|
|
<!-- Rate Column -->
|
|
<ng-container matColumnDef="rate">
|
|
<mat-header-cell *matHeaderCellDef class="right">Rate</mat-header-cell>
|
|
<mat-cell *matCellDef="let row" class="right">{{ row.rate | currency: 'INR' }}</mat-cell>
|
|
<mat-footer-cell *matFooterCellDef class="right">
|
|
{{ info.footer?.rate | currency: 'INR' }}
|
|
</mat-footer-cell>
|
|
</ng-container>
|
|
|
|
<!-- Amount Column -->
|
|
<ng-container matColumnDef="amount">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header class="right">Amount</mat-header-cell>
|
|
<mat-cell *matCellDef="let row" class="right">{{ row.amount | currency: 'INR' }}</mat-cell>
|
|
<mat-footer-cell *matFooterCellDef class="right">
|
|
{{ info.footer?.amount | currency: 'INR' }}
|
|
</mat-footer-cell>
|
|
</ng-container>
|
|
|
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
|
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
|
|
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
|
</mat-table>
|
|
|
|
<mat-paginator
|
|
#paginator
|
|
[length]="dataSource.data.length"
|
|
[pageIndex]="0"
|
|
[pageSize]="50"
|
|
[pageSizeOptions]="[25, 50, 100, 250, 300]"
|
|
>
|
|
</mat-paginator>
|
|
</mat-card-content>
|
|
</mat-card>
|