Skip to content

Commit 24effe7

Browse files
Dan WahlinDan Wahlin
Dan Wahlin
authored and
Dan Wahlin
committed
Module update
1 parent fc69a22 commit 24effe7

File tree

6 files changed

+302
-21
lines changed

6 files changed

+302
-21
lines changed

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

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎modules/module4/files/beginFiles/public/app/core/data.service.ts

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Injectable } from '@angular/core';
2+
import { Http, Headers, Response, RequestOptions } from '@angular/http';
3+
4+
import { Observable } from 'rxjs/Observable';
5+
import 'rxjs/add/observable/throw';
6+
import 'rxjs/add/operator/map';
7+
import 'rxjs/add/operator/catch';
8+
9+
import { ICustomer, IOrder, IState } from '../shared/interfaces';
10+
11+
@Injectable()
12+
export class DataService {
13+
14+
baseUrl: string = '/api/customers';
15+
16+
constructor(private http: Http) {
17+
18+
}
19+
20+
getCustomers() : Observable<ICustomer[]> {
21+
return this.http.get(this.baseUrl)
22+
.map((res: Response) => {
23+
let customers = res.json();
24+
this.calculateCustomersOrderTotal(customers);
25+
return customers;
26+
})
27+
.catch(this.handleError);
28+
}
29+
30+
getCustomer(id: string) : Observable<ICustomer> {
31+
return this.http.get(this.baseUrl + '/' + id)
32+
.map((res: Response) => res.json())
33+
.catch(this.handleError);
34+
}
35+
36+
getStates() : Observable<IState[]> {
37+
return this.http.get('/api/states')
38+
.map((res: Response) => res.json())
39+
.catch(this.handleError);
40+
}
41+
42+
43+
calculateCustomersOrderTotal(customers: ICustomer[]) {
44+
for (let customer of customers) {
45+
if (customer && customer.orders) {
46+
let total = 0;
47+
for (let order of customer.orders) {
48+
total += (order.price * order.quantity);
49+
}
50+
customer.orderTotal = total;
51+
}
52+
}
53+
}
54+
55+
private handleError(error: any) {
56+
console.error('server error:', error);
57+
if (error instanceof Response) {
58+
let errMessage = '';
59+
try {
60+
errMessage = error.json().error;
61+
} catch(err) {
62+
errMessage = error.statusText;
63+
}
64+
return Observable.throw(errMessage);
65+
// Use the following instead if using lite-server
66+
//return Observable.throw(err.text() || 'backend server error');
67+
}
68+
return Observable.throw(error || 'Node.js server error');
69+
}
70+
71+
}

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Router, ActivatedRoute } from '@angular/router';
3+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
4+
5+
import { DataService } from '../core/data.service';
6+
import { ICustomer, IState } from '../shared/interfaces';
7+
import { ValidationService } from '../shared/validation.service';
8+
9+
@Component({
10+
moduleId: module.id,
11+
selector: 'customer-edit-reactive',
12+
templateUrl: 'customer-edit-reactive.component.html'
13+
})
14+
export class CustomerEditReactiveComponent implements OnInit {
15+
16+
customerForm: FormGroup;
17+
customer: ICustomer = {
18+
_id: '',
19+
firstName: '',
20+
lastName: '',
21+
gender: '',
22+
address: '',
23+
email: '',
24+
city: '',
25+
stateId: 0,
26+
zip: 0
27+
};
28+
states: IState[];
29+
errorMessage: string;
30+
deleteMessageEnabled: boolean;
31+
operationText: string = 'Insert';
32+
33+
constructor(private router: Router,
34+
private route: ActivatedRoute,
35+
private dataService: DataService,
36+
private formBuilder: FormBuilder) { }
37+
38+
ngOnInit() {
39+
let id = this.route.snapshot.params['id'];
40+
if (id !== '0') {
41+
this.operationText = 'Update';
42+
this.getCustomer(id);
43+
}
44+
45+
this.getStates();
46+
this.buildForm();
47+
}
48+
49+
getCustomer(id: string) {
50+
this.dataService.getCustomer(id)
51+
.subscribe((customer: ICustomer) => {
52+
//Quick and dirty clone used in case user cancels out of form
53+
const cust = JSON.stringify(customer);
54+
this.customer = JSON.parse(cust);
55+
this.buildForm();
56+
},
57+
(err) => console.log(err));
58+
}
59+
60+
buildForm() {
61+
this.customerForm = this.formBuilder.group({
62+
firstName: [this.customer.firstName, Validators.required],
63+
lastName: [this.customer.lastName, Validators.required],
64+
gender: [this.customer.gender, Validators.required],
65+
email: [this.customer.email, [Validators.required, ValidationService.emailValidator]],
66+
address: [this.customer.address, Validators.required],
67+
city: [this.customer.city, Validators.required],
68+
stateId: [this.customer.stateId, Validators.required]
69+
});
70+
}
71+
72+
getStates() {
73+
this.dataService.getStates().subscribe((states: IState[]) => this.states = states);
74+
}
75+
76+
submit({ value, valid }: { value: ICustomer, valid: boolean }) {
77+
78+
value._id = this.customer._id;
79+
value.zip = this.customer.zip || 0;
80+
// var customer: ICustomer = {
81+
// _id: this.customer._id,
82+
// };
83+
84+
if (value._id) {
85+
86+
87+
88+
} else {
89+
90+
91+
92+
}
93+
}
94+
95+
cancel(event: Event) {
96+
event.preventDefault();
97+
this.router.navigate(['/customers']);
98+
}
99+
100+
delete(event: Event) {
101+
102+
}
103+
104+
}

‎modules/module4/files/beginFiles/public/app/customers/customer-edit.component.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Router, ActivatedRoute } from '@angular/router';
3+
4+
import { DataService } from '../core/data.service';
5+
import { ICustomer, IState } from '../shared/interfaces';
6+
7+
@Component({
8+
moduleId: module.id,
9+
selector: 'customer-edit',
10+
templateUrl: 'customer-edit.component.html'
11+
})
12+
export class CustomerEditComponent implements OnInit {
13+
14+
customer: ICustomer = {
15+
_id: '',
16+
firstName: '',
17+
lastName: '',
18+
gender: '',
19+
address: '',
20+
email: '',
21+
city: '',
22+
state: {
23+
abbreviation: '',
24+
name: ''
25+
},
26+
stateId: 0,
27+
zip: 0
28+
};
29+
states: IState[];
30+
errorMessage: string;
31+
deleteMessageEnabled: boolean;
32+
operationText: string = 'Insert';
33+
34+
constructor(private router: Router,
35+
private route: ActivatedRoute,
36+
private dataService: DataService) { }
37+
38+
ngOnInit() {
39+
let id = this.route.snapshot.params['id'];
40+
if (id !== '0') {
41+
this.operationText = 'Update';
42+
this.getCustomer(id);
43+
}
44+
45+
this.getStates();
46+
}
47+
48+
getCustomer(id: string) {
49+
this.dataService.getCustomer(id)
50+
.subscribe((customer: ICustomer) => {
51+
const cust = JSON.stringify(customer);
52+
this.customer = JSON.parse(cust);
53+
},
54+
(err: any) => console.log(err));
55+
}
56+
57+
getStates() {
58+
this.dataService.getStates().subscribe((states: IState[]) => this.states = states);
59+
}
60+
61+
submit() {
62+
63+
}
64+
65+
cancel(event: Event) {
66+
event.preventDefault();
67+
this.router.navigate(['/']);
68+
}
69+
70+
delete(event: Event) {
71+
72+
}
73+
74+
}

‎modules/module4/files/beginFiles/public/app/customers/customers.component.ts

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Router } from '@angular/router';
3+
4+
import { DataFilterService } from '../core/data-filter.service';
5+
import { DataService } from '../core/data.service';
6+
import { ICustomer, IOrder, IPagedResults } from '../shared/interfaces';
7+
8+
@Component({
9+
moduleId: module.id,
10+
selector: 'customers',
11+
templateUrl: 'customers.component.html'
12+
})
13+
export class CustomersComponent implements OnInit {
14+
15+
title: string;
16+
customers: ICustomer[] = [];
17+
filteredCustomers: ICustomer[] = [];
18+
19+
totalRecords: number = 0;
20+
pageSize: number = 10;
21+
22+
constructor(private router: Router,
23+
private dataService: DataService,
24+
private dataFilter: DataFilterService) { }
25+
26+
ngOnInit() {
27+
this.title = 'Customers';
28+
this.getCustomers();
29+
}
30+
31+
filterChanged(filterText: string) {
32+
if (filterText && this.customers) {
33+
let props = ['firstName', 'lastName', 'address', 'city', 'state.name', 'orderTotal'];
34+
this.filteredCustomers = this.dataFilter.filter(this.customers, props, filterText);
35+
}
36+
else {
37+
this.filteredCustomers = this.customers;
38+
}
39+
}
40+
41+
42+
getCustomers() {
43+
this.dataService.getCustomers()
44+
.subscribe((customers: ICustomer[]) => {
45+
this.customers = this.filteredCustomers = customers;
46+
},
47+
(err: any) => console.log(err),
48+
() => console.log('getCustomers() retrieved customers'));
49+
}
50+
51+
}

‎src/public/app/app.routing.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { IRouting } from './shared/interfaces';
88

99
const routes: Routes = [
1010
{ path: 'customers', component: CustomersComponent},
11-
//{ path: 'customers/:id', component: CustomerEditComponent},
12-
{ path: 'customers/:id', component: CustomerEditReactiveComponent },
11+
{ path: 'customers/:id', component: CustomerEditComponent},
12+
//{ path: 'customers/:id', component: CustomerEditReactiveComponent },
1313
{ path: '**', pathMatch:'full', redirectTo: '/customers' } //catch any unfound routes and redirect to home page
1414
];
1515

0 commit comments

Comments
 (0)