Angular NgRx Course

Author: jhades

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

@@ -27,7 +27,8 @@ export class CoursesCardListComponent implements OnInit {
 
         dialogConfig.data = {
           dialogTitle:"Edit Course",
-          course
+          course,
+          mode: 'update'
         };
 
         this.dialog.open(EditCourseDialogComponent, dialogConfig);

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

@@ -17,7 +17,6 @@ import {MatSortModule} from '@angular/material/sort';
 import {MatTableModule} from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/tabs';
 import {ReactiveFormsModule} from '@angular/forms';
-import {MatMenuModule} from '@angular/material/menu';
 import {MatMomentDateModule} from '@angular/material-moment-adapter';
 import {MatCardModule} from '@angular/material/card';
 import {MatButtonModule} from '@angular/material/button';
@@ -31,7 +30,6 @@ import {CourseDataService} from './services/course-data.service';
 import {EntityDataModule, EntityDataService, EntityDefinitionService, EntityMetadataMap} from '@ngrx/data';
 import {Course} from './model/course';
 import {CourseEntityService} from './services/course-entity.service';
-import {CourseFormComponent} from './course-form/course-form.component';
 
 
 export const coursesRoutes: Routes = [
@@ -95,8 +93,7 @@ const entityMetadata: EntityMetadataMap = {
     HomeComponent,
     CoursesCardListComponent,
     EditCourseDialogComponent,
-    CourseComponent,
-    CourseFormComponent
+    CourseComponent
   ],
   exports: [
     HomeComponent,

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

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

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

@@ -1,12 +1,69 @@
 
+<h2 mat-dialog-title>{{dialogTitle}}</h2>
 
-<course-form
-  [course]="course"
-  [title]="dialogTitle"
-  (close)="close()"
-  (courseChanged)="onCourseChanged($event)">
+<mat-dialog-content>
+
+  <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>
+
+</mat-dialog-content>
+
+<mat-dialog-actions>
+
+  <button mat-raised-button (click)="onClose()">
+    Close
+  </button>
+
+  <button mat-raised-button color="primary"
+          [disabled]="!form?.valid"
+          (click)="onSave()">
+    Save
+  </button>
+
+</mat-dialog-actions>
 
-</course-form>
 
 
 

src/app/courses/courses.module.ts

@@ -4,6 +4,7 @@ import {Course} from '../model/course';
 import {AppState} from '../../reducers';
 import {Store} from '@ngrx/store';
 import {CourseEntityService} from '../services/course-entity.service';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   selector: 'course-dialog',
@@ -12,30 +13,56 @@ import {CourseEntityService} from '../services/course-entity.service';
 })
 export class EditCourseDialogComponent {
 
+  form: FormGroup;
+
   dialogTitle: string;
 
   course: Course;
 
+  mode: 'create' | 'update';
+
   constructor(
+    private fb: FormBuilder,
     private store: Store<AppState>,
     private dialogRef: MatDialogRef<EditCourseDialogComponent>,
     @Inject(MAT_DIALOG_DATA) data,
     private coursesService: CourseEntityService) {
 
     this.dialogTitle = data.dialogTitle;
     this.course = data.course;
+    this.mode = data.mode;
+
+    this.form = this.fb.group({
+      description: [this.course.description, Validators.required],
+      category: [this.course.category, Validators.required],
+      longDescription: [this.course.longDescription, Validators.required],
+      promo: [this.course.promo, []]
+    });
 
   }
 
-  close() {
+  onClose() {
     this.dialogRef.close();
   }
 
-  onCourseChanged(course: Course) {
+  onSave() {
 
-    this.coursesService.update(course);
+    const course = {
+      ...this.course,
+      ...this.form.value
+    };
+
+    if (this.mode == 'update') {
+
+      this.coursesService.update(course);
+
+      this.dialogRef.close();
+
+    }
+    else if (this.mode == 'create') {
+
+    }
 
-    this.dialogRef.close();
   }
 
 }