From 487ba304d93b934b91e5560b42eff839899d69c7 Mon Sep 17 00:00:00 2001 From: Yuri Lysov Date: Fri, 8 May 2020 00:52:05 +0300 Subject: [PATCH 1/2] Task 4 - Added necessary directives - Added necessary pipes - Refactored home-page component + added service for it - Added new functionality for search button --- src/app/core/commons/variables.less | 2 + .../change-border-color.directive.ts | 33 ++++++++++++++++ src/app/core/mocks/mocked-data.ts | 23 ++++++----- src/app/core/models/course-item.interface.ts | 1 + .../core/pipes/orderByDateCreation.pipe.ts | 25 ++++++++++++ src/app/core/pipes/orderByTitleName.pipe.ts | 23 +++++++++++ .../course-item/course-item.component.html | 20 ++++++++-- .../course-item/course-item.component.less | 39 ++++++++++--------- .../course-item/course-item.component.ts | 3 +- .../course-list/course-list.component.html | 10 +++-- .../course-list/course-list.component.less | 3 +- src/app/home-page/home-page.component.html | 1 - src/app/home-page/home-page.component.ts | 12 +++++- src/app/home-page/home-page.module.ts | 14 ++++++- src/app/home-page/home-page.service.spec.ts | 16 ++++++++ src/app/home-page/home-page.service.ts | 21 ++++++++++ .../toolbox/search/search.component.ts | 4 ++ 17 files changed, 208 insertions(+), 42 deletions(-) create mode 100644 src/app/core/directives/change-border-color.directive.ts create mode 100644 src/app/core/pipes/orderByDateCreation.pipe.ts create mode 100644 src/app/core/pipes/orderByTitleName.pipe.ts create mode 100644 src/app/home-page/home-page.service.spec.ts create mode 100644 src/app/home-page/home-page.service.ts diff --git a/src/app/core/commons/variables.less b/src/app/core/commons/variables.less index d9bc831..d077dae 100644 --- a/src/app/core/commons/variables.less +++ b/src/app/core/commons/variables.less @@ -8,3 +8,5 @@ @color-green1: #8cc837; @color-blue: #30b6dd; @color-blue1: #64b6dd; +@color-yellow: #FFD700; +@color-yellow1: #FFFACD; diff --git a/src/app/core/directives/change-border-color.directive.ts b/src/app/core/directives/change-border-color.directive.ts new file mode 100644 index 0000000..c404546 --- /dev/null +++ b/src/app/core/directives/change-border-color.directive.ts @@ -0,0 +1,33 @@ +import { Directive, ElementRef, Input, OnInit } from '@angular/core'; +import { DatePipe } from '@angular/common'; + +const DAYS_IN_MILLISEC: number = 1.21e+9; +const GREEN_COLOR: string = '#90EE90'; +const BLUE_COLOR: string = '#87CEFA'; + +@Directive({ + selector: '[appChangeBorderColor]' +}) + +export class ChangeBorderColorDirective implements OnInit { + @Input() private createdAtDate: string; + constructor(private el: ElementRef, public datepipe: DatePipe) { } + + public ngOnInit(): void { + this.setColor(this.createdAtDate); + } + + public setColor(creationDate: string): void { + const currentDate: Date = new Date(); + const createdAtDateTransform: Date = new Date(creationDate); + const dateDiff: boolean = currentDate.getTime() - createdAtDateTransform.getTime() > DAYS_IN_MILLISEC; + + if (createdAtDateTransform < currentDate && dateDiff) { + this.el.nativeElement.style.borderColor = GREEN_COLOR; + } + + if (createdAtDateTransform > currentDate) { + this.el.nativeElement.style.borderColor = BLUE_COLOR; + } + } +} diff --git a/src/app/core/mocks/mocked-data.ts b/src/app/core/mocks/mocked-data.ts index bfb19d2..4cb0385 100644 --- a/src/app/core/mocks/mocked-data.ts +++ b/src/app/core/mocks/mocked-data.ts @@ -3,9 +3,10 @@ import { CourseItemInfo } from '../models'; export const fakeVideoList: CourseItemInfo[] = [ { id: 1, - title: 'video_1', - createdAtDate: new Date, + title: 'Video about Denmark', + createdAtDate: new Date(2019, 1, 1), durationTime: 120, + topRated: true, description: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus @@ -16,9 +17,10 @@ export const fakeVideoList: CourseItemInfo[] = [ } , { id: 2, - title: 'video_2', + title: 'Video about Canada', createdAtDate: new Date, durationTime: 180, + topRated: true, description: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus @@ -29,9 +31,10 @@ export const fakeVideoList: CourseItemInfo[] = [ }, { id: 3, - title: 'video_3', - createdAtDate: new Date, + title: 'Video about Brazil', + createdAtDate: new Date(2021, 12, 14), durationTime: 180, + topRated: false, description: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus @@ -42,9 +45,10 @@ export const fakeVideoList: CourseItemInfo[] = [ }, { id: 4, - title: 'video_4', - createdAtDate: new Date, + title: 'Video about Australia', + createdAtDate: new Date(2020, 10, 20), durationTime: 132, + topRated: false, description: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus @@ -55,9 +59,10 @@ export const fakeVideoList: CourseItemInfo[] = [ }, { id: 5, - title: 'video_5', - createdAtDate: new Date, + title: 'Video about Russia', + createdAtDate: new Date(2014, 1, 1), durationTime: 120, + topRated: true, description: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus diff --git a/src/app/core/models/course-item.interface.ts b/src/app/core/models/course-item.interface.ts index a5361ca..312c951 100644 --- a/src/app/core/models/course-item.interface.ts +++ b/src/app/core/models/course-item.interface.ts @@ -5,4 +5,5 @@ export interface CourseItemInfo { createdAtDate: Date; durationTime: number; description: string; + topRated: boolean; } diff --git a/src/app/core/pipes/orderByDateCreation.pipe.ts b/src/app/core/pipes/orderByDateCreation.pipe.ts new file mode 100644 index 0000000..9950b05 --- /dev/null +++ b/src/app/core/pipes/orderByDateCreation.pipe.ts @@ -0,0 +1,25 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { CourseItemInfo } from '../models'; +/* + * Sort the array asceding by creational date + * Usage: + * array | orderByDateCreation + * Example: + * {{ arrayData | orderByDateCreation }} + * sort asceding by creational date +*/ + +@Pipe({name: 'orderByDateCreation'}) + +export class OrderByDateCreationPipe implements PipeTransform { + public transform(array: CourseItemInfo[]): CourseItemInfo[] { + if (!Array.isArray(array)) { + return; + } + return array.sort((firstElem, secondElem) => { + const firstElemDateMs: number = new Date(firstElem.createdAtDate).getTime(); + const secondElemDateMs: number = new Date(secondElem.createdAtDate).getTime(); + return firstElemDateMs - secondElemDateMs; + }); + } +} diff --git a/src/app/core/pipes/orderByTitleName.pipe.ts b/src/app/core/pipes/orderByTitleName.pipe.ts new file mode 100644 index 0000000..76c2927 --- /dev/null +++ b/src/app/core/pipes/orderByTitleName.pipe.ts @@ -0,0 +1,23 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { CourseItemInfo } from '../models'; +/* + * Sort the array asceding by title name + * Usage: + * array | orderByTitleName + * + * Result: + * Return sorted array by title name +*/ + +@Pipe({name: 'orderByTitleName'}) + +export class OrderByTitleNamePipe implements PipeTransform { + public transform(array: CourseItemInfo[]): CourseItemInfo[] { + if (!Array.isArray(array)) { + return; + } + return array.sort((one, two) => { + return one.title < two.title ? -1 : 1; + }); + } +} 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 d3b6d33..a83eada 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 @@ -1,13 +1,25 @@ -
  • +
  • -
    - title: {{item.title}} + title: {{item.title | uppercase}} + + + +
    -

    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 e54ca20..d08069b 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 @@ -4,12 +4,28 @@ display: flex; flex-wrap: nowrap; padding: 20px; - border: 1px solid @color-gray; + border: 2px solid @color-gray; background-color: @color-white; border-radius: 6px; box-shadow: 5px 5px 18px @color-gray2; margin-bottom: 20px; + &--changed-background { + background-color: @color-yellow1; + } + + &-top-rated { + display: block; + + &-icon { + color: @color-yellow; + } + + &--display-none { + display: none; + } + } + &-data { width: 80%; padding-right: 50px; @@ -31,14 +47,13 @@ &-title { display: flex; + align-items: center; a { font-size: 30px; text-decoration: none; - text-transform: uppercase; - - &:hover { - text-decoration: underline; - } + } + .course-list-item-top-rated { + font-size: 30px; } } } @@ -72,16 +87,4 @@ } } } - - &-loadmore { - margin-top: 15px; - display: flex; - justify-content: center; - align-items: center; - height: 50px; - border: 1px solid @color-gray; - box-shadow: 5px 5px 18px @color-gray2; - background-color: @color-white; - border-radius: 6px; - } } \ No newline at end of file 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 91fed04..019bd79 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,5 +1,5 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; -import { IconDefinition, faEdit, faTrash, faClock, faCalendar } from '@fortawesome/free-solid-svg-icons'; +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'; @@ -17,6 +17,7 @@ export class CourseItemComponent { public trashButtonIcon: IconDefinition = faTrash; public clockButtonIcon: IconDefinition = faClock; public calendarButtonIcon: IconDefinition = faCalendar; + public topRatedIcon: IconDefinition = faStar; public onDeleteCourseEmit(id: number): void { return this.onDeleteCourse.emit(id); 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 7833452..fe6c020 100644 --- a/src/app/home-page/course-list/course-list.component.html +++ b/src/app/home-page/course-list/course-list.component.html @@ -1,12 +1,14 @@ -

      + diff --git a/src/app/home-page/course-list/course-list.component.less b/src/app/home-page/course-list/course-list.component.less index 3938adb..fa31152 100644 --- a/src/app/home-page/course-list/course-list.component.less +++ b/src/app/home-page/course-list/course-list.component.less @@ -4,7 +4,7 @@ list-style-type: none; padding-inline-start: 0; - &-item-loadmore { + &-item-message { margin-top: 15px; display: flex; justify-content: center; @@ -14,5 +14,6 @@ box-shadow: 5px 5px 18px @color-gray2; background-color: @color-white; border-radius: 6px; + font-family: 'SourseSansPro Regular'; } } \ No newline at end of file diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html index b782d6b..40912dd 100644 --- a/src/app/home-page/home-page.component.html +++ b/src/app/home-page/home-page.component.html @@ -2,7 +2,6 @@
      -
      diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts index 6c5d298..29668d9 100644 --- a/src/app/home-page/home-page.component.ts +++ b/src/app/home-page/home-page.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { fakeVideoList } from '../core/mocks/mocked-data'; import { CourseItemInfo } from '../core/models'; +import { HomePageService } from './home-page.service'; @Component({ selector: 'app-home-page', @@ -11,7 +11,15 @@ export class HomePageComponent implements OnInit { public courses: CourseItemInfo[]; + constructor( + private homePageService: HomePageService, + ) { } + public ngOnInit(): void { - this.courses = fakeVideoList; + this.getCourses(); + } + + public getCourses(): void { + this.courses = this.homePageService.getCourses(); } } diff --git a/src/app/home-page/home-page.module.ts b/src/app/home-page/home-page.module.ts index 789ba3b..1a5e81b 100644 --- a/src/app/home-page/home-page.module.ts +++ b/src/app/home-page/home-page.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { CommonModule } from '@angular/common'; +import { CommonModule, DatePipe } from '@angular/common'; import { HomePageComponent } from './home-page.component'; import { CourseListComponent } from './course-list/course-list.component'; import { ToolboxComponent } from './toolbox/toolbox.component'; @@ -9,6 +9,9 @@ import { AddCourseComponent } from './toolbox/add-course/add-course.component'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { CourseItemComponent } from './course-list/course-item/course-item.component'; import { TransformMinutesToHoursPipe } from '../core/pipes/transform-minutes.pipe'; +import { ChangeBorderColorDirective } from '../core/directives/change-border-color.directive'; +import { OrderByDateCreationPipe } from '../core/pipes/orderByDateCreation.pipe'; +import { OrderByTitleNamePipe } from '../core/pipes/orderByTitleName.pipe'; @NgModule({ declarations: [ @@ -18,13 +21,20 @@ import { TransformMinutesToHoursPipe } from '../core/pipes/transform-minutes.pip SearchComponent, AddCourseComponent, CourseItemComponent, - TransformMinutesToHoursPipe + TransformMinutesToHoursPipe, + OrderByDateCreationPipe, + OrderByTitleNamePipe, + ChangeBorderColorDirective ], exports: [HomePageComponent], imports: [ CommonModule, FontAwesomeModule, FormsModule + ], + providers: [ + DatePipe, + OrderByTitleNamePipe ] }) export class HomePageModule { } diff --git a/src/app/home-page/home-page.service.spec.ts b/src/app/home-page/home-page.service.spec.ts new file mode 100644 index 0000000..d9f5765 --- /dev/null +++ b/src/app/home-page/home-page.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { HomePageService } from './home-page.service'; + +describe('HomePageService', () => { + let service: HomePageService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(HomePageService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/home-page/home-page.service.ts b/src/app/home-page/home-page.service.ts new file mode 100644 index 0000000..72d7335 --- /dev/null +++ b/src/app/home-page/home-page.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import { fakeVideoList } from '../core/mocks/mocked-data'; +import { CourseItemInfo } from '../core/models'; +import { OrderByTitleNamePipe } from '../core/pipes/orderByTitleName.pipe'; + +@Injectable({ + providedIn: 'root' +}) +export class HomePageService { + private coursesList: CourseItemInfo[] = fakeVideoList; + + constructor(private orderByTitleNamePipe: OrderByTitleNamePipe) { } + + public getCourses(): CourseItemInfo[] { + return this.coursesList; + } + + public sendMessageSortByName(): void { + this.orderByTitleNamePipe.transform(this.coursesList); + } +} diff --git a/src/app/home-page/toolbox/search/search.component.ts b/src/app/home-page/toolbox/search/search.component.ts index ba137b9..d57de98 100644 --- a/src/app/home-page/toolbox/search/search.component.ts +++ b/src/app/home-page/toolbox/search/search.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { IconDefinition, faSearch } from '@fortawesome/free-solid-svg-icons'; +import { HomePageService } from '../../home-page.service'; @Component({ selector: 'app-search', @@ -10,7 +11,10 @@ export class SearchComponent { public faSearchIcon: IconDefinition = faSearch; public searchResult: string = ''; + constructor (private homePageService: HomePageService) {} + public searchCourses(): void { + this.homePageService.sendMessageSortByName(); console.log(this.searchResult); } } From 284a9a5a8e34ec8cee6a4f46fc5c615266b042c7 Mon Sep 17 00:00:00 2001 From: Yuri Lysov Date: Sun, 10 May 2020 19:24:31 +0300 Subject: [PATCH 2/2] Task-4 - Fixed comments --- src/app/core/commons/variables.less | 12 ------------ .../directives/change-border-color.directive.ts | 13 +++++++------ src/app/core/modules/course-page.module.ts | 10 ++++++++++ .../course-item/course-item.component.html | 2 +- .../course-item/course-item.component.less | 12 +++++++++++- .../course-list/course-list.component.less | 2 +- src/app/home-page/home-page.component.less | 2 +- src/app/home-page/home-page.component.ts | 6 +++--- src/app/home-page/home-page.module.ts | 6 ++++-- src/app/home-page/home-page.service.ts | 7 +++---- .../toolbox/add-course/add-course.component.less | 2 +- .../home-page/toolbox/search/search.component.less | 2 +- .../home-page/toolbox/search/search.component.ts | 1 - src/app/root/app.component.less | 2 +- src/app/shared/footer/footer.component.less | 2 +- .../header-login/header-login.component.less | 2 +- src/app/shared/header/header.component.less | 2 +- src/assets/less/modules/variables.less | 14 ++++++++++++++ 18 files changed, 61 insertions(+), 38 deletions(-) delete mode 100644 src/app/core/commons/variables.less create mode 100644 src/app/core/modules/course-page.module.ts create mode 100644 src/assets/less/modules/variables.less diff --git a/src/app/core/commons/variables.less b/src/app/core/commons/variables.less deleted file mode 100644 index d077dae..0000000 --- a/src/app/core/commons/variables.less +++ /dev/null @@ -1,12 +0,0 @@ -@color-white: white; -@color-gray: #f2f3f7; -@color-gray1: #f2f3f7df; -@color-gray2: #d9dbe3; -@color-gray3: #979cac; -@color-black: #414452; -@color-green: #9bc837; -@color-green1: #8cc837; -@color-blue: #30b6dd; -@color-blue1: #64b6dd; -@color-yellow: #FFD700; -@color-yellow1: #FFFACD; diff --git a/src/app/core/directives/change-border-color.directive.ts b/src/app/core/directives/change-border-color.directive.ts index c404546..d3b356d 100644 --- a/src/app/core/directives/change-border-color.directive.ts +++ b/src/app/core/directives/change-border-color.directive.ts @@ -1,9 +1,7 @@ -import { Directive, ElementRef, Input, OnInit } from '@angular/core'; +import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'; import { DatePipe } from '@angular/common'; const DAYS_IN_MILLISEC: number = 1.21e+9; -const GREEN_COLOR: string = '#90EE90'; -const BLUE_COLOR: string = '#87CEFA'; @Directive({ selector: '[appChangeBorderColor]' @@ -11,7 +9,10 @@ const BLUE_COLOR: string = '#87CEFA'; export class ChangeBorderColorDirective implements OnInit { @Input() private createdAtDate: string; - constructor(private el: ElementRef, public datepipe: DatePipe) { } + constructor ( + private el: ElementRef, + private renderer: Renderer2, + public datepipe: DatePipe) { } public ngOnInit(): void { this.setColor(this.createdAtDate); @@ -23,11 +24,11 @@ export class ChangeBorderColorDirective implements OnInit { const dateDiff: boolean = currentDate.getTime() - createdAtDateTransform.getTime() > DAYS_IN_MILLISEC; if (createdAtDateTransform < currentDate && dateDiff) { - this.el.nativeElement.style.borderColor = GREEN_COLOR; + this.renderer.addClass(this.el.nativeElement, 'border--color-green'); } if (createdAtDateTransform > currentDate) { - this.el.nativeElement.style.borderColor = BLUE_COLOR; + this.renderer.addClass(this.el.nativeElement, 'border--color-blue'); } } } diff --git a/src/app/core/modules/course-page.module.ts b/src/app/core/modules/course-page.module.ts new file mode 100644 index 0000000..fb6bd6f --- /dev/null +++ b/src/app/core/modules/course-page.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CoursePageComponent } from '../../course-page/course-page.component'; + +@NgModule({ + declarations: [CoursePageComponent], + exports: [CoursePageComponent], + imports: [CommonModule] +}) +export class CoursePageModule { } 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 a83eada..317f1d3 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 @@ -7,7 +7,7 @@
      - + title: {{item.title | uppercase}}