2 |
--------------------------------------------------------------------------------
/APM-Final/src/app/customers/customer-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 |
4 | import { ICustomer } from './customer';
5 | import { CustomerService } from './customer.service';
6 |
7 | @Component({
8 | templateUrl: './customer-detail.component.html',
9 | styleUrls: ['./customer-detail.component.css']
10 | })
11 | export class CustomerDetailComponent implements OnInit {
12 | pageTitle: string = 'Customer Detail';
13 | errorMessage: string;
14 | customer: ICustomer;
15 |
16 | constructor(private route: ActivatedRoute,
17 | private router: Router,
18 | private customerService: CustomerService) {
19 | }
20 |
21 | ngOnInit() {
22 | const id = +this.route.snapshot.paramMap.get('id');
23 | this.getCustomer(id);
24 | }
25 |
26 | getCustomer(id: number) {
27 | this.customerService.getCustomer(id).subscribe(
28 | customer => this.customer = customer,
29 | error => this.errorMessage =
3 | {{pageTitle + ': ' + customer.firstName + ' ' + customer.lastName}}
4 |
5 |
6 |
7 |
20 |
21 |
26 |
8 |
11 | First Name:
9 | {{customer.firstName}}
10 |
12 |
15 | Last Name:
13 | {{customer.lastName}}
14 |
16 |
19 | Occupation:
17 | {{customer.occupation}}
18 |
2 |
38 |
3 | {{pageTitle}}
4 |
5 |
6 |
37 |
7 |
12 | Filter by:
8 |
9 |
10 |
11 |
13 |
17 |
14 |
16 | Filtered by: {{listFilter}}
15 |
18 |
19 |
20 |
35 |
36 | | Full Name | 22 |Occupation | 23 |
|---|---|
| 28 | {{ customer.lastName }}, {{ customer.firstName}} 29 | 30 | | 31 |{{ customer.occupation }} | 32 |
39 | Error: {{ errorMessage }}
40 |
--------------------------------------------------------------------------------
/APM-Final/src/app/customers/customer-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { ICustomer } from './customer';
4 | import { CustomerService } from './customer.service';
5 |
6 | @Component({
7 | templateUrl: './customer-list.component.html',
8 | styleUrls: ['./customer-list.component.css']
9 | })
10 | export class CustomerListComponent implements OnInit {
11 | pageTitle: string = 'Customer List';
12 | errorMessage: string;
13 |
14 | private _listFilter: string;
15 | get listFilter(): string {
16 | return this._listFilter;
17 | }
18 | set listFilter(value: string) {
19 | this._listFilter = value;
20 | this.filteredCustomers = this.listFilter ? this.performFilter(this.listFilter) : this.customers;
21 | }
22 |
23 | filteredCustomers: ICustomer[];
24 | customers: ICustomer[] = [];
25 |
26 | constructor(private customerService: CustomerService) {
27 |
28 | }
29 |
30 | performFilter(filterBy: string): ICustomer[] {
31 | filterBy = filterBy.toLocaleLowerCase();
32 | return this.customers.filter((customer: ICustomer) =>
33 | customer.lastName.toLocaleLowerCase().indexOf(filterBy) !== -1 ||
34 | customer.firstName.toLocaleLowerCase().indexOf(filterBy) !== -1 );
35 | }
36 |
37 | ngOnInit(): void {
38 | this.customerService.getCustomers()
39 | .subscribe(customers => {
40 | this.customers = customers;
41 | this.filteredCustomers = this.customers;
42 | },
43 | error => this.errorMessage = This is not the page you were looking for!
6 | ` 7 | }) 8 | export class PageNotFoundComponent { } 9 | -------------------------------------------------------------------------------- /APM-Final/src/app/home/shell.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DeborahK/Angular-Modules/f56925658869cdbec8a6bc7bb08a0a9f096d6b0d/APM-Final/src/app/home/shell.component.css -------------------------------------------------------------------------------- /APM-Final/src/app/home/shell.component.html: -------------------------------------------------------------------------------- 1 |
4 |
--------------------------------------------------------------------------------
/APM-Final/src/app/home/shell.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { MessageService } from '../core/message.service';
3 |
4 | @Component({
5 | selector: 'pm-shell',
6 | templateUrl: './shell.component.html',
7 | styleUrls: ['./shell.component.css']
8 | })
9 | export class ShellComponent implements OnInit {
10 | get displayMessages(): boolean {
11 | return this.messageService.displayMessages;
12 | }
13 |
14 | constructor(private messageService: MessageService) { }
15 |
16 | ngOnInit() {
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/APM-Final/src/app/home/welcome.component.html:
--------------------------------------------------------------------------------
1 |
5 |
7 |
8 |
15 |
9 |
11 |
12 |
14 |
2 |
--------------------------------------------------------------------------------
/APM-Final/src/app/home/welcome.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl: './welcome.component.html'
5 | })
6 | export class WelcomeComponent {
7 | public pageTitle: string = 'Welcome to Acme Product Management';
8 | }
9 |
--------------------------------------------------------------------------------
/APM-Final/src/app/messages/message.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{pageTitle}}
4 |
5 |
6 |
21 |
7 | 
10 |
11 |
10 |
12 |
20 | Developed by:
13 | Deborah Kurata
14 | 15 |@deborahkurata
16 |
17 | www.bit.ly/DeborahKsBlog
18 |
19 |
2 |
--------------------------------------------------------------------------------
/APM-Final/src/app/messages/message.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | import { MessageService } from '../core/message.service';
5 |
6 | @Component({
7 | selector: 'pm-messages',
8 | templateUrl: './message.component.html',
9 | styles: [
10 | '.message-row { margin-bottom: 10px }'
11 | ]
12 | })
13 | export class MessageComponent {
14 | pageTitle = 'Message Log';
15 | noMessages = 'No messages';
16 | get messages(): string[] {
17 | return this.messageService.getMessages();
18 | }
19 |
20 | constructor(private messageService: MessageService,
21 | private router: Router) { }
22 |
23 | close(): void {
24 | this.messageService.displayMessages = false;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/APM-Final/src/app/messages/message.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 |
3 | import { SharedModule } from '../shared/shared.module';
4 |
5 | import { MessageComponent } from './message.component';
6 |
7 | @NgModule({
8 | imports: [
9 | SharedModule
10 | ],
11 | declarations: [
12 | MessageComponent
13 | ],
14 | exports: [
15 | MessageComponent
16 | ]
17 | })
18 | export class MessageModule { }
19 |
--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-detail.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Modules/f56925658869cdbec8a6bc7bb08a0a9f096d6b0d/APM-Final/src/app/products/product-detail.component.css
--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-detail.component.html:
--------------------------------------------------------------------------------
1 |
3 |
13 |
14 |
4 |
12 | {{pageTitle}}
5 | 6 | 8 | x 9 | 10 | 11 |
15 |
26 |
16 |
20 |
17 |
19 | {{ message }}
18 |
21 |
25 |
22 | {{ noMessages }}
23 |
24 |
2 |
--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 |
4 | import { IProduct } from './product';
5 | import { ProductService } from './product.service';
6 |
7 | @Component({
8 | templateUrl: './product-detail.component.html',
9 | styleUrls: ['./product-detail.component.css']
10 | })
11 | export class ProductDetailComponent implements OnInit {
12 | pageTitle: string = 'Product Detail';
13 | errorMessage: string;
14 | product: IProduct;
15 |
16 | constructor(private route: ActivatedRoute,
17 | private router: Router,
18 | private productService: ProductService) {
19 | }
20 |
21 | ngOnInit() {
22 | const id = +this.route.snapshot.paramMap.get('id');
23 | this.getProduct(id);
24 | }
25 |
26 | getProduct(id: number) {
27 | this.productService.getProduct(id).subscribe(
28 | product => this.product = product,
29 | error => this.errorMessage =
3 | {{pageTitle + ': ' + product.productName}}
4 |
5 |
6 |
7 |
47 |
48 |
53 |
8 |
46 |
9 |
37 |
38 |
10 |
13 | Name:
11 | {{product.productName}}
12 |
14 |
17 | Code:
15 | {{product.productCode | lowercase | convertToSpaces: '-'}}
16 |
18 |
21 | Description:
19 | {{product.description}}
20 |
22 |
25 | Availability:
23 | {{product.releaseDate}}
24 |
26 |
29 | Price:
27 | {{product.price|currency:'USD':true}}
28 |
30 |
36 | 5 Star Rating:
31 |
32 |
33 |
34 |
35 |
39 | ![]()
44 |
45 |
2 |
62 |
3 | {{pageTitle}}
4 |
5 |
6 |
61 |
7 |
12 | Filter by:
8 |
9 |
10 |
11 |
13 |
17 |
14 |
16 | Filtered by: {{listFilter}}
15 |
18 |
20 |
21 |
59 |
60 | | 23 | 27 | | 28 |Product | 29 |Code | 30 |Available | 31 |Price | 32 |5 Star Rating | 33 |
|---|---|---|---|---|---|
|
38 | |
44 | 45 | {{ product.productName }} 46 | 47 | | 48 |{{ product.productCode | lowercase | convertToSpaces: '-' }} | 49 |{{ product.releaseDate }} | 50 |{{ product.price | currency:'USD':true:'1.2-2'}} | 51 |
52 | |
56 |
63 | Error: {{ errorMessage }}
64 |
--------------------------------------------------------------------------------
/APM-Final/src/app/products/product-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { IProduct } from './product';
4 | import { ProductService } from './product.service';
5 |
6 | @Component({
7 | templateUrl: './product-list.component.html',
8 | styleUrls: ['./product-list.component.css']
9 | })
10 | export class ProductListComponent implements OnInit {
11 | pageTitle: string = 'Product List';
12 | imageWidth: number = 50;
13 | imageMargin: number = 2;
14 | showImage: boolean = false;
15 | errorMessage: string;
16 |
17 | private _listFilter: string;
18 | get listFilter(): string {
19 | return this._listFilter;
20 | }
21 | set listFilter(value: string) {
22 | this._listFilter = value;
23 | this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
24 | }
25 |
26 | filteredProducts: IProduct[];
27 | products: IProduct[] = [];
28 |
29 | constructor(private productService: ProductService) {
30 |
31 | }
32 |
33 | onRatingClicked(message: string): void {
34 | this.pageTitle = 'Product List: ' + message;
35 | }
36 |
37 | performFilter(filterBy: string): IProduct[] {
38 | filterBy = filterBy.toLocaleLowerCase();
39 | return this.products.filter((product: IProduct) =>
40 | product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
41 | }
42 |
43 | toggleImage(): void {
44 | this.showImage = !this.showImage;
45 | }
46 |
47 | ngOnInit(): void {
48 | this.productService.getProducts()
49 | .subscribe(products => {
50 | this.products = products;
51 | this.filteredProducts = this.products;
52 | },
53 | error => this.errorMessage =
5 |
--------------------------------------------------------------------------------
/APM-Final/src/app/shared/star.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'pm-star',
5 | templateUrl: './star.component.html',
6 | styleUrls: ['./star.component.css']
7 | })
8 | export class StarComponent implements OnChanges {
9 | @Input() rating: number;
10 | starWidth: number;
11 | @Output() ratingClicked: EventEmitter
6 |
7 |
8 |
9 |
10 |
11 |
12 |
2 |
--------------------------------------------------------------------------------
/APM-Final/src/app/user/login.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgForm } from '@angular/forms';
3 | import { Router, ActivatedRoute } from '@angular/router';
4 |
5 | import { AuthService } from './auth.service';
6 |
7 | @Component({
8 | templateUrl: './login.component.html',
9 | styleUrls: ['./login.component.css']
10 | })
11 | export class LoginComponent {
12 | errorMessage: string;
13 | pageTitle = 'Log In';
14 |
15 | constructor(private authService: AuthService,
16 | private router: Router) {
17 | }
18 |
19 | cancel(): void {
20 | this.router.navigate(['welcome']);
21 | }
22 |
23 | login(loginForm: NgForm): void {
24 | if (loginForm && loginForm.valid) {
25 | const userName = loginForm.form.value.userName;
26 | const password = loginForm.form.value.password;
27 | this.authService.login(userName, password);
28 |
29 | if (this.authService.redirectUrl) {
30 | this.router.navigateByUrl(this.authService.redirectUrl);
31 | } else {
32 | this.router.navigate(['/products']);
33 | }
34 | } else {
35 | this.errorMessage = 'Please enter a user name and password.';
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/APM-Final/src/app/user/user.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 |
4 | import { LoginComponent } from './login.component';
5 | import { AuthService } from './auth.service';
6 | import { AuthGuard } from './auth-guard.service';
7 |
8 | import { SharedModule } from '../shared/shared.module';
9 |
10 | @NgModule({
11 | imports: [
12 | SharedModule,
13 | RouterModule.forChild([
14 | { path: 'login', component: LoginComponent }
15 | ])
16 | ],
17 | declarations: [
18 | LoginComponent
19 | ],
20 | providers: [
21 | AuthService,
22 | AuthGuard
23 | ]
24 | })
25 | export class UserModule { }
26 |
--------------------------------------------------------------------------------
/APM-Final/src/app/user/user.ts:
--------------------------------------------------------------------------------
1 | /* Defines the user entity */
2 | export interface IUser {
3 | id: number;
4 | userName: string;
5 | isAdmin: boolean;
6 | }
7 |
--------------------------------------------------------------------------------
/APM-Final/src/assets/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Modules/f56925658869cdbec8a6bc7bb08a0a9f096d6b0d/APM-Final/src/assets/images/logo.jpg
--------------------------------------------------------------------------------
/APM-Final/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/APM-Final/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/APM-Final/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DeborahK/Angular-Modules/f56925658869cdbec8a6bc7bb08a0a9f096d6b0d/APM-Final/src/favicon.ico
--------------------------------------------------------------------------------
/APM-Final/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
3 |
70 |
4 | {{pageTitle}}
5 |
6 |
7 |
8 |
66 |
68 |
69 | {{errorMessage}}
67 |