feat(+products): Added +products

Author: WarrenLynes

data/db.json

@@ -1103,6 +1103,14 @@
     {
       "name": "Jon's Customer",
       "id": 101
+    },
+    {
+      "name": "bil",
+      "id": 102
+    },
+    {
+      "name": "asdfasdf",
+      "id": 103
     }
   ],
   "accounts": [
@@ -3893,6 +3901,10 @@
       "price": "197.00",
       "color": "black",
       "details": "Awesome"
+    },
+    {
+      "name": "NEW PRODUCT",
+      "id": 201
     }
   ],
   "orders": [

projects/ngrx-auto-entity/src/lib/util.ts

@@ -291,7 +291,7 @@ export const buildState = <TState extends IEntityState<TModel>, TParentState, TM
     }
   };
 
-  const reducer = function(state = initialState): IEntityState<TModel> {
+  const reducer = (state = initialState): IEntityState<TModel> => {
     // tslint:disable-line
     return state;
   };
@@ -482,7 +482,7 @@ export const buildFeatureState = <TState extends IEntityState<TModel>, TParentSt
     }
   };
 
-  const reducer = function(state = initialState): IEntityState<TModel> {
+  const reducer = (state = initialState): IEntityState<TModel> => {
     // tslint:disable-line
     return state;
   };

src/app/+products/components/product-form/product-form.component.html

@@ -0,0 +1,21 @@
+<mat-card>
+  <mat-card-content>
+    <form [formGroup]="formGroup">
+      <mat-form-field class="product-input">
+        <input matInput type="text" placeholder="Product Name" formControlName="name">
+      </mat-form-field>
+
+      <mat-form-field class="product-input">
+        <input matInput type="number" placeholder="Product Price" formControlName="price">
+      </mat-form-field>
+
+      <mat-form-field class="product-input">
+        <input matInput type="text" placeholder="Product Details" formControlName="details">
+      </mat-form-field>
+
+      <mat-error *ngIf="formGroup.get('name').hasError('required')">
+        Name is required
+      </mat-error>
+    </form>
+  </mat-card-content>
+</mat-card>

src/app/+products/components/product-form/product-form.component.scss

@@ -0,0 +1,3 @@
+.customer-input {
+  width: 100%;
+}

src/app/+products/components/product-form/product-form.component.ts

@@ -0,0 +1,57 @@
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Product } from 'models/product.model';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-product-form',
+  templateUrl: './product-form.component.html',
+  styleUrls: ['./product-form.component.scss']
+})
+export class ProductFormComponent implements OnChanges, OnDestroy {
+  /** The product */
+  @Input() product: Product;
+
+  @Output() productChange = new EventEmitter<{ product: Product; valid: boolean }>();
+  /** Event emitter for a product change */
+
+  /** The product form */
+  formGroup: FormGroup;
+
+  /** Subject to trigger unsubscribe */
+  private unsubscribe = new Subject<void>();
+
+  constructor(private formBuilder: FormBuilder) {
+    this.buildForm();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.product && changes.product.currentValue) {
+      this.formGroup.patchValue(this.product);
+    }
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.next();
+    this.unsubscribe.complete();
+  }
+
+  private buildForm() {
+    this.formGroup = this.formBuilder.group({
+      name: ['', Validators.required],
+      details: ['', Validators.required],
+      price: [0, Validators.required]
+    });
+
+    this.formGroup.valueChanges.pipe(takeUntil(this.unsubscribe)).subscribe(value => {
+      this.productChange.emit({
+        product: {
+          ...this.product,
+          ...value
+        },
+        valid: this.formGroup.valid
+      });
+    });
+  }
+}

src/app/+products/components/products-table/products-table.component.html

@@ -0,0 +1,35 @@
+<mat-form-field class="filter-input">
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+</mat-form-field>
+
+<div class="mat-elevation-z8">
+  <mat-table [dataSource]="dataSource">
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+      <mat-cell *matCellDef="let product"> {{product.name}} </mat-cell>
+    </ng-container>
+    <ng-container matColumnDef="details">
+      <mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
+      <mat-cell *matCellDef="let product"> {{product.details}} </mat-cell>
+    </ng-container>
+    <ng-container matColumnDef="price">
+      <mat-header-cell *matHeaderCellDef> Price </mat-header-cell>
+      <mat-cell *matCellDef="let product"> {{product.price}} </mat-cell>
+    </ng-container>
+    <ng-container matColumnDef="actions">
+      <mat-header-cell *matHeaderCellDef></mat-header-cell>
+      <mat-cell *matCellDef="let product">
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="edit.emit(product)">Edit</button>
+          <button mat-menu-item (click)="delete.emit(product)">Delete</button>
+        </mat-menu>
+      </mat-cell>
+    </ng-container>
+    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
+    <mat-row *matRowDef="let product; columns: columnsToDisplay"></mat-row>
+  </mat-table>
+  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
+</div>

src/app/+products/components/products-table/products-table.component.scss

@@ -0,0 +1,14 @@
+@import '~@angular/material/theming';
+
+.filter-input {
+  width: 100%;
+}
+
+mat-row:hover {
+  background-color: mat-color($mat-grey, 200);
+  cursor: pointer;
+}
+
+.mat-column-actions {
+  flex: 0 0 40px;
+}

src/app/+products/components/products-table/products-table.component.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { MatPaginator, MatTableDataSource } from '@angular/material';
+import { Product } from 'models/product.model';
+
+@Component({
+  selector: 'app-products-table',
+  templateUrl: './products-table.component.html',
+  styleUrls: ['./products-table.component.scss']
+})
+export class ProductsTableComponent implements OnChanges, OnInit {
+  @Input() products: Product[];
+  @Output() delete = new EventEmitter<Product>();
+  @Output() edit = new EventEmitter<Product>();
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  columnsToDisplay = ['name', 'details', 'price', 'actions'];
+  dataSource = new MatTableDataSource();
+
+  constructor() {}
+
+  applyFilter(filter: string) {
+    this.dataSource.filter = filter.trim().toLowerCase();
+  }
+
+  ngOnChanges(simpleChanges: SimpleChanges) {
+    if (simpleChanges.products && simpleChanges.products.currentValue) {
+      this.dataSource.data = this.products;
+    }
+  }
+
+  ngOnInit() {
+    this.dataSource.paginator = this.paginator;
+  }
+}

src/app/+products/containers/product/product.component.html

@@ -0,0 +1,10 @@
+<div fxLayout="row" fxLayoutAlign="center stretch" class="products">
+  <div fxFlex.xs="90%" fxFlex.sm="80%" fxFlex.md="70%" fxFlex.lg="65%" fxFlex.xl="60%">
+    <h2>Product</h2>
+    <app-product-form [product]="product | async" (productChange)="onProductChange($event)"></app-product-form>
+    <div class="actions" fxLayout="row" fxLayoutAlign="end center">
+      <button mat-button color="secondary" routerLink="/products">Cancel</button>
+      <button mat-raised-button color="primary" (click)="onSave()" [disabled]="!valid">Save</button>
+    </div>
+  </div>
+</div>

src/app/+products/containers/product/product.component.scss

@@ -0,0 +1,11 @@
+.products {
+  padding: 15px;
+
+  .actions {
+    margin: 15px 0;
+
+    button + button {
+      margin-left: 8px;
+    }
+  }
+}