Angular NgRx Course

Author: jhades

src/app/courses/course-dialog/course-dialog.component.css

@@ -0,0 +1 @@
+

src/app/courses/course-dialog/course-dialog.component.html

@@ -0,0 +1,25 @@
+
+<h2 mat-dialog-title>{{dialogTitle}}</h2>
+
+
+<mat-dialog-content>
+
+  <course-form [course]="course"></course-form>
+
+</mat-dialog-content>
+
+<mat-dialog-actions>
+
+    <button mat-raised-button (click)="close()">
+        Close
+    </button>
+
+    <button mat-raised-button color="primary"
+            [disabled]="!courseForm?.form?.valid"
+            (click)="save()">
+        Save
+    </button>
+
+</mat-dialog-actions>
+
+

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

@@ -0,0 +1,52 @@
+import {Component, Inject, OnInit, ViewChild} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import {Course} from "../model/course";
+import {AppState} from "../../reducers";
+import {Store} from "@ngrx/store";
+import {CourseEntityService} from '../services/course-entity.service';
+import {CourseFormComponent} from '../course-form/course-form.component';
+
+@Component({
+    selector: 'course-dialog',
+    templateUrl: './edit-course-dialog.component.html',
+    styleUrls: ['./edit-course-dialog.component.css']
+})
+export class EditCourseDialogComponent {
+
+    dialogTitle:string;
+
+    course:Course;
+
+    @ViewChild(CourseFormComponent, {static:false})
+    courseForm: CourseFormComponent;
+
+    constructor(
+        private store: Store<AppState>,
+        private dialogRef: MatDialogRef<EditCourseDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) data,
+        private coursesService: CourseEntityService) {
+
+        this.dialogTitle = data.dialogTitle;
+        this.course = data.course;
+
+    }
+
+
+    save() {
+
+      const course = {
+        ...this.course,
+        ...this.courseForm.form.value
+      };
+
+        this.coursesService.update(course);
+
+        this.dialogRef.close();
+
+    }
+
+    close() {
+        this.dialogRef.close();
+    }
+
+}

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

@@ -0,0 +1,9 @@
+
+.mat-form-field {
+  display: block;
+}
+
+textarea {
+  height: 100px;
+  resize: vertical;
+}

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

@@ -0,0 +1,46 @@
+
+<ng-container *ngIf="form">
+
+  <ng-container [formGroup]="form">
+
+    <mat-form-field>
+
+      <input matInput
+             placeholder="Course Description"
+             formControlName="description">
+
+    </mat-form-field>
+
+    <mat-form-field>
+
+      <mat-select placeholder="Select category"
+                  formControlName="category">
+
+        <mat-option value="BEGINNER">
+          Beginner</mat-option>
+        <mat-option value="INTERMEDIATE">
+          Intermediate</mat-option>
+        <mat-option value="ADVANCED">
+          Advanced</mat-option>
+
+      </mat-select>
+
+    </mat-form-field>
+
+    <mat-slide-toggle formControlName="promo">Promotion On</mat-slide-toggle>
+
+
+    <mat-form-field>
+
+        <textarea matInput placeholder="Description"
+                  formControlName="longDescription">
+
+        </textarea>
+
+    </mat-form-field>
+
+  </ng-container>
+
+
+</ng-container>
+

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

@@ -0,0 +1,40 @@
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Course} from '../model/course';
+
+@Component({
+  selector: 'course-form',
+  templateUrl: './course-form.component.html',
+  styleUrls: ['./course-form.component.css']
+})
+export class CourseFormComponent implements OnChanges {
+
+  form: FormGroup;
+
+  @Input()
+  course: Course;
+
+  constructor(private fb: FormBuilder) {
+
+
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['course']) {
+      const change = changes['course'],
+        course: Course = {...change.currentValue};
+
+      if (change.isFirstChange()) {
+        setTimeout(() => {
+          this.form = this.fb.group({
+            description: [course.description, Validators.required],
+            category: [course.category, Validators.required],
+            longDescription: [course.longDescription, Validators.required],
+            promo: [course.promo, []]
+          });
+        });
+      }
+    }
+  }
+
+}

src/app/courses/course-form/course-form.component.css

@@ -2,7 +2,7 @@ import {Injectable} from '@angular/core';
 import {Actions, createEffect, ofType} from '@ngrx/effects';
 import {of} from 'rxjs';
 import {catchError, map, mergeMap} from 'rxjs/operators';
-import {CoursesService} from './services/courses.service';
+import {CoursesHttpService} from './services/courses-http.service';
 import {AppState} from '../reducers';
 import {select, Store} from '@ngrx/store';
 import {CourseActions} from './action-types';
@@ -33,7 +33,7 @@ export class CourseEffects {
 
   constructor(
     private actions$: Actions,
-    private coursesService: CoursesService,
+    private coursesService: CoursesHttpService,
     private store: Store<AppState>) {
 
   }

src/app/courses/course-form/course-form.component.html

@@ -5,7 +5,7 @@ import { MatPaginator } from "@angular/material/paginator";
 import { MatSort } from "@angular/material/sort";
 import { MatTableDataSource } from "@angular/material/table";
 import {Course} from "../model/course";
-import {CoursesService} from "../services/courses.service";
+import {CoursesHttpService} from "../services/courses-http.service";
 import {debounceTime, distinctUntilChanged, startWith, tap, delay} from 'rxjs/operators';
 import {merge, fromEvent, Observable} from "rxjs";
 import {LessonsDataSource} from "../services/lessons.datasource";

src/app/courses/course-form/course-form.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 import {Course} from "../model/course";
 import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
-import {CourseDialogComponent} from "../course-dialog/course-dialog.component";
+import {EditCourseDialogComponent} from "../course-dialog/edit-course-dialog.component";
 import {defaultDialogConfig} from '../../shared/default-dialog-config';
 
 @Component({
@@ -27,11 +27,10 @@ export class CoursesCardListComponent implements OnInit {
 
         dialogConfig.data = {
           dialogTitle:"Edit Course",
-          mode: 'update',
           course
         };
 
-        this.dialog.open(CourseDialogComponent, dialogConfig);
+        this.dialog.open(EditCourseDialogComponent, dialogConfig);
 
 
     }