Angular NgRx Course

Author: jhades

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
 import {Course} from "../model/course";
 import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 import {EditCourseDialogComponent} from "../edit-course-dialog/edit-course-dialog.component";
@@ -14,6 +14,9 @@ export class CoursesCardListComponent implements OnInit {
     @Input()
     courses: Course[];
 
+    @Output()
+    courseChanged = new EventEmitter();
+
     constructor(
       private dialog: MatDialog ) {
     }
@@ -32,7 +35,9 @@ export class CoursesCardListComponent implements OnInit {
           mode: 'update'
         };
 
-        this.dialog.open(EditCourseDialogComponent, dialogConfig);
+        this.dialog.open(EditCourseDialogComponent, dialogConfig)
+          .afterClosed()
+          .subscribe(() => this.courseChanged.emit());
 
     }
 

src/app/courses/edit-course-dialog/edit-course-dialog.component.ts

@@ -3,6 +3,7 @@ import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {Course} from '../model/course';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Observable} from 'rxjs';
+import {CoursesHttpService} from '../services/courses-http.service';
 
 @Component({
   selector: 'course-dialog',
@@ -24,7 +25,8 @@ export class EditCourseDialogComponent {
   constructor(
     private fb: FormBuilder,
     private dialogRef: MatDialogRef<EditCourseDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) data) {
+    @Inject(MAT_DIALOG_DATA) data,
+    private coursesService: CoursesHttpService) {
 
     this.dialogTitle = data.dialogTitle;
     this.course = data.course;
@@ -56,6 +58,15 @@ export class EditCourseDialogComponent {
 
   onSave() {
 
+    const course: Course = {
+      ...this.course,
+      ...this.form.value
+    };
+
+    this.coursesService.saveCourse(course.id, course)
+      .subscribe(
+        () => this.dialogRef.close()
+      )
 
 
   }

src/app/courses/home/home.component.html

@@ -24,7 +24,7 @@ <h2 class="title">All Courses</h2>
 
     <mat-tab label="Beginners">
 
-      <courses-card-list
+      <courses-card-list (courseChanged)="reload()"
         [courses]="beginnerCourses$ | async">
 
       </courses-card-list>
@@ -33,7 +33,7 @@ <h2 class="title">All Courses</h2>
 
     <mat-tab label="Advanced">
 
-      <courses-card-list
+      <courses-card-list  (courseChanged)="reload()"
         [courses]="advancedCourses$ | async"
 
       ></courses-card-list>

src/app/courses/home/home.component.ts

@@ -32,28 +32,31 @@ export class HomeComponent implements OnInit {
     }
 
     ngOnInit() {
+      this.reload();
+    }
 
-      const courses$ = this.coursesHttpService.findAllCourses()
-        .pipe(
-          map(courses => courses.sort(compareCourses)),
-          shareReplay()
-        );
+  reload() {
 
-      this.loading$ = courses$.pipe(map(courses => !!courses));
+    const courses$ = this.coursesHttpService.findAllCourses()
+      .pipe(
+        map(courses => courses.sort(compareCourses)),
+        shareReplay()
+      );
 
-      this.beginnerCourses$ = courses$
-        .pipe(
-          map(courses => courses.filter(course => course.category == 'BEGINNER'))
-        );
+    this.loading$ = courses$.pipe(map(courses => !!courses));
 
+    this.beginnerCourses$ = courses$
+      .pipe(
+        map(courses => courses.filter(course => course.category == 'BEGINNER'))
+      );
 
-      this.advancedCourses$ = courses$
-        .pipe(
-          map(courses => courses.filter(course => course.category == 'ADVANCED'))
-        );
 
+    this.advancedCourses$ = courses$
+      .pipe(
+        map(courses => courses.filter(course => course.category == 'ADVANCED'))
+      );
 
-    }
+  }
 
   onAddCourse() {
 
@@ -68,4 +71,5 @@ export class HomeComponent implements OnInit {
 
   }
 
+
 }