From 39d3ea7cd6d14bc264a315f4b13aca2312f586bc Mon Sep 17 00:00:00 2001 From: Yuri Lysov Date: Wed, 20 May 2020 21:24:06 +0300 Subject: [PATCH] Task-8 - Added fake BE with data base - Refactored services in according to backend integration plan - Realized pagination in home-page component - Changed a logic of search component - Delete/adding of courses are working correct now - Created interceptor for auth token checking --- mocks/data.json | 83 +++++++++++++++++++ package-lock.json | 5 ++ package.json | 4 +- .../add-course-page.component.html | 12 +-- .../add-course-page.component.ts | 24 ++++-- src/app/breadcrumb/breadcrumb.module.ts | 2 +- src/app/core/core.module.ts | 15 +++- src/app/core/models/course-item.interface.ts | 4 +- ...pe.ts => create-breadcrumb-string.pipe.ts} | 0 .../services/auth-interceptors.service.ts | 31 +++++++ src/app/core/services/auth.service.ts | 52 +++++++----- src/app/core/services/home-page.service.ts | 51 +++++++----- .../core/services/update-courses.service.ts | 16 ++++ .../edit-course-page.component.html | 10 +-- .../edit-course-page.component.ts | 13 ++- .../course-item/course-item.component.html | 5 ++ .../course-item/course-item.component.less | 3 + .../course-item/course-item.component.ts | 18 ++-- .../course-list/course-list.component.html | 12 ++- .../course-list/course-list.component.ts | 5 +- src/app/home-page/home-page.component.ts | 13 ++- src/app/home-page/home-page.module.ts | 4 +- .../toolbox/search/search.component.ts | 10 ++- src/app/login-page/login-page.component.html | 2 +- src/app/login-page/login-page.component.ts | 7 +- src/app/root/app.module.ts | 4 +- .../header-login/header-login.component.html | 2 +- .../header-login/header-login.component.ts | 2 +- 28 files changed, 312 insertions(+), 97 deletions(-) create mode 100644 mocks/data.json rename src/app/core/pipes/{createBreadcrumbString.pipe.ts => create-breadcrumb-string.pipe.ts} (100%) create mode 100644 src/app/core/services/auth-interceptors.service.ts create mode 100644 src/app/core/services/update-courses.service.ts diff --git a/mocks/data.json b/mocks/data.json new file mode 100644 index 0000000..9852079 --- /dev/null +++ b/mocks/data.json @@ -0,0 +1,83 @@ +{ + "courses": [ + { + "id": "1", + "title": "Video about Denmark", + "createdAtDate": "1/1/2019", + "durationTime": 120, + "topRated": true, + "authors": [], + "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla." + }, + { + "id": "2", + "title": "Video about Canada", + "createdAtDate": "5/20/2020", + "durationTime": 180, + "authors": [ + "me", + "me" + ], + "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla." + }, + { + "id": "3", + "title": "Video about Brazil", + "createdAtDate": "12/14/2021", + "durationTime": 180, + "topRated": false, + "authors": [ + "me", + "me", + "id3" + ], + "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla." + }, + { + "id": "4", + "title": "Video about Australia", + "createdAtDate": "10/20/2020", + "durationTime": 132, + "topRated": false, + "authors": [ + "me", + "me", + "id4" + ], + "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla." + }, + { + "id": "6", + "title": "Video about Sweden", + "createdAtDate": "1/1/2021", + "durationTime": 119, + "topRated": true, + "authors": [ + "me", + "me", + "id6" + ], + "description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla." + }, + { + "title": "New fantastic course !", + "createdAtDate": "2020-05-22T21:00:00.000Z", + "durationTime": "123", + "description": "Asd asd description ", + "authors": [ + "me" + ], + "id": "951abhdfm" + } + ], + "users": [ + { + "id": 1, + "firstName": "Vasya", + "lastName": "Pupkin", + "login": "vasya", + "password": "12345", + "token": "randomtoken_1234556789$" + } + ] +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7696d61..53b7fec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7678,6 +7678,11 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, + "ngx-pagination": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-5.0.0.tgz", + "integrity": "sha512-Ur0pTWRe2ZXoJ8impEzo0IZKxY5aEcQfSmL5uBqW1rHI2J6nfzgZAHsSLagKHFGchXq0PkRlDVVMcIaNxYJwvQ==" + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index c3f9796..4651588 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "build": "ng build", "test": "ng test", "lint": "ng lint", - "e2e": "ng e2e" + "e2e": "ng e2e", + "mock:server": "json-server --watch mocks/data.json" }, "private": true, "dependencies": { @@ -25,6 +26,7 @@ "@fortawesome/angular-fontawesome": "^0.6.1", "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-solid-svg-icons": "^5.13.0", + "ngx-pagination": "^5.0.0", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/add-course-page/add-course-page.component.html b/src/app/add-course-page/add-course-page.component.html index 6ae8899..42f3c6c 100644 --- a/src/app/add-course-page/add-course-page.component.html +++ b/src/app/add-course-page/add-course-page.component.html @@ -37,11 +37,13 @@ Date: - - - keyboard_arrow_down - - + + + Authors: diff --git a/src/app/add-course-page/add-course-page.component.ts b/src/app/add-course-page/add-course-page.component.ts index 88957f6..08a7044 100644 --- a/src/app/add-course-page/add-course-page.component.ts +++ b/src/app/add-course-page/add-course-page.component.ts @@ -1,7 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { HomePageService } from '../core/services/home-page.service'; import { CourseItemInfo } from '../core/models'; +import { MatDatepickerInputEvent } from '@angular/material/datepicker'; const coursesURL: string = '/courses'; @Component({ @@ -10,7 +11,6 @@ const coursesURL: string = '/courses'; styleUrls: ['./add-course-page.component.less'] }) export class AddCoursePageComponent { - public title: string; public description: string; public duration: number; @@ -19,7 +19,7 @@ export class AddCoursePageComponent { constructor ( private router: Router, - private homePageService: HomePageService + private homePageService: HomePageService, ) { } public cancelClick(): void { @@ -27,15 +27,23 @@ export class AddCoursePageComponent { } public addNewCourse(): void { - const sentDataCourse: CourseItemInfo[] = [{ + const authorsArr: string[] = this.authors.split(', '); + const sentDataCourse: CourseItemInfo = { title: this.title, createdAtDate: this.datapicker, durationTime: this.duration, description: this.description, - authors: this.authors - }]; + authors: authorsArr + }; - this.homePageService.createCourse(sentDataCourse); - this.router.navigate([coursesURL]); + this.homePageService.createCourse(sentDataCourse).subscribe ( + data => { + this.router.navigate([coursesURL]); + } + ); + } + + public addEvent(event: MatDatepickerInputEvent): void { + this.datapicker = event.value; } } diff --git a/src/app/breadcrumb/breadcrumb.module.ts b/src/app/breadcrumb/breadcrumb.module.ts index 6fa4942..f2c56ef 100644 --- a/src/app/breadcrumb/breadcrumb.module.ts +++ b/src/app/breadcrumb/breadcrumb.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { BreadcrumbComponent } from './breadcrumb.component'; -import { CreateBreadcrumbStringPipe } from '../core/pipes/createBreadcrumbString.pipe'; +import { CreateBreadcrumbStringPipe } from '../core/pipes/create-breadcrumb-string.pipe'; @NgModule({ declarations: [ diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 3eb8997..565fa4f 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -1,11 +1,20 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { HTTP_INTERCEPTORS } from '@angular/common/http'; +import { AuthInterceptor } from './services/auth-interceptors.service'; @NgModule({ declarations: [], exports: [], - imports: [ - CommonModule - ] + providers: [ + [ + { + provide: HTTP_INTERCEPTORS, + useClass: AuthInterceptor, + multi: true + } + ] + ], + imports: [ CommonModule ] }) export class CoreModule { } diff --git a/src/app/core/models/course-item.interface.ts b/src/app/core/models/course-item.interface.ts index c396df6..7b3540e 100644 --- a/src/app/core/models/course-item.interface.ts +++ b/src/app/core/models/course-item.interface.ts @@ -1,10 +1,10 @@ export interface CourseItemInfo { - id?: number; + id?: string; title: string; createdAtDate: Date; durationTime: number; description: string; topRated?: boolean; - authors?: string; + authors?: string[]; } diff --git a/src/app/core/pipes/createBreadcrumbString.pipe.ts b/src/app/core/pipes/create-breadcrumb-string.pipe.ts similarity index 100% rename from src/app/core/pipes/createBreadcrumbString.pipe.ts rename to src/app/core/pipes/create-breadcrumb-string.pipe.ts diff --git a/src/app/core/services/auth-interceptors.service.ts b/src/app/core/services/auth-interceptors.service.ts new file mode 100644 index 0000000..51e863c --- /dev/null +++ b/src/app/core/services/auth-interceptors.service.ts @@ -0,0 +1,31 @@ +import { Injectable } from '@angular/core'; +import { HttpEvent, HttpHandler, HttpInterceptor, HttpSentEvent } from '@angular/common/http'; +import { HttpRequest } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { AuthService } from './auth.service'; +import { CourseItemInfo, UserInfo } from '../models'; + +@Injectable() +export class AuthInterceptor implements HttpInterceptor { + constructor(private authService: AuthService) { + } + + public intercept( + req: HttpRequest, + next: HttpHandler + ): Observable> { + if (req.headers.get('SkipInterceptor')) { + return next.handle(req); + } + + if (this.authService.isAuthentificated()) { + const clonedRequest: HttpRequest = req.clone({ + headers: req.headers.set( + 'X-CustomAuthHeader', + this.authService.getToken() + ) + }); + return next.handle(clonedRequest); + } + } +} diff --git a/src/app/core/services/auth.service.ts b/src/app/core/services/auth.service.ts index 371d180..44067b6 100644 --- a/src/app/core/services/auth.service.ts +++ b/src/app/core/services/auth.service.ts @@ -1,35 +1,40 @@ import { Injectable } from '@angular/core'; -import { fakeUserInfo } from '../mocks/mocked-user'; import { UserInfo } from '../models'; -import { Observable, of } from 'rxjs'; +import { Observable } from 'rxjs'; +import { HttpClient } from '@angular/common/http'; +import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class AuthService { - private userInfo: UserInfo; + private userUrl: string = 'http://localhost:3000/users'; - constructor() { - this.userInfo = fakeUserInfo; - } + constructor( + private http: HttpClient, + ) { } - public getUserInfo(): UserInfo { - return this.userInfo; + public getUserInfo(): Observable { + return this.http.get(this.userUrl); } - public userLogin(sentLogin: string, sentPassword: string): boolean { - const { - login, - password, - firstName, - lastName, - token - } = this.userInfo; - - if (sentLogin === login && sentPassword === password && token) { - localStorage.setItem('userData', JSON.stringify({ firstName, lastName, token })); - } - return this.isAuthentificated(); + public userLogin(sentLogin: string, sentPassword: string): Observable { + return this.http.get(this.userUrl, { headers: { SkipInterceptor: 'true' }}) + .pipe( + map(data => { + const { + login, + password, + firstName, + lastName, + token + } = data[0]; + if ((sentLogin === login) && (sentPassword === password) && token) { + localStorage.setItem('userData', JSON.stringify({ firstName, lastName, token })); + } + return this.isAuthentificated(); + }) + ); } public userLogout(): boolean { @@ -41,4 +46,9 @@ export class AuthService { const userDataFromLS: UserInfo = JSON.parse(localStorage.getItem('userData')); return userDataFromLS && !!userDataFromLS.token; } + + public getToken(): string { + const userDataFromLS: UserInfo = JSON.parse(localStorage.getItem('userData')); + return userDataFromLS.token; + } } diff --git a/src/app/core/services/home-page.service.ts b/src/app/core/services/home-page.service.ts index ba42737..b803b21 100644 --- a/src/app/core/services/home-page.service.ts +++ b/src/app/core/services/home-page.service.ts @@ -1,39 +1,52 @@ import { Injectable } from '@angular/core'; -import { fakeVideoList } from '../mocks/mocked-courses'; import { CourseItemInfo } from '../models'; -import { OrderByTitleNamePipe } from '../pipes/order-by-title-name.pipe'; -import { Observable, of } from 'rxjs'; +import { Observable } from 'rxjs'; +import { HttpClient, HttpParams } from '@angular/common/http'; +import { switchMap } from 'rxjs/operators'; +const BASE_URL: string = 'http://localhost:3000/courses'; @Injectable({ providedIn: 'root' }) + export class HomePageService { - private coursesList: CourseItemInfo[]; - constructor(private orderByTitleNamePipe: OrderByTitleNamePipe) { - this.coursesList = fakeVideoList; - } + constructor( + private http: HttpClient, + ) { } public getCourses(): Observable { - return of(this.coursesList); + return this.http.get(BASE_URL); } - public sortListByName(): CourseItemInfo[] { - return this.orderByTitleNamePipe.transform(this.coursesList); + public searchCourse(text: string): Observable { + const params: HttpParams = new HttpParams().set('q', text); + return this.http.get(`${BASE_URL}`, { + params, + responseType: 'json' + }); } - public deleteCourseById(id: number): Observable { - const newArr: CourseItemInfo[] = this.coursesList.filter(item => item.id !== id); - return of(this.coursesList = newArr); + public deleteCourseById(id: string): Observable { + return this.http.delete(`${BASE_URL}/${id}`) + .pipe( + switchMap(() => this.getCourses()) + ); } - public createCourse(object: CourseItemInfo[]): void { - console.log(object); + public createCourse(body: CourseItemInfo): Observable { + const randomId: string = Math.random().toString(36).substr(2, 9); + body.id = randomId; + + return this.http.post(BASE_URL, body) + .pipe( + switchMap(() => { + return this.getCourses(); + }) + ); } - public updateItem(id: number): CourseItemInfo[] { - const courseList: CourseItemInfo[] = fakeVideoList; - const foundCourse: CourseItemInfo = courseList.find(course => course.id === id); - return [foundCourse]; + public updateItem(id: string): Observable { + return this.http.get(`${BASE_URL}/${id}`); } } diff --git a/src/app/core/services/update-courses.service.ts b/src/app/core/services/update-courses.service.ts new file mode 100644 index 0000000..f4e5d1a --- /dev/null +++ b/src/app/core/services/update-courses.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { Observable, Subject } from 'rxjs'; +import { CourseItemInfo } from '../models'; + +@Injectable({ + providedIn: 'root' +}) + +export class UpdateCoursesMessageService { + private notificationSource: Subject = new Subject(); + public coursesReceivedNotify: Observable = this.notificationSource.asObservable(); + + public updateCourse(newArr: CourseItemInfo[]): void { + this.notificationSource.next(newArr); + } +} diff --git a/src/app/edit-course-page/edit-course-page.component.html b/src/app/edit-course-page/edit-course-page.component.html index 23f94fc..83caa71 100644 --- a/src/app/edit-course-page/edit-course-page.component.html +++ b/src/app/edit-course-page/edit-course-page.component.html @@ -1,14 +1,14 @@ -
+

- Title: {{editableCourseData.title}} + Title: {{editableCourse.title}}

- Description: {{editableCourseData.description}} + Description: {{editableCourse.description}}

- Duration: {{editableCourseData.durationTime}} + Duration: {{editableCourse.durationTime}}

- Created at: {{editableCourseData.createdAtDate}} + Created at: {{editableCourse.createdAtDate}}

diff --git a/src/app/edit-course-page/edit-course-page.component.ts b/src/app/edit-course-page/edit-course-page.component.ts index 35f7626..f8a0c57 100644 --- a/src/app/edit-course-page/edit-course-page.component.ts +++ b/src/app/edit-course-page/edit-course-page.component.ts @@ -9,9 +9,7 @@ import { CourseItemInfo } from '../core/models'; styleUrls: ['./edit-course-page.component.less'] }) export class EditCoursePageComponent implements OnInit { - public name: string; - public editableCourse: CourseItemInfo[]; - public editableCourseData: CourseItemInfo; + public editableCourse: CourseItemInfo; constructor( private homePageService: HomePageService, @@ -19,13 +17,14 @@ export class EditCoursePageComponent implements OnInit { public ngOnInit(): void { this.route.paramMap.subscribe(params => { - const courseId: number = +params.get('courseId'); + const courseId: string = params.get('courseId'); this.editCourseById(courseId); }); } - public editCourseById(id: number): void { - this.editableCourse = this.homePageService.updateItem(id); - this.editableCourseData = this.editableCourse[0]; + public editCourseById(id: string): void { + this.homePageService.updateItem(id).subscribe(data => { + return this.editableCourse = data; + }); } } diff --git a/src/app/home-page/course-list/course-item/course-item.component.html b/src/app/home-page/course-list/course-item/course-item.component.html index 1f4c9c8..23f66e2 100644 --- a/src/app/home-page/course-list/course-item/course-item.component.html +++ b/src/app/home-page/course-list/course-item/course-item.component.html @@ -28,6 +28,11 @@ {{item.createdAtDate | date}}

+

+ {{ courseAuthors }} +

diff --git a/src/app/home-page/course-list/course-item/course-item.component.less b/src/app/home-page/course-list/course-item/course-item.component.less index 05047b1..f485851 100644 --- a/src/app/home-page/course-list/course-item/course-item.component.less +++ b/src/app/home-page/course-list/course-item/course-item.component.less @@ -43,6 +43,9 @@ p:first-child { margin-right: 20px; } + &-authors { + margin-left: 20px; + } } &-title { diff --git a/src/app/home-page/course-list/course-item/course-item.component.ts b/src/app/home-page/course-list/course-item/course-item.component.ts index 67bd1bf..5dff41f 100644 --- a/src/app/home-page/course-list/course-item/course-item.component.ts +++ b/src/app/home-page/course-list/course-item/course-item.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; import { IconDefinition, faEdit, faTrash, faClock, faCalendar, faStar } from '@fortawesome/free-solid-svg-icons'; import { CourseItemInfo } from 'src/app/core/models'; import { Router } from '@angular/router'; @@ -11,10 +11,12 @@ import { HomePageService } from 'src/app/core/services/home-page.service'; templateUrl: './course-item.component.html', styleUrls: ['./course-item.component.less'] }) -export class CourseItemComponent { +export class CourseItemComponent implements OnInit { @Input() public item: CourseItemInfo; @Input() public routerLink: Router; - @Output() public onDeleteCourse: EventEmitter = new EventEmitter(); + @Output() public onDeleteCourse: EventEmitter = new EventEmitter(); + + public courseAuthors: string; public editButtonIcon: IconDefinition = faEdit; public trashButtonIcon: IconDefinition = faTrash; @@ -28,16 +30,20 @@ export class CourseItemComponent { public router: Router ) { } - public onDeleteCourseEmit(id: number, title: string): void { + public ngOnInit(): void { + this.courseAuthors = Array.from(this.item.authors).join(', '); + } + + public onDeleteCourseEmit(id: string, title: string): void { this.openDialog(id, title); } - public isEditedCourse(id: number): void { + public isEditedCourse(id: string): void { this.homePageService.updateItem(id); this.router.navigate(['/courses', id]); } - public openDialog(id: number, title: string): void { + public openDialog(id: string, title: string): void { const dialogRef: MatDialogRef = this.matDialog.open(ConfirmationDialogComponent, { width: '400px', height: '150px', diff --git a/src/app/home-page/course-list/course-list.component.html b/src/app/home-page/course-list/course-list.component.html index 8ae0b23..6622591 100644 --- a/src/app/home-page/course-list/course-list.component.html +++ b/src/app/home-page/course-list/course-list.component.html @@ -1,13 +1,17 @@
    -
    - LOAD MORE -

    NO DATA. FEEL FREE TO ADD NEW COURSE

    + + +
    +

    NO DATA. FEEL FREE TO ADD NEW COURSE

diff --git a/src/app/home-page/course-list/course-list.component.ts b/src/app/home-page/course-list/course-list.component.ts index 68a2a4b..cba859f 100644 --- a/src/app/home-page/course-list/course-list.component.ts +++ b/src/app/home-page/course-list/course-list.component.ts @@ -1,7 +1,6 @@ import { Component, Input } from '@angular/core'; import { CourseItemInfo } from 'src/app/core/models'; import { HomePageService } from '../../core/services/home-page.service'; -import { switchMap } from 'rxjs/operators'; @Component({ selector: 'app-course-list', @@ -10,10 +9,10 @@ import { switchMap } from 'rxjs/operators'; }) export class CourseListComponent { @Input() public courses: CourseItemInfo[] = []; - + public coursesPage: number = 1; constructor (private homePageService: HomePageService) {} - public onDeleteCourse(id: number): void { + public onDeleteCourse(id: string): void { this.homePageService.deleteCourseById(id).subscribe(data => { this.courses = data; }); diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts index c68b598..68e27bd 100644 --- a/src/app/home-page/home-page.component.ts +++ b/src/app/home-page/home-page.component.ts @@ -1,6 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { CourseItemInfo } from '../core/models'; import { HomePageService } from '../core/services/home-page.service'; +import { UpdateCoursesMessageService } from '../core/services/update-courses.service'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-home-page', @@ -10,12 +12,19 @@ import { HomePageService } from '../core/services/home-page.service'; export class HomePageComponent { public courses: CourseItemInfo[]; + public courses$: Observable; - constructor (private homePageService: HomePageService) { } + constructor ( + private homePageService: HomePageService, + private updateCoursesMessageService: UpdateCoursesMessageService + ) { } public ngOnInit(): void { this.homePageService.getCourses().subscribe( data => this.courses = data ); + this.updateCoursesMessageService.coursesReceivedNotify.subscribe( + data => this.courses = data + ); } } diff --git a/src/app/home-page/home-page.module.ts b/src/app/home-page/home-page.module.ts index 489a8ef..70cafe0 100644 --- a/src/app/home-page/home-page.module.ts +++ b/src/app/home-page/home-page.module.ts @@ -13,6 +13,7 @@ import { ChangeBorderColorDirective } from '../core/directives/change-border-col import { OrderByDateCreationPipe } from '../core/pipes/order-by-date-creation.pipe'; import { OrderByTitleNamePipe } from '../core/pipes/order-by-title-name.pipe'; import { RouterModule } from '@angular/router'; +import { NgxPaginationModule } from 'ngx-pagination'; @NgModule({ declarations: [ @@ -32,7 +33,8 @@ import { RouterModule } from '@angular/router'; CommonModule, FontAwesomeModule, FormsModule, - RouterModule + RouterModule, + NgxPaginationModule ], providers: [ DatePipe, diff --git a/src/app/home-page/toolbox/search/search.component.ts b/src/app/home-page/toolbox/search/search.component.ts index 024dd57..e683f6d 100644 --- a/src/app/home-page/toolbox/search/search.component.ts +++ b/src/app/home-page/toolbox/search/search.component.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import { IconDefinition, faSearch } from '@fortawesome/free-solid-svg-icons'; import { HomePageService } from '../../../core/services/home-page.service'; +import { UpdateCoursesMessageService } from 'src/app/core/services/update-courses.service'; @Component({ selector: 'app-search', @@ -11,9 +12,14 @@ export class SearchComponent { public faSearchIcon: IconDefinition = faSearch; public searchResult: string = ''; - constructor (private homePageService: HomePageService) {} + constructor ( + private homePageService: HomePageService, + private updateCoursesMessage: UpdateCoursesMessageService + ) { } public searchCourses(): void { - this.homePageService.sortListByName(); + this.homePageService.searchCourse(this.searchResult).subscribe( + data => this.updateCoursesMessage.updateCourse(data) + ); } } diff --git a/src/app/login-page/login-page.component.html b/src/app/login-page/login-page.component.html index 29b554e..8f1700b 100644 --- a/src/app/login-page/login-page.component.html +++ b/src/app/login-page/login-page.component.html @@ -28,7 +28,7 @@