observables, async pipe

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);
 }
 
 

src/app/app.component.html

@@ -51,6 +51,8 @@
 
   </mat-toolbar>
 
+  <loading></loading>
+
   <router-outlet></router-outlet>
 
 </mat-sidenav-container>

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 {
 

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,

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() {

src/app/courses-card-list/courses-card-list.component.css

@@ -0,0 +1,8 @@
+
+.course-card {
+    margin: 20px 10px;
+}
+
+.course-actions {
+    text-align: center;
+}

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>

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();
+
+
+    }
+
+}

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>
 

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";

src/app/loading/loading.component.html

@@ -1 +1,3 @@
-
+<div class="spinner-container" *ngIf="loadingService.loading$ | async">
+    <mat-spinner></mat-spinner>
+</div>

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) {
 
   }
 

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()
+            )
+    }
+}