Skip to content

Commit 74d0716

Browse files
humayoun007humayoun007
authored
Add files via upload
1 parent c3779c9 commit 74d0716

38 files changed

+1045
-0
lines changed

‎src/app/actor-detail/actor-detail.component.css

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* ActorDetailComponent's private CSS styles */
2+
label {
3+
display: inline-block;
4+
width: 3em;
5+
margin: .5em 0;
6+
color: #607D8B;
7+
font-weight: bold;
8+
}
9+
input {
10+
height: 2em;
11+
font-size: 1em;
12+
padding-left: .4em;
13+
}
14+
button {
15+
margin-top: 20px;
16+
font-family: Arial;
17+
background-color: #eee;
18+
border: none;
19+
padding: 5px 10px;
20+
border-radius: 4px;
21+
cursor: pointer; cursor: hand;
22+
}
23+
button:hover {
24+
background-color: #cfd8dc;
25+
}
26+
button:disabled {
27+
background-color: #eee;
28+
color: #ccc;
29+
cursor: auto;
30+
}
31+
32+

‎src/app/actor-detail/actor-detail.component.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div *ngIf="actor">
2+
<h2>{{ actor.name | uppercase }} Details</h2>
3+
<div><span>id: </span>{{actor.id}}</div>
4+
<div>
5+
<label>name:
6+
<input [(ngModel)]="actor.name" placeholder="name"/>
7+
</label>
8+
</div>
9+
<button (click)="goBack()">go back</button>
10+
<button (click)="save()">save</button>
11+
</div>
12+

‎src/app/actor-detail/actor-detail.component.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
3+
import { Component, OnInit, Input } from '@angular/core';
4+
5+
import { ActivatedRoute } from '@angular/router';
6+
import { Location } from '@angular/common';
7+
8+
9+
import { Actor } from './../actor';
10+
import { ActorService } from './../actor.services';
11+
12+
@Component({
13+
selector: 'app-actor-detail',
14+
templateUrl: './actor-detail.component.html',
15+
styleUrls: [ './actor-detail.component.css' ]
16+
})
17+
export class ActorDetailComponent implements OnInit {
18+
@Input() actor: Actor;
19+
20+
constructor(
21+
private route: ActivatedRoute,
22+
private actorService: ActorService,
23+
private location: Location
24+
) {}
25+
26+
ngOnInit(): void {
27+
this.getActor();
28+
}
29+
30+
getActor(): void {
31+
const id = +this.route.snapshot.paramMap.get('id');
32+
this.actorService.getActor(id)
33+
.subscribe(actor => this.actor = actor);
34+
}
35+
36+
goBack(): void {
37+
this.location.back();
38+
}
39+
40+
save(): void {
41+
this.actorService.updateActor(this.actor)
42+
.subscribe(() => this.goBack());
43+
}
44+
}

‎src/app/actor-search/actor-search.component.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* ActorSearch private styles */
2+
.search-result li {
3+
border-bottom: 1px solid gray;
4+
border-left: 1px solid gray;
5+
border-right: 1px solid gray;
6+
width:195px;
7+
height: 16px;
8+
padding: 5px;
9+
background-color: white;
10+
cursor: pointer;
11+
list-style-type: none;
12+
}
13+
14+
.search-result li:hover {
15+
background-color: #607D8B;
16+
}
17+
18+
.search-result li a {
19+
color: #888;
20+
display: block;
21+
text-decoration: none;
22+
}
23+
24+
.search-result li a:hover {
25+
color: white;
26+
}
27+
.search-result li a:active {
28+
color: white;
29+
}
30+
#search-box {
31+
width: 200px;
32+
height: 20px;
33+
}
34+
35+
36+
ul.search-result {
37+
margin-top: 0;
38+
padding-left: 0;
39+
}
40+
41+

‎src/app/actor-search/actor-search.component.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div id="search-component">
2+
<h4>Actor Search</h4>
3+
4+
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
5+
6+
<ul class="search-result">
7+
<li *ngFor="let actor of actors$ | async" >
8+
<a routerLink="/detail/{{actor.id}}">
9+
{{actor.name}}
10+
</a>
11+
</li>
12+
</ul>
13+
</div>
14+

‎src/app/actor-search/actor-search.component.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
import { Component, OnInit } from '@angular/core';
3+
import { Observable, Subject } from 'rxjs';
4+
5+
import {
6+
debounceTime, distinctUntilChanged, switchMap
7+
} from 'rxjs/operators';
8+
9+
import { Actor } from '../actor';
10+
import { ActorService } from './../actor.services';
11+
12+
13+
14+
@Component({
15+
selector: 'app-actor-search',
16+
templateUrl: './actor-search.component.html',
17+
styleUrls: [ './actor-search.component.css' ]
18+
})
19+
export class ActorSearchComponent implements OnInit {
20+
actors$: Observable<Actor[]>;
21+
private searchTerms = new Subject<string>();
22+
23+
constructor(private actorService: ActorService) {}
24+
25+
// Push a search term into the observable stream.
26+
search(term: string): void {
27+
this.searchTerms.next(term);
28+
}
29+
30+
ngOnInit(): void {
31+
this.actors$ = this.searchTerms.pipe(
32+
// wait 300ms after each keystroke before considering the term
33+
debounceTime(300),
34+
35+
// ignore new term if same as previous term
36+
distinctUntilChanged(),
37+
38+
// switch to new search observable each time the term changes
39+
switchMap((term: string) => this.actorService.searchActors(term)),
40+
);
41+
}
42+
}
43+
44+

‎src/app/actor.services.ts

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { Injectable } from "@angular/core";
2+
import { HttpClient, HttpHeaders } from '@angular/common/http';
3+
import { Observable, of } from 'rxjs';
4+
import { catchError, map, tap } from 'rxjs/operators';
5+
6+
import { Actor } from './actor';
7+
import { MessageService } from "./message.service";
8+
9+
const httpOptions = {
10+
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
11+
};
12+
13+
14+
@Injectable({ providedIn: 'root' })
15+
export class ActorService {
16+
17+
private actorsUrl = 'api/actors'; // URL to web api
18+
19+
constructor(
20+
private http: HttpClient,
21+
private messageService: MessageService) { }
22+
23+
/** GET actors from the server */
24+
getActors (): Observable<Actor[]> {
25+
return this.http.get<Actor[]>(this.actorsUrl)
26+
.pipe(
27+
tap(actors => this.log(`fetched actors`)),
28+
catchError(this.handleError('getActors', []))
29+
);
30+
}
31+
32+
/** GET actor by id. Return `undefined` when id not found */
33+
getActorNo404<Data>(id: number): Observable<Actor> {
34+
const url = `${this.actorsUrl}/?id=${id}`;
35+
return this.http.get<Actor[]>(url)
36+
.pipe(
37+
map(actors => actors[0]), // returns a {0|1} element array
38+
tap(h => {
39+
const outcome = h ? `fetched` : `did not find`;
40+
this.log(`${outcome} actor id=${id}`);
41+
}),
42+
catchError(this.handleError<Actor>(`getActor id=${id}`))
43+
);
44+
}
45+
46+
/** GET actor by id. Will 404 if id not found */
47+
getActor(id: number): Observable<Actor> {
48+
const url = `${this.actorsUrl}/${id}`;
49+
return this.http.get<Actor>(url).pipe(
50+
tap(_ => this.log(`fetched actor id=${id}`)),
51+
catchError(this.handleError<Actor>(`getActor id=${id}`))
52+
);
53+
}
54+
55+
/* GET actors whose name contains search term */
56+
searchActors(term: string): Observable<Actor[]> {
57+
if (!term.trim()) {
58+
// if not search term, return empty hero array.
59+
return of([]);
60+
}
61+
return this.http.get<Actor[]>(`${this.actorsUrl}/?name=${term}`).pipe(
62+
tap(_ => this.log(`found actors matching "${term}"`)),
63+
catchError(this.handleError<Actor[]>('searchActors', []))
64+
);
65+
}
66+
67+
//////// Save methods //////////
68+
69+
/** POST: add a new actor to the server */
70+
addActor (actor: Actor): Observable<Actor> {
71+
return this.http.post<Actor>(this.actorsUrl, actor, httpOptions).pipe(
72+
tap((actor: Actor) => this.log(`added actor w/ id=${actor.id}`)),
73+
catchError(this.handleError<Actor>('addActor'))
74+
);
75+
}
76+
77+
/** DELETE: delete the actor from the server */
78+
deleteActor (actor: Actor | number): Observable<Actor> {
79+
const id = typeof actor === 'number' ? actor : actor.id;
80+
const url = `${this.actorsUrl}/${id}`;
81+
82+
return this.http.delete<Actor>(url, httpOptions).pipe(
83+
tap(_ => this.log(`deleted actor id=${id}`)),
84+
catchError(this.handleError<Actor>('deleteActor'))
85+
);
86+
}
87+
88+
/** PUT: update the actor on the server */
89+
updateActor (actor: Actor): Observable<any> {
90+
return this.http.put(this.actorsUrl, actor, httpOptions).pipe(
91+
tap(_ => this.log(`updated actor id=${actor.id}`)),
92+
catchError(this.handleError<any>('updateActor'))
93+
);
94+
}
95+
96+
/**
97+
* Handle Http operation that failed.
98+
* Let the app continue.
99+
* @param operation - name of the operation that failed
100+
* @param result - optional value to return as the observable result
101+
*/
102+
private handleError<T> (operation = 'operation', result?: T) {
103+
return (error: any): Observable<T> => {
104+
105+
// TODO: send the error to remote logging infrastructure
106+
console.error(error); // log to console instead
107+
108+
// TODO: better job of transforming error for user consumption
109+
this.log(`${operation} failed: ${error.message}`);
110+
111+
// Let the app keep running by returning an empty result.
112+
return of(result as T);
113+
};
114+
}
115+
116+
/** Log a ActorService message with the MessageService */
117+
private log(message: string) {
118+
this.messageService.add('ActorService: ' + message);
119+
}
120+
}

‎src/app/actor.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export class Actor{
2+
id:number;
3+
name:string;
4+
popularity:string;
5+
6+
}

0 commit comments

Comments
 (0)