Task 4

src/app/core/directives/change-border-color.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';
+import { DatePipe } from '@angular/common';
+
+const DAYS_IN_MILLISEC: number = 1.21e+9;
+
+@Directive({
+  selector: '[appChangeBorderColor]'
+})
+
+export class ChangeBorderColorDirective implements OnInit {
+    @Input() private createdAtDate: string;
+    constructor (
+        private el: ElementRef,
+        private renderer: Renderer2,
+        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.renderer.addClass(this.el.nativeElement, 'border--color-green');
+        }
+
+        if (createdAtDateTransform > currentDate) {
+            this.renderer.addClass(this.el.nativeElement, 'border--color-blue');
+        }
+    }
+}

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

src/app/core/models/course-item.interface.ts

@@ -5,4 +5,5 @@ export interface CourseItemInfo {
     createdAtDate: Date;
     durationTime: number;
     description: string;
+    topRated: boolean;
 }

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 { }

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;
+        });
+  }
+}

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;
+        });
+    }
+}

src/app/home-page/course-list/course-item/course-item.component.html

@@ -1,13 +1,25 @@
-<li class="course-list-item">
+<li class="course-list-item" 
+    appChangeBorderColor [createdAtDate]="item.createdAtDate"
+    [ngClass]="{
+        'course-list-item--changed-background': item.topRated
+    }"
+>
     <div class="course-list-item-data">
         <div class="course-list-item-data-header">
-
             <div class="course-list-item-data-header-title">
-                <a href='course-page'>
-                  title: {{item.title}}
+                <a routerLink = "/course-page" routerLinkActive="active">
+                  title: {{item.title | uppercase}}
                 </a>
+                <span [ngClass]="{
+                    'course-list-item-top-rated--display-none': !item.topRated,
+                    'course-list-item-top-rated': item.topRated
+                }">
+                    <fa-icon
+                        [icon]="topRatedIcon"
+                        class="course-list-item-top-rated-icon">
+                    </fa-icon> 
+                </span>
             </div>
-
             <div class="course-list-item-data-header-info">
                 <p>
                     <fa-icon [icon]="clockButtonIcon"></fa-icon>

src/app/home-page/course-list/course-item/course-item.component.less

@@ -1,15 +1,31 @@
-@import '../../../core/commons/variables';
+@import '../../../../assets/less/modules/variables';
 
 .course-list-item {
     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,14 @@
             }
         }
     }
+}
 
-    &-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;
+.border {
+    &--color-green {
+        border-color: @color-green2; 
+    }
+
+    &--color-blue {
+        border-color: @color-blue2;
     }
 }

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);

src/app/home-page/course-list/course-list.component.html

@@ -1,12 +1,14 @@
-<ul class="course-list" >
+<ul class="course-list">
     <app-course-item 
         (onDeleteCourse)="onDeleteCourse($event)"
-        *ngFor="let item of courses"
+        *ngFor="let item of courses | orderByDateCreation"
         [item]="item"
         [routerLink]="['/courses', item.id]"
     >
     </app-course-item>
-    <div class="course-list-item-loadmore">
-        <a href="#"> LOAD MORE </a>
+
+    <div class="course-list-item-message">
+        <a *ngIf="courses && courses.length" href="#"> LOAD MORE </a>
+        <p *ngIf="!courses || !courses.length"> NO DATA. FEEL FREE TO ADD NEW COURSE </p>
     </div>
 </ul>

src/app/home-page/course-list/course-list.component.less

@@ -1,10 +1,10 @@
-@import '../../core/commons/variables';
+@import '../../../assets/less/modules/variables';
 
 .course-list {
     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';
     }
 }

src/app/home-page/home-page.component.html

@@ -2,7 +2,6 @@
     <div class="course-page-toolbox">
         <app-toolbox></app-toolbox>
     </div>
-
     <div class="course-page-list">
         <app-course-list [courses]='courses'></app-course-list>
     </div>

src/app/home-page/home-page.component.less

@@ -1,4 +1,4 @@
-@import '../core/commons/variables';
+@import '../../assets/less/modules/variables';
 
 .course-page {
     padding-bottom: 30px;

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.courses = this.getCourses();
+  }
+
+  public getCourses(): CourseItemInfo[] {
+    return this.homePageService.getCourses();
   }
 }