From ac9d6a45667339db4d7aa804f523d6ebaa2970ca Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 30 Jan 2025 11:50:31 +0100 Subject: [PATCH 01/10] Components/create-modal: update form --- .../create-modal/create-modal/create-modal.component.html | 8 ++++++-- .../create-modal/create-modal/create-modal.component.ts | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/create-modal/create-modal/create-modal.component.html b/src/components/create-modal/create-modal/create-modal.component.html index 5a7d0cc..9527110 100644 --- a/src/components/create-modal/create-modal/create-modal.component.html +++ b/src/components/create-modal/create-modal/create-modal.component.html @@ -9,13 +9,17 @@
- - + +
+
+ + +
diff --git a/src/components/create-modal/create-modal/create-modal.component.ts b/src/components/create-modal/create-modal/create-modal.component.ts index 24931c2..ab0d87c 100644 --- a/src/components/create-modal/create-modal/create-modal.component.ts +++ b/src/components/create-modal/create-modal/create-modal.component.ts @@ -17,8 +17,9 @@ export class CreateModalComponent { constructor() { this.newShowForm = new FormGroup({ title: new FormControl("", Validators.required), - year: new FormControl("", [Validators.required, Validators.min(1900)]), + date: new FormControl("", Validators.required), seasons: new FormControl("", [Validators.required, Validators.min(1)]), + episodes: new FormControl("", [Validators.required, Validators.min(1)]), description: new FormControl("", Validators.required) }) } From e05a26c8f3abbe6460830621e62acb5a7c0b2fb7 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 30 Jan 2025 12:11:24 +0100 Subject: [PATCH 02/10] Interfaces: add shows-api-creation.ts --- src/interfaces/shows-api-creation.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/interfaces/shows-api-creation.ts diff --git a/src/interfaces/shows-api-creation.ts b/src/interfaces/shows-api-creation.ts new file mode 100644 index 0000000..bf97065 --- /dev/null +++ b/src/interfaces/shows-api-creation.ts @@ -0,0 +1,5 @@ +export interface ShowsApiCreation { + status: string + message: string + newId: string +} From f97eae4ef0ecfa36802bf1246078900e03fb89c2 Mon Sep 17 00:00:00 2001 From: Toast Date: Mon, 3 Feb 2025 13:40:01 +0100 Subject: [PATCH 03/10] Services/shows: fix --- src/services/shows/shows-api.service.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/services/shows/shows-api.service.ts b/src/services/shows/shows-api.service.ts index 78b3ad8..b3b8e76 100644 --- a/src/services/shows/shows-api.service.ts +++ b/src/services/shows/shows-api.service.ts @@ -2,6 +2,7 @@ import {inject, Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs'; import {ShowsApiResponse} from '../../interfaces/shows-api-response'; +import {ShowsApiCreation} from '../../interfaces/shows-api-creation'; @Injectable({ providedIn: 'root' @@ -21,6 +22,6 @@ export class ShowsApiService { } sendShow(newShow: {}) { - return this.http.post(this.showsEndpoint, newShow) + return this.http.post(this.showsEndpoint, newShow) } } From 891b6c2e923a79feac9b29b3eb9263357de05feb Mon Sep 17 00:00:00 2001 From: Toast Date: Mon, 3 Feb 2025 13:41:20 +0100 Subject: [PATCH 04/10] Components/create-modal: send new show to showsApiService --- .../create-modal/create-modal.component.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/create-modal/create-modal/create-modal.component.ts b/src/components/create-modal/create-modal/create-modal.component.ts index ab0d87c..c2c79ed 100644 --- a/src/components/create-modal/create-modal/create-modal.component.ts +++ b/src/components/create-modal/create-modal/create-modal.component.ts @@ -1,6 +1,8 @@ import {Component, inject} from '@angular/core'; import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; +import {ShowsApiService} from '../../../services/shows/shows-api.service'; +import {ShowsApiCreation} from '../../../interfaces/shows-api-creation'; @Component({ selector: 'app-create-modal', @@ -12,6 +14,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/ }) export class CreateModalComponent { private activeModal = inject(NgbActiveModal) + private showsService = inject(ShowsApiService) protected newShowForm: FormGroup constructor() { @@ -31,10 +34,21 @@ export class CreateModalComponent { protected formSubmitted(form: FormGroup) { let show: {} = { title: form.get("title")?.value, - year: form.get("year")?.value, + date: form.get("date")?.value, seasons: form.get("seasons")?.value, + episodes: form.get("episodes")?.value, description: form.get("description")?.value } - console.log(show) + this.showsService.sendShow(show).subscribe({ + next: (response: ShowsApiCreation) => { + console.log(`Message: ${response.message}`) + console.log(`Status: ${response.status}`) + console.log(`New ID: ${response.newId}`) + }, error: (err: any) => { + console.error(err) + }, complete: () => { + console.log("Sent") + } + }) } } From e0fd18986051ffbb5ff48c86e60cbc8684783d86 Mon Sep 17 00:00:00 2001 From: Toast Date: Mon, 3 Feb 2025 13:46:38 +0100 Subject: [PATCH 05/10] Components/create-modal: show toast and close on good creation --- .../create-modal/create-modal/create-modal.component.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/create-modal/create-modal/create-modal.component.ts b/src/components/create-modal/create-modal/create-modal.component.ts index c2c79ed..acf9e08 100644 --- a/src/components/create-modal/create-modal/create-modal.component.ts +++ b/src/components/create-modal/create-modal/create-modal.component.ts @@ -3,6 +3,7 @@ import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {ShowsApiService} from '../../../services/shows/shows-api.service'; import {ShowsApiCreation} from '../../../interfaces/shows-api-creation'; +import {ToastService} from '../../../services/toast/toast.service'; @Component({ selector: 'app-create-modal', @@ -15,6 +16,7 @@ import {ShowsApiCreation} from '../../../interfaces/shows-api-creation'; export class CreateModalComponent { private activeModal = inject(NgbActiveModal) private showsService = inject(ShowsApiService) + private toastService = inject(ToastService) protected newShowForm: FormGroup constructor() { @@ -47,7 +49,11 @@ export class CreateModalComponent { }, error: (err: any) => { console.error(err) }, complete: () => { - console.log("Sent") + this.toastService.show({ + body: "Show added successfully!", + htmlClass: "bg-success text-light" + }) + this.activeModal.close() } }) } From 6d185a7eb8801fa5dc3ef5d4be067c648b61905c Mon Sep 17 00:00:00 2001 From: Toast Date: Mon, 3 Feb 2025 13:53:10 +0100 Subject: [PATCH 06/10] Components/create-modal: return new show ID on creation --- .../create-modal/create-modal/create-modal.component.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/create-modal/create-modal/create-modal.component.ts b/src/components/create-modal/create-modal/create-modal.component.ts index acf9e08..01d592d 100644 --- a/src/components/create-modal/create-modal/create-modal.component.ts +++ b/src/components/create-modal/create-modal/create-modal.component.ts @@ -41,11 +41,10 @@ export class CreateModalComponent { episodes: form.get("episodes")?.value, description: form.get("description")?.value } + let newId: string; this.showsService.sendShow(show).subscribe({ next: (response: ShowsApiCreation) => { - console.log(`Message: ${response.message}`) - console.log(`Status: ${response.status}`) - console.log(`New ID: ${response.newId}`) + newId = response.newId; }, error: (err: any) => { console.error(err) }, complete: () => { @@ -53,7 +52,7 @@ export class CreateModalComponent { body: "Show added successfully!", htmlClass: "bg-success text-light" }) - this.activeModal.close() + this.activeModal.close(newId) } }) } From 8a2fbcf43ef89a9e7c02f13643c22e1aedf7171c Mon Sep 17 00:00:00 2001 From: Toast Date: Mon, 3 Feb 2025 18:02:19 +0100 Subject: [PATCH 07/10] Services/shows: add function to get single show with id --- src/interfaces/shows-api-id-response.ts | 6 ++++++ src/services/shows/shows-api.service.ts | 5 +++++ 2 files changed, 11 insertions(+) create mode 100644 src/interfaces/shows-api-id-response.ts diff --git a/src/interfaces/shows-api-id-response.ts b/src/interfaces/shows-api-id-response.ts new file mode 100644 index 0000000..85307d7 --- /dev/null +++ b/src/interfaces/shows-api-id-response.ts @@ -0,0 +1,6 @@ +import {Show} from './show'; + +export interface ShowsApiIdResponse { + status: string + show: Show +} diff --git a/src/services/shows/shows-api.service.ts b/src/services/shows/shows-api.service.ts index b3b8e76..d2f0e2e 100644 --- a/src/services/shows/shows-api.service.ts +++ b/src/services/shows/shows-api.service.ts @@ -3,6 +3,7 @@ import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs'; import {ShowsApiResponse} from '../../interfaces/shows-api-response'; import {ShowsApiCreation} from '../../interfaces/shows-api-creation'; +import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response'; @Injectable({ providedIn: 'root' @@ -21,6 +22,10 @@ export class ShowsApiService { return this.http.get(this.showsEndpoint) } + getShow(id: string): Observable { + return this.http.get(this.showsEndpoint + "id/" + id ) + } + sendShow(newShow: {}) { return this.http.post(this.showsEndpoint, newShow) } From 193944d55bc6eb5915c38fb1ecc3a8538455a057 Mon Sep 17 00:00:00 2001 From: Toast Date: Mon, 3 Feb 2025 18:03:32 +0100 Subject: [PATCH 08/10] Pages/shows: add new show to list on creation --- src/pages/shows/shows.component.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 21b1bc6..7ece07e 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -7,6 +7,7 @@ import {ToastService} from '../../services/toast/toast.service'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; import {CreateModalComponent} from '../../components/create-modal/create-modal/create-modal.component'; import {DatePipe} from '@angular/common'; +import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response'; @Component({ selector: 'app-shows', @@ -42,6 +43,19 @@ export class ShowsComponent { } createNewShow() { - this.modalService.open(CreateModalComponent) + this.modalService.open(CreateModalComponent).result.then( + (result) => { + console.log(`Result: ${result}`) + + this.api.getShow(result).subscribe({ + next: (response: ShowsApiIdResponse) => { + console.log(response.show) + this.shows.push(response.show) + }, error: (err: any) => { + console.error(`Error: ${err}`) + }, complete: () => {} + }) + } + ) } } From 42aa436e81f301b9aa6f6d21325bfd514a094437 Mon Sep 17 00:00:00 2001 From: Toast Date: Mon, 3 Feb 2025 18:12:22 +0100 Subject: [PATCH 09/10] Pages/shows: disable add new show button while loading --- src/pages/shows/shows.component.html | 2 +- src/pages/shows/shows.component.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/shows/shows.component.html b/src/pages/shows/shows.component.html index 026e38f..12fb737 100644 --- a/src/pages/shows/shows.component.html +++ b/src/pages/shows/shows.component.html @@ -12,7 +12,7 @@
- +
diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 7ece07e..6d25a13 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -23,6 +23,7 @@ export class ShowsComponent { private modalService: NgbModal = inject(NgbModal); shows: Show[] = []; + loading: boolean = true; constructor() { let loadToast: Toast = {body: "Loading shows..."}; @@ -38,6 +39,7 @@ export class ShowsComponent { htmlClass: "bg-success text-light" } this.toastService.show(successToast); + this.loading = false } }) } From 59ae90e88b8ac816f75f322f34647e4d49f1ba8f Mon Sep 17 00:00:00 2001 From: Toast Date: Tue, 4 Feb 2025 09:52:53 +0100 Subject: [PATCH 10/10] Components/create-modal: show toast on error --- .../create-modal/create-modal/create-modal.component.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/create-modal/create-modal/create-modal.component.ts b/src/components/create-modal/create-modal/create-modal.component.ts index 01d592d..b503914 100644 --- a/src/components/create-modal/create-modal/create-modal.component.ts +++ b/src/components/create-modal/create-modal/create-modal.component.ts @@ -44,8 +44,12 @@ export class CreateModalComponent { let newId: string; this.showsService.sendShow(show).subscribe({ next: (response: ShowsApiCreation) => { - newId = response.newId; - }, error: (err: any) => { + newId = response.newId + }, error: err => { + this.toastService.show({ + body: "Could not add show!", + htmlClass: "bg-danger text-light" + }) console.error(err) }, complete: () => { this.toastService.show({