General tweaks

Author: Dan Wahlin

modules/module6/files/beginFiles/controllers/api/customers/customers.controller.js

@@ -0,0 +1,90 @@
+const customersRepo = require('../../../lib/customersRepository'),
+      statesRepo = require('../../../lib/statesRepository'),
+      util = require('util');
+
+class CustomersController {
+    //  /api/customers
+    constructor(router) {
+        router.get('/', this.getCustomers.bind(this));
+        router.get('/:id', this.getCustomer.bind(this));
+        router.post('/', this.insertCustomer.bind(this));
+        router.put('/:id', this.updateCustomer.bind(this));
+    }
+
+    getCustomers(req, res) {
+        console.log('*** getCustomers');
+        customersRepo.getCustomers((err, data) => {
+            if (err) {
+                console.log('*** getCustomers error: ' + util.inspect(err));
+                res.json(null);
+            } else {
+                console.log('*** getCustomers ok');
+                res.json(data.customers);
+            }
+        });
+    }
+
+    getCustomer(req, res) {
+        console.log('*** getCustomer');
+        const id = req.params.id;
+        customersRepo.getCustomer(id, (err, customer) => {
+            if (err) {
+                console.log('*** getCustomer error: ' + util.inspect(err));
+                res.json(null);
+            } else {
+                console.log('*** getCustomer ok');
+                res.json(customer);
+            }
+        });
+
+    }
+
+    insertCustomer(req, res) {
+        console.log('*** insertCustomer');
+        statesRepo.getState(req.body.stateId, (err, state) => {
+            if (err) {
+                console.log('*** statesRepo.getState error: ' + util.inspect(err));
+                res.json({ status: false, error: 'State not found', customer: null });
+            } else {
+                customersRepo.insertCustomer(req.body, state, (err, customer) => {
+                    if (err) {
+                        console.log('*** customersRepo.insertCustomer error: ' + util.inspect(err));
+                        res.json({status: false, error: 'Insert failed', customer: null});
+                    } else {
+                        console.log('*** insertCustomer ok');
+                        res.json({ status: true, error: null, customer: customer });
+                    }
+                });
+            }
+        });
+    }
+
+    updateCustomer(req, res) {
+        console.log('*** updateCustomer');
+        console.log('*** req.body');
+        console.log(req.body);
+
+        statesRepo.getState(req.body.stateId, (err, state) => {
+            if (err) {
+                console.log('*** statesRepo.getState error: ' + util.inspect(err));
+                res.json({ status: false, error: 'State not found', customer: null });
+            } else {
+                customersRepo.updateCustomer(req.params.id, req.body, state, (err, customer) => {
+                    if (err) {
+                        console.log('*** customersRepo.updateCustomer error: ' + util.inspect(err));
+                        res.json({status: false, error: 'Update failed', customer: null});
+                    } else {
+                        console.log('*** updateCustomer ok');
+                        res.json({ status: true, error: null, customer: customer });
+                    }
+                });
+            }
+        });
+    }
+
+
+    
+
+}
+
+module.exports = CustomersController;

modules/module6/files/beginFiles/public/app/core/data.service.ts

@@ -0,0 +1,90 @@
+import { Injectable } from '@angular/core';
+import { Http, Headers, Response, RequestOptions } from '@angular/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/throw';
+import 'rxjs/add/operator/map'; 
+import 'rxjs/add/operator/catch';
+
+import { ICustomer, IOrder, IState } from '../shared/interfaces';
+
+@Injectable()
+export class DataService {
+
+    baseUrl: string = '/api/customers';
+
+    constructor(private http: Http) { 
+
+    }
+
+    getCustomers() : Observable<ICustomer[]> {
+        return this.http.get(this.baseUrl)
+                   .map((res: Response) => {
+                       let customers = res.json();
+                       this.calculateCustomersOrderTotal(customers);
+                       return customers;
+                   })
+                   .catch(this.handleError);
+    }
+
+    getCustomer(id: string) : Observable<ICustomer> {
+        return this.http.get(this.baseUrl + '/' + id)
+                   .map((res: Response) => res.json())
+                   .catch(this.handleError); 
+    }
+
+    getStates() : Observable<IState[]> {
+        return this.http.get('/api/states')
+                   .map((res: Response) => res.json())
+                   .catch(this.handleError);
+    }
+
+    insertCustomer(customer: ICustomer) : Observable<ICustomer> {
+        return this.http.post(this.baseUrl, customer)
+                   .map((res: Response) => {
+                       const data = res.json();
+                       console.log('insertCustomer status: ' + data.status);
+                       return data.customer;
+                   })
+                   .catch(this.handleError);
+    }
+
+    updateCustomer(customer: ICustomer) : Observable<ICustomer> {
+        return this.http.put(this.baseUrl + '/' + customer._id, customer)
+                   .map((res: Response) => {
+                       const data = res.json();
+                       console.log('updateCustomer status: ' + data.status);
+                       return data.customer;
+                   })
+                   .catch(this.handleError);
+    }
+
+    calculateCustomersOrderTotal(customers: ICustomer[]) {
+        for (let customer of customers) {
+            if (customer && customer.orders) {
+                let total = 0;
+                for (let order of customer.orders) {
+                    total += (order.price * order.quantity);
+                }
+                customer.orderTotal = total;
+            }
+        }
+    }
+    
+    private handleError(error: any) {
+        console.error('server error:', error); 
+        if (error instanceof Response) {
+          let errMessage = '';
+          try {
+            errMessage = error.json().error;
+          } catch(err) {
+            errMessage = error.statusText;
+          }
+          return Observable.throw(errMessage);
+          // Use the following instead if using lite-server
+          //return Observable.throw(err.text() || 'backend server error');
+        }
+        return Observable.throw(error || 'Node.js server error');
+    }
+
+}

modules/module6/files/beginFiles/public/app/customers/customer-edit-reactive.component.ts

@@ -0,0 +1,119 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+import { DataService } from '../core/data.service';
+import { ICustomer, IState } from '../shared/interfaces';
+import { ValidationService } from '../shared/validation.service';
+
+@Component({
+  moduleId: module.id,
+  selector: 'customer-edit-reactive',
+  templateUrl: 'customer-edit-reactive.component.html'
+})
+export class CustomerEditReactiveComponent implements OnInit {
+
+  customerForm: FormGroup;
+  customer: ICustomer = {
+    _id: '',
+    firstName: '',
+    lastName: '',
+    gender: '',
+    address: '',
+    email: '',
+    city: '',
+    stateId: 0,
+    zip: 0
+  };
+  states: IState[];
+  errorMessage: string;
+  deleteMessageEnabled: boolean;
+  operationText: string = 'Insert';
+  
+  constructor(private router: Router, 
+              private route: ActivatedRoute, 
+              private dataService: DataService,
+              private formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    let id = this.route.snapshot.params['id'];
+    if (id !== '0') {
+      this.operationText = 'Update';
+      this.getCustomer(id);
+    }
+
+    this.getStates();
+    this.buildForm();
+  }
+
+  getCustomer(id: string) {
+      this.dataService.getCustomer(id)
+        .subscribe((customer: ICustomer) => {
+          //Quick and dirty clone used in case user cancels out of form
+          const cust = JSON.stringify(customer);
+          this.customer = JSON.parse(cust);
+          this.buildForm();
+        },
+        (err) => console.log(err));
+  }
+
+  buildForm() {
+      this.customerForm = this.formBuilder.group({
+        firstName:  [this.customer.firstName, Validators.required],
+        lastName:   [this.customer.lastName, Validators.required],
+        gender:     [this.customer.gender, Validators.required],
+        email:      [this.customer.email, [Validators.required, ValidationService.emailValidator]],
+        address:    [this.customer.address, Validators.required],
+        city:       [this.customer.city, Validators.required],
+        stateId:    [this.customer.stateId, Validators.required]
+      });
+  }
+
+  getStates() {
+    this.dataService.getStates().subscribe((states: IState[]) => this.states = states);
+  }
+  
+  submit({ value, valid }: { value: ICustomer, valid: boolean }) {
+      
+      value._id = this.customer._id;
+      value.zip = this.customer.zip || 0; 
+
+      if (value._id) {
+
+        this.dataService.updateCustomer(value)
+          .subscribe((customer: ICustomer) => {
+            if (customer) {
+              this.router.navigate(['/customers']);
+            }
+            else {
+              this.errorMessage = 'Unable to save customer';
+            }
+          },
+          (err) => console.log(err));
+
+      } else {
+
+        this.dataService.insertCustomer(value)
+          .subscribe((customer: ICustomer) => {
+            if (customer) {
+              this.router.navigate(['/customers']);
+            }
+            else {
+              this.errorMessage = 'Unable to add customer';
+            }
+          },
+          (err) => console.log(err));  
+          
+      }
+  }
+  
+  cancel(event: Event) {
+    event.preventDefault();
+    this.router.navigate(['/customers']);
+  }
+
+  delete(event: Event) {
+
+  }
+
+}

modules/module6/files/beginFiles/public/app/customers/customer-edit.component.html

@@ -0,0 +1,77 @@
+<div>
+  <header>
+      <h3>
+          <span class="glyphicon glyphicon-user"></span>
+          {{ customer.firstName }} {{ customer.lastName }}
+      </h3>
+  </header>
+  <br />
+  <form (ngSubmit)="submit()" #customerForm="ngForm" class="editForm" novalidate>
+    <div class="form-group">
+      <label>First Name</label>
+      <input type="text" class="form-control" name="firstName" [(ngModel)]="customer.firstName" #firstName="ngModel" required>
+      <div class="alert alert-danger" [hidden]="firstName.untouched || firstName.valid">First Name is required</div>
+    </div>
+    <div class="form-group">
+      <label>Last Name</label>
+      <input type="text" class="form-control" name="lastName" [(ngModel)]="customer.lastName" #lastName="ngModel" required>
+      <div class="alert alert-danger" [hidden]="lastName.untouched || lastName.valid">Last Name is required</div>
+    </div>
+    <div class="form-group">
+      <label>Gender</label>
+      <br />
+      <div class="radio">
+        <label>
+          <input type="radio" name="gender" [(ngModel)]="customer.gender" #gender="ngModel" value="Male" required />
+          Male
+        </label>
+      </div>
+      <div class="radio">
+        <label>
+          <input type="radio" name="gender" [(ngModel)]="customer.gender" #gender="ngModel" value="Female" required /> 
+          Female
+        </label>
+      </div>
+    </div>
+    <div class="form-group">
+      <label>Email</label>
+      <input type="email" class="form-control" name="email" [(ngModel)]="customer.email" #email="ngModel" required pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$" />
+      <div class="alert alert-danger" [hidden]="email.untouched || email.valid">Email is required and must be valid</div>
+    </div>
+    <div class="form-group">
+      <label>Address</label>
+      <input type="text" class="form-control" name="address" [(ngModel)]="customer.address" #address="ngModel" required>
+      <div class="alert alert-danger" [hidden]="address.untouched || address.valid">Address is required</div>
+    </div>
+    <div class="form-group">
+      <label>City</label>
+      <input type="text" class="form-control" name="city" [(ngModel)]="customer.city" #city="ngModel" required>
+      <div class="alert alert-danger" [hidden]="city.untouched || city.valid">City is required</div>
+    </div>
+    <div class="form-group">
+      <label>State</label>
+      <select class="form-control" 
+              [(ngModel)]="customer.stateId"
+              name="state" 
+              required>
+          <option *ngFor="let state of states" [ngValue]="state.id">{{state.name}}</option>
+      </select>
+    </div>
+    <br />
+
+    <div *ngIf="customer">
+      <!-- Delete code goes here --> 
+
+
+
+      <div class="pull-right" *ngIf="!deleteMessageEnabled">
+        <button class="btn btn-default" (click)="cancel($event)">Cancel</button>&nbsp;&nbsp;
+        <button type="submit" class="btn btn-success" [disabled]="!customerForm.valid">{{ operationText }}</button>
+      </div>
+    </div>
+    <br />
+    <br />
+    <div class="alert alert-danger" *ngIf="errorMessage != null">{{ errorMessage }}</div>
+
+  </form>
+</div>