Task 2

package.json

@@ -19,6 +19,9 @@
     "@angular/platform-browser": "~9.1.3",
     "@angular/platform-browser-dynamic": "~9.1.3",
     "@angular/router": "~9.1.3",
+    "@fortawesome/angular-fontawesome": "^0.6.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/core/commons/variables.less

@@ -0,0 +1,10 @@
+@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;

src/app/core/mocks/mocked-data.ts

@@ -5,21 +5,65 @@ export const fakeVideoList: CourseItemInfo[] = [
       id: 1,
       title: 'video_1',
       createdAtDate: new Date,
-      durationTime: '120',
-      description: 'description of 1st video'
-    },
+      durationTime: 120,
+      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_2',
       createdAtDate: new Date,
-      durationTime: '120',
-      description: 'description of 2nd video'
+      durationTime: 180,
+      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.
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+        Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus
+      `
     },
     {
       id: 3,
       title: 'video_3',
       createdAtDate: new Date,
-      durationTime: '120',
-      description: 'description of 3st video'
+      durationTime: 180,
+      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.
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+        Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus
+      `
+    },
+    {
+      id: 4,
+      title: 'video_4',
+      createdAtDate: new Date,
+      durationTime: 132,
+      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.
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+        Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus
+      `
+    },
+    {
+      id: 5,
+      title: 'video_5',
+      createdAtDate: new Date,
+      durationTime: 120,
+      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.
+        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

@@ -3,6 +3,6 @@ export interface CourseItemInfo {
     id: number;
     title: string;
     createdAtDate: Date;
-    durationTime: string;
+    durationTime: number;
     description: string;
 }

src/app/core/pipes/transform-minutes.pipe.ts

@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+/*
+ * Transform time in hh:mm format
+ * Usage:
+ *   time | transformMinutesToHours
+ * Example:
+ *   {{ 120 | transformMinutesToHours }}
+ *   formats to: 2h
+ *
+ *   {{ 16 | transformMinutesToHours }}
+ *   formats to: 16min
+ *
+ *   {{ 61 | transformMinutesToHours }}
+ *   formats to: 1h 1min
+*/
+const MINUTE_IN_SEC: number = 60;
+@Pipe({name: 'transformMinutesToHours'})
+
+export class TransformMinutesToHoursPipe implements PipeTransform {
+  public transform(time: number): string {
+    if (time < MINUTE_IN_SEC) {
+      return `${time}min`;
+    }
+
+    if (time % MINUTE_IN_SEC === 0) {
+      return `${Math.floor(time / MINUTE_IN_SEC)}h`;
+    }
+
+    const hours: number = Math.floor(time / MINUTE_IN_SEC);
+    const minutes: number = time % MINUTE_IN_SEC;
+
+    return `${hours}h ${minutes}min`;
+  }
+}

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

@@ -0,0 +1 @@
+<p>course-page works!</p>

src/app/course-page/course-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoursePageComponent } from './course-page.component';
+
+describe('CoursePageComponent', () => {
+  let component: CoursePageComponent;
+  let fixture: ComponentFixture<CoursePageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CoursePageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CoursePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/course-page/course-page.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-course-page',
+  templateUrl: './course-page.component.html',
+  styleUrls: ['./course-page.component.less']
+})
+export class CoursePageComponent { }

src/app/course-page/course-page.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoursePageComponent } from './course-page.component';
+
+@NgModule({
+  declarations: [CoursePageComponent],
+  exports: [CoursePageComponent],
+  imports: [CommonModule]
+})
+export class CoursePageModule { }

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

@@ -0,0 +1,39 @@
+<li class="course-list-item">
+    <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>
+            </div>
+
+            <div class="course-list-item-data-header-info">
+                <p>
+                    <fa-icon [icon]="clockButtonIcon"></fa-icon>
+                    {{item.durationTime | transformMinutesToHours}} 
+                </p>
+                <p>
+                    <fa-icon [icon]="calendarButtonIcon"></fa-icon> 
+                    {{item.createdAtDate | date}}
+                </p>
+            </div>
+
+        </div>
+
+        <div class="course-list-item-data-text">
+            {{item.description}}
+        </div>
+    </div>
+
+    <div class="course-list-item-actions">
+        <button> 
+            <fa-icon [icon]="editButtonIcon"></fa-icon> 
+            Edit
+        </button>
+        <button (click)="onDeleteCourseEmit(item.id)">
+            <fa-icon  [icon]="trashButtonIcon"></fa-icon> 
+            Delete 
+        </button>
+    </div>
+</li>

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

@@ -0,0 +1,87 @@
+@import '../../../core/commons/variables';
+
+.course-list-item {
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 20px;
+    border: 1px solid @color-gray;
+    background-color: @color-white;
+    border-radius: 6px;
+    box-shadow: 5px 5px 18px @color-gray2;
+    margin-bottom: 20px;
+
+    &-data {
+        width: 80%;
+        padding-right: 50px;
+        font-family: 'SourseSansPro Regular';
+
+        &-header {
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+
+            &-info {
+                display: flex;
+                color: @color-gray2;
+
+                p:first-child {
+                    margin-right: 20px;
+                }
+            }
+
+            &-title {
+                display: flex;
+                a {
+                    font-size: 30px;
+                    text-decoration: none;
+                    text-transform: uppercase;
+
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
+
+        &-text {
+            line-height: 2;
+        }
+    }
+
+    &-actions {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20%;
+
+        button {
+            height: 25px;
+            width: 200px;
+            margin-right: 8px;
+            margin-left: 8px;
+            background-color: @color-blue;
+            color: @color-white;
+            border-radius: 3px;
+            border: none;
+            font-size: 12px;
+            font-family: 'SourseSansPro Semibold';
+            cursor: pointer;
+            outline: none;
+            &:hover {
+                background-color: @color-blue1;
+            }
+        }
+    }
+
+    &-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;
+    }
+}

src/app/home-page/course-list/course-item/course-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CourseItemComponent } from './course-item.component';
+
+describe('CourseItemComponent', () => {
+  let component: CourseItemComponent;
+  let fixture: ComponentFixture<CourseItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CourseItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CourseItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { IconDefinition, faEdit, faTrash, faClock, faCalendar } from '@fortawesome/free-solid-svg-icons';
+import { CourseItemInfo } from 'src/app/core/models';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-course-item',
+  templateUrl: './course-item.component.html',
+  styleUrls: ['./course-item.component.less']
+})
+export class CourseItemComponent {
+  @Input() public item: CourseItemInfo;
+  @Input() public routerLink: Router;
+  @Output() public onDeleteCourse: EventEmitter<number> = new EventEmitter();
+
+  public editButtonIcon: IconDefinition = faEdit;
+  public trashButtonIcon: IconDefinition = faTrash;
+  public clockButtonIcon: IconDefinition = faClock;
+  public calendarButtonIcon: IconDefinition = faCalendar;
+
+  public onDeleteCourseEmit(id: number): void {
+    return this.onDeleteCourse.emit(id);
+  }
+}