Various updates

Author: Dan Wahlin

.gitignore

@@ -7,9 +7,9 @@ npm-debug.log
 .vs
 
 # Build Generated Files
-public/app/**/*.js
-public/app/**/*.js.map
-public/lib
+src/public/app/**/*.js
+src/public/app/**/*.js.map
+src/public/lib
 
 
 

.vscode/settings.json

@@ -0,0 +1,15 @@
+
+
+class CustomersController {
+
+    constructor(router) {
+
+
+
+    }
+
+    
+
+}
+
+module.exports = CustomersController;

.modules/README.md renamed to modules/README.md

@@ -0,0 +1,19 @@
+import { RouterModule, Routes } from '@angular/router';
+
+import { CustomersComponent } from './customers/customers.component';
+import { CustomersGridComponent } from './customers/customers-grid.component';
+import { CustomerEditComponent } from './customers/customer-edit.component';
+import { CustomerEditReactiveComponent } from './customers/customer-edit-reactive.component';
+import { IRouting } from './shared/interfaces';
+
+const routes: Routes = [
+  { path: 'customers', component: CustomersComponent},
+  { path: 'customers/:id', component: CustomerEditComponent},
+  //{ path: 'customers/:id', component: CustomerEditReactiveComponent },
+  { path: '**', pathMatch:'full', redirectTo: '/customers' } //catch any unfound routes and redirect to home page
+];
+
+export const appRouting: IRouting = { 
+    routes: RouterModule.forRoot(routes),
+    components: [ CustomersComponent, CustomerEditComponent, CustomerEditReactiveComponent, CustomersGridComponent ]
+};

.modules/module2/files/beginFiles/routes/router.js renamed to modules/module2/files/beginFiles/routes/router.js

@@ -0,0 +1,24 @@
+import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { HttpModule } from '@angular/http';
+
+
+import { DataFilterService } from './data-filter.service';
+import { Sorter } from './sorter';
+import { TrackByService } from './trackby.service';
+import { EnsureModuleLoadedOnceGuard } from '../shared/ensureModuleLoadedOnceGuard';
+
+@NgModule({
+  imports: [ HttpModule ],
+  providers: [DataFilterService, Sorter, TrackByService] // these should be singleton
+})
+export class CoreModule extends EnsureModuleLoadedOnceGuard {    //Ensure that CoreModule is only loaded into AppModule
+
+  //Looks for the module in the parent injector to see if it's already been loaded (only want it loaded once)
+  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
+    super(parentModule);
+  }  
+
+}
+
+
+

.modules/module2/files/beginFiles/server.js renamed to modules/module2/files/beginFiles/server.js

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DataService {
+  
+    constructor() { 
+
+    }
+
+
+
+
+    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/module3/files/beginFiles/controllers/api/customers/customers.controller.js

@@ -0,0 +1,104 @@
+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; 
+      // var customer: ICustomer = {
+      //   _id: this.customer._id,
+      // };
+
+      if (value._id) {
+
+
+
+      } else {
+
+
+          
+      }
+  }
+  
+  cancel(event: Event) {
+    event.preventDefault();
+    this.router.navigate(['/customers']);
+  }
+
+  delete(event: Event) {
+
+  }
+
+}

modules/module3/files/beginFiles/public/app/app.routing.ts

@@ -0,0 +1,79 @@
+<div>
+  <header>
+      <h3>
+          <span class="glyphicon glyphicon-user"></span>
+          {{ customer.firstName }} {{ customer.lastName }}
+      </h3>
+  </header>
+  <br />
+  <form class="editForm" novalidate>
+    <div class="form-group">
+      <label>Name</label>
+      <input type="text" class="form-control"  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">
+      <div class="alert alert-warning" *ngIf="customer._id && deleteMessageEnabled">
+         Delete Customer?&nbsp;&nbsp;<button class="btn btn-danger" (click)="delete($event)">Yes</button>&nbsp;&nbsp;
+         <button class="btn btn-default" (click)="deleteMessageEnabled = false">No</button>
+      </div>
+      <button class="btn btn-danger" *ngIf="customer._id && !deleteMessageEnabled" (click)="deleteMessageEnabled = true">Delete</button>&nbsp;&nbsp;
+
+      <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>

modules/module3/files/beginFiles/public/app/core/core.module.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { DataService } from '../core/data.service';
+import { ICustomer, IState } from '../shared/interfaces';
+
+@Component({
+  moduleId: module.id,
+  selector: 'customer-edit',
+  templateUrl: 'customer-edit.component.html'
+})
+export class CustomerEditComponent implements OnInit {
+
+  customer: ICustomer = {
+    _id: '',
+    firstName: '',
+    lastName: '',
+    gender: '',
+    address: '',
+    email: '',
+    city: '',
+    state: {
+        abbreviation: '',
+        name: ''
+    },
+    stateId: 0,
+    zip: 0
+  };
+  states: IState[];
+  errorMessage: string;
+  deleteMessageEnabled: boolean;
+  operationText: string = 'Insert';
+  
+  constructor(private router: Router, 
+              private route: ActivatedRoute, 
+              private dataService: DataService) { }
+
+  ngOnInit() {
+    let id = this.route.snapshot.params['id'];
+    if (id !== '0') {
+      this.operationText = 'Update';
+      this.getCustomer(id);
+    }
+
+    this.getStates();
+  }
+
+  getCustomer(id: string) {
+
+  }
+
+  getStates() {
+	  this.dataService.getStates().subscribe((states: IState[]) => this.states = states);  
+  }
+  
+  submit() {
+
+  }
+  
+  cancel(event: Event) {
+    event.preventDefault();
+    this.router.navigate(['/']);
+  }
+
+  delete(event: Event) {
+
+  }
+
+}