Angular NgRx Course

Author: jhades

server/create-course.route.ts

@@ -0,0 +1,29 @@
+import {Request, Response} from 'express';
+import {COURSES} from './db-data';
+
+export var coursesKeyCounter = 100;
+
+export function createCourse(req: Request, res: Response) {
+
+    console.log("Creating new course ...");
+
+    const changes = req.body;
+
+    const newCourse = {
+        id: coursesKeyCounter,
+      seqNo: coursesKeyCounter,
+        ...changes
+    };
+
+  COURSES[newCourse.id] = newCourse;
+
+  coursesKeyCounter += 1;
+
+    setTimeout(() => {
+
+      res.status(200).json(newCourse);
+
+    }, 2000);
+
+}
+

server/db-data.ts

@@ -15,7 +15,6 @@ export const COURSES: any = {
     description: 'NgRx In Depth',
     longDescription: 'Learn the modern Ngrx Ecosystem, including NgRx Data, Store, Effects, Router Store, Ngrx Entity, and Dev Tools.',
     iconUrl: 'https://angular-university.s3-us-west-1.amazonaws.com/course-images/ngrx-v2.png',
-    courseListIcon: 'https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png',
     category: 'BEGINNER',
     lessonsCount: 10,
     seqNo: 0,
@@ -38,7 +37,6 @@ export const COURSES: any = {
     description: 'RxJs In Practice Course',
     longDescription: 'Understand the RxJs Observable pattern, learn the RxJs Operators via practical examples',
     iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/rxjs-in-practice-course.png',
-    courseListIcon: 'https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png',
     category: 'BEGINNER',
     lessonsCount: 10,
     seqNo: 2,
@@ -56,18 +54,22 @@ export const COURSES: any = {
     url: 'serverless-angular'
   },
 
+  /*
+
+
   5: {
     id: 5,
     description: 'Angular for Beginners',
-    longDescription: 'Establish a solid layer of fundamentals, learn what\'s under the hood of Angular',
+    longDescription: "Establish a solid layer of fundamentals, learn what's under the hood of Angular",
     iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/angular2-for-beginners-small-v2.png',
-    courseListIcon: 'https://angular-academy.s3.amazonaws.com/main-logo/main-page-logo-small-hat.png',
     category: 'BEGINNER',
     lessonsCount: 10,
     seqNo: 5,
     url: 'angular-for-beginners'
   },
 
+*/
+
   12: {
     id: 12,
     description: 'Angular Testing Course',
@@ -84,7 +86,6 @@ export const COURSES: any = {
     description: 'Angular Security Course - Web Security Fundamentals',
     longDescription: 'Learn Web Security Fundamentals and apply them to defend an Angular / Node Application from multiple types of attacks.',
     iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/security-cover-small-v2.png',
-    courseListIcon: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/lock-v2.png',
     category: 'ADVANCED',
     lessonsCount: 11,
     seqNo: 7,
@@ -96,7 +97,6 @@ export const COURSES: any = {
     description: 'Angular PWA - Progressive Web Apps Course',
     longDescription: 'Learn Angular Progressive Web Applications, build the future of the Web Today.',
     iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-pwa-course.png',
-    courseListIcon: 'https://s3-us-west-1.amazonaws.com/angular-university/course-images/alien.png',
     category: 'ADVANCED',
     lessonsCount: 8,
     seqNo: 8,
@@ -108,7 +108,6 @@ export const COURSES: any = {
     description: 'Angular Advanced Library Laboratory: Build Your Own Library',
     longDescription: 'Learn Advanced Angular functionality typically used in Library Development. Advanced Components, Directives, Testing, Npm',
     iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/advanced_angular-small-v3.png',
-    courseListIcon: 'https://angular-academy.s3.amazonaws.com/thumbnails/angular-advanced-lesson-icon.png',
     category: 'ADVANCED',
     seqNo: 9,
     url: 'angular-advanced-course'
@@ -119,7 +118,6 @@ export const COURSES: any = {
     description: 'The Complete Typescript Course',
     longDescription: 'Complete Guide to Typescript From Scratch: Learn the language in-depth and use it to build a Node REST API.',
     iconUrl: 'https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-small.png',
-    courseListIcon: 'https://angular-academy.s3.amazonaws.com/thumbnails/typescript-2-lesson.png',
     category: 'BEGINNER',
     seqNo: 10,
     url: 'typescript-course'
@@ -130,7 +128,6 @@ export const COURSES: any = {
     description: 'Rxjs and Reactive Patterns Angular Architecture Course',
     longDescription: 'Learn the core RxJs Observable Pattern as well and many other Design Patterns for building Reactive Angular Applications.',
     iconUrl: 'https://s3-us-west-1.amazonaws.com/angular-academy/blog/images/rxjs-reactive-patterns-small.png',
-    courseListIcon: 'https://angular-academy.s3.amazonaws.com/course-logos/observables_rxjs.png',
     category: 'BEGINNER',
     seqNo: 11,
     url: 'rxjs-patterns-course'

server/server.ts

@@ -6,6 +6,7 @@ import {getAllCourses, getCourseById} from "./get-courses.route";
 import {searchLessons} from "./search-lessons.route";
 import {loginUser} from "./auth.route";
 import {saveCourse} from "./save-course.route";
+import {createCourse} from './create-course.route';
 
 const bodyParser = require('body-parser');
 
@@ -21,6 +22,8 @@ app.route('/api/login').post(loginUser);
 
 app.route('/api/courses').get(getAllCourses);
 
+app.route('/api/course').post(createCourse);
+
 app.route('/api/course/:id').put(saveCourse);
 
 app.route('/api/course/:id').get(getCourseById);

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

@@ -33,7 +33,6 @@ export class CoursesCardListComponent implements OnInit {
 
         this.dialog.open(EditCourseDialogComponent, dialogConfig);
 
-
     }
 
 }

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

@@ -15,6 +15,26 @@ <h2 mat-dialog-title>{{dialogTitle}}</h2>
 
       </mat-form-field>
 
+      <ng-container *ngIf="mode == 'create'">
+
+        <mat-form-field>
+
+          <input matInput
+                 placeholder="Course Url"
+                 formControlName="url">
+
+        </mat-form-field>
+
+        <mat-form-field>
+
+          <input matInput
+                 placeholder="Course Icon Url"
+                 formControlName="iconUrl">
+
+        </mat-form-field>
+
+      </ng-container>
+
       <mat-form-field>
 
         <mat-select placeholder="Select category"
@@ -57,7 +77,7 @@ <h2 mat-dialog-title>{{dialogTitle}}</h2>
   </button>
 
   <button mat-raised-button color="primary"
-          [disabled]="!form?.valid"
+          [disabled]="!form?.valid || (this.loading$ | async)"
           (click)="onSave()">
     Save
   </button>

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

@@ -5,6 +5,7 @@ import {AppState} from '../../reducers';
 import {Store} from '@ngrx/store';
 import {CourseEntityService} from '../services/course-entity.service';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'course-dialog',
@@ -21,6 +22,8 @@ export class EditCourseDialogComponent {
 
   mode: 'create' | 'update';
 
+  loading$:Observable<boolean>;
+
   constructor(
     private fb: FormBuilder,
     private store: Store<AppState>,
@@ -32,13 +35,26 @@ export class EditCourseDialogComponent {
     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, []]
-    });
+    this.loading$ = this.coursesService.loading$;
+
+    const formControls = {
+      description: ['', Validators.required],
+      category: ['', Validators.required],
+      longDescription: ['', Validators.required],
+      promo: ['', []]
+    };
 
+    if (this.mode == 'update') {
+      this.form = this.fb.group(formControls);
+      this.form.patchValue({...data.course});
+    }
+    else if (this.mode == 'create') {
+      this.form = this.fb.group({
+        ...formControls,
+        url: ['', Validators.required],
+        iconUrl: ['', Validators.required]
+      });
+    }
   }
 
   onClose() {
@@ -61,6 +77,19 @@ export class EditCourseDialogComponent {
     }
     else if (this.mode == 'create') {
 
+      this.coursesService.add(course)
+        .subscribe(
+          (val) => {
+
+            console.log("New Course Created", val);
+
+            this.dialogRef.close();
+          },
+          err => {
+            console.log("Error creating course: ", err);
+          }
+        );
+
     }
 
   }

src/app/courses/home/home.component.css

@@ -2,6 +2,8 @@
 
 .title {
     text-align: center;
+    margin-right: 15px;
+
 }
 
 .courses-panel {
@@ -21,3 +23,12 @@
 h2 {
   font-family: "Roboto";
 }
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+

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

@@ -1,34 +1,40 @@
-
 <div class="courses-panel">
 
+  <div class="header">
+
     <h2 class="title">All Courses</h2>
 
-    <div class="counters">
-        <p>In Promo: {{promoTotal$ | async}}</p>
-    </div>
+    <button mat-mini-fab>
+      <mat-icon class="add-course-btn" (click)="onAddCourse()">add</mat-icon>
+    </button>
+
+  </div>
 
-    <mat-tab-group>
+  <div class="counters">
+    <p>In Promo: {{promoTotal$ | async}}</p>
+  </div>
 
-        <mat-tab label="Beginners">
+  <mat-tab-group>
 
-            <courses-card-list
-                    [courses]="beginnerCourses$ | async">
+    <mat-tab label="Beginners">
 
-            </courses-card-list>
+      <courses-card-list
+        [courses]="beginnerCourses$ | async">
 
-        </mat-tab>
+      </courses-card-list>
 
-        <mat-tab label="Advanced">
+    </mat-tab>
 
-            <courses-card-list
-                    [courses]="advancedCourses$ | async"
+    <mat-tab label="Advanced">
 
-            ></courses-card-list>
+      <courses-card-list
+        [courses]="advancedCourses$ | async"
 
-        </mat-tab>
+      ></courses-card-list>
 
-    </mat-tab-group>
+    </mat-tab>
 
+  </mat-tab-group>
 
 
 </div>

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

@@ -3,8 +3,13 @@ import {Course} from "../model/course";
 import {Observable} from "rxjs";
 import {AppState} from '../../reducers';
 import {createSelector, select, Store} from '@ngrx/store';
-import {EntityCollectionService, EntityServices} from '@ngrx/data';
 import {CourseEntityService} from '../services/course-entity.service';
+import {defaultDialogConfig} from '../../shared/default-dialog-config';
+import {EditCourseDialogComponent} from '../edit-course-dialog/edit-course-dialog.component';
+import {MatDialog} from '@angular/material';
+
+
+
 @Component({
     selector: 'home',
     templateUrl: './home.component.html',
@@ -21,7 +26,8 @@ export class HomeComponent implements OnInit {
 
     constructor(
       private store: Store<AppState>,
-      private coursesService: CourseEntityService) {
+      private coursesService: CourseEntityService,
+      private dialog: MatDialog) {
 
     }
 
@@ -53,4 +59,17 @@ export class HomeComponent implements OnInit {
 
     }
 
+  onAddCourse() {
+
+    const dialogConfig = defaultDialogConfig();
+
+    dialogConfig.data = {
+      dialogTitle:"Create Course",
+      mode: 'create'
+    };
+
+    this.dialog.open(EditCourseDialogComponent, dialogConfig);
+
+  }
+
 }

src/app/courses/model/course.ts

@@ -2,6 +2,7 @@
 export interface Course {
   id: number;
   seqNo:number;
+  url:string;
   iconUrl: string;
   courseListIcon: string;
   description: string;