tanshu/barker
1
0
Fork 0
Code Issues 1 Pull Requests Releases 4 Activity

Chore: Moved the formatting to the main style sheet because it was used everywhere.

Browse Source 
Also, moved to sass to get theme colors from the material design library
This commit is contained in:
Amritanshu Agrawal
2023-03-18 23:29:10 +05:30
parent d39712a347
commit 4e4cebf5d4
32 changed files with 367 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
bookie/src/app/sales/bills/bills.component.css
View File

@ -1,77 +0,0 @@
.square-button {
min-width: 150px;
max-width: 150px;
min-height: 150px;
}
.right-align {
display: flex;
justify-content: flex-end;
}
table {
width: 100%;
}
.mat-column-select {
flex: 0 0 60px;
}
.grey900 {
background-color: #1b5e20;
color: #ffffff;
font-size: 1.2em;
}
.grey700 {
background-color: #388e3c;
color: #ffffff;
}
.grey500 {
background-color: #4caf50;
color: #000000;
}
.grey300 {
background-color: #81c784;
color: #000000;
}
.blue400 {
background-color: #42a5f5;
color: #000000;
}
.blue800 {
background-color: #1565c0;
color: #ffffff;
}
.red100 {
background-color: #ffcdd2;
color: #000000;
}
.deep-purple-50 {
background-color: #ede7f6;
color: #000000;
}
.deep-purple-100 {
background-color: #d1c4e9;
color: #000000;
}
.deep-purple-200 {
background-color: #b39ddb;
color: #000000;
}
.yellow300 {
background-color: #fff176;
}
.yellow-for-hh-printed {
background-color: #f7ca18;
}

136
bookie/src/app/sales/bills/bills.component.html
View File

@ -72,83 +72,107 @@
<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
mat-icon-button
class="small-icon-button"
(click)="subtractOne(row)"
[disabled]="row.isPrinted"
*ngIf="!row.isKot"
>
<mat-icon>indeterminate_check_box</mat-icon>
</button>
<button mat-icon-button (click)="quantity(row)" [disabled]="rowQuantityDisabled(row)" *ngIf="!row.isKot">
<button
mat-icon-button
class="small-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
mat-icon-button
class="small-icon-button"
(click)="addOne(row)"
[disabled]="row.isPrinted"
*ngIf="!row.isKot"
>
<mat-icon>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
mat-icon-button
class="small-icon-button"
(click)="modifier(row)"
[disabled]="row.isPrinted"
*ngIf="!row.isKot"
>
<mat-icon>assignment</mat-icon>
</button>
<button mat-icon-button (click)="moveKot(row)" [disabled]="row.isKot && !row.kotId" *ngIf="row.isKot">
<mat-icon class="del">open_in_new</mat-icon>
</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="gross-title">
<mat-footer-cell *matFooterCellDef class="grey300 bold">Gross</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="gross-amount">
<mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
bs.grossAmount | async | currency : 'INR'
}}</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="hh-title">
<mat-footer-cell *matFooterCellDef class="grey300 bold">Happy Hour Discount</mat-footer-cell>
</ng-container>
<ng-container matColumnDef="hh-amount">
<mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{
bs.hhAmount | 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 && !row.isHappyHour"
[class.yellow300]="row.isHappyHour && !row.isPrinted"
[class.yellow-for-hh-printed]="row.isPrinted && row.isHappyHour"
[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="['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="['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>

111
bookie/src/app/sales/bills/bills.component.sass Normal file
View File

@ -0,0 +1,111 @@
@use '@angular/material' as mat
$my-grey: mat.define-palette(mat.$grey-palette)
$my-green: mat.define-palette(mat.$green-palette)
.right-align
display: flex
justify-content: flex-end
table
width: 100%
.mat-column-select
flex: 0 0 60px
.grey900, .mat-column-amount-title, .mat-column-amount-amount
background-color: #1b5e20
color: #ffffff
font-size: 1.2em
// color: mat.get-color-from-palette($my-grey, '900-contrast')
// background: mat.get-color-from-palette($my-grey, 900)
.grey700, .mat-column-tax-title, .mat-column-tax-amount
background-color: #388e3c
color: #ffffff
// color: mat.get-color-from-palette($my-grey, '900-contrast')
// background: mat.get-color-from-palette($my-grey, 900)
.grey500, .mat-column-discount-title, .mat-column-discount-amount
background-color: #4caf50
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.grey300, .mat-column-hh-title, .mat-column-hh-amount, .mat-column-gross-title, .mat-column-gross-amount
background-color: #81c784
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.blue400, .old-kot
background-color: #42a5f5
color: #ffffff
// color: mat.get-color-from-palette($my-green, 700)
// background-color: mat.get-color-from-palette($my-green, 500)
.blue800, .new-kot
background-color: #1565c0
color: #ffffff
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.red100, .is-printed
// background-color: #ffcdd2
// color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.deep-purple-50
background-color: #ede7f6
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.deep-purple-100
background-color: #d1c4e9
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.deep-purple-200
background-color: #b39ddb
color: #000000
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.yellow300, .hh-new
background-color: #fff176
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
.hh-printed
background-color: #f7ca18
// color: mat.get-color-from-palette($my-grey, '300-contrast')
// background: mat.get-color-from-palette($my-grey, 300)
// https://github.com/btxtiger/mat-icon-button-sizes
$button-size: 32px
$icon-size: 19px
.small-icon-button
width: $button-size !important
height: $button-size !important
padding: 0px !important
display: inline-flex !important
align-items: center
justify-content: center
font-size: $icon-size !important
& > *[role=img]
width: $icon-size
height: $icon-size
font-size: $icon-size
svg
width: $icon-size
height: $icon-size
.mat-mdc-button-touch-target
width: $button-size !important
height: $button-size !important

6
bookie/src/app/sales/bills/bills.component.ts
View File

@ -27,7 +27,7 @@ import { VoucherType } from './voucher-type';
@Component({
selector: 'app-bills',
templateUrl: './bills.component.html',
styleUrls: ['./bills.component.css'],
styleUrls: ['./bills.component.sass'],
})
export class BillsComponent implements OnInit {
dataSource: BillsDataSource = new BillsDataSource(this.bs.dataObs);
@ -196,10 +196,6 @@ export class BillsComponent implements OnInit {
this.bs.subtractOne(item, canEdit);
}
removeItem(item: BillViewItem): void {
this.bs.removeItem(item);
}
modifier(item: BillViewItem): void {
this.bs.modifier(item);
}