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

Product Error on *ngIf, new a dealbreaker, but not sure.

Browse Source
This commit is contained in:
Amritanshu
2019-06-16 17:45:16 +05:30
parent 52e978b3b0
commit bcb158b837
22 changed files with 513 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
bookie/src/app/product/product-list/product-list-datasource.ts
View File

@ -1,34 +1,37 @@
import {DataSource} from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import {map, tap} from 'rxjs/operators';
import {merge, Observable, of as observableOf} from 'rxjs';
import {Product} from '../../core/product';
import { DataSource } from '@angular/cdk/collections';
import { map, tap } from 'rxjs/operators';
import { merge, Observable } from 'rxjs';
import { Product } from '../../core/product';
export class ProductListDataSource extends DataSource<Product> {
private dataObservable: Observable<Product[]>;
public data: Product[];
public viewData: Product[];
private filterValue: string;
constructor(private paginator: MatPaginator, private filter: Observable<string>, public data: Product[]) {
constructor(private readonly filter: Observable<string>, private readonly dataObs: Observable<Product[]>) {
super();
this.data = [];
this.viewData = [];
this.filter = filter.pipe(
tap(x => this.filterValue = x)
);
this.dataObs = dataObs.pipe(
tap(x => this.data = x)
);
}
connect(): Observable<Product[]> {
this.dataObservable = observableOf(this.data);
const dataMutations = [
this.dataObservable,
this.filter,
this.paginator.page
this.dataObs,
this.filter
];
return merge(...dataMutations).pipe(
map((x: any) => {
return this.getPagedData(this.getFilteredData([...this.data]));
}),
tap((x: Product[]) => this.paginator.length = x.length)
this.viewData = this.getFilteredData([...this.data]);
return this.viewData;
})
);
}
@ -36,20 +39,10 @@ export class ProductListDataSource extends DataSource<Product> {
}
private getFilteredData(data: Product[]): Product[] {
const filter = (this.filterValue === undefined) ? '' : this.filterValue;
return filter.split(' ').reduce((p: Product[], c: string) => {
return p.filter(x => {
const productString = (
x.code + ' ' + x.name + ' ' + x.units + ' ' + x.productGroup + (x.isActive ? 'active' : 'deactive')
).toLowerCase();
return productString.indexOf(c) !== -1;
const filter = (this.filterValue === undefined) ? "" : this.filterValue;
return data.filter(x => {
return x.productGroup.id === filter || filter === "";
}
);
}, Object.assign([], data));
}
private getPagedData(data: Product[]) {
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
return data.splice(startIndex, this.paginator.pageSize);
}
}

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

@ -1,7 +1,10 @@
<mat-card>
<mat-card-title-group>
<mat-card-title>Products</mat-card-title>
<button mat-button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
<button mat-button (click)="updateSortOrder()" [disabled]="!(filter | async)">
Update Order
</button>
<button mat-button mat-icon-button *ngIf="dataSource.viewData.length" (click)="exportCsv()">
<mat-icon>save_alt</mat-icon>
</button>
<a mat-button [routerLink]="['/products', 'new']">
@ -15,8 +18,8 @@
fxLayoutGap.lt-md="0px">
<mat-form-field fxFlex>
<mat-label>Product Type</mat-label>
<mat-select placeholder="Product Group" formControlName="productGroup" (selectionChange)="filterOn(pg.id)">
<mat-option>--</mat-option>
<mat-select placeholder="Product Group" formControlName="productGroup" (selectionChange)="filterOn($event)">
<mat-option>-- All Products --</mat-option>
<mat-option *ngFor="let pg of productGroups" [value]="pg.id">
{{ pg.name }}
</mat-option>
@ -24,7 +27,7 @@
</mat-form-field>
</div>
</form>
<mat-table #table [dataSource]="dataSource" matSort aria-label="Elements">
<mat-table #table cdkDropList [dataSource]="dataSource" [cdkDropListData]="dataSource" aria-label="Elements" (cdkDropListDropped)="dropTable($event)">
<!-- Name Column -->
<ng-container matColumnDef="name">
@ -41,13 +44,13 @@
<!-- Product Group Column -->
<ng-container matColumnDef="productGroup">
<mat-header-cell *matHeaderCellDef>Product Group</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.productGroup}}</mat-cell>
<mat-cell *matCellDef="let row">{{row.productGroup.name}}</mat-cell>
</ng-container>
<!-- Tax Column -->
<ng-container matColumnDef="tax">
<mat-header-cell *matHeaderCellDef>Tax</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.tax}}</mat-cell>
<mat-cell *matCellDef="let row">{{row.tax.rate | percent:'1.2-2'}} {{row.tax.name}}</mat-cell>
</ng-container>
<!-- Info Column -->
@ -84,14 +87,7 @@
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag [cdkDragData]="row"></mat-row>
</mat-table>
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="5000"
[pageSizeOptions]="[25, 50, 100, 250, 5000]">
</mat-paginator>
</mat-card-content>
</mat-card>

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

@ -1,11 +1,15 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { ProductListDataSource } from './product-list-datasource';
import { Product } from '../../core/product';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { ProductListDataSource } from './product-list-datasource';
import { MatTable } from "@angular/material";
import { Product } from '../../core/product';
import { ToCsvService } from "../../shared/to-csv.service";
import { ToasterService } from "../../core/toaster.service";
import { ProductService } from "../product.service";
import { ProductGroup } from "../../core/product-group";
import { BehaviorSubject } from "rxjs";
@Component({
selector: 'app-product-list',
@ -13,29 +17,64 @@ import { ToCsvService } from "../../shared/to-csv.service";
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild('table', { static: true }) table: MatTable<Product>;
dataSource: ProductListDataSource;
filter: Observable<string> = new Observable<string>();
filter: BehaviorSubject<string>;
form: FormGroup;
list: Product[];
data: BehaviorSubject<Product[]>;
productGroups: ProductGroup[];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns: string[] = ['name', 'price', 'productGroup', 'tax', 'info', 'quantity'];
constructor(private route: ActivatedRoute, private fb: FormBuilder, private toCsv: ToCsvService) {
constructor(
private route: ActivatedRoute,
private fb: FormBuilder,
private router: Router,
private toaster: ToasterService,
private toCsv: ToCsvService,
private ser: ProductService
) {
this.form = this.fb.group({
productGroup: ''
});
this.filter = new BehaviorSubject("");
this.data = new BehaviorSubject([]);
this.data.subscribe((data: Product[]) => {
this.list = data;
})
}
filterOn(val: string) {
console.log(val);
filterOn(val: any) {
this.filter.next(val.value);
}
ngOnInit() {
this.route.data
.subscribe((data: { list: Product[] }) => {
this.list = data.list;
.subscribe((data: { list: Product[], productGroups: ProductGroup[] }) => {
this.data.next(data.list);
this.productGroups = data.productGroups;
});
this.dataSource = new ProductListDataSource(this.paginator, this.filter, this.list);
this.dataSource = new ProductListDataSource(this.filter, this.data);
}
updateSortOrder() {
this.ser.updateSortOrder(this.dataSource.viewData)
.subscribe(
(result) => {
this.toaster.show('Success', '');
this.router.navigateByUrl('/products');
},
(error) => {
this.toaster.show('Danger', error.error);
}
);
}
dropTable(event: CdkDragDrop<Product[]>) {
const prevIndex = this.list.indexOf(event.item.data);
moveItemInArray(this.list, prevIndex, event.currentIndex);
this.data.next(this.list);
}
exportCsv() {
@ -48,7 +87,7 @@ export class ProductListComponent implements OnInit {
Tax: 'tax'
};
const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.data)], {type: 'text/csv;charset=utf-8;'});
const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.viewData)], {type: 'text/csv;charset=utf-8;'});
const link = document.createElement('a');
link.href = window.URL.createObjectURL(csvData);
link.setAttribute('download', 'products.csv');