import { Component } from '@angular/core';
import { CustomerFacade } from 'facades';
import { CustomerEditComponent } from 'components';

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent {
  constructor(public customers: CustomerFacade, public ui: CustomerUIFacade) {
    customers.loadAll();
  }
}

<div class="customers" *ngIf="customers.isLoading$ | async; else loading">
    <app-customer-list 
        [customers]="customers.all$ | async" 
        (deleted)="customers.delete($event)"
        (selected)="customers.select($event)">
    </app-customer-list>
    <app-customer-detail 
        *ngIf="(customers.currentOrFirst$ | async) as customer"
        [customer]="customer"
        (deleted)="customers.delete($event)"
        (edited)="ui.edit($event)">
    </app-customer-detail>
</div>
<ng-template #loading>
    Loading customers...
</ng-template>

import { Component } from '@angular/core';
import { Router } froj '@angular/router';
import { OrderFacade, LineItemFacade } from 'facades';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.css']
})
export class CustomersComponent {
  constructor(
    public orders: OrderFacade, 
    public lineItems: LineItemFacade,
    public router: Router) {
    orders.loadAll();
  }
}

<div class="orders" *ngIf="orders.isLoading$ | async; else loading">
    <app-order-list 
        [orders]="orders.all$ | async" 
        (deleted)="orders.delete($event)"
        (selected)="orders.select($event)">
    </app-order-list>
    <app-order-detail 
        *ngIf="(orders.current$ | async) as order"
        [order]="order"
        [lineItems]="lineItems.byOrder$(order) | async"
        (deleted)="orders.delete($event); lineItems.deleteAllForOrder($event)"
        (edited)="router.navigate(['edit', $event.id])">
    </app-order-detail>
</div>
<ng-template #loading>
    Loading orders...
</ng-template>

import { Injectable } from '@angular/core';
import { store } from '@ngrx/store';

import { CustomerEditComponent } from 'components';
import { Customer } from 'models';
import { AppState, CustomerFacadeBase, firstCustomer } from 'state'

@Injectable({ providedIn: 'root' })
export class CustomerFacade extends CustomerFacadeBase {
    constructor(store: Store<AppState>, private modal: Modal) {
        super(Customer, store);
    }
    
    get first$(): Observable<Customer> {
        return this.store.select(firstCustomer);
    }
    
    get currentOrFirst$(): Observable<Customer> {
        return combineLatest(this.current$, this.first$).pipe(
            map(([current, first]) => current || first)
        );
    }
    
    save(customer: Customer): void {
        customer.id ? this.update(customer) : this.create(customer);
    }
}

import { Injectable } from '@angular/core';

import { CustomerEditComponent } from '../components';
import { Customer } from '../models';

@Injectable({ providedIn: 'root' })
export class CustomerUIFacade {
    constructor(private modals: Modal, private customerFacade: CustomerFacade) {
    }
    
    async edit(customer: Customer): Promise<void> {
        const modal = this.modals.show(CustomerEditComponent);
        const editedCustomer = await modal.dismissed();
        this.customerFacade.save(editedCustomer);
    }
}

import { Injectable } from '@angular/core';
import { store } from '@ngrx/store';

import { Order } from 'models';
import { AppState, OrderFacadeBase } from 'state'

@Injectable({ providedIn: 'root' })
export class OrderFacade extends OrderFacadeBase {
    constructor(store: Store<AppState>, private modal: Modal) {
        super(Order, store);
    }
    
    save(order: Order): void {
        order.id ? this.update(order) : this.create(order);
    }
}

import { Injectable } from '@angular/core';
import { store } from '@ngrx/store';

import { LineItem } from 'models';
import { AppState, LineItemFacadeBase } from 'state'

export const lineItemsByOrder = createSelector(
    allLineItems,
    (lineItems, {order}) => 
      lineItems.filter(lineItem => lineItem.orderId === order.id)
)

@Injectable({ providedIn: 'root' })
export class LineItemFacade extends LineItemFacadeBase {
    constructor(store: Store<AppState>, private modal: Modal) {
        super(LineItem, store);
    }
    
    byOrder$(order: Order): Observable<LineItem[]> {
        return this.store.select(lineItemsByOrder, {order})
    }
    
    deleteAllForOrder(order: Order): void {
        this.byOrder$(order).pipe(
            take(1),
            tap(lineItems => this.deleteMany(lineItems))
        ).subscribe();
    }
}

import { Entity, Key } from '@briebug/ngrx-auto-entity';

@Entity({
  modelName: 'Customer',
  uriName: 'customers'
})
export class Customer {
    @Key id?: number;
    name: string;
    title: string;
    email: string;
    handles?: {
        twitter?: string;
        facebook?: string;
    }
    addressId?: number;
}

import { Entity, Key } from '@briebug/ngrx-auto-entity';


@Entity({
  modelName: 'Address',
  uriName: 'addresses'
})
export class Address {
    @Key id?: number;
    street1: string;
    street2: string;
    city: string;
    state: string;
    zip: string;
}

import { Key } from '@briebug/ngrx-auto-entity';

export type ISODate = string; // YYYY-MM-DDTHH:mm:ss-ZZ:zz
export type Never = 'never';

export enum OrderStatus {
    PENDING = 'pending',
    ONHOLD = 'on-hold',
    PARTIAL = 'partial-fill',
    FILLED = 'filled',
    PARTSHIP = 'partial-shipped',
    SHIPPED = 'shipped',
    CLOSED = 'closed'
}


@Entity({
  modelName: 'Order',
  uriName: 'orders'
})
export class Order {
    @Key id?: number;
    purchaseOrderNo: string;
    status: OrderStatus;
    dateCreated: ISODate;
    dateClosed: ISODate | Never;
    history: OrderHistory[];
}

export class OrderHistory {
    dateOfAction: ISODate;
    action: string;
    newStatus: OrderStatus;
}

import { Key } from '@briebug/ngrx-auto-entity';


@Entity({
  modelName: 'LineItem',
  uriName: 'line-items'
})
export class LineItem {
    @Key orderId: number;
    @Key productId: number;
    quantity: number;
    isRush: boolean;
}

import { IEntityState } from '@briebug/ngrx-auto-entity';
import { ActionReducerMap } from '@ngrx/store';

import { Customer, Order } from '../models';
import { customerReducer } from './customer.state';
import { orderReducer } from './order.state';

export interface AppState {
    customer: IEntityState<Customer>;
    order: IEntityState<Order>;
}

export function appReducer: ActionReducerMap<AppState> = {
    customer: customerReducer,
    order: orderReducer
};

import { buildState, IEntityState } from '@briebug/ngrx-auto-entity';
import { createReducer } from '@ngrx/store';
import { Customer } from 'models';

export const { 
  initialState: customerInitialState, 
  facade: CustomerFacadeBase 
} = buildState(Customer);

export function customerReducer(state = initialState): IEntityState<Customer> {
  return state;
}

import { buildState, IEntityState } from '@briebug/ngrx-auto-entity';
import { createReducer } from '@ngrx/store';
import { Order } from 'models';

export const { 
  initialState: orderInitialState, 
  facade: OrderFacadeBase 
} = buildState(Order);

export function orderReducer(state = initialState): IEntityState<Order> {
  return state;
}

import { createReducer } from '@ngrx/store';
import { LineItem } from 'models';

export const { 
  initialState: orderInitialState, 
  facade: OrderFacadeBase,
  selectors: {
    selectAll: allLineItems
  }
} = buildState(Order);

export function orderReducer(state = initialState): IEntityState<Order> {
  return state;
}

import { EventEmitter, Component, Input, Output } from '@angular/core';
import { Customer } from '../models';

@Component({
  selector: 'app-customers-list',
  templateUrl: './customers-list.component.html',
  styleUrls: ['./customers-list.component.scss']
})
export class CustomersListComponent {
  @Input() customers: Customer[];
  @Output() selected = new EventEmitter<Customer>();
  @Output() deleted = new EventEmitter<Customer>();
}

<div class="customer-list">
  <table>  
    <thead>
      <tr>
        <th><i class="fa fa-key"></i></th>
        <th>Name</th>
        <th><i class="fa fa-wrench"></i></th>
      </tr>
    </thead>  
    <tbody>
      <tr *ngFor="let customer of customers">
        <td>{{customer.id}}</td>
        <td>{{customer.name}}</td>
        <td>
          <i class="fa fa-edit" (click)="selected.emit(customer)"></i>
          <i class="fa fa-trash" (click)="deleted.emit(customer)"></i>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td class="text-right" colspan="3">
          Total Customers: {{customers.length}}
        </td>
      </tr>
    </tfoot>
  </table>
</div>

import { EventEmitter, Component, Input, Output } from '@angular/core';
import { Customer } from '../models';

@Component({
  selector: 'app-customer-detail',
  templateUrl: './customer-detail.component.html',
  styleUrls: ['./customer-detail.component.scss']
})
export class CustomersListComponent {
  @Input() customer: Customer;
  @Output() saved = new EventEmitter<Customer>();
  @Output() deleted = new EventEmitter<Customer>();
}

<div class="customer-detail">
    <h2>{{customer.name}}</h2>
    <h3>{{customer.title}}</h3>
    <a href="mailto:{{customer.email}}">
        {{customer.email | prettyEmail}}
    </a>
    
    <a *ngIf="customer.handles?.twitter"
       href="https://www.twitter.com/{{customer.handles?.twitter}}">
        {{customer.handles?.twitter}}
    </a>
    <a *ngIf="customer.handles?.facebook"
       href="https://www.facebook.com/{{customer.handles?.facebook}}">
        {{customer.handles?.facebook}}
    </a>
    
    <button (click)="edited.emit(customer)">Edit</button>    
    <button (click)="deleted.emit(customer)">Delete</button>
</div>

import { Component } from '@angular/core';
import { CustomerFacade } from '../facades';

@Component({
  selector: 'app-customer-edit',
  templateUrl: './customer-edit.component.html',
  styleUrls: ['./customer-edit.component.css']
})
export class CustomerEditComponent {
  @ViewChild('form') form: CustomerEditFormComponent;
   
  canSave = false;
  constructor(public customers: CustomerFacade, public modal: ModalInstance) {
  }
}

<div class="customer-exit">
  <div>
    <h2>Edit Customer</h2>
    <app-customer-edit-form #form
      [customer]="customers.current$ | async"
      (submitted)="modal.dismiss($event)"
      (validated)="canSave = $event"
      >
    </app-customer-edit-form>
  </div>
  <div>
    <button [disabled]="canSave" click="form.submit()">Save</span>
    <button (click)="modal.dismiss()">Cancel</span>
  </div>
</div>

import { Component, Input, Output } from '@angular/core';
import { Customer } from '../models';

@Component({
  selector: 'app-customers-edit-form',
  templateUrl: './customers-edit-form.component.html',
  styleUrls: ['./customers-edit-form.component.scss']
})
export class CustomersEditFormComponent implements OnChanges, OnInit {
  @Input() customer: Customer;
  @Output() submitted = new EventEmitter<Customer>();
  @Output() validated = new EventEmitter<boolean>();
  
  form: FormGroup;
  
  constructor(private builder: FormBuilder) {}
  
  ngOnInit(): void {
    this.form = this.buildForm(this.builder);
    this.form.statusChanges.pipe(
      map(() => this.form.valid)
    ).subscribe(this.validated.emit);
  }
  
  ngOnChanges(): void {
    if (this.customer) {
      form.patchValue(customer);
    }
  }
  
  buildForm(builder: FormBuilder): FormGroup {
    return builder.group({
      name: [null, [Validators.required, Validators.maxLength(30)]],
      title: [null, [Validators.required, Validators.maxLength(60)]],
      email: [null, [Validators.required, Validators.maxLength(35)]],
      handles: builder.group({
        twitter: [null, Validators.maxLength(50)],
        facebook: [null, Validators.maxLenth(50)]
      }),
      address: builder.group({
        city: [null, Validators.maxLength(50)],
        state: [null, Validators.maxLength(2)],
        zip: [null, [Validators.minLength(5), Validators.maxLength(10)]]
      })
    });
  }
  
  submit() {
    if (this.form.invalid) {
      return;
    }
    
    const updatedCustomer = {
      ...this.customer,
      ...this.form.value
    };
    
    this.submitted.emit(updatedCustomer);
  }
}

<form [formGroup]="form">
    <div>
      <label>Customer Name</label>
      <input id="name" formControlName="name">
      <i class="text-red" 
         *ngIf="name.invalid && (name.dirty || name.touched)">
         Please fill out this field.
      </i>
    </div>
    <div>
      <label>title</label>
      <input id="title" formControlName="title">
      <i class="text-red" 
         *ngIf="title.invalid && (title.dirty || title.touched)">
         Please fill out this field.
      </i>    
    </div>
    <div>
      <label>Email Address</label>
      <input id="email" formControlName="email" type="email">
      <i class="text-red" 
         *ngIf="email.invalid && (email.dirty || email.touched)">
         Please fill out this field.
      </i>    
    </div>
  </div>
  <div>
    <div>
      <label>City</label>
      <input id="city" formControlName="city">
    </div>
    <div>
      <label>State</label>
      <select id="state" formControlName="state">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="NM">New Mexico</option>
        <option value="UT">Utah</option>
      </select>
    </div>
    <div>
      <label>Zip</label>
      <input id="zip" formControlName="zip">
    </div>
  </div>
</form>