diff --git a/package-lock.json b/package-lock.json
index 24615e43..336e5e16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,6 +49,9 @@
"ts-node": "~3.2.0",
"tslint": "~6.1.0",
"typescript": "4.7.3"
+ },
+ "engines": {
+ "node": "16"
}
},
"node_modules/@ampproject/remapping": {
diff --git a/server/get-courses.route.ts b/server/get-courses.route.ts
index 2e66ca1a..1ff40632 100644
--- a/server/get-courses.route.ts
+++ b/server/get-courses.route.ts
@@ -17,7 +17,7 @@ export function getAllCourses(req: Request, res: Response) {
res.status(200).json({payload:Object.values(COURSES)});
- }, 200);
+ }, 2000);
}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a7482dda..5f04bc25 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -51,6 +51,8 @@
</mat-toolbar>
+ <loading></loading>
+
<router-outlet></router-outlet>
</mat-sidenav-container>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c94ed83c..21196d80 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,13 @@
import {Component, OnInit} from '@angular/core';
+import { LoadingService } from './services/loading.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ styleUrls: ['./app.component.css'],
+ providers: [LoadingService]
})
export class AppComponent implements OnInit {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index badc903f..5a2829d0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -33,6 +33,7 @@ import {SafeUrlPipe} from './common/safe-url.pipe';
import {MessagesComponent} from './messages/messages.component';
import {SearchLessonsComponent} from './search-lessons/search-lessons.component';
import { LoadingComponent } from './loading/loading.component';
+import { CoursesCardListComponent } from './courses-card-list/courses-card-list.component';
@NgModule({
declarations: [
@@ -46,8 +47,8 @@ import { LoadingComponent } from './loading/loading.component';
SafeUrlPipe,
MessagesComponent,
SearchLessonsComponent,
- LoadingComponent
-
+ LoadingComponent,
+ CoursesCardListComponent
],
imports: [
BrowserModule,
diff --git a/src/app/course-dialog/course-dialog.component.ts b/src/app/course-dialog/course-dialog.component.ts
index 6bcaa85d..c8160fb4 100644
--- a/src/app/course-dialog/course-dialog.component.ts
+++ b/src/app/course-dialog/course-dialog.component.ts
@@ -1,10 +1,10 @@
-import {AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+import {AfterViewInit, Component, Inject} from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
import {Course} from "../model/course";
import {FormBuilder, Validators, FormGroup} from "@angular/forms";
import * as moment from 'moment';
-import {catchError} from 'rxjs/operators';
-import {throwError} from 'rxjs';
+import { CoursesService } from '../services/courses.service';
+import { LoadingService } from '../services/loading.service';
@Component({
selector: 'course-dialog',
@@ -20,6 +20,8 @@ export class CourseDialogComponent implements AfterViewInit {
constructor(
private fb: FormBuilder,
private dialogRef: MatDialogRef<CourseDialogComponent>,
+ private courseService: CoursesService,
+ private loadingService: LoadingService,
@Inject(MAT_DIALOG_DATA) course:Course) {
this.course = course;
@@ -41,6 +43,13 @@ export class CourseDialogComponent implements AfterViewInit {
const changes = this.form.value;
+ this.courseService.saveCourse(this.course.id, changes)
+ .subscribe(
+ (val) => {
+ this.dialogRef.close(val);
+ }
+ );
+
}
close() {
diff --git a/src/app/courses-card-list/courses-card-list.component.css b/src/app/courses-card-list/courses-card-list.component.css
new file mode 100644
index 00000000..61b0a93c
--- /dev/null
+++ b/src/app/courses-card-list/courses-card-list.component.css
@@ -0,0 +1,8 @@
+
+.course-card {
+ margin: 20px 10px;
+}
+
+.course-actions {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/courses-card-list/courses-card-list.component.html b/src/app/courses-card-list/courses-card-list.component.html
new file mode 100644
index 00000000..7e910e0e
--- /dev/null
+++ b/src/app/courses-card-list/courses-card-list.component.html
@@ -0,0 +1,29 @@
+<mat-card *ngFor="let course of courses"
+ class="course-card mat-elevation-z10">
+
+ <mat-card-header>
+
+ <mat-card-title>{{course.description}}</mat-card-title>
+
+ </mat-card-header>
+
+ <img mat-card-image [src]="course.iconUrl">
+
+ <mat-card-content>
+ <p>{{course.longDescription}}</p>
+ </mat-card-content>
+
+ <mat-card-actions class="course-actions">
+
+ <button mat-button class="mat-raised-button mat-primary" [routerLink]="['/courses', course.id]">
+ VIEW COURSE
+ </button>
+
+ <button mat-button class="mat-raised-button mat-accent"
+ (click)="editCourse(course)">
+ EDIT
+ </button>
+
+ </mat-card-actions>
+
+</mat-card>
\ No newline at end of file
diff --git a/src/app/courses-card-list/courses-card-list.component.ts b/src/app/courses-card-list/courses-card-list.component.ts
new file mode 100644
index 00000000..5fbd4219
--- /dev/null
+++ b/src/app/courses-card-list/courses-card-list.component.ts
@@ -0,0 +1,52 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Course} from '../model/course';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
+import {filter, tap} from 'rxjs/operators';
+
+@Component({
+ selector: 'courses-card-list',
+ templateUrl: './courses-card-list.component.html',
+ styleUrls: ['./courses-card-list.component.css'],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CoursesCardListComponent implements OnInit {
+
+ @Input()
+ courses: Course[] = [];
+
+ @Output()
+ private coursesChanged = new EventEmitter();
+
+ constructor(private dialog: MatDialog) {
+
+ }
+
+ ngOnInit() {
+
+ }
+
+ editCourse(course: Course) {
+
+ const dialogConfig = new MatDialogConfig();
+
+ dialogConfig.disableClose = true;
+ dialogConfig.autoFocus = true;
+ dialogConfig.width = "400px";
+
+ dialogConfig.data = course;
+
+ const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);
+
+ dialogRef.afterClosed()
+ .pipe(
+ filter(val => !!val),
+ tap(() => this.coursesChanged.emit())
+
+ )
+ .subscribe();
+
+
+ }
+
+}
\ No newline at end of file
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index c84039e4..95c1f992 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -7,67 +7,13 @@ <h3>All Courses</h3>
<mat-tab label="Beginners">
- <mat-card *ngFor="let course of beginnerCourses" class="course-card mat-elevation-z10">
-
- <mat-card-header>
-
- <mat-card-title>{{course.description}}</mat-card-title>
-
- </mat-card-header>
-
- <img mat-card-image [src]="course.iconUrl">
-
- <mat-card-content>
- <p>{{course.longDescription}}</p>
- </mat-card-content>
-
- <mat-card-actions class="course-actions">
-
- <button mat-button class="mat-raised-button mat-primary" [routerLink]="['/courses', course.id]">
- VIEW COURSE
- </button>
-
- <button mat-button class="mat-raised-button mat-accent"
- (click)="editCourse(course)">
- EDIT
- </button>
-
- </mat-card-actions>
-
- </mat-card>
+ <courses-card-list (coursesChanged)="reloadCourses()" [courses]="beginnerCourses$ | async"></courses-card-list>
</mat-tab>
<mat-tab label="Advanced">
- <mat-card *ngFor="let course of advancedCourses" class="course-card mat-elevation-z10">
-
- <mat-card-header>
-
- <mat-card-title>{{course.description}}</mat-card-title>
-
- </mat-card-header>
-
- <img mat-card-image [src]="course.iconUrl">
-
- <mat-card-content>
- <p>{{course.longDescription}}</p>
- </mat-card-content>
-
- <mat-card-actions class="course-actions">
-
- <button mat-button class="mat-raised-button mat-primary" [routerLink]="['/courses', course.id]">
- VIEW COURSE
- </button>
-
- <button mat-button class="mat-raised-button mat-accent"
- (click)="editCourse(course)">
- EDIT
- </button>
-
- </mat-card-actions>
-
- </mat-card>
+ <courses-card-list (coursesChanged)="reloadCourses()" [courses]="advancedCourses$ | async"></courses-card-list>
</mat-tab>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index f66828d7..ce260578 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,10 +1,12 @@
import {Component, OnInit} from '@angular/core';
import {Course, sortCoursesBySeqNo} from '../model/course';
-import {interval, noop, Observable, of, throwError, timer} from 'rxjs';
-import {catchError, delay, delayWhen, filter, finalize, map, retryWhen, shareReplay, tap} from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { finalize, map } from 'rxjs/operators';
import {HttpClient} from '@angular/common/http';
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
+import { CoursesService } from '../services/courses.service';
+import { LoadingService } from '../services/loading.service';
@Component({
@@ -14,35 +16,40 @@ import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
})
export class HomeComponent implements OnInit {
- beginnerCourses: Course[];
+ beginnerCourses$: Observable<Course[]>;
+ advancedCourses$: Observable<Course[]>;
- advancedCourses: Course[];
-
-
- constructor(private http: HttpClient, private dialog: MatDialog) {
-
- }
+ constructor(private http: HttpClient, private dialog: MatDialog, private coursesService: CoursesService, private loadingService: LoadingService) {}
ngOnInit() {
+ this.reloadCourses();
+ }
- this.http.get('/api/courses')
- .subscribe(
- res => {
-
- const courses: Course[] = res["payload"].sort(sortCoursesBySeqNo);
+ reloadCourses() {
- this.beginnerCourses = courses.filter(course => course.category == "BEGINNER");
+ this.loadingService.loadingOn();
- this.advancedCourses = courses.filter(course => course.category == "ADVANCED");
+ const courses$ = this.coursesService.loadAllCourses()
+ .pipe(
+ map(courses => courses.sort(sortCoursesBySeqNo)),
+ finalize(() => this.loadingService.loadingOff())
+ )
- });
+ this.beginnerCourses$ = courses$
+ .pipe(
+ map(courses => courses.filter(course => course.category === "BEGINNER"))
+ )
+ this.advancedCourses$ = courses$
+ .pipe(
+ map(courses => courses.filter(course => course.category === "ADVANCED"))
+ )
}
editCourse(course: Course) {
const dialogConfig = new MatDialogConfig();
-
+
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.width = "400px";
diff --git a/src/app/loading/loading.component.html b/src/app/loading/loading.component.html
index 8b137891..c9c0845b 100644
--- a/src/app/loading/loading.component.html
+++ b/src/app/loading/loading.component.html
@@ -1 +1,3 @@
-
+<div class="spinner-container" *ngIf="loadingService.loading$ | async">
+ <mat-spinner></mat-spinner>
+</div>
diff --git a/src/app/loading/loading.component.ts b/src/app/loading/loading.component.ts
index 5ee65165..042de434 100644
--- a/src/app/loading/loading.component.ts
+++ b/src/app/loading/loading.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
+import { LoadingService } from '../services/loading.service';
@Component({
selector: 'loading',
@@ -9,7 +10,7 @@ import {Observable} from 'rxjs';
export class LoadingComponent implements OnInit {
- constructor() {
+ constructor(public loadingService: LoadingService) {
}
diff --git a/src/app/services/courses.service.ts b/src/app/services/courses.service.ts
new file mode 100644
index 00000000..dfc00d10
--- /dev/null
+++ b/src/app/services/courses.service.ts
@@ -0,0 +1,28 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { map, shareReplay, tap } from "rxjs/operators";
+import { Course } from "../model/course";
+
+@Injectable({
+ providedIn: 'root'
+})
+
+export class CoursesService {
+ constructor(private http: HttpClient) {}
+
+ loadAllCourses(): Observable<Course[]> {
+ return this.http.get<Course[]>("/api/courses")
+ .pipe(
+ map(res => res["payload"]),
+ shareReplay()
+ )
+ }
+
+ saveCourse(couresId: string, changes: Partial<Course>): Observable<any> {
+ return this.http.put(`/api/courses/${couresId}`, changes)
+ .pipe(
+ shareReplay()
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/app/services/loading.service.ts b/src/app/services/loading.service.ts
new file mode 100644
index 00000000..0b90ff8b
--- /dev/null
+++ b/src/app/services/loading.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from "@angular/core";
+import {BehaviorSubject, Observable, of} from 'rxjs';
+import {concatMap, finalize, tap} from 'rxjs/operators';
+
+@Injectable()
+export class LoadingService {
+ private loadingSubject = new BehaviorSubject<boolean>(false);
+
+ loading$: Observable<boolean> = this.loadingSubject.asObservable();
+
+ showLoaderUntilCompleted<T>(obs$: Observable<T>): Observable<T> {
+ return of(null)
+ .pipe(
+ tap(() => this.loadingOn()),
+ concatMap(() => obs$),
+ finalize(() => this.loadingOff())
+ );
+ }
+
+ loadingOn() {
+ this.loadingSubject.next(true);
+ }
+
+ loadingOff() {
+ this.loadingSubject.next(false);
+
+ }
+}
\ No newline at end of file