+ ;
+ course: Course;
+ lessons: Lesson[];
- constructor(private route: ActivatedRoute,
- private coursesService: CoursesService) {
+ constructor(private route: ActivatedRoute) {
}
ngOnInit() {
- const courseId = parseInt(this.route.snapshot.paramMap.get("courseId"));
-
- const course$ = this.coursesService.loadCourseById(courseId)
- .pipe(
- startWith(null)
- );
-
- const lessons$ = this.coursesService.loadAllCourseLessons(courseId)
- .pipe(
- startWith([])
- );
-
- this.data$ = combineLatest([course$, lessons$])
- .pipe(
- map(([course, lessons]) => {
- return {
- course,
- lessons
- }
- }),
- tap(console.log)
- );
}
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index aa8317d..0e5a130 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -6,3 +6,13 @@
}
+
+
+.course-card {
+ margin: 20px 10px;
+}
+
+.course-actions {
+ text-align: center;
+}
+
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index e4a1f77..c84039e 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,24 +1,73 @@
;
- advancedCourses: Course[];
+ advancedCourses$: Observable;
- constructor(private http: HttpClient, private dialog: MatDialog) {
+ constructor(private courseService: CourseService) {
}
ngOnInit() {
+ this.reloadCourseList();
+ }
- this.http.get('/api/courses')
- .subscribe(
- res => {
-
- const courses: Course[] = res["payload"].sort(sortCoursesBySeqNo);
+ reloadCourseList(){
+
+ const courses$ = this.courseService.getCourse()
+ .pipe(
+ map(courses=> courses.sort(sortCoursesBySeqNo))
+ );
- this.beginnerCourses = courses.filter(course => course.category == "BEGINNER");
+ // manual subscription for testing.
+ // courses$.subscribe((res)=> {
+ // console.log('called courses:- ', res)
+ // });
- this.advancedCourses = courses.filter(course => course.category == "ADVANCED");
+ 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";
- dialogConfig.data = course;
-
- const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);
-
- }
}
diff --git a/src/app/loading/loading.service.ts b/src/app/loading/loading.service.ts
deleted file mode 100644
index dc4f1c4..0000000
--- a/src/app/loading/loading.service.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable, Subject,of} from 'rxjs';
-import {concatMap, finalize, tap} from 'rxjs/operators';
-
-
-@Injectable()
-export class LoadingService {
-
- private loadingSubject = new BehaviorSubject(false);
-
- loading$: Observable = this.loadingSubject.asObservable();
-
- constructor() {
- console.log("Loading service created ...");
- }
-
- showLoaderUntilCompleted(obs$: Observable): Observable {
- return of(null)
- .pipe(
- tap(() => this.loadingOn()),
- concatMap(() => obs$),
- finalize(() => this.loadingOff())
- );
- }
-
- loadingOn() {
- this.loadingSubject.next(true);
-
- }
-
- loadingOff() {
- this.loadingSubject.next(false);
- }
-
-}
diff --git a/src/app/messages/messages.service.ts b/src/app/messages/messages.service.ts
deleted file mode 100644
index 16496c0..0000000
--- a/src/app/messages/messages.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {filter} from 'rxjs/operators';
-
-
-@Injectable()
-export class MessagesService {
-
- private subject = new BehaviorSubject([]);
-
- errors$: Observable = this.subject.asObservable()
- .pipe(
- filter(messages => messages && messages.length > 0)
- );
-
- showErrors(...errors: string[]) {
- this.subject.next(errors);
- }
-
-}
diff --git a/src/app/services/auth.store.ts b/src/app/services/auth.store.ts
deleted file mode 100644
index be7ec5f..0000000
--- a/src/app/services/auth.store.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import {Inject, Injectable} from '@angular/core';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {User} from '../model/user';
-import {map, shareReplay, tap} from 'rxjs/operators';
-import {HttpClient} from '@angular/common/http';
-
-const AUTH_DATA = "auth_data";
-
-@Injectable({
- providedIn: 'root'
-})
-export class AuthStore {
-
- private subject = new BehaviorSubject(null);
-
- user$ : Observable = this.subject.asObservable();
-
- isLoggedIn$ : Observable;
- isLoggedOut$ : Observable;
-
- constructor(private http: HttpClient) {
-
- this.isLoggedIn$ = this.user$.pipe(map(user => !!user));
-
- this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));
-
- const user = localStorage.getItem(AUTH_DATA);
-
- if (user) {
- this.subject.next(JSON.parse(user));
- }
-
- }
-
- login(email:string, password:string): Observable {
- return this.http.post("/api/login", {email, password})
- .pipe(
- tap(user => {
- this.subject.next(user);
- localStorage.setItem(AUTH_DATA, JSON.stringify(user));
- }),
- shareReplay()
- );
- }
-
- logout() {
- this.subject.next(null);
- localStorage.removeItem(AUTH_DATA);
- }
-
-
-}
diff --git a/src/app/services/courses.service.ts b/src/app/services/courses.service.ts
deleted file mode 100644
index 907703b..0000000
--- a/src/app/services/courses.service.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import {Injectable} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
-import {Course} from '../model/course';
-import {Observable} from 'rxjs';
-import {map, shareReplay} from 'rxjs/operators';
-import {Lesson} from '../model/lesson';
-
-
-@Injectable({
- providedIn:'root'
-})
-export class CoursesService {
-
- constructor(private http:HttpClient) {
-
- }
-
- loadCourseById(courseId:number) {
- return this.http.get(`/api/courses/${courseId}`)
- .pipe(
- shareReplay()
- );
- }
-
- loadAllCourseLessons(courseId:number): Observable {
- return this.http.get('/api/lessons', {
- params: {
- pageSize: "10000",
- courseId: courseId.toString()
- }
- })
- .pipe(
- map(res => res["payload"]),
- shareReplay()
- );
- }
-
- loadAllCourses(): Observable {
- return this.http.get("/api/courses")
- .pipe(
- map(res => res["payload"]),
- shareReplay()
- );
- }
-
-
- saveCourse(courseId:string, changes: Partial):Observable {
- return this.http.put(`/api/courses/${courseId}`, changes)
- .pipe(
- shareReplay()
- );
- }
-
-
- searchLessons(search:string): Observable {
- return this.http.get('/api/lessons', {
- params: {
- filter: search,
- pageSize: "100"
- }
- })
- .pipe(
- map(res => res["payload"]),
- shareReplay()
- );
- }
-
-
-}
-
-
-
-
-
-
-
diff --git a/src/app/services/courses.store.ts b/src/app/services/courses.store.ts
deleted file mode 100644
index e7aba4b..0000000
--- a/src/app/services/courses.store.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {Injectable} from '@angular/core';
-import {BehaviorSubject, Observable, throwError} from 'rxjs';
-import {Course, sortCoursesBySeqNo} from '../model/course';
-import {catchError, map, shareReplay, tap} from 'rxjs/operators';
-import {HttpClient} from '@angular/common/http';
-import {LoadingService} from '../loading/loading.service';
-import {MessagesService} from '../messages/messages.service';
-
-
-@Injectable({
- providedIn: 'root'
-})
-export class CoursesStore {
-
- private subject = new BehaviorSubject([]);
-
- courses$ : Observable = this.subject.asObservable();
-
- constructor(
- private http:HttpClient,
- private loading: LoadingService,
- private messages: MessagesService) {
-
- this.loadAllCourses();
-
- }
-
- private loadAllCourses() {
-
- const loadCourses$ = this.http.get('/api/courses')
- .pipe(
- map(response => response["payload"]),
- catchError(err => {
- const message = "Could not load courses";
- this.messages.showErrors(message);
- console.log(message, err);
- return throwError(err);
- }),
- tap(courses => this.subject.next(courses))
- );
-
- this.loading.showLoaderUntilCompleted(loadCourses$)
- .subscribe();
-
- }
-
- saveCourse(courseId:string, changes: Partial): Observable {
-
- const courses = this.subject.getValue();
-
- const index = courses.findIndex(course => course.id == courseId);
-
- const newCourse: Course = {
- ...courses[index],
- ...changes
- };
-
- const newCourses: Course[] = courses.slice(0);
-
- newCourses[index] = newCourse;
-
- this.subject.next(newCourses);
-
- return this.http.put(`/api/courses/${courseId}`, changes)
- .pipe(
- catchError(err => {
- const message = "Could not save course";
- console.log(message, err);
- this.messages.showErrors(message);
- return throwError(err);
- }),
- shareReplay()
- );
- }
-
- filterByCategory(category: string): Observable {
- return this.courses$
- .pipe(
- map(courses =>
- courses.filter(course => course.category == category)
- .sort(sortCoursesBySeqNo)
- )
- )
- }
-
-}
diff --git a/src/app/shared/course.service.ts b/src/app/shared/course.service.ts
new file mode 100644
index 0000000..663933a
--- /dev/null
+++ b/src/app/shared/course.service.ts
@@ -0,0 +1,36 @@
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { Course } from "../model/course";
+import { map, shareReplay } from "rxjs/operators";
+
+/**
+ * State less obsrable service, design patter.
+ */
+@Injectable({
+ providedIn: 'root'
+})
+export class CourseService {
+ constructor(private http: HttpClient) {
+
+ }
+
+ getCourse(): Observable {
+ return this.http.get('/api/courses')
+ .pipe(
+ map(res => res['payload']),
+ shareReplay()
+ );
+ }
+
+ getOtherData(): Observable {
+ return this.http.get('https://sumit-jaiswal.free.beeceptor.com/users')
+ .pipe(
+ shareReplay()
+ );
+ }
+
+ updateCorse(courseId: string, changes: Partial): Observable {
+ return this.http.put(`/api/courses/${courseId}`, changes);
+ }
+}
\ No newline at end of file
- ![]()
+ ![]()
-
+
-
+
+
-
-
-
-
+
+ {{lesson.seqNo}}
+ {{lesson.description}}
+ {{lesson.duration}}
+
+
+
diff --git a/src/app/course/course.component.ts b/src/app/course/course.component.ts
index 2169f72..ba3519e 100644
--- a/src/app/course/course.component.ts
+++ b/src/app/course/course.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Course} from '../model/course';
import {
@@ -13,58 +13,28 @@ import {
withLatestFrom,
concatAll, shareReplay, catchError
} from 'rxjs/operators';
-import {merge, fromEvent, Observable, concat, throwError, combineLatest} from 'rxjs';
+import {merge, fromEvent, Observable, concat, throwError} from 'rxjs';
import {Lesson} from '../model/lesson';
-import {CoursesService} from '../services/courses.service';
-
-
-interface CourseData {
- course: Course;
- lessons: Lesson[];
-}
@Component({
selector: 'course',
templateUrl: './course.component.html',
- styleUrls: ['./course.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush
+ styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {
- data$: Observable{{data.course?.description}}
+{{course?.description}}
-| # | +Description | +Duration | + -# | -Description | -Duration | - - - -
|---|---|---|
| {{lesson.seqNo}} | -{{lesson.description}} | -{{lesson.duration}} | -
-
+
-
+
-
+
-
+
-
+ {{course.description}}
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+ {{course.description}}
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
-
+
+
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 903cd0f..f66828d 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,36 +1,60 @@
-import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
-import {Course} from '../model/course';
-import {Observable} from 'rxjs';
-import {CoursesStore} from '../services/courses.store';
+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 {HttpClient} from '@angular/common/http';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
@Component({
selector: 'home',
templateUrl: './home.component.html',
- styleUrls: ['./home.component.css'],
- changeDetection: ChangeDetectionStrategy.OnPush
+ styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
- beginnerCourses$: Observable;
+ beginnerCourses: Course[];
- advancedCourses$: Observable;
+ advancedCourses: Course[];
- constructor(private coursesStore: CoursesStore) {
+
+ constructor(private http: HttpClient, private dialog: MatDialog) {
}
ngOnInit() {
- this.reloadCourses();
+
+ this.http.get('/api/courses')
+ .subscribe(
+ res => {
+
+ const courses: Course[] = res["payload"].sort(sortCoursesBySeqNo);
+
+ this.beginnerCourses = courses.filter(course => course.category == "BEGINNER");
+
+ this.advancedCourses = courses.filter(course => course.category == "ADVANCED");
+
+ });
+
}
- reloadCourses() {
+ editCourse(course: Course) {
+
+ const dialogConfig = new MatDialogConfig();
+
+ dialogConfig.disableClose = true;
+ dialogConfig.autoFocus = true;
+ dialogConfig.width = "400px";
- this.beginnerCourses$ = this.coursesStore.filterByCategory("BEGINNER");
+ dialogConfig.data = course;
+
+ const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);
- this.advancedCourses$ = this.coursesStore.filterByCategory("ADVANCED");
}
}
+
+
diff --git a/src/app/lesson/lesson.component.html b/src/app/lesson/lesson.component.html
index 2175241..131b285 100644
--- a/src/app/lesson/lesson.component.html
+++ b/src/app/lesson/lesson.component.html
@@ -1,15 +1 @@
-
-
-
-
-
-
-
-
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
index 609a1a3..a85db85 100644
--- a/src/app/messages/messages.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {Message} from '../model/message';
import {tap} from 'rxjs/operators';
-import {MessagesService} from './messages.service';
@Component({
selector: 'messages',
@@ -11,28 +10,19 @@ import {MessagesService} from './messages.service';
})
export class MessagesComponent implements OnInit {
- showMessages = false;
- errors$: Observable;
-
-
- constructor(public messagesService: MessagesService) {
-
- console.log("Created messages component");
+ constructor() {
}
ngOnInit() {
- this.errors$ = this.messagesService.errors$
- .pipe(
- tap(() => this.showMessages = true)
- );
+
}
onClose() {
- this.showMessages = false;
+
}
diff --git a/src/app/model/course.ts b/src/app/model/course.ts
index 0335627..9870ddd 100644
--- a/src/app/model/course.ts
+++ b/src/app/model/course.ts
@@ -1,4 +1,3 @@
-
export interface Course {
id: string;
description: string;
diff --git a/src/app/search-lessons/search-lessons.component.css b/src/app/search-lessons/search-lessons.component.css
index ff7d70e..960fc25 100644
--- a/src/app/search-lessons/search-lessons.component.css
+++ b/src/app/search-lessons/search-lessons.component.css
@@ -26,16 +26,15 @@
font-size: 20px;
}
-.back-btn {
- margin-top: 30px;
-}
.lessons-table {
min-height: 360px;
margin-top: 10px;
}
-
+.back-btn {
+ margin-top: 30px;
+}
.search-bar {
margin-top: 20px;
diff --git a/src/app/search-lessons/search-lessons.component.html b/src/app/search-lessons/search-lessons.component.html
index 53c4f8d..d746a25 100644
--- a/src/app/search-lessons/search-lessons.component.html
+++ b/src/app/search-lessons/search-lessons.component.html
@@ -8,48 +8,26 @@
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index f66828d..4626c1a 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -5,6 +5,7 @@ import {catchError, delay, delayWhen, filter, finalize, map, retryWhen, shareRep
import {HttpClient} from '@angular/common/http';
import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
+import { CourseService } from '../shared/course.service';
@Component({
@@ -14,44 +15,44 @@ import {CourseDialogComponent} from '../course-dialog/course-dialog.component';
})
export class HomeComponent implements OnInit {
- beginnerCourses: Course[];
+ beginnerCourses$: ObservableAll Courses
+All Courses
-{{course.longDescription}}
+{{course.longDescription}}
+
-
-
+{{lesson.description}}
- -Duration: {{lesson.duration}}
- - - - -lesson works!
diff --git a/src/app/lesson/lesson.component.ts b/src/app/lesson/lesson.component.ts index 5df54cd..2f4a142 100644 --- a/src/app/lesson/lesson.component.ts +++ b/src/app/lesson/lesson.component.ts @@ -1,20 +1,11 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {Lesson} from '../model/lesson'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'lesson', templateUrl: './lesson.component.html', styleUrls: ['./lesson.component.css'] }) -export class LessonComponent implements OnInit { +export class LessonComponent { - @Input() - lesson:Lesson; - - constructor() { } - - ngOnInit() { - - } } diff --git a/src/app/loading/loading.component.css b/src/app/loading/loading.component.css index bb7e4ee..96e82f0 100644 --- a/src/app/loading/loading.component.css +++ b/src/app/loading/loading.component.css @@ -1,15 +1,13 @@ .spinner-container { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - background: rgba(0, 0, 0, 0.32); - z-index: 20000; + position: fixed; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + top: 0; + left: 0; + background:rgba(0, 0, 0, 0.32); + z-index: 2000; } - - diff --git a/src/app/loading/loading.component.html b/src/app/loading/loading.component.html index f7516e3..8b13789 100644 --- a/src/app/loading/loading.component.html +++ b/src/app/loading/loading.component.html @@ -1,9 +1 @@ - -
-
-
-
-
diff --git a/src/app/loading/loading.component.ts b/src/app/loading/loading.component.ts
index f9ca4f0..5ee6516 100644
--- a/src/app/loading/loading.component.ts
+++ b/src/app/loading/loading.component.ts
@@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
-import {LoadingService} from './loading.service';
@Component({
selector: 'loading',
@@ -10,7 +9,7 @@ import {LoadingService} from './loading.service';
export class LoadingComponent implements OnInit {
- constructor(public loadingService: LoadingService) {
+ constructor() {
}
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index fa6bcb5..343488e 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -3,7 +3,6 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Router} from '@angular/router';
-import {AuthStore} from '../services/auth.store';
@Component({
selector: 'login',
@@ -16,8 +15,7 @@ export class LoginComponent implements OnInit {
constructor(
private fb: FormBuilder,
- private router: Router,
- private auth: AuthStore) {
+ private router: Router) {
this.form = fb.group({
email: ['test@angular-university.io', [Validators.required]],
@@ -34,16 +32,6 @@ export class LoginComponent implements OnInit {
const val = this.form.value;
- this.auth.login(val.email, val.password)
- .subscribe(
- () => {
- this.router.navigateByUrl("/courses")
- },
- err => {
- alert("Login failed!");
- }
- );
-
}
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index bc0e54c..e69de29 100644
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -1,16 +0,0 @@
-
-