Task 5

angular.json

@@ -28,6 +28,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.less"
             ],
             "scripts": []
@@ -92,6 +93,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.less"
             ],
             "scripts": []
@@ -123,6 +125,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "angular-project"
-}
+}

package.json

@@ -11,11 +11,13 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.3",
+    "@angular/animations": "^9.1.6",
+    "@angular/cdk": "^9.2.3",
     "@angular/common": "~9.1.3",
     "@angular/compiler": "~9.1.3",
     "@angular/core": "~9.1.3",
     "@angular/forms": "~9.1.3",
+    "@angular/material": "^9.2.3",
     "@angular/platform-browser": "~9.1.3",
     "@angular/platform-browser-dynamic": "~9.1.3",
     "@angular/router": "~9.1.3",

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

@@ -0,0 +1,10 @@
+import { UserInfo } from '../models';
+
+export const fakeUserInfo: UserInfo = {
+    id: 1,
+    firstName: 'Vasya',
+    lastName: 'Pupkin',
+    login: 'vasya',
+    password: '12345',
+    token: 'randomtoken_1234556789$',
+};

src/app/core/models/user-info.interface.ts

@@ -2,4 +2,7 @@ export interface UserInfo {
     id: number;
     firstName: string;
     lastName: string;
+    login: string;
+    password: string;
+    token: string;
 }

src/app/core/modules/material.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        MatToolbarModule,
+        MatButtonModule,
+        MatCardModule,
+        MatInputModule,
+        MatDialogModule,
+        MatTableModule,
+        MatMenuModule,
+        MatIconModule,
+        MatProgressSpinnerModule
+    ],
+    exports: [
+        CommonModule,
+        MatToolbarModule,
+        MatButtonModule,
+        MatCardModule,
+        MatInputModule,
+        MatDialogModule,
+        MatTableModule,
+        MatMenuModule,
+        MatIconModule,
+        MatProgressSpinnerModule
+    ],
+  })
+export class CustomMaterialModule { }

src/app/core/pipes/orderByTitleName.pipe.ts → src/app/core/pipes/order-by-title-name.pipe.ts

@@ -16,8 +16,16 @@ export class OrderByTitleNamePipe implements PipeTransform {
         if (!Array.isArray(array)) {
             return;
         }
-        return array.sort((one, two) => {
-            return one.title < two.title ? -1 : 1;
+
+        return array.sort((currentElem: CourseItemInfo, nextElem: CourseItemInfo) => {
+            if (currentElem.title < nextElem.title) {
+                return -1;
+            }
+
+            if (currentElem.title > nextElem.title) {
+                return 1;
+            }
+            return 0;
         });
     }
 }

src/app/core/services/auth.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { fakeUserInfo } from '../mocks/mocked-user';
+import { UserInfo } from '../models';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private userInfo: UserInfo;
+
+  constructor() {
+    this.userInfo = fakeUserInfo;
+  }
+
+  public getUserInfo(): UserInfo {
+    return this.userInfo;
+  }
+
+  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 userLogout(): boolean {
+    localStorage.removeItem('userData');
+    return this.isAuthentificated();
+  }
+
+  public isAuthentificated(): boolean {
+    const userDataFromLS: UserInfo = JSON.parse(localStorage.getItem('userData'));
+    return userDataFromLS && !!userDataFromLS.token;
+  }
+}

src/app/core/services/home-page.service.ts

@@ -0,0 +1,29 @@
+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';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HomePageService {
+  private coursesList: CourseItemInfo[];
+
+  constructor(private orderByTitleNamePipe: OrderByTitleNamePipe) {
+    this.coursesList = fakeVideoList;
+  }
+
+  public getCourses(): Observable<CourseItemInfo[]> {
+    return of(this.coursesList);
+  }
+
+  public sortListByName(): CourseItemInfo[] {
+    return this.orderByTitleNamePipe.transform(this.coursesList);
+  }
+
+  public deleteCourseById(id: number): Observable<CourseItemInfo[]>  {
+    const newArr: CourseItemInfo[] = this.coursesList.filter(item => item.id !== id);
+    return of(this.coursesList = newArr);
+  }
+}

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

@@ -7,7 +7,10 @@
     <div class="course-list-item-data">
         <div class="course-list-item-data-header">
             <div class="course-list-item-data-header-title">
-                <a routerLink = "/course-page" routerLinkActive="active">
+                <a 
+                    [routerLink]="['/courses', item.id]"
+                    routerLinkActive="active"
+                >
                   title: {{item.title | uppercase}}
                 </a>
                 <span [ngClass]="{
@@ -43,7 +46,7 @@
             <fa-icon [icon]="editButtonIcon"></fa-icon> 
             Edit
         </button>
-        <button (click)="onDeleteCourseEmit(item.id)">
+        <button (click)="onDeleteCourseEmit(item.id, item.title)">
             <fa-icon  [icon]="trashButtonIcon"></fa-icon> 
             Delete 
         </button>

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

@@ -2,6 +2,8 @@ import { Component, Input, Output, EventEmitter } 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';
+import { MatDialogConfig, MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { ConfirmationDialogComponent } from 'src/app/shared/confirmation-dialog/confirmation-dialog.component';
 
 @Component({
   selector: 'app-course-item',
@@ -19,7 +21,25 @@ export class CourseItemComponent {
   public calendarButtonIcon: IconDefinition = faCalendar;
   public topRatedIcon: IconDefinition = faStar;
 
-  public onDeleteCourseEmit(id: number): void {
-    return this.onDeleteCourse.emit(id);
+  constructor(public matDialog: MatDialog) { }
+
+  public onDeleteCourseEmit(id: number, title: string): void {
+    this.openDialog(id, title);
+  }
+
+  public openDialog(id: number, title: string): void {
+    const dialogRef: MatDialogRef<object> = this.matDialog.open(ConfirmationDialogComponent, {
+      width: '400px',
+      height: '150px',
+      id: 'modal-component',
+      disableClose: true,
+      data: `Do you confirm the deletion "${title}?"`
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        return this.onDeleteCourse.emit(id);
+      }
+    });
   }
 }

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

@@ -3,7 +3,6 @@
         (onDeleteCourse)="onDeleteCourse($event)"
         *ngFor="let item of courses | orderByDateCreation"
         [item]="item"
-        [routerLink]="['/courses', item.id]"
     >
     </app-course-item>
 

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

@@ -15,5 +15,9 @@
         background-color: @color-white;
         border-radius: 6px;
         font-family: 'SourseSansPro Regular';
+        font-size: 16px;
+        p {
+            margin-bottom: 0;
+        }
     }
 }

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

@@ -1,15 +1,21 @@
 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',
   templateUrl: './course-list.component.html',
-  styleUrls: ['./course-list.component.less']
+  styleUrls: ['./course-list.component.less'],
 })
 export class CourseListComponent {
   @Input() public courses: CourseItemInfo[] = [];
 
+  constructor (private homePageService: HomePageService) {}
+
   public onDeleteCourse(id: number): void {
-    console.log(id);
+    this.homePageService.deleteCourseById(id).subscribe(data => {
+      this.courses = data;
+    });
   }
 }

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

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

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

@@ -1,25 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 import { CourseItemInfo } from '../core/models';
-import { HomePageService } from './home-page.service';
+import { HomePageService } from '../core/services/home-page.service';
 
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
-  styleUrls: ['./home-page.component.less']
+  styleUrls: ['./home-page.component.less'],
 })
-export class HomePageComponent implements OnInit {
+export class HomePageComponent {
 
   public courses: CourseItemInfo[];
 
-  constructor(
-    private homePageService: HomePageService,
-  ) { }
+  constructor (private homePageService: HomePageService) { }
 
   public ngOnInit(): void {
-    this.courses = this.getCourses();
-  }
-
-  public getCourses(): CourseItemInfo[] {
-    return this.homePageService.getCourses();
+    this.homePageService.getCourses().subscribe(
+      data => this.courses = data
+    );
   }
 }