diff --git a/package-lock.json b/package-lock.json index dc35ea6..7696d61 100644 --- a/package-lock.json +++ b/package-lock.json @@ -506,6 +506,14 @@ "resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.3.tgz", "integrity": "sha512-NmOazeJ2WVT5eTyNHXYxBRAHic6i6Ku5DgsGWBgjUIR/Qmwb/i/xpagbA9WQQZ2OrGbp4ICEYgGkikeIrlQLPA==" }, + "@auth0/angular-jwt": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@auth0/angular-jwt/-/angular-jwt-4.0.0.tgz", + "integrity": "sha512-CHvk1zJ9jpQupl0f5y7EmTvYAwugyFvC4ztLsZKr7ZC7anNVaDd1+pDFJYS+ZEU9jLWzE74+AfVKfigImADJuw==", + "requires": { + "url": "^0.11.0" + } + }, "@babel/code-frame": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", @@ -9707,8 +9715,7 @@ "querystring": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", - "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", - "dev": true + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" }, "querystring-es3": { "version": "0.2.1", @@ -12047,7 +12054,6 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=", - "dev": true, "requires": { "punycode": "1.3.2", "querystring": "0.2.0" @@ -12056,8 +12062,7 @@ "punycode": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", - "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=", - "dev": true + "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" } } }, diff --git a/package.json b/package.json index 8b9955d..c3f9796 100644 --- a/package.json +++ b/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", diff --git a/src/app/add-course-page/add-course-page.component.html b/src/app/add-course-page/add-course-page.component.html new file mode 100644 index 0000000..6ae8899 --- /dev/null +++ b/src/app/add-course-page/add-course-page.component.html @@ -0,0 +1,75 @@ +
+ + + New course + + +
+ + Title + + + + Description + + + + Duration: + + + + Date: + + + keyboard_arrow_down + + + + + Authors: + + +
+ + + + + + +
\ No newline at end of file diff --git a/src/app/add-course-page/add-course-page.component.less b/src/app/add-course-page/add-course-page.component.less new file mode 100644 index 0000000..34761e4 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/app/add-course-page/add-course-page.component.spec.ts b/src/app/add-course-page/add-course-page.component.spec.ts new file mode 100644 index 0000000..bee28b6 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddCoursePageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddCoursePageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/add-course-page/add-course-page.component.ts b/src/app/add-course-page/add-course-page.component.ts new file mode 100644 index 0000000..88957f6 --- /dev/null +++ b/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]); + } +} diff --git a/src/app/add-course-page/add-course-page.module.ts b/src/app/add-course-page/add-course-page.module.ts new file mode 100644 index 0000000..5edb84f --- /dev/null +++ b/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 { } diff --git a/src/app/breadcrumb/breadcrumb.component.html b/src/app/breadcrumb/breadcrumb.component.html new file mode 100644 index 0000000..0cdf9ef --- /dev/null +++ b/src/app/breadcrumb/breadcrumb.component.html @@ -0,0 +1,3 @@ +
+ {{currentRouteUrl | createBreadcrumbString}} +
\ No newline at end of file diff --git a/src/app/breadcrumb/breadcrumb.component.less b/src/app/breadcrumb/breadcrumb.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/breadcrumb/breadcrumb.component.spec.ts b/src/app/breadcrumb/breadcrumb.component.spec.ts new file mode 100644 index 0000000..1fddbf8 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BreadcrumbComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BreadcrumbComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/breadcrumb/breadcrumb.component.ts b/src/app/breadcrumb/breadcrumb.component.ts new file mode 100644 index 0000000..6e7af74 --- /dev/null +++ b/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; +} diff --git a/src/app/breadcrumb/breadcrumb.module.ts b/src/app/breadcrumb/breadcrumb.module.ts new file mode 100644 index 0000000..6fa4942 --- /dev/null +++ b/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 { } diff --git a/src/app/core/models/course-item.interface.ts b/src/app/core/models/course-item.interface.ts index 312c951..c396df6 100644 --- a/src/app/core/models/course-item.interface.ts +++ b/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; } diff --git a/src/app/core/modules/material.module.ts b/src/app/core/modules/material.module.ts index 865cf0b..e2d13ac 100644 --- a/src/app/core/modules/material.module.ts +++ b/src/app/core/modules/material.module.ts @@ -8,21 +8,11 @@ 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'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; @NgModule({ - imports: [ - CommonModule, - MatToolbarModule, - MatButtonModule, - MatCardModule, - MatInputModule, - MatDialogModule, - MatTableModule, - MatMenuModule, - MatIconModule, - MatProgressSpinnerModule - ], + imports: [ CommonModule ], exports: [ CommonModule, MatToolbarModule, @@ -33,7 +23,9 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; MatTableModule, MatMenuModule, MatIconModule, - MatProgressSpinnerModule + MatDatepickerModule, + MatNativeDateModule, + MatRippleModule ], }) export class CustomMaterialModule { } diff --git a/src/app/core/pipes/createBreadcrumbString.pipe.ts b/src/app/core/pipes/createBreadcrumbString.pipe.ts new file mode 100644 index 0000000..17e3f6b --- /dev/null +++ b/src/app/core/pipes/createBreadcrumbString.pipe.ts @@ -0,0 +1,20 @@ +import { Pipe, PipeTransform } from '@angular/core'; +/* + * Sort the array asceding by creational date + * Usage: + * array | orderByDateCreation + * Example: + * {{ arrayData | orderByDateCreation }} + * sort asceding by creational date +*/ + +@Pipe({name: 'createBreadcrumbString'}) + +export class CreateBreadcrumbStringPipe implements PipeTransform { + public transform(routerUrl: string): string { + const breadcrumbArray: Array = routerUrl && routerUrl.split('/').splice(1); + const newBreadcrumbArray: string = breadcrumbArray && + breadcrumbArray.map(e => e[0].toUpperCase() + e.slice(1)).join(' / '); + return newBreadcrumbArray; + } +} diff --git a/src/app/core/services/auth-guard.service.ts b/src/app/core/services/auth-guard.service.ts new file mode 100644 index 0000000..56116f6 --- /dev/null +++ b/src/app/core/services/auth-guard.service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core'; +import { Router, CanActivate } from '@angular/router'; +import { AuthService } from './auth.service'; + +@Injectable({ + providedIn: 'root' +}) + +export class AuthGuardService implements CanActivate { + constructor(public auth: AuthService, public router: Router) {} + + public canActivate(): boolean { + if (!this.auth.isAuthentificated()) { + this.router.navigate(['login']); + return false; + } + return true; + } + + public resolve(): void { + if (this.auth.isAuthentificated()) { + this.router.navigate(['']); + } + } +} diff --git a/src/app/core/services/home-page.service.ts b/src/app/core/services/home-page.service.ts index e53dfd3..ba42737 100644 --- a/src/app/core/services/home-page.service.ts +++ b/src/app/core/services/home-page.service.ts @@ -26,4 +26,14 @@ export class HomePageService { const newArr: CourseItemInfo[] = this.coursesList.filter(item => item.id !== id); return of(this.coursesList = newArr); } + + public createCourse(object: CourseItemInfo[]): void { + console.log(object); + } + + public updateItem(id: number): CourseItemInfo[] { + const courseList: CourseItemInfo[] = fakeVideoList; + const foundCourse: CourseItemInfo = courseList.find(course => course.id === id); + return [foundCourse]; + } } diff --git a/src/app/edit-course-page/edit-course-page.component.html b/src/app/edit-course-page/edit-course-page.component.html new file mode 100644 index 0000000..23f94fc --- /dev/null +++ b/src/app/edit-course-page/edit-course-page.component.html @@ -0,0 +1,14 @@ +
+

+ Title: {{editableCourseData.title}} +

+

+ Description: {{editableCourseData.description}} +

+

+ Duration: {{editableCourseData.durationTime}} +

+

+ Created at: {{editableCourseData.createdAtDate}} +

+
diff --git a/src/app/edit-course-page/edit-course-page.component.less b/src/app/edit-course-page/edit-course-page.component.less new file mode 100644 index 0000000..b5a41d1 --- /dev/null +++ b/src/app/edit-course-page/edit-course-page.component.less @@ -0,0 +1,3 @@ +.container { + margin-top: 40px; +} \ No newline at end of file diff --git a/src/app/edit-course-page/edit-course-page.component.spec.ts b/src/app/edit-course-page/edit-course-page.component.spec.ts new file mode 100644 index 0000000..52da59f --- /dev/null +++ b/src/app/edit-course-page/edit-course-page.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditCoursePageComponent } from './edit-course-page.component'; + +describe('EditCoursePageComponent', () => { + let component: EditCoursePageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditCoursePageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditCoursePageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/edit-course-page/edit-course-page.component.ts b/src/app/edit-course-page/edit-course-page.component.ts new file mode 100644 index 0000000..35f7626 --- /dev/null +++ b/src/app/edit-course-page/edit-course-page.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; +import { HomePageService } from '../core/services/home-page.service'; +import { ActivatedRoute } from '@angular/router'; +import { CourseItemInfo } from '../core/models'; + +@Component({ + selector: 'app-edit-course-page', + templateUrl: './edit-course-page.component.html', + styleUrls: ['./edit-course-page.component.less'] +}) +export class EditCoursePageComponent implements OnInit { + public name: string; + public editableCourse: CourseItemInfo[]; + public editableCourseData: CourseItemInfo; + + constructor( + private homePageService: HomePageService, + private route: ActivatedRoute) { } + + public ngOnInit(): void { + this.route.paramMap.subscribe(params => { + const courseId: number = +params.get('courseId'); + this.editCourseById(courseId); + }); + } + + public editCourseById(id: number): void { + this.editableCourse = this.homePageService.updateItem(id); + this.editableCourseData = this.editableCourse[0]; + } +} diff --git a/src/app/edit-course-page/edit-course-page.module.ts b/src/app/edit-course-page/edit-course-page.module.ts new file mode 100644 index 0000000..265a730 --- /dev/null +++ b/src/app/edit-course-page/edit-course-page.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { EditCoursePageComponent } from './edit-course-page.component'; + +@NgModule({ + declarations: [ EditCoursePageComponent ], + imports: [ CommonModule ], + exports: [ EditCoursePageComponent ] +}) +export class EditCoursePageModule { } 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 381aaa4..1f4c9c8 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,12 +7,8 @@
- - title: {{item.title | uppercase}} - + + 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 90f1502..05047b1 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 @@ -48,12 +48,11 @@ &-title { display: flex; align-items: center; - a { - font-size: 30px; - text-decoration: none; + &-text { + font-size: 26px; } .course-list-item-top-rated { - font-size: 30px; + font-size: 22px; } } } 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 dee5a73..67bd1bf 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 @@ -2,8 +2,9 @@ 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 { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { ConfirmationDialogComponent } from 'src/app/shared/confirmation-dialog/confirmation-dialog.component'; +import { HomePageService } from 'src/app/core/services/home-page.service'; @Component({ selector: 'app-course-item', @@ -21,12 +22,21 @@ export class CourseItemComponent { public calendarButtonIcon: IconDefinition = faCalendar; public topRatedIcon: IconDefinition = faStar; - constructor(public matDialog: MatDialog) { } + constructor( + public matDialog: MatDialog, + public homePageService: HomePageService, + public router: Router + ) { } public onDeleteCourseEmit(id: number, title: string): void { this.openDialog(id, title); } + public isEditedCourse(id: number): void { + this.homePageService.updateItem(id); + this.router.navigate(['/courses', id]); + } + public openDialog(id: number, title: string): void { const dialogRef: MatDialogRef = this.matDialog.open(ConfirmationDialogComponent, { width: '400px', diff --git a/src/app/home-page/toolbox/add-course/add-course.component.html b/src/app/home-page/toolbox/add-course/add-course.component.html index 84f5202..d1a3e0e 100644 --- a/src/app/home-page/toolbox/add-course/add-course.component.html +++ b/src/app/home-page/toolbox/add-course/add-course.component.html @@ -1,5 +1,5 @@
-