barker/bookie/src/app/sales/bills/bills.component.html

129 lines
6.5 KiB
HTML

<mat-card>
<mat-card-title-group>
<mat-card-title>Bill</mat-card-title>
<a mat-button [routerLink]="['/']">
<mat-icon>home</mat-icon>
Main Menu
</a>
</mat-card-title-group>
<mat-card-content>
<table mat-table #table [dataSource]="dataSource" aria-label="Elements" class="mat-elevation-z8">
<ng-container matColumnDef="bill-no-title">
<mat-header-cell *matHeaderCellDef class="deep-purple-200 bold">Bill / KOT number</mat-header-cell>
</ng-container>
<ng-container matColumnDef="bill-no-details">
<mat-header-cell *matHeaderCellDef class="deep-purple-200 bold right-align">{{ bs.bill.billId }} /
K-{{ bs.bill.kotId }}</mat-header-cell>
</ng-container>
<ng-container matColumnDef="time-title">
<mat-header-cell *matHeaderCellDef class="deep-purple-100 bold">Time / Start Time / Last Edit Time
</mat-header-cell>
</ng-container>
<ng-container matColumnDef="time-details">
<mat-header-cell *matHeaderCellDef class="deep-purple-100 bold right-align"><span
[matTooltip]="bs.bill.dateTip">{{ bs.bill.date }}</span>&nbsp;/&nbsp;<span
[matTooltip]="bs.bill.creationDateTip">{{ bs.bill.creationDate}}</span>&nbsp;/&nbsp;<span
[matTooltip]="bs.bill.lastEditDateTip">{{ bs.bill.lastEditDate }}</span></mat-header-cell>
</ng-container>
<ng-container matColumnDef="table-title">
<mat-header-cell *matHeaderCellDef class="deep-purple-50 bold">Table / Pax / Customer</mat-header-cell>
</ng-container>
<ng-container matColumnDef="table-details">
<mat-header-cell *matHeaderCellDef class="deep-purple-50 bold right-align">{{ bs.bill.table.name }}
/ {{ bs.bill.pax }} / {{ bs.bill.customer.name }}</mat-header-cell>
</ng-container>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<mat-cell *matCellDef="let row">
<mat-checkbox *ngIf="row.oldKot"
(change)="$event ? masterToggle(row) : null"
[checked]="bs.selection.hasValue() && isAllSelected(row)"
[indeterminate]="isAnySelected(row)">
</mat-checkbox>
<mat-checkbox *ngIf="!row.isKot" [disabled]="!row.id"
(click)="$event.stopPropagation()"
(change)="$event ? bs.selection.toggle(row) : null"
[checked]="bs.selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<!-- Info Column -->
<ng-container matColumnDef="info">
<mat-cell *matCellDef="let row" [class.blue800]="row.newKot">
<span>
{{row.info}}
</span>
<ul>
<li *ngFor="let m of row.modifiers">{{m.name}}</li>
</ul>
</mat-cell>
</ng-container>
<!-- Quantity Column -->
<ng-container matColumnDef="quantity">
<mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
<mat-cell *matCellDef="let row" class="right-align">
<button mat-icon-button (click)="subtractOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
<mat-icon class="del">indeterminate_check_box</mat-icon>
</button>
<button mat-icon-button (click)="quantity(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
{{row.quantity}}
</button>
<button mat-icon-button (click)="addOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
<mat-icon class="del">control_point</mat-icon>
</button>
<button mat-icon-button (click)="removeItem(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
<mat-icon class="del">cancel</mat-icon>
</button>
<button mat-icon-button (click)="modifier(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
<mat-icon class="del">assignment</mat-icon>
</button>
<button mat-icon-button (click)="moveKot(row)" [disabled]="row.newKot" *ngIf="row.isKot">
<mat-icon class="del">open_in_new</mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="net-title">
<mat-footer-cell *matFooterCellDef class="grey300 bold">Net</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="net-amount">
<mat-footer-cell *matFooterCellDef
class="grey300 bold right-align">{{ bs.netAmount | async | currency: 'INR' }}</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="discount-title">
<mat-footer-cell *matFooterCellDef class="grey500 bold">Discount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="discount-amount">
<mat-footer-cell *matFooterCellDef
class="grey500 bold right-align">{{ bs.discountAmount | async | currency: 'INR' }}</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="tax-title">
<mat-footer-cell *matFooterCellDef class="grey700 bold">Tax</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="tax-amount">
<mat-footer-cell *matFooterCellDef
class="grey700 bold right-align">{{ bs.taxAmount | async | currency: 'INR' }}</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="amount-title">
<mat-footer-cell *matFooterCellDef class="grey900">Amount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="amount-amount">
<mat-footer-cell *matFooterCellDef
class="grey900 bold right-align">{{ bs.amount | async | currency: 'INR' }}</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="['bill-no-title', 'bill-no-details']"></mat-header-row>
<mat-header-row *matHeaderRowDef="['time-title', 'time-details']"></mat-header-row>
<mat-header-row *matHeaderRowDef="['table-title', 'table-details']"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" [class.blue400]="row.oldKot"
[class.blue800]="row.newKot"
[class.red100]="row.isPrinted"></mat-row>
<mat-footer-row *matFooterRowDef="['net-title', 'net-amount']"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
</table>
</mat-card-content>
</mat-card>
<router-outlet></router-outlet>