Files
barker/bookie/src/app/sales/bills/bills.component.html
tanshu 6c83c74424 Chore: In overlord / sale / bill.service now the BillViewItem is just a view item
The data is kept as the original bill object and this view generated on every change. It has no sanctity.

To deal with the challenges of Selection of items in the bill.component.html created a bill selection item.
This is converted to string while checking else the selection model fails.

Feature: It now checks if Happy Hour items have equivalent regular items in each kot.
Feature: Discount won't apply to happy hour items.
Checks for both are both in front end and back end.
2020-12-16 22:34:41 +05:30

186 lines
6.9 KiB
HTML

<mat-card>
<mat-card-title-group>
<mat-card-title>Bill</mat-card-title>
</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.isOldKot"
(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 ? toggle(row) : null"
[checked]="isSelected(row)"
>
</mat-checkbox>
</mat-cell>
</ng-container>
<!-- Info Column -->
<ng-container matColumnDef="info">
<mat-cell *matCellDef="let row" [class.blue800]="row.isNewKot">
<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]="rowQuantityDisabled(row)"
*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.isKot && !row.id"
*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.isOldKot"
[class.blue800]="row.isNewKot"
[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>