Task 7

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~9.1.3",
     "@angular/platform-browser-dynamic": "~9.1.3",
     "@angular/router": "~9.1.3",
+    "@auth0/angular-jwt": "^4.0.0",
     "@fortawesome/angular-fontawesome": "^0.6.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",

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

@@ -0,0 +1,75 @@
+<div class="login-wrapper">  
+    <mat-card class="login-card">
+      <mat-card-header>
+        <mat-card-title>New course</mat-card-title>
+      </mat-card-header>
+      <mat-card-content>
+        <div class="add-course-form">
+          <mat-form-field class="add-course-form-title">
+            <mat-label>Title</mat-label>
+            <input 
+                matInput 
+                placeholder="Text input"
+                [(ngModel)]="title"
+                name="username"
+                required
+            >
+          </mat-form-field>
+          <mat-form-field class="add-course-form-description">
+            <mat-label>Description</mat-label>
+              <textarea
+                  matInput
+                  placeholder="Description"
+                  [(ngModel)]="description"
+                  name="description"
+                  required
+              ></textarea>
+          </mat-form-field>
+          <mat-form-field class="add-course-form-date">
+            <mat-label>Duration: </mat-label>
+              <input
+                  matInput
+                  placeholder="minutes"
+                  [(ngModel)]="duration"
+                  name="duration"
+                  required
+              >
+          </mat-form-field>
+          <mat-form-field class="add-course-form-date">
+            <mat-label>Date: </mat-label>
+            <input matInput [matDatepicker]="datapicker">
+            <mat-datepicker-toggle matSuffix [for]="datapicker">
+              <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
+            </mat-datepicker-toggle>
+            <mat-datepicker #datapicker></mat-datepicker>
+          </mat-form-field>
+          <mat-form-field class="add-course-form-authors">
+            <mat-label>Authors: </mat-label>
+            <input
+              matInput
+              placeholder="Start typing"
+              [(ngModel)]="authors"
+              name="authors"
+              required
+            >
+          </mat-form-field>
+        </div>
+      </mat-card-content>
+      <mat-card-actions>
+        <button
+          mat-raised-button
+          class="add-course-form-button-cancel"
+          (click)="cancelClick()"
+        >
+          Cancel
+        </button>
+        <button
+          mat-raised-button
+          class="add-course-form-button-save"
+          (click)="addNewCourse()"
+        >
+          Save
+        </button>
+      </mat-card-actions>
+    </mat-card>
+  </div>

src/app/add-course-page/add-course-page.component.less

@@ -0,0 +1,82 @@
+@import '../../assets/less/modules/variables';
+
+mat-card {
+    display: flex;
+    flex-direction: column;
+    max-width: 60%;
+    text-align: center;
+    padding: 40px;
+    position: absolute;
+    right: 0;
+    left: 0;
+    margin: 0 auto;
+    margin-top: 30px;
+
+    .add-course-form {
+
+        &-field {
+            max-width: 50%;
+        }
+    }
+}
+
+mat-card-header {
+    margin-bottom: 20px;
+}
+
+mat-card-content {
+
+    .mat-card-content-message {
+        display: flex;
+        flex-direction: column;
+        a {
+            margin-top: 20px;
+        }
+    }
+
+    .add-course-form {
+        min-width: 100%;
+
+        mat-form-field {
+            display: block;
+
+            &.add-course-form-date {
+                max-width: 100px;
+            }
+
+            &.add-course-form-authors {
+                max-width: 50%;
+            }
+
+            &.add-course-form-description {
+                textarea {
+                    resize: vertical;
+                    min-height: 100px;
+                    max-height: 300px;
+                }
+            }
+        }
+    }
+}
+
+mat-card-actions {
+    display: flex;
+    justify-content: end;
+
+    button {
+        transition-duration: 0.4s;
+
+        &.add-course-form-button-cancel {
+            background-color: @color-gray;
+            color: @color-dark;
+        }
+        &.add-course-form-button-save {
+            color: @color-white;
+            background-color: @color-green1;
+            margin-left: 10px;
+        }
+        &:hover {
+            box-shadow: inset 0 0 100px 100px @color-black1;
+        }
+    }
+}

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

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

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

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { HomePageService } from '../core/services/home-page.service';
+import { CourseItemInfo } from '../core/models';
+
+const coursesURL: string = '/courses';
+@Component({
+  selector: 'app-add-course-page',
+  templateUrl: './add-course-page.component.html',
+  styleUrls: ['./add-course-page.component.less']
+})
+export class AddCoursePageComponent {
+
+  public title: string;
+  public description: string;
+  public duration: number;
+  public datapicker: Date;
+  public authors: string;
+
+  constructor (
+    private router: Router,
+    private homePageService: HomePageService
+  ) { }
+
+  public cancelClick(): void {
+    this.router.navigate([coursesURL]);
+  }
+
+  public addNewCourse(): void {
+    const sentDataCourse: CourseItemInfo[] = [{
+      title: this.title,
+      createdAtDate: this.datapicker,
+      durationTime: this.duration,
+      description: this.description,
+      authors: this.authors
+    }];
+
+    this.homePageService.createCourse(sentDataCourse);
+    this.router.navigate([coursesURL]);
+  }
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AddCoursePageComponent } from './add-course-page.component';
+import { CustomMaterialModule } from '../core/modules/material.module';
+import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [ AddCoursePageComponent ],
+  imports: [
+    CommonModule,
+    CustomMaterialModule,
+    RouterModule,
+    FormsModule
+  ],
+  exports: [ AddCoursePageComponent ]
+})
+export class AddCoursePageModule { }

src/app/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,3 @@
+<div class="div breadcrumb-text">
+  {{currentRouteUrl | createBreadcrumbString}}
+</div>

src/app/breadcrumb/breadcrumb.component.spec.ts

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

src/app/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,10 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.less']
+})
+export class BreadcrumbComponent {
+  @Input() public currentRouteUrl: string;
+}

src/app/breadcrumb/breadcrumb.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BreadcrumbComponent } from './breadcrumb.component';
+import { CreateBreadcrumbStringPipe } from '../core/pipes/createBreadcrumbString.pipe';
+
+@NgModule({
+  declarations: [
+    BreadcrumbComponent,
+    CreateBreadcrumbStringPipe
+  ],
+  imports: [ CommonModule ],
+  exports: [ BreadcrumbComponent ],
+  providers: [ CreateBreadcrumbStringPipe ]
+})
+export class BreadcrumbModule { }

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

@@ -1,9 +1,10 @@
 
 export interface CourseItemInfo {
-    id: number;
+    id?: number;
     title: string;
     createdAtDate: Date;
     durationTime: number;
     description: string;
-    topRated: boolean;
+    topRated?: boolean;
+    authors?: string;
 }