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

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

View File

@ -11,7 +11,7 @@ const routes: Routes = [
},
{
path: 'products',
loadChildren: () => import('./product/product.module').then(mod => mod.ProductModule)
loadChildren: () => import('./product/products.module').then(mod => mod.ProductsModule)
},
{
path: 'product-groups',

View File

@ -13,6 +13,9 @@
<a mat-raised-button routerLink="/product-groups">
Product Groups
</a>
<a mat-raised-button routerLink="/products">
Products
</a>
<a mat-raised-button routerLink="/taxes">
Taxes
</a>

View File

@ -1,15 +1,19 @@
import { DataSource } from '@angular/cdk/collections';
import { Observable, of as observableOf } from 'rxjs';
import { Observable } from 'rxjs';
import { ProductGroup } from '../../core/product-group';
import { tap } from "rxjs/operators";
export class ProductGroupListDataSource extends DataSource<ProductGroup> {
constructor(public data: ProductGroup[]) {
private data: ProductGroup[];
constructor(private readonly dataObs: Observable<ProductGroup[]>) {
super();
this.dataObs = dataObs.pipe(
tap(x => this.data = x)
);
}
connect(): Observable<ProductGroup[]> {
return observableOf(this.data);
return this.dataObs;
}
disconnect() {

View File

@ -1,11 +1,12 @@
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ProductGroupListDataSource } from './product-group-list-datasource';
import { ProductGroup } from '../../core/product-group';
import {ActivatedRoute, Router} from '@angular/router';
import {CdkDragDrop, moveItemInArray} from "@angular/cdk/drag-drop";
import {MatTable} from "@angular/material";
import {ToasterService} from "../../core/toaster.service";
import {ProductGroupService} from "../product-group.service";
import { ActivatedRoute, Router } from '@angular/router';
import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { MatTable } from "@angular/material";
import { ToasterService } from "../../core/toaster.service";
import { ProductGroupService } from "../product-group.service";
import { BehaviorSubject } from "rxjs";
@Component({
selector: 'app-product-group-list',
@ -16,6 +17,7 @@ export class ProductGroupListComponent implements OnInit {
@ViewChild('table', { static: true }) table: MatTable<ProductGroup>;
dataSource: ProductGroupListDataSource;
list: ProductGroup[];
data: BehaviorSubject<ProductGroup[]>;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['name', 'discountLimit', 'isModifierCompulsory', 'groupType', 'isActive', 'isFixture'];
@ -24,15 +26,19 @@ export class ProductGroupListComponent implements OnInit {
private router: Router,
private toaster: ToasterService,
private ser: ProductGroupService
) {
}
) {
this.data = new BehaviorSubject([]);
this.data.subscribe((data: ProductGroup[]) => {
this.list = data;
})
}
ngOnInit() {
this.route.data
.subscribe((data: { list: ProductGroup[] }) => {
this.list = data.list;
this.data.next(data.list);
});
this.dataSource = new ProductGroupListDataSource(this.list);
this.dataSource = new ProductGroupListDataSource(this.data);
}
updateSortOrder() {
@ -47,9 +53,10 @@ export class ProductGroupListComponent implements OnInit {
}
);
}
dropTable(event: CdkDragDrop<ProductGroup[]>) {
const prevIndex = this.list.indexOf(event.item.data);
moveItemInArray(this.list, prevIndex, event.currentIndex);
this.table.renderRows();
this.data.next(this.list);
}
}

View File

@ -26,34 +26,18 @@
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
fxLayoutGap.lt-md="0px">
<mat-form-field fxFlex>
<mat-label>Fraction</mat-label>
<input matInput type="number" placeholder="Fraction" formControlName="fraction">
<mat-label>Price</mat-label>
<input matInput type="number" placeholder="Price" formControlName="price">
</mat-form-field>
<mat-form-field cdk-overlay-origin="">
<mat-label>Fraction Units</mat-label>
<input matInput placeholder="Fraction Units" formControlName="fractionUnits">
</mat-form-field>
<mat-form-field cdk-overlay-origin="">
<mat-label>Yield</mat-label>
<input matInput type="number" placeholder="Tield" formControlName="productYield">
</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>{{item.isPurchased ? 'Purchase Price' : 'Cost Price' }}</mat-label>
<input matInput type="number" placeholder="{{item.isPurchased ? 'Purchase Price' : 'Cost Price' }}"
formControlName="price">
</mat-form-field>
<mat-form-field fxFlex [hidden]="!item.isSold">
<mat-label>Sale Price</mat-label>
<input matInput type="number" placeholder="Sale Price" formControlName="salePrice">
<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="isPurchased">Is Purchased?</mat-checkbox>
<mat-checkbox formControlName="isSold">Is Sold?</mat-checkbox>
<mat-checkbox formControlName="hasHappyHour">Has Happy Hour?</mat-checkbox>
<mat-checkbox formControlName="isNotAvailable">Is Not Available?</mat-checkbox>
<mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
</div>
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
@ -66,6 +50,14 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label>Tax</mat-label>
<mat-select placeholder="Tax" formControlName="tax">
<mat-option *ngFor="let t of taxes" [value]="t.id">
{{ t.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>
</mat-card-content>

View File

@ -1,12 +1,13 @@
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ToasterService} from '../../core/toaster.service';
import {ActivatedRoute, Router} from '@angular/router';
import {ProductService} from '../product.service';
import {Product} from '../../core/product';
import {ProductGroup} from '../../core/product-group';
import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ToasterService } from '../../core/toaster.service';
import { ActivatedRoute, Router } from '@angular/router';
import { ProductService } from '../product.service';
import { Product } from '../../core/product';
import { ProductGroup } from '../../core/product-group';
import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import {FormBuilder, FormGroup} from '@angular/forms';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Tax } from "../../core/tax";
@Component({
selector: 'app-product-detail',
@ -17,6 +18,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
@ViewChild('nameElement', { static: true }) nameElement: ElementRef;
form: FormGroup;
productGroups: ProductGroup[];
taxes: Tax[];
item: Product;
constructor(
@ -35,22 +37,21 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
code: {value: '', disabled: true},
name: '',
units: '',
fraction: '',
fractionUnits: '',
productYield: '',
productGroup: '',
tax: '',
price: '',
salePrice: '',
isPurchased: '',
isSold: '',
isActive: '',
productGroup: ''
hasHappyHour: '',
isNotAvailable: '',
quantity: '',
isActive: ''
});
}
ngOnInit() {
this.route.data
.subscribe((data: { item: Product, productGroups: ProductGroup[] }) => {
.subscribe((data: { item: Product, productGroups: ProductGroup[], taxes: Tax[] }) => {
this.productGroups = data.productGroups;
this.taxes = data.taxes;
this.showItem(data.item);
});
}
@ -64,7 +65,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
productGroup: this.item.tax.id ? this.item.tax.id : '',
tax: this.item.productGroup.id ? this.item.productGroup.id : '',
price: this.item.price || '',
hadHappyHour: this.item.hasHappyHour,
hasHappyHour: this.item.hasHappyHour,
isNotAvailable: this.item.isNotAvailable,
quantity: this.item.quantity || '',
isActive: this.item.isActive,

View File

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

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);
}
}

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>

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');

View File

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

View File

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

View File

@ -1,66 +0,0 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule, Routes} from '@angular/router';
import {ProductListResolver} from './product-list-resolver.service';
import {ProductResolver} from './product-resolver.service';
import {ProductDetailComponent} from './product-detail/product-detail.component';
import {ProductListComponent} from './product-list/product-list.component';
import {AuthGuard} from '../auth/auth-guard.service';
import {ProductGroupListResolver} from '../product-group/product-group-list-resolver.service';
const productRoutes: Routes = [
{
path: '',
component: ProductListComponent,
canActivate: [AuthGuard],
data: {
permission: 'Products'
},
resolve: {
list: ProductListResolver
}
},
{
path: 'new',
component: ProductDetailComponent,
canActivate: [AuthGuard],
data: {
permission: 'Products'
},
resolve: {
item: ProductResolver,
productGroups: ProductGroupListResolver
}
},
{
path: ':id',
component: ProductDetailComponent,
canActivate: [AuthGuard],
data: {
permission: 'Products'
},
resolve: {
item: ProductResolver,
productGroups: ProductGroupListResolver
}
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(productRoutes)
],
exports: [
RouterModule
],
providers: [
ProductListResolver,
ProductResolver
]
})
export class ProductRoutingModule {
}

View File

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

View File

@ -1,9 +1,9 @@
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/internal/Observable';
import {catchError} from 'rxjs/operators';
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import {Product} from '../core/product';
import {ErrorLoggerService} from '../core/error-logger.service';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { catchError } from 'rxjs/operators';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Product } from '../core/product';
import { ErrorLoggerService } from '../core/error-logger.service';
const httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
@ -48,6 +48,13 @@ export class ProductService {
);
}
updateSortOrder(list: Product[]): Observable<boolean> {
return <Observable<boolean>>this.http.post<Product[]>(url, list, httpOptions)
.pipe(
catchError(this.log.handleError(serviceName, 'updateSortOrder'))
);
}
saveOrUpdate(product: Product): Observable<Product> {
if (!product.id) {
return this.save(product);

View File

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

View File

@ -0,0 +1,70 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ProductListResolver } from './product-list-resolver.service';
import { ProductResolver } from './product-resolver.service';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { ProductListComponent } from './product-list/product-list.component';
import { AuthGuard } from '../auth/auth-guard.service';
import { ProductGroupListResolver } from '../product-group/product-group-list-resolver.service';
import { TaxListResolver } from "../taxes/tax-list-resolver.service";
const productRoutes: Routes = [
{
path: '',
component: ProductListComponent,
canActivate: [AuthGuard],
data: {
permission: 'Products'
},
resolve: {
list: ProductListResolver,
productGroups: ProductGroupListResolver
}
},
{
path: 'new',
component: ProductDetailComponent,
canActivate: [AuthGuard],
data: {
permission: 'Products'
},
resolve: {
item: ProductResolver,
productGroups: ProductGroupListResolver,
taxes: TaxListResolver
}
},
{
path: ':id',
component: ProductDetailComponent,
canActivate: [AuthGuard],
data: {
permission: 'Products'
},
resolve: {
item: ProductResolver,
productGroups: ProductGroupListResolver,
taxes: TaxListResolver
}
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(productRoutes)
],
exports: [
RouterModule
],
providers: [
ProductListResolver,
ProductResolver
]
})
export class ProductsRoutingModule {
}

View File

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

View File

@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
import {ProductListComponent} from './product-list/product-list.component';
import {ProductDetailComponent} from './product-detail/product-detail.component';
import {ProductRoutingModule} from './product-routing.module';
import {ProductsRoutingModule} from './products-routing.module';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
@ -15,14 +15,16 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import {CdkTableModule} from '@angular/cdk/table';
import {ReactiveFormsModule} from '@angular/forms';
import {FlexLayoutModule} from '@angular/flex-layout';
import { CdkTableModule } from '@angular/cdk/table';
import { ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { DragDropModule } from "@angular/cdk/drag-drop";
@NgModule({
imports: [
CommonModule,
CdkTableModule,
DragDropModule,
FlexLayoutModule,
MatTableModule,
MatPaginatorModule,
@ -36,12 +38,12 @@ import {FlexLayoutModule} from '@angular/flex-layout';
MatSelectModule,
MatCheckboxModule,
ReactiveFormsModule,
ProductRoutingModule
ProductsRoutingModule
],
declarations: [
ProductListComponent,
ProductDetailComponent
]
})
export class ProductModule {
export class ProductsModule {
}