Chore: Removed Mat Card from everywhere.
Chore: Removed the Toaster Service. Chore: Updated to Material Theme 3
This commit is contained in:
@ -1,174 +1,165 @@
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Bill</mat-card-title>
|
||||
</mat-card-header>
|
||||
<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
|
||||
<span>Bill</span>
|
||||
|
||||
<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
|
||||
> / <span [matTooltip]="bs.bill.creationDateTip">{{ bs.bill.creationDate }}</span
|
||||
> / <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"
|
||||
><button>Table: {{ bs.bill.table.name }}</button> /
|
||||
<button mat-button (click)="choosePax()">{{ bs.bill.pax }} Pax</button> /
|
||||
<button mat-button (click)="chooseCustomer()">
|
||||
{{ bs.bill.customer?.name ?? 'Customer' }}
|
||||
</button></mat-header-cell
|
||||
>
|
||||
</ng-container>
|
||||
|
||||
<!-- Checkbox Column -->
|
||||
<ng-container matColumnDef="select">
|
||||
<mat-cell *matCellDef="let row">
|
||||
@if (row.isOldKot) {
|
||||
<mat-checkbox
|
||||
(change)="$event ? masterToggle(row) : null"
|
||||
[checked]="bs.selection.hasValue() && isAllSelected(row)"
|
||||
[indeterminate]="isAnySelected(row)"
|
||||
>
|
||||
</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
|
||||
> / <span [matTooltip]="bs.bill.creationDateTip">{{ bs.bill.creationDate }}</span
|
||||
> / <span [matTooltip]="bs.bill.lastEditDateTip">{{ bs.bill.lastEditDate }}</span></mat-header-cell
|
||||
</mat-checkbox>
|
||||
}
|
||||
@if (!row.isKot) {
|
||||
<mat-checkbox
|
||||
[disabled]="!row.id"
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? toggle(row) : null"
|
||||
[checked]="isSelected(row)"
|
||||
>
|
||||
</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"
|
||||
><button>Table: {{ bs.bill.table.name }}</button> /
|
||||
<button mat-button (click)="choosePax()">{{ bs.bill.pax }} Pax</button> /
|
||||
<button mat-button (click)="chooseCustomer()">
|
||||
{{ bs.bill.customer?.name ?? 'Customer' }}
|
||||
</button></mat-header-cell
|
||||
>
|
||||
</ng-container>
|
||||
</mat-checkbox>
|
||||
}
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Info Column -->
|
||||
<ng-container matColumnDef="info">
|
||||
<mat-cell *matCellDef="let row">
|
||||
<span>
|
||||
{{ row.info }}
|
||||
</span>
|
||||
<ul>
|
||||
@for (m of row.modifiers; track m.id) {
|
||||
<li>{{ 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">
|
||||
@if (!row.isKot) {
|
||||
<button mat-icon-button class="small-icon-button" (click)="subtractOne(row)" [disabled]="row.isPrinted">
|
||||
<mat-icon>indeterminate_check_box</mat-icon>
|
||||
</button>
|
||||
}
|
||||
@if (!row.isKot) {
|
||||
<button mat-icon-button class="small-icon-button" (click)="quantity(row)" [disabled]="rowQuantityDisabled(row)">
|
||||
{{ row.quantity }}
|
||||
</button>
|
||||
}
|
||||
@if (!row.isKot) {
|
||||
<button mat-icon-button class="small-icon-button" (click)="addOne(row)" [disabled]="row.isPrinted">
|
||||
<mat-icon>control_point</mat-icon>
|
||||
</button>
|
||||
}
|
||||
@if (!row.isKot) {
|
||||
<button mat-icon-button class="small-icon-button" (click)="modifier(row)" [disabled]="row.isPrinted">
|
||||
<mat-icon>assignment</mat-icon>
|
||||
</button>
|
||||
}
|
||||
@if (row.isKot) {
|
||||
<button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId">
|
||||
<mat-icon class="del">open_in_new</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</mat-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.old-kot]="row.isOldKot"
|
||||
[class.new-kot]="row.isNewKot"
|
||||
[class.is-printed]="row.isPrinted && !row.isHappyHour"
|
||||
[class.hh-new]="row.isHappyHour && !row.isPrinted"
|
||||
[class.hh-printed]="row.isPrinted && row.isHappyHour"
|
||||
></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="['gross-title', 'gross-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="gross-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Gross</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="gross-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.grossAmount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Checkbox Column -->
|
||||
<ng-container matColumnDef="select">
|
||||
<mat-cell *matCellDef="let row">
|
||||
@if (row.isOldKot) {
|
||||
<mat-checkbox
|
||||
(change)="$event ? masterToggle(row) : null"
|
||||
[checked]="bs.selection.hasValue() && isAllSelected(row)"
|
||||
[indeterminate]="isAnySelected(row)"
|
||||
>
|
||||
</mat-checkbox>
|
||||
}
|
||||
@if (!row.isKot) {
|
||||
<mat-checkbox
|
||||
[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">
|
||||
<span>
|
||||
{{ row.info }}
|
||||
</span>
|
||||
<ul>
|
||||
@for (m of row.modifiers; track m.id) {
|
||||
<li>{{ 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">
|
||||
@if (!row.isKot) {
|
||||
<button mat-icon-button class="small-icon-button" (click)="subtractOne(row)" [disabled]="row.isPrinted">
|
||||
<mat-icon>indeterminate_check_box</mat-icon>
|
||||
</button>
|
||||
}
|
||||
@if (!row.isKot) {
|
||||
<button
|
||||
mat-icon-button
|
||||
class="small-icon-button"
|
||||
(click)="quantity(row)"
|
||||
[disabled]="rowQuantityDisabled(row)"
|
||||
>
|
||||
{{ row.quantity }}
|
||||
</button>
|
||||
}
|
||||
@if (!row.isKot) {
|
||||
<button mat-icon-button class="small-icon-button" (click)="addOne(row)" [disabled]="row.isPrinted">
|
||||
<mat-icon>control_point</mat-icon>
|
||||
</button>
|
||||
}
|
||||
@if (!row.isKot) {
|
||||
<button mat-icon-button class="small-icon-button" (click)="modifier(row)" [disabled]="row.isPrinted">
|
||||
<mat-icon>assignment</mat-icon>
|
||||
</button>
|
||||
}
|
||||
@if (row.isKot) {
|
||||
<button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId">
|
||||
<mat-icon class="del">open_in_new</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</mat-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.old-kot]="row.isOldKot"
|
||||
[class.new-kot]="row.isNewKot"
|
||||
[class.is-printed]="row.isPrinted && !row.isHappyHour"
|
||||
[class.hh-new]="row.isHappyHour && !row.isPrinted"
|
||||
[class.hh-printed]="row.isPrinted && row.isHappyHour"
|
||||
></mat-row>
|
||||
<mat-footer-row *matFooterRowDef="['gross-title', 'gross-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="gross-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Gross</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="gross-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.grossAmount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<mat-footer-row *matFooterRowDef="['hh-title', 'hh-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="hh-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Happy Hour Discount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="hh-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.hhAmount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-footer-row *matFooterRowDef="['hh-title', 'hh-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="hh-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Happy Hour Discount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="hh-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.hhAmount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="discount-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Discount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="discount-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.discountAmount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="discount-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Discount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="discount-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.discountAmount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="tax-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Tax</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="tax-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.taxAmount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="tax-title">
|
||||
<mat-footer-cell *matFooterCellDef class="bold">Tax</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="tax-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.taxAmount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
<mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="amount-title">
|
||||
<mat-footer-cell *matFooterCellDef>Amount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amount-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.amount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
</table>
|
||||
|
||||
<mat-footer-row *matFooterRowDef="['amount-title', 'amount-amount']"></mat-footer-row>
|
||||
<ng-container matColumnDef="amount-title">
|
||||
<mat-footer-cell *matFooterCellDef>Amount</mat-footer-cell>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amount-amount">
|
||||
<mat-footer-cell *matFooterCellDef class="bold right-align">{{
|
||||
bs.amount | async | currency: 'INR'
|
||||
}}</mat-footer-cell>
|
||||
</ng-container>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { AsyncPipe, CurrencyPipe } from '@angular/common';
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
|
||||
@ -15,7 +15,6 @@ import { AuthService } from '../../auth/auth.service';
|
||||
import { BillViewItem } from '../../core/bill-view-item';
|
||||
import { Customer } from '../../core/customer';
|
||||
import { Table } from '../../core/table';
|
||||
import { ToasterService } from '../../core/toaster.service';
|
||||
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
|
||||
import { TableService } from '../../tables/table.service';
|
||||
import { BillService } from '../bill.service';
|
||||
@ -38,7 +37,7 @@ import { VoucherType } from './voucher-type';
|
||||
AsyncPipe,
|
||||
CurrencyPipe,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
|
||||
MatCheckboxModule,
|
||||
MatIconModule,
|
||||
MatTableModule,
|
||||
@ -50,7 +49,7 @@ export class BillsComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private dialog = inject(MatDialog);
|
||||
private toaster = inject(ToasterService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
private auth = inject(AuthService);
|
||||
bs = inject(BillService);
|
||||
private tSer = inject(TableService);
|
||||
@ -273,11 +272,11 @@ export class BillsComponent implements OnInit {
|
||||
)
|
||||
.subscribe({
|
||||
next: () => {
|
||||
this.toaster.show('Success', '');
|
||||
this.snackBar.open('', 'Success');
|
||||
this.router.navigate(['/sales']);
|
||||
},
|
||||
error: (x) => {
|
||||
this.toaster.show('Error', x);
|
||||
this.snackBar.open(x, 'Error');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user