Fix: The dialogs were not rendering properly.

The select table dialog was long and narrow.
The billtype was selection was also not showing properly.
This commit is contained in:
Amritanshu Agrawal 2023-03-13 21:22:07 +05:30
parent 3af0b0ac96
commit 245937ecf2
4 changed files with 48 additions and 44 deletions

View File

@ -1,29 +1,32 @@
<div class="flex flex-row flex-wrap -mr-5 -mb-5"> <h2 mat-dialog-title>Bill Type</h2>
<mat-card <mat-dialog-content>
class="flex flex-col square-button mr-5, mb-5" <div class="flex flex-row flex-wrap -mr-5 -mb-5">
matRipple <mat-card
(click)="select('REGULAR_BILL')" class="flex flex-col square-button mr-5, mb-5"
[class.selected]="selected === 'REGULAR_BILL'" matRipple
> (click)="select('REGULAR_BILL')"
<h3 class="item-name">Regular</h3> [class.selected]="selected === 'REGULAR_BILL'"
</mat-card> >
<mat-card <h3 class="item-name">Regular</h3>
class="flex flex-col square-button mr-5, mb-5" </mat-card>
matRipple <mat-card
(click)="select('STAFF')" class="flex flex-col square-button mr-5, mb-5"
[class.selected]="selected === 'STAFF'" matRipple
> (click)="select('STAFF')"
<h3 class="item-name">Staff</h3> [class.selected]="selected === 'STAFF'"
</mat-card> >
<mat-card <h3 class="item-name">Staff</h3>
class="flex flex-col square-button mr-5, mb-5" </mat-card>
matRipple <mat-card
(click)="select('NO_CHARGE')" class="flex flex-col square-button mr-5, mb-5"
[class.selected]="selected === 'NO_CHARGE'" matRipple
> (click)="select('NO_CHARGE')"
<h3 class="item-name">No Charge</h3> [class.selected]="selected === 'NO_CHARGE'"
</mat-card> >
</div> <h3 class="item-name">No Charge</h3>
</mat-card>
</div>
</mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button [mat-dialog-close]="false">Cancel</button> <button mat-button [mat-dialog-close]="false">Cancel</button>
<button mat-button [mat-dialog-close]="selectedVal">Done</button> <button mat-button [mat-dialog-close]="selectedVal">Done</button>

View File

@ -1,4 +1,4 @@
<h1 mat-dialog-title>Customer</h1> <h2 mat-dialog-title>Customer</h2>
<mat-dialog-content> <mat-dialog-content>
<form [formGroup]="form" class="flex flex-col"> <form [formGroup]="form" class="flex flex-col">
<div class="flex flex-row justify-around content-start items-start"> <div class="flex flex-row justify-around content-start items-start">

View File

@ -350,7 +350,6 @@ export class SalesHomeComponent {
showChooseTableDialog(canChooseRunning: boolean): Observable<Table | undefined | null> { showChooseTableDialog(canChooseRunning: boolean): Observable<Table | undefined | null> {
return this.dialog return this.dialog
.open(TablesDialogComponent, { .open(TablesDialogComponent, {
// width: '750px',
data: { data: {
list: this.tableService.running(), list: this.tableService.running(),
canChooseRunning, canChooseRunning,

View File

@ -1,20 +1,22 @@
<h2 mat-dialog-title>Tables</h2> <h2 mat-dialog-title>Tables</h2>
<mat-dialog-content class="flex flex-row flex-wrap -mr-5 -mb-5"> <mat-dialog-content>
<mat-card <div class="flex flex-row flex-wrap -mr-5 -mb-5">
class="flex flex-col square-button mr-5, mb-5" <mat-card
matRipple class="flex flex-col square-button mr-5, mb-5"
*ngFor="let table of list" matRipple
(click)="select(table)" *ngFor="let table of list"
[class.running]="table.status === 'running'" (click)="select(table)"
[class.printed]="table.status === 'printed'" [class.running]="table.status === 'running'"
[class.selected]="table === selected" [class.printed]="table.status === 'printed'"
> [class.selected]="table === selected"
<h3 class="item-name">{{ table.name }}</h3> >
<mat-card-subtitle class="center">{{ table.guest }}</mat-card-subtitle> <h3 class="item-name">{{ table.name }}</h3>
<span class="center">{{ table.pax ?? 0 }} / {{ table.seats }} Seats</span> <mat-card-subtitle class="center">{{ table.guest }}</mat-card-subtitle>
<span class="center" *ngIf="table.date">{{ table.date }}</span> <span class="center">{{ table.pax ?? 0 }} / {{ table.seats }} Seats</span>
<span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span> <span class="center" *ngIf="table.date">{{ table.date }}</span>
</mat-card> <span class="center" *ngIf="table.amount">{{ table.amount | currency : 'INR' }}</span>
</mat-card>
</div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">
<button mat-button [mat-dialog-close]="false">Cancel</button> <button mat-button [mat-dialog-close]="false">Cancel</button>