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

Fix: Username unique index was case sensitive and this allowed duplicate names.

Browse Source 
Feature: Moved temporal products into their own module and reverted the products module
This commit is contained in:
Amritanshu Agrawal
2021-10-27 09:27:47 +05:30
parent debe0df7b7
commit 124cf4d9ff
40 changed files with 1522 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
bookie/src/app/app-routing.module.ts
View File

@ -131,6 +131,13 @@ const routes: Routes = [
path: 'tax-report',
loadChildren: () => import('./tax-report/tax-report.module').then((mod) => mod.TaxReportModule),
},
{
path: 'temporal-products',
loadChildren: () =>
import('./temporal-product/temporal-products.module').then(
(mod) => mod.TemporalProductsModule,
),
},
{
path: 'update-product-prices',
loadChildren: () =>

2
bookie/src/app/auth/login/login.component.ts
View File

@ -61,7 +61,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
// .pipe(first())
.subscribe(
() => {
this.router.navigate([this.returnUrl]);
this.router.navigateByUrl(this.returnUrl);
},
(error) => {
if (error.status === 401 && error.error.detail === 'Device is not registered') {

8
bookie/src/app/core/product.ts
View File

@ -6,7 +6,6 @@ import { Tax } from './tax';
export class Product {
id: string | undefined;
versionId?: string;
code: number;
name: string;
units: string;
menuCategory?: MenuCategory;
@ -21,12 +20,11 @@ export class Product {
enabled: boolean;
tax: Tax;
validFrom?: string;
validTill?: string;
validFrom: string | null;
validTill: string | null;
public constructor(init?: Partial<Product>) {
this.id = undefined;
this.code = 0;
this.name = '';
this.units = '';
this.price = 0;
@ -36,6 +34,8 @@ export class Product {
this.isActive = true;
this.sortOrder = 0;
this.enabled = true;
this.validFrom = null;
this.validTill = null;
this.tax = new Tax();
Object.assign(this, init);
}

9
bookie/src/app/home/home.component.html
View File

@ -102,6 +102,15 @@
>
<h3 class="item-name">Products</h3>
</mat-card>
<mat-card
fxLayout="column"
class="square-button"
matRipple
*ngIf="auth.allowed('temporal-products')"
[routerLink]="['/', 'temporal-products']"
>
<h3 class="item-name">Temporal Products</h3>
</mat-card>
<mat-card
fxLayout="column"
class="square-button"

3
bookie/src/app/product/product-detail/product-detail.component.css
View File

@ -1,3 +0,0 @@
.mat-radio-button ~ .mat-radio-button {
margin-left: 16px;
}

192
bookie/src/app/product/product-detail/product-detail.component.html
View File

@ -1,111 +1,83 @@
<div fxLayout="column">
<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
<mat-card fxFlex>
<mat-card-title-group>
<mat-card-title>Product</mat-card-title>
</mat-card-title-group>
<mat-card-content>
<form [formGroup]="form" fxLayout="column">
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Code</mat-label>
<input matInput placeholder="Code" formControlName="code" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex="75">
<mat-label>Name</mat-label>
<input matInput #name placeholder="Name" formControlName="name" />
</mat-form-field>
<mat-form-field fxFlex="25">
<mat-label>Units</mat-label>
<input matInput placeholder="Units" formControlName="units" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Price</mat-label>
<input matInput type="number" placeholder="Price" formControlName="price" />
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Quantity</mat-label>
<input matInput type="number" placeholder="Quantity" formControlName="quantity" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
<mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Menu Category</mat-label>
<mat-select placeholder="Menu Category" formControlName="menuCategory">
<mat-option *ngFor="let mc of menuCategories" [value]="mc.id">
{{ mc.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Sale Category</mat-label>
<mat-select placeholder="Sale Category" formControlName="saleCategory">
<mat-option *ngFor="let sc of saleCategories" [value]="sc.id">
{{ sc.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" (click)="save()">Save</button>
<button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
Delete
</button>
</mat-card-actions>
</mat-card>
</div>
<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
<mat-radio-group [hidden]="this.list.length === 1">
<mat-radio-button
class="example-radio-button"
*ngFor="let product of list"
[value]="this.product.versionId"
(change)="loadProduct($event)"
[checked]="this.item.versionId === product.versionId"
>
{{ !!product.validFrom ? product.validFrom : '\u221E' }} -
{{ !!product.validTill ? product.validTill : '\u221E' }}
</mat-radio-button>
</mat-radio-group>
</div>
<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
<mat-card fxFlex>
<mat-card-title-group>
<mat-card-title>Product</mat-card-title>
</mat-card-title-group>
<mat-card-content>
<form [formGroup]="form" fxLayout="column">
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex="75">
<mat-label>Name</mat-label>
<input matInput #name placeholder="Name" formControlName="name" />
</mat-form-field>
<mat-form-field fxFlex="25">
<mat-label>Units</mat-label>
<input matInput placeholder="Units" formControlName="units" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Price</mat-label>
<input matInput type="number" placeholder="Price" formControlName="price" />
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Quantity</mat-label>
<input matInput type="number" placeholder="Quantity" formControlName="quantity" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
<mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Menu Category</mat-label>
<mat-select placeholder="Menu Category" formControlName="menuCategory">
<mat-option *ngFor="let mc of menuCategories" [value]="mc.id">
{{ mc.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Sale Category</mat-label>
<mat-select placeholder="Sale Category" formControlName="saleCategory">
<mat-option *ngFor="let sc of saleCategories" [value]="sc.id">
{{ sc.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" (click)="save()">Save</button>
<button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">
Delete
</button>
</mat-card-actions>
</mat-card>
</div>

16
bookie/src/app/product/product-detail/product-detail.component.ts
View File

@ -1,7 +1,6 @@
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { MatRadioChange } from '@angular/material/radio';
import { ActivatedRoute, Router } from '@angular/router';
import { MenuCategory } from '../../core/menu-category';
@ -22,7 +21,6 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
menuCategories: MenuCategory[] = [];
saleCategories: SaleCategory[] = [];
item: Product = new Product();
list: Product[] = [];
constructor(
private route: ActivatedRoute,
@ -34,7 +32,6 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
) {
// Create form
this.form = this.fb.group({
code: { value: '', disabled: true },
name: '',
units: '',
menuCategory: '',
@ -49,21 +46,19 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as {
items: Product[];
item: Product;
menuCategories: MenuCategory[];
saleCategories: SaleCategory[];
};
this.menuCategories = data.menuCategories;
this.saleCategories = data.saleCategories;
this.list = data.items;
this.showItem(this.list[this.list.length - 1]);
this.showItem(data.item);
});
}
showItem(item: Product) {
this.item = item;
this.form.setValue({
code: this.item.code || '(Auto)',
name: this.item.name || '',
units: this.item.units || '',
menuCategory: this.item.menuCategory ? this.item.menuCategory.id : '',
@ -96,7 +91,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
}
delete() {
this.ser.delete(this.item.versionId as string).subscribe(
this.ser.delete(this.item.id as string).subscribe(
() => {
this.toaster.show('Success', '');
this.router.navigateByUrl('/products');
@ -138,9 +133,4 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
this.item.quantity = +formModel.quantity;
return this.item;
}
loadProduct($event: MatRadioChange) {
const product = this.list.find((x) => x.versionId === $event.value);
this.showItem(product as Product);
}
}

20
bookie/src/app/product/product-list/product-list.component.css
View File

@ -2,3 +2,23 @@
display: flex;
justify-content: flex-end;
}
.material-icons {
vertical-align: middle;
}
.mat-column-name {
margin-right: 4px;
}
.mat-column-price,
.mat-column-menuCategory,
.mat-column-saleCategory,
.mat-column-info {
margin-left: 4px;
margin-right: 4px;
}
.mat-column-quantity {
margin-left: 4px;
}

2
bookie/src/app/product/product-list/product-list.component.html
View File

@ -105,7 +105,7 @@
</mat-cell>
</ng-container>
<!-- Yield Column -->
<!-- Quantity Column -->
<ng-container matColumnDef="quantity">
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{

1
bookie/src/app/product/product-list/product-list.component.ts
View File

@ -111,7 +111,6 @@ export class ProductListComponent implements OnInit {
exportCsv() {
const headers = {
Code: 'code',
Name: 'name',
Units: 'units',
Price: 'price',

4
bookie/src/app/product/product-resolver.service.ts
View File

@ -9,10 +9,10 @@ import { ProductService } from './product.service';
@Injectable({
providedIn: 'root',
})
export class ProductResolver implements Resolve<Product[]> {
export class ProductResolver implements Resolve<Product> {
constructor(private ser: ProductService) {}
resolve(route: ActivatedRouteSnapshot): Observable<Product[]> {
resolve(route: ActivatedRouteSnapshot): Observable<Product> {
const id = route.paramMap.get('id');
return this.ser.get(id);
}

8
bookie/src/app/product/product.service.ts
View File

@ -17,11 +17,11 @@ const serviceName = 'ProductService';
export class ProductService {
constructor(private http: HttpClient, private log: ErrorLoggerService) {}
get(id: string | null): Observable<Product[]> {
get(id: string | null): Observable<Product> {
const getUrl: string = id === null ? `${url}` : `${url}/${id}`;
return this.http
.get<Product[]>(getUrl)
.pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Product[]>;
.get<Product>(getUrl)
.pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Product>;
}
list(): Observable<Product[]> {
@ -56,7 +56,7 @@ export class ProductService {
update(product: Product): Observable<void> {
return this.http
.put<Product>(`${url}/${product.versionId}`, product, httpOptions)
.put<Product>(`${url}/${product.id}`, product, httpOptions)
.pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<void>;
}

4
bookie/src/app/product/products-routing.module.ts
View File

@ -32,7 +32,7 @@ const productsRoutes: Routes = [
permission: 'Products',
},
resolve: {
items: ProductResolver,
item: ProductResolver,
menuCategories: MenuCategoryListResolver,
saleCategories: SaleCategoryListResolver,
},
@ -45,7 +45,7 @@ const productsRoutes: Routes = [
permission: 'Products',
},
resolve: {
items: ProductResolver,
item: ProductResolver,
menuCategories: MenuCategoryListResolver,
saleCategories: SaleCategoryListResolver,
},

2
bookie/src/app/product/products.module.ts
View File

@ -11,7 +11,6 @@ import { MatOptionModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
@ -36,7 +35,6 @@ import { ProductsRoutingModule } from './products-routing.module';
MatCheckboxModule,
ReactiveFormsModule,
ProductsRoutingModule,
MatRadioModule,
],
declarations: [ProductListComponent, ProductDetailComponent],
})

0
bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.css Normal file
View File

123
bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.html Normal file
View File

@ -0,0 +1,123 @@
<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
<mat-card fxFlex>
<mat-card-title-group>
<mat-card-title>Product</mat-card-title>
</mat-card-title-group>
<mat-card-content>
<form [formGroup]="form" fxLayout="column">
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Product Id</mat-label>
<input matInput placeholder="Product Id" formControlName="id" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex="75">
<mat-label>Name</mat-label>
<input matInput #name placeholder="Name" formControlName="name" />
</mat-form-field>
<mat-form-field fxFlex="25">
<mat-label>Units</mat-label>
<input matInput placeholder="Units" formControlName="units" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Price</mat-label>
<input matInput type="number" placeholder="Price" formControlName="price" />
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Quantity</mat-label>
<input matInput type="number" placeholder="Quantity" formControlName="quantity" />
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
<mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
</div>
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex>
<mat-label>Menu Category</mat-label>
<mat-select placeholder="Menu Category" formControlName="menuCategory">
<mat-option *ngFor="let mc of menuCategories" [value]="mc.id">
{{ mc.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Sale Category</mat-label>
<mat-select placeholder="Sale Category" formControlName="saleCategory">
<mat-option *ngFor="let sc of saleCategories" [value]="sc.id">
{{ sc.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div
fxLayout="row"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
fxLayoutAlign="space-around start"
>
<mat-form-field fxFlex="50">
<input
matInput
[matDatepicker]="validFrom"
placeholder="Valid From"
formControlName="validFrom"
autocomplete="off"
/>
<mat-datepicker-toggle matSuffix [for]="validFrom"></mat-datepicker-toggle>
<mat-datepicker #validFrom></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex="50">
<input
matInput
[matDatepicker]="validTill"
placeholder="Valid Till"
formControlName="validTill"
autocomplete="off"
/>
<mat-datepicker-toggle matSuffix [for]="validTill"></mat-datepicker-toggle>
<mat-datepicker #validTill></mat-datepicker>
</mat-form-field>
</div>
</form>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" (click)="update()">Update</button>
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
</mat-card-actions>
</mat-card>
</div>

26
bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.spec.ts Normal file
View File

@ -0,0 +1,26 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { TemporalProductDetailComponent } from './temporal-product-detail.component';
describe('TemporalProductDetailComponent', () => {
let component: TemporalProductDetailComponent;
let fixture: ComponentFixture<TemporalProductDetailComponent>;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [TemporalProductDetailComponent],
}).compileComponents();
}),
);
beforeEach(() => {
fixture = TestBed.createComponent(TemporalProductDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

154
bookie/src/app/temporal-product/temporal-product-detail/temporal-product-detail.component.ts Normal file
View File

@ -0,0 +1,154 @@
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import * as moment from 'moment';
import { MenuCategory } from '../../core/menu-category';
import { Product } from '../../core/product';
import { SaleCategory } from '../../core/sale-category';
import { ToasterService } from '../../core/toaster.service';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { TemporalProductService } from '../temporal-product.service';
@Component({
selector: 'app-product-detail',
templateUrl: './temporal-product-detail.component.html',
styleUrls: ['./temporal-product-detail.component.css'],
})
export class TemporalProductDetailComponent implements OnInit, AfterViewInit {
@ViewChild('name', { static: true }) nameElement?: ElementRef;
form: FormGroup;
menuCategories: MenuCategory[] = [];
saleCategories: SaleCategory[] = [];
item: Product = new Product();
constructor(
private route: ActivatedRoute,
private router: Router,
private dialog: MatDialog,
private fb: FormBuilder,
private toaster: ToasterService,
private ser: TemporalProductService,
) {
// Create form
this.form = this.fb.group({
id: '',
name: '',
units: '',
menuCategory: '',
saleCategory: '',
price: '',
hasHappyHour: '',
isNotAvailable: '',
quantity: '',
validFrom: '',
validTill: '',
});
}
ngOnInit() {
this.route.data.subscribe((value) => {
const data = value as {
item: Product;
menuCategories: MenuCategory[];
saleCategories: SaleCategory[];
};
this.menuCategories = data.menuCategories;
this.saleCategories = data.saleCategories;
this.showItem(data.item);
});
}
showItem(item: Product) {
this.item = item;
this.form.setValue({
id: this.item.id,
name: this.item.name,
units: this.item.units,
menuCategory: this.item.menuCategory?.id,
saleCategory: this.item.saleCategory?.id,
price: this.item.price,
hasHappyHour: this.item.hasHappyHour,
isNotAvailable: this.item.isNotAvailable,
quantity: this.item.quantity,
validFrom:
this.item.validFrom === null ? '' : moment(this.item.validFrom, 'DD-MMM-YYYY').toDate(),
validTill:
this.item.validTill === null ? '' : moment(this.item.validTill, 'DD-MMM-YYYY').toDate(),
});
}
ngAfterViewInit() {
setTimeout(() => {
if (this.nameElement !== undefined) {
this.nameElement.nativeElement.focus();
}
}, 0);
}
update() {
this.ser.update(this.getItem()).subscribe(
() => {
this.toaster.show('Success', '');
this.router.navigateByUrl('/temporal-products');
},
(error) => {
this.toaster.show('Error', error);
},
);
}
delete() {
this.ser.delete(this.item.versionId as string).subscribe(
() => {
this.toaster.show('Success', '');
this.router.navigateByUrl('/temporal-products');
},
(error) => {
this.toaster.show('Error', error);
},
);
}
confirmDelete(): void {
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
width: '250px',
data: { title: 'Delete Product?', content: 'Are you sure? This cannot be undone.' },
});
dialogRef.afterClosed().subscribe((result: boolean) => {
if (result) {
this.delete();
}
});
}
getItem(): Product {
const formModel = this.form.value;
this.item.id = formModel.id;
this.item.name = formModel.name;
this.item.units = formModel.units;
if (this.item.menuCategory === null || this.item.menuCategory === undefined) {
this.item.menuCategory = new MenuCategory();
}
this.item.menuCategory.id = formModel.menuCategory;
if (this.item.saleCategory === null || this.item.saleCategory === undefined) {
this.item.saleCategory = new SaleCategory();
}
this.item.saleCategory.id = formModel.saleCategory;
this.item.price = +formModel.price;
this.item.hasHappyHour = formModel.hasHappyHour;
this.item.isNotAvailable = formModel.isNotAvailable;
this.item.quantity = +formModel.quantity;
this.item.validFrom = !formModel.validFrom
? null
: moment(formModel.validFrom).format('DD-MMM-YYYY');
console.log(formModel.validTill);
this.item.validTill = !formModel.validTill
? null
: moment(formModel.validTill).format('DD-MMM-YYYY');
return this.item;
}
}

18
bookie/src/app/temporal-product/temporal-product-list-resolver.service.spec.ts Normal file
View File

@ -0,0 +1,18 @@
import { inject, TestBed } from '@angular/core/testing';
import { TemporalProductListResolverService } from './temporal-product-list-resolver.service';
describe('TemporalProductListResolverService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [TemporalProductListResolverService],
});
});
it('should be created', inject(
[TemporalProductListResolverService],
(service: TemporalProductListResolverService) => {
expect(service).toBeTruthy();
},
));
});

18
bookie/src/app/temporal-product/temporal-product-list-resolver.service.ts Normal file
View File

@ -0,0 +1,18 @@
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { Product } from '../core/product';
import { TemporalProductService } from './temporal-product.service';
@Injectable({
providedIn: 'root',
})
export class TemporalProductListResolverService implements Resolve<Product[][]> {
constructor(private ser: TemporalProductService) {}
resolve(): Observable<Product[][]> {
return this.ser.list();
}
}

98
bookie/src/app/temporal-product/temporal-product-list/temporal-product-list-datasource.ts Normal file
View File

@ -0,0 +1,98 @@
import { DataSource } from '@angular/cdk/collections';
import { merge, Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { MenuCategory } from '../../core/menu-category';
import { Product } from '../../core/product';
import { SaleCategory } from '../../core/sale-category';
export class TemporalProductListDatasource extends DataSource<Product> {
public data: Product[][];
public filteredData: Product[][];
public search: string;
public menuCategory: string;
public saleCategory: string;
constructor(
private readonly searchFilter: Observable<string>,
private readonly menuCategoryFilter: Observable<string>,
private readonly saleCategoryFilter: Observable<string>,
private readonly dataObs: Observable<Product[][]>,
) {
super();
this.data = [];
this.filteredData = [];
this.search = '';
this.menuCategory = '';
this.saleCategory = '';
}
connect(): Observable<Product[]> {
const dataMutations = [
this.dataObs.pipe(
tap((x) => {
this.data = x;
}),
),
this.searchFilter.pipe(
tap((x) => {
this.search = x;
}),
),
this.menuCategoryFilter.pipe(
tap((x) => {
this.menuCategory = x;
}),
),
this.saleCategoryFilter.pipe(
tap((x) => {
this.saleCategory = x;
}),
),
];
return merge(...dataMutations).pipe(
map(() => this.getFilteredData(this.data, this.search, this.menuCategory, this.saleCategory)),
tap((x: Product[][]) => {
this.filteredData = x;
}),
map((x: Product[][]) => x.reduce((p, c) => p.concat(c), [])),
);
}
disconnect() {}
private getFilteredData(
data: Product[][],
search: string,
menuCategory: string,
saleCategory: string,
): Product[][] {
return data.filter(
(o: Product[]) =>
o
.filter(
(x: Product) =>
search === null ||
search === undefined ||
search === '' ||
`${x.name} ${x.units} ${x.saleCategory?.name} ${x.menuCategory?.name}`
.toLowerCase()
.indexOf(search.toLowerCase()) !== -1,
)
.filter(
(x) =>
menuCategory === null ||
menuCategory === undefined ||
menuCategory === '' ||
(x.menuCategory as MenuCategory).id === menuCategory,
)
.filter(
(x) =>
saleCategory === null ||
saleCategory === undefined ||
saleCategory === '' ||
(x.saleCategory as SaleCategory).id === saleCategory,
).length > 0,
);
}
}

28
bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.css Normal file
View File

@ -0,0 +1,28 @@
.right {
display: flex;
justify-content: flex-end;
}
.center {
text-align: center;
}
.material-icons {
vertical-align: middle;
}
.mat-column-name {
margin-right: 4px;
}
.mat-column-price,
.mat-column-menuCategory,
.mat-column-saleCategory,
.mat-column-info {
margin-left: 4px;
margin-right: 4px;
}
.mat-column-quantity {
margin-left: 4px;
}

124
bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.html Normal file
View File

@ -0,0 +1,124 @@
<mat-card>
<mat-card-title-group>
<mat-card-title>Temporal Products</mat-card-title>
</mat-card-title-group>
<mat-card-content>
<form [formGroup]="form" fxLayout="column">
<div
fxLayout="row"
fxLayoutAlign="space-around start"
fxLayout.lt-md="column"
fxLayoutGap="20px"
fxLayoutGap.lt-md="0px"
>
<mat-form-field fxFlex="40">
<input
type="text"
matInput
placeholder="Filter"
formControlName="filter"
autocomplete="off"
/>
</mat-form-field>
<mat-form-field fxFlex="30">
<mat-label>Menu Category</mat-label>
<mat-select
placeholder="Menu Category"
formControlName="menuCategory"
(selectionChange)="filterMcOn($event.value)"
>
<mat-option>-- All Products --</mat-option>
<mat-option *ngFor="let mc of menuCategories" [value]="mc.id">
{{ mc.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="30">
<mat-label>Sale Category</mat-label>
<mat-select
placeholder="Sale Category"
formControlName="saleCategory"
(selectionChange)="filterScOn($event.value)"
>
<mat-option>-- All Products --</mat-option>
<mat-option *ngFor="let mc of saleCategories" [value]="mc.id">
{{ mc.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
<mat-table [dataSource]="dataSource">
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let row">
<ul>
<li>
<a [routerLink]="['/temporal-products', row.versionId]"
>{{ row.name }} ({{ row.units }})</a
>
</li>
<li>
{{ row.id }}
</li>
</ul>
</mat-cell>
</ng-container>
<!-- Price Column -->
<ng-container matColumnDef="price">
<mat-header-cell *matHeaderCellDef class="right">Price</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{ row.price | currency: 'INR' }}</mat-cell>
</ng-container>
<!-- Menu Category Column -->
<ng-container matColumnDef="menuCategory">
<mat-header-cell *matHeaderCellDef>Menu Category</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.menuCategory.name }}</mat-cell>
</ng-container>
<!-- Sale Category Column -->
<ng-container matColumnDef="saleCategory">
<mat-header-cell *matHeaderCellDef>Sale Category</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.saleCategory.name }}</mat-cell>
</ng-container>
<!-- Info Column -->
<ng-container matColumnDef="info">
<mat-header-cell *matHeaderCellDef class="center">Details</mat-header-cell>
<mat-cell *matCellDef="let row">
<ul>
<li>
<b>Valid From: {{ row.validFrom ?? '&#8734;' }} </b> <mat-icon>linear_scale</mat-icon>
<b>Till: {{ row.validTill ?? '&#8734;' }} </b>
</li>
<li>
<mat-icon>
{{ row.hasHappyHour ? 'sentiment_satisfied_alt' : 'sentiment_dissatisfied' }}
</mat-icon>
<b> {{ row.hasHappyHour ? 'Has Happy Hours' : 'No Happy Hours' }}</b>
</li>
<li>
<mat-icon>
{{ row.isNotAvailable ? 'pause' : 'play_arrow' }}
</mat-icon>
<b> {{ row.isNotAvailable ? 'Is not Available' : 'Is Available' }}</b>
</li>
</ul>
</mat-cell>
</ng-container>
<!-- Quantity Column -->
<ng-container matColumnDef="quantity">
<mat-header-cell *matHeaderCellDef class="right">Quantity</mat-header-cell>
<mat-cell *matCellDef="let row" class="right">{{
row.quantity | number: '1.2-2'
}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
</mat-card-content>
</mat-card>

22
bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.spec.ts Normal file
View File

@ -0,0 +1,22 @@
import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
import { TemporalProductListComponent } from './temporal-product-list.component';
describe('TemporalProductListComponent', () => {
let component: TemporalProductListComponent;
let fixture: ComponentFixture<TemporalProductListComponent>;
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
declarations: [TemporalProductListComponent],
}).compileComponents();
fixture = TestBed.createComponent(TemporalProductListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should compile', () => {
expect(component).toBeTruthy();
});
});

91
bookie/src/app/temporal-product/temporal-product-list/temporal-product-list.component.ts Normal file
View File

@ -0,0 +1,91 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
import { MenuCategory } from '../../core/menu-category';
import { Product } from '../../core/product';
import { SaleCategory } from '../../core/sale-category';
import { TemporalProductListDatasource } from './temporal-product-list-datasource';
@Component({
selector: 'app-product-list',
templateUrl: './temporal-product-list.component.html',
styleUrls: ['./temporal-product-list.component.css'],
})
export class TemporalProductListComponent implements OnInit {
searchFilter: Observable<string> = new Observable();
menuCategoryFilter: BehaviorSubject<string> = new BehaviorSubject('');
saleCategoryFilter: BehaviorSubject<string> = new BehaviorSubject('');
data: BehaviorSubject<Product[][]> = new BehaviorSubject<Product[][]>([]);
dataSource: TemporalProductListDatasource = new TemporalProductListDatasource(
this.searchFilter,
this.menuCategoryFilter,
this.saleCategoryFilter,
this.data,
);
form: FormGroup;
list: Product[][] = [];
menuCategories: MenuCategory[] = [];
saleCategories: SaleCategory[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns: string[] = [
'name',
'price',
'menuCategory',
'saleCategory',
'info',
'quantity',
];
constructor(private route: ActivatedRoute, private fb: FormBuilder) {
this.form = this.fb.group({
filter: '',
menuCategory: '',
saleCategory: '',
});
this.data.subscribe((data: Product[][]) => {
this.list = data;
});
this.searchFilter = (this.form.get('filter') as FormControl).valueChanges.pipe(
startWith(''),
debounceTime(150),
distinctUntilChanged(),
);
}
filterMcOn(val: string) {
this.menuCategoryFilter.next(val);
}
filterScOn(val: string) {
this.saleCategoryFilter.next(val);
}
ngOnInit() {
this.dataSource = new TemporalProductListDatasource(
this.searchFilter,
this.menuCategoryFilter,
this.saleCategoryFilter,
this.data,
);
this.route.data.subscribe((value) => {
const data = value as {
list: Product[][];
menuCategories: MenuCategory[];
saleCategories: SaleCategory[];
};
this.loadData(data.list, data.menuCategories, data.saleCategories);
});
}
loadData(list: Product[][], menuCategories: MenuCategory[], saleCategories: SaleCategory[]) {
this.menuCategories = menuCategories;
this.saleCategories = saleCategories;
this.data.next(list);
}
}

18
bookie/src/app/temporal-product/temporal-product-resolver.service.spec.ts Normal file
View File

@ -0,0 +1,18 @@
import { inject, TestBed } from '@angular/core/testing';
import { TemporalProductResolverService } from './temporal-product-resolver.service';
describe('TemporalProductResolverService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [TemporalProductResolverService],
});
});
it('should be created', inject(
[TemporalProductResolverService],
(service: TemporalProductResolverService) => {
expect(service).toBeTruthy();
},
));
});

19
bookie/src/app/temporal-product/temporal-product-resolver.service.ts Normal file
View File

@ -0,0 +1,19 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
import { Observable } from 'rxjs';
import { Product } from '../core/product';
import { TemporalProductService } from './temporal-product.service';
@Injectable({
providedIn: 'root',
})
export class TemporalProductResolverService implements Resolve<Product> {
constructor(private ser: TemporalProductService) {}
resolve(route: ActivatedRouteSnapshot): Observable<Product> {
const id = route.paramMap.get('id');
return this.ser.get(id as string);
}
}

15
bookie/src/app/temporal-product/temporal-product.service.spec.ts Normal file
View File

@ -0,0 +1,15 @@
import { inject, TestBed } from '@angular/core/testing';
import { TemporalProductService } from './temporal-product.service';
describe('TemporalProductService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [TemporalProductService],
});
});
it('should be created', inject([TemporalProductService], (service: TemporalProductService) => {
expect(service).toBeTruthy();
}));
});

43
bookie/src/app/temporal-product/temporal-product.service.ts Normal file
View File

@ -0,0 +1,43 @@
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ErrorLoggerService } from '../core/error-logger.service';
import { Product } from '../core/product';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
};
const url = '/api/temporal-products';
const serviceName = 'ProductService';
@Injectable({ providedIn: 'root' })
export class TemporalProductService {
constructor(private http: HttpClient, private log: ErrorLoggerService) {}
get(id: string): Observable<Product> {
return this.http
.get<Product>(`${url}/${id}`)
.pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<Product>;
}
list(): Observable<Product[][]> {
return this.http
.get<Product[][]>(`${url}/list`)
.pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<Product[][]>;
}
update(product: Product): Observable<void> {
return this.http
.put<Product>(`${url}/${product.versionId}`, product, httpOptions)
.pipe(catchError(this.log.handleError(serviceName, 'update'))) as Observable<void>;
}
delete(id: string): Observable<void> {
return this.http
.delete<Product>(`${url}/${id}`, httpOptions)
.pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<void>;
}
}

13
bookie/src/app/temporal-product/temporal-products-routing.module.spec.ts Normal file
View File

@ -0,0 +1,13 @@
import { TemporalProductsRoutingModule } from './temporal-products-routing.module';
describe('TemporalProductsRoutingModule', () => {
let temporalProductsRoutingModule: TemporalProductsRoutingModule;
beforeEach(() => {
temporalProductsRoutingModule = new TemporalProductsRoutingModule();
});
it('should create an instance', () => {
expect(temporalProductsRoutingModule).toBeTruthy();
});
});

61
bookie/src/app/temporal-product/temporal-products-routing.module.ts Normal file
View File

@ -0,0 +1,61 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from '../auth/auth-guard.service';
import { MenuCategoryListResolver } from '../menu-category/menu-category-list-resolver.service';
import { SaleCategoryListResolver } from '../sale-category/sale-category-list-resolver.service';
import { TemporalProductDetailComponent } from './temporal-product-detail/temporal-product-detail.component';
import { TemporalProductListResolverService } from './temporal-product-list-resolver.service';
import { TemporalProductListComponent } from './temporal-product-list/temporal-product-list.component';
import { TemporalProductResolverService } from './temporal-product-resolver.service';
const temporalProductsRoutes: Routes = [
{
path: '',
component: TemporalProductListComponent,
canActivate: [AuthGuard],
data: {
permission: 'Temporal Products',
},
resolve: {
list: TemporalProductListResolverService,
menuCategories: MenuCategoryListResolver,
saleCategories: SaleCategoryListResolver,
},
},
{
path: 'new',
component: TemporalProductDetailComponent,
canActivate: [AuthGuard],
data: {
permission: 'Temporal Products',
},
resolve: {
item: TemporalProductResolverService,
menuCategories: MenuCategoryListResolver,
saleCategories: SaleCategoryListResolver,
},
},
{
path: ':id',
component: TemporalProductDetailComponent,
canActivate: [AuthGuard],
data: {
permission: 'Temporal Products',
},
resolve: {
item: TemporalProductResolverService,
menuCategories: MenuCategoryListResolver,
saleCategories: SaleCategoryListResolver,
},
},
];
@NgModule({
imports: [CommonModule, RouterModule.forChild(temporalProductsRoutes)],
exports: [RouterModule],
providers: [TemporalProductListResolverService, TemporalProductResolverService],
})
export class TemporalProductsRoutingModule {}

13
bookie/src/app/temporal-product/temporal-products.module.spec.ts Normal file
View File

@ -0,0 +1,13 @@
import { TemporalProductsModule } from './temporal-products.module';
describe('TemporalProductsModule', () => {
let temporalProductsModule: TemporalProductsModule;
beforeEach(() => {
temporalProductsModule = new TemporalProductsModule();
});
it('should create an instance', () => {
expect(temporalProductsModule).toBeTruthy();
});
});

62
bookie/src/app/temporal-product/temporal-products.module.ts Normal file
View File

@ -0,0 +1,62 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ReactiveFormsModule } from '@angular/forms';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import {
DateAdapter,
MAT_DATE_FORMATS,
MAT_DATE_LOCALE,
MatNativeDateModule,
} from '@angular/material/core';
import { MatOptionModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { TemporalProductDetailComponent } from './temporal-product-detail/temporal-product-detail.component';
import { TemporalProductListComponent } from './temporal-product-list/temporal-product-list.component';
import { TemporalProductsRoutingModule } from './temporal-products-routing.module';
export const MY_FORMATS = {
parse: {
dateInput: 'DD-MMM-YYYY',
},
display: {
dateInput: 'DD-MMM-YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'DD-MMM-YYYY',
monthYearA11yLabel: 'MMM YYYY',
},
};
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatTableModule,
MatCardModule,
MatProgressSpinnerModule,
MatInputModule,
MatButtonModule,
MatIconModule,
MatOptionModule,
MatSelectModule,
MatCheckboxModule,
ReactiveFormsModule,
TemporalProductsRoutingModule,
MatDatepickerModule,
],
declarations: [TemporalProductListComponent, TemporalProductDetailComponent],
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
],
})
export class TemporalProductsModule {}