From 63461ed59322894015ca7ee80feb2d74182194f9 Mon Sep 17 00:00:00 2001 From: ankitpalAP Date: Fri, 18 Jun 2021 11:06:57 +0530 Subject: [PATCH] state managment --- server/db.json | 9 ++- src/app/app.module.ts | 4 +- .../courses-details.component.html | 37 ++++++++++ .../courses-details.component.scss | 0 .../courses-details.component.spec.ts | 25 +++++++ .../courses-details.component.ts | 15 ++++ .../courses-list/courses-list.component.html | 19 +++++ .../courses-list/courses-list.component.scss | 0 .../courses-list.component.spec.ts | 25 +++++++ .../courses-list/courses-list.component.ts | 16 +++++ src/app/courses/courses.component.html | 69 +++---------------- src/app/courses/courses.component.ts | 31 +++++++-- src/app/shared/services/courses.service.ts | 35 ++++------ 13 files changed, 197 insertions(+), 88 deletions(-) create mode 100644 src/app/courses/courses-details/courses-details.component.html create mode 100644 src/app/courses/courses-details/courses-details.component.scss create mode 100644 src/app/courses/courses-details/courses-details.component.spec.ts create mode 100644 src/app/courses/courses-details/courses-details.component.ts create mode 100644 src/app/courses/courses-list/courses-list.component.html create mode 100644 src/app/courses/courses-list/courses-list.component.scss create mode 100644 src/app/courses/courses-list/courses-list.component.spec.ts create mode 100644 src/app/courses/courses-list/courses-list.component.ts diff --git a/server/db.json b/server/db.json index a9b2c1c..61869c2 100644 --- a/server/db.json +++ b/server/db.json @@ -2,10 +2,17 @@ "courses": [ { "id": 1, - "title": "Angular 9 Fundamentals", + "title": "Learn the fundamentals of ", "description": "Learn the fundamentals of Angular 9", "percentComplete": 26, "favorite": true + }, + { + "id": 4, + "title": "Worship will sentence", + "description": "Learn the fundamentals of Angular 9", + "percentComplete": 69, + "favorite": true } ] } \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c2752d1..50c9b01 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,8 @@ import { CoursesComponent } from './courses/courses.component'; import { FormsModule } from '@angular/forms'; import { CoursesService } from './shared/services/courses.service'; import { LessonsService } from './shared/services/lessons.service'; +import { CoursesListComponent } from './courses/courses-list/courses-list.component'; +import { CoursesDetailsComponent } from './courses/courses-details/courses-details.component'; @NgModule({ imports: [ @@ -21,7 +23,7 @@ import { LessonsService } from './shared/services/lessons.service'; MaterialModule, HttpClientModule, ], - declarations: [AppComponent, HomeComponent, CoursesComponent], + declarations: [AppComponent, HomeComponent, CoursesComponent, CoursesListComponent, CoursesDetailsComponent], providers: [CoursesService, LessonsService], bootstrap: [AppComponent], }) diff --git a/src/app/courses/courses-details/courses-details.component.html b/src/app/courses/courses-details/courses-details.component.html new file mode 100644 index 0000000..64a240b --- /dev/null +++ b/src/app/courses/courses-details/courses-details.component.html @@ -0,0 +1,37 @@ + + + {{course.title}} + Select Course + Select Course + + +
+ + + + + + + +
+

{{course.percentComplete}}% Complete

+ +
+ //Na + + + + + +
+ 
{{form.value | json}}
+ 
{{form.valid | json}}
+ \ No newline at end of file diff --git a/src/app/courses/courses-details/courses-details.component.scss b/src/app/courses/courses-details/courses-details.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/courses/courses-details/courses-details.component.spec.ts b/src/app/courses/courses-details/courses-details.component.spec.ts new file mode 100644 index 0000000..a1ecff4 --- /dev/null +++ b/src/app/courses/courses-details/courses-details.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CoursesDetailsComponent } from './courses-details.component'; + +describe('CoursesDetailsComponent', () => { + let component: CoursesDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CoursesDetailsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CoursesDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/courses/courses-details/courses-details.component.ts b/src/app/courses/courses-details/courses-details.component.ts new file mode 100644 index 0000000..c71550d --- /dev/null +++ b/src/app/courses/courses-details/courses-details.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'app-courses-details', + templateUrl: './courses-details.component.html', + styleUrls: ['./courses-details.component.scss'], +}) +export class CoursesDetailsComponent implements OnInit { + @Input() course; + @Output() saved = new EventEmitter(); + @Output() cancelled = new EventEmitter(); + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/courses/courses-list/courses-list.component.html b/src/app/courses/courses-list/courses-list.component.html new file mode 100644 index 0000000..378b002 --- /dev/null +++ b/src/app/courses/courses-list/courses-list.component.html @@ -0,0 +1,19 @@ + + + + Course List + + + + + +

{{course.title}}

+

{{course.description}}

+ + + + + + \ No newline at end of file diff --git a/src/app/courses/courses-list/courses-list.component.scss b/src/app/courses/courses-list/courses-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/courses/courses-list/courses-list.component.spec.ts b/src/app/courses/courses-list/courses-list.component.spec.ts new file mode 100644 index 0000000..fb37a60 --- /dev/null +++ b/src/app/courses/courses-list/courses-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CoursesListComponent } from './courses-list.component'; + +describe('CoursesListComponent', () => { + let component: CoursesListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CoursesListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CoursesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/courses/courses-list/courses-list.component.ts b/src/app/courses/courses-list/courses-list.component.ts new file mode 100644 index 0000000..a933a05 --- /dev/null +++ b/src/app/courses/courses-list/courses-list.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'app-courses-list', + templateUrl: './courses-list.component.html', + styleUrls: ['./courses-list.component.scss'], +}) +export class CoursesListComponent implements OnInit { + @Input() courses; + @Output() selected = new EventEmitter(); + @Output() deleted = new EventEmitter(); + + constructor() {} + + ngOnInit(): void {} +} diff --git a/src/app/courses/courses.component.html b/src/app/courses/courses.component.html index d33f21b..dcfbd5f 100644 --- a/src/app/courses/courses.component.html +++ b/src/app/courses/courses.component.html @@ -1,66 +1,17 @@
- - - - Course List - - - - - -

{{course.title}}

-

{{course.description}}

- - - - - - - +
- - - - {{tempData.title}} - Select Course - Select Course - - -
- - - - - - - -
-

{{tempData.percentComplete}}% Complete

- -
- //Na - - - - - - -
- 
{{form.value | json}}
- 
{{form.valid | json}}
- + +
\ No newline at end of file diff --git a/src/app/courses/courses.component.ts b/src/app/courses/courses.component.ts index 9fb5ba7..fc9bcde 100644 --- a/src/app/courses/courses.component.ts +++ b/src/app/courses/courses.component.ts @@ -15,9 +15,10 @@ export class CoursesComponent implements OnInit { ngOnInit(): void { //It is like a construtor and it gets called initially when all hte binding are satisfied this.resetSelectedCourse(); - this.courseService - .all() //we do All instead of courses is becasue js dosent have concept of Private - .subscribe((courses) => (this.courses = courses)); + this.loadCourses(); + // this.courseService + // .all() //we do All instead of courses is becasue js dosent have concept of Private + // .subscribe((courses) => (this.courses = courses)); //We are doing this to call the EmptyObject first because //during compiletTime we are binding an itself empty object instead of null Object } @@ -32,21 +33,39 @@ export class CoursesComponent implements OnInit { }; this.tempData = emptyCourse; } + onClick(course) { + //Select COurse console.log(course); this.tempData = course; } + + loadCourses() { + this.courseService.all().subscribe((courses) => (this.courses = courses)); + } + + refreshCourses() { + this.resetSelectedCourse(); + this.loadCourses(); + } + saveCourse(course) { if (course.id) { //If the ID exists update - this.courseService.update(course); + this.courseService + .update(course) + .subscribe((result) => this.refreshCourses()); } else { //if not create - this.courseService.create(course); + this.courseService + .create(course) + .subscribe((res) => this.refreshCourses()); } } deleteCourse(courseId) { - this.courseService.deleteCourse(courseId); + this.courseService + .deleteCourse(courseId) + .subscribe((result) => this.refreshCourses()); } cancel() { this.resetSelectedCourse(); diff --git a/src/app/shared/services/courses.service.ts b/src/app/shared/services/courses.service.ts index a19f3d2..5a6adcb 100644 --- a/src/app/shared/services/courses.service.ts +++ b/src/app/shared/services/courses.service.ts @@ -9,42 +9,35 @@ const BASE_URL = 'http://localhost:3000/'; }) export class CoursesService { private model = 'courses'; - courses = [ - { - id: 1, - title: 'Angular 9 Fundamentals', - description: 'Learn the fundamentals of Angular 9', - percentComplete: 26, - favorite: true, - }, - { - id: 2, - title: 'JAvaScript The really Hard parts', - description: 'Worship will sentence', - percentComplete: 56, - favorite: true, - }, - ]; constructor(private http: HttpClient) {} all() { - return this.http.get(`${BASE_URL}${this.model}`); + return this.http.get(this.getUrl()); } find(courseId) { - console.log(courseId); + return this.http.get(this.getUrlById(courseId)); } create(course) { - console.log('CREATE COURSE', course); + return this.http.post(this.getUrl(), course); } update(course) { - console.log('CREATE COURSE', course); + return this.http.put(this.getUrlById(course.id), course); + console.log('UPDATED COURSE', course); } deleteCourse(course) { - console.log('CREATE COURSE', course); + return this.http.delete(this.getUrlById(course)); + } + + private getUrl() { + return `${BASE_URL}${this.model}`; + } + + private getUrlById(id) { + return `${this.getUrl()}/${id}`; } }