From e35564735f969a6e03e41634b4dcee93c234e7c2 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 10:46:04 +0100 Subject: [PATCH 1/5] Components/create-edit-modal: finish implementing --- .../create-edit-modal.component.ts | 66 ++++++++++++++----- 1 file changed, 50 insertions(+), 16 deletions(-) diff --git a/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts b/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts index 6a7b561..4428e32 100644 --- a/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts @@ -59,22 +59,56 @@ export class CreateEditModalComponent { //TODO: Allow user to specify genres genres: [] } - this.showsService.sendShow(show).subscribe({ - next: (response: ShowsApiCreation) => { - show._id = response.newId - }, error: err => { - this.toastService.show({ - body: "Could not add show!", - htmlClass: "bg-danger text-light" - }) - console.error(err) - }, complete: () => { - this.toastService.show({ - body: "Show added successfully!", - htmlClass: "bg-success text-light" - }) - this.activeModal.close(show) + + + if (!this.editMode) { + this.showsService.sendShow(show).subscribe({ + next: (response: ShowsApiCreation) => { + show._id = response.newId + }, error: err => { + this.showToast(true, "created") + console.error(err) + }, complete: () => { + this.showToast(false, "created") + this.activeModal.close(show) + } + }) + } else { + // The API requires the show to also have an ID, so + // I add it here + show._id = this.show?._id + this.showsService.updateShow(show).subscribe({ + next: (response: ShowsApiDeletionEdit) => { + // Do nothing + }, error: err => { + this.showToast(true, "edited") + console.error(err) + }, complete: () => { + this.showToast(false, "edited") + this.activeModal.close(show) + } + }) + } + } + + private showToast(error: boolean, action: "edited" | "created") { + let htmlClass: string = "bg-success text-light" + let body: string; + if (error) { + htmlClass = htmlClass.replace("success", "danger") + let temp: string + switch (action){ + case "created": + temp = "created" + break + case "edited": + temp = "edit" + break } - }) + body = `Could not ${temp} show!` + } else { + body = `Show ${action} successfully!` + } + this.toastService.show({body,htmlClass}) } } From 312fedec7b2a5846cf44edd1318c6d466ea4b806 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 10:46:27 +0100 Subject: [PATCH 2/5] Pages/shows: add functionality to edit button --- src/pages/shows/shows.component.html | 2 +- src/pages/shows/shows.component.ts | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/pages/shows/shows.component.html b/src/pages/shows/shows.component.html index 924e8b1..8f6cc94 100644 --- a/src/pages/shows/shows.component.html +++ b/src/pages/shows/shows.component.html @@ -9,7 +9,7 @@ - diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 31a9b9c..2415bb8 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -82,4 +82,15 @@ export class ShowsComponent { } ) } + + editShow(show: Show, index: number) { + const modal: NgbModalRef = this.modalService.open(CreateEditModalComponent) + modal.componentInstance.editMode = true + modal.componentInstance.show = show + modal.componentInstance.initForm() + modal.result.then( + (closeResult: Show) => {this.shows[index] = closeResult}, + (dissmissResult) => {} + ) + } } From 8f416cc8b4d31c804572a69cc92a24e532b41fa8 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 10:49:06 +0100 Subject: [PATCH 3/5] Reformat code --- .../create-edit-modal/create-edit-modal.component.ts | 4 ++-- .../delete-modal/delete-modal.component.spec.ts | 6 +++--- src/components/delete-modal/delete-modal.component.ts | 10 ++-------- src/pages/shows/shows.component.ts | 7 +++++-- 4 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts b/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts index 4428e32..caeac9d 100644 --- a/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts +++ b/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts @@ -97,7 +97,7 @@ export class CreateEditModalComponent { if (error) { htmlClass = htmlClass.replace("success", "danger") let temp: string - switch (action){ + switch (action) { case "created": temp = "created" break @@ -109,6 +109,6 @@ export class CreateEditModalComponent { } else { body = `Show ${action} successfully!` } - this.toastService.show({body,htmlClass}) + this.toastService.show({body, htmlClass}) } } diff --git a/src/components/delete-modal/delete-modal.component.spec.ts b/src/components/delete-modal/delete-modal.component.spec.ts index 7c29c0f..0bafd22 100644 --- a/src/components/delete-modal/delete-modal.component.spec.ts +++ b/src/components/delete-modal/delete-modal.component.spec.ts @@ -1,6 +1,6 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { DeleteModalComponent } from './delete-modal.component'; +import {DeleteModalComponent} from './delete-modal.component'; describe('DeleteModalComponent', () => { let component: DeleteModalComponent; @@ -10,7 +10,7 @@ describe('DeleteModalComponent', () => { await TestBed.configureTestingModule({ imports: [DeleteModalComponent] }) - .compileComponents(); + .compileComponents(); fixture = TestBed.createComponent(DeleteModalComponent); component = fixture.componentInstance; diff --git a/src/components/delete-modal/delete-modal.component.ts b/src/components/delete-modal/delete-modal.component.ts index bb2085a..7726646 100644 --- a/src/components/delete-modal/delete-modal.component.ts +++ b/src/components/delete-modal/delete-modal.component.ts @@ -1,12 +1,6 @@ import {Component, inject} from '@angular/core'; import {NgbActiveModal, NgbCollapse} from '@ng-bootstrap/ng-bootstrap'; -import { - FormControl, - FormGroup, - FormsModule, - ReactiveFormsModule, - Validators -} from '@angular/forms'; +import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; @Component({ selector: 'app-delete-modal', @@ -27,7 +21,7 @@ export class DeleteModalComponent { constructor() { this.confirmationForm = new FormGroup({ - name: new FormControl("",Validators.required) + name: new FormControl("", Validators.required) }) } diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 2415bb8..bb6f9f2 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -89,8 +89,11 @@ export class ShowsComponent { modal.componentInstance.show = show modal.componentInstance.initForm() modal.result.then( - (closeResult: Show) => {this.shows[index] = closeResult}, - (dissmissResult) => {} + (closeResult: Show) => { + this.shows[index] = closeResult + }, + (dissmissResult) => { + } ) } } From 0d9b378b8e73aea3329cc4d8b774748947515500 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 10:54:48 +0100 Subject: [PATCH 4/5] Services/shows: refactor --- src/services/shows/shows-api.service.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/services/shows/shows-api.service.ts b/src/services/shows/shows-api.service.ts index 31235a6..c8c91d9 100644 --- a/src/services/shows/shows-api.service.ts +++ b/src/services/shows/shows-api.service.ts @@ -14,10 +14,12 @@ export class ShowsApiService { private readonly url: string = "https://shows.everest.tailscale/api/"; private showsEndpoint: string + private idEndpoint: string private http: HttpClient = inject(HttpClient); constructor() { this.showsEndpoint = this.url + "shows/" + this.idEndpoint = this.showsEndpoint + "id/" } getShows(): Observable { @@ -25,7 +27,7 @@ export class ShowsApiService { } getShow(id: string): Observable { - return this.http.get(this.showsEndpoint + "id/" + id) + return this.http.get(this.idEndpoint + id) } sendShow(newShow: Show): Observable { @@ -33,10 +35,10 @@ export class ShowsApiService { } deleteShw(id: string): Observable { - return this.http.delete(this.showsEndpoint + "id/" + id) + return this.http.delete(this.idEndpoint + id) } updateShow(show: Show): Observable { - return this.http.put(this.showsEndpoint + "id/" + show._id, show) + return this.http.put(this.idEndpoint + show._id, show) } } From 4db14852591f199cc0c55663e44d8e3e4961c4f2 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 10:58:25 +0100 Subject: [PATCH 5/5] Pages/shows: refactor and code cleanup --- src/pages/shows/shows.component.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index bb6f9f2..6c1eefb 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -8,7 +8,6 @@ import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap'; import {CreateEditModalComponent} from '../../components/create-modal/create-edit-modal/create-edit-modal.component'; import {DatePipe} from '@angular/common'; import {DeleteModalComponent} from '../../components/delete-modal/delete-modal.component'; -import {ShowsApiDeletionEdit} from '../../interfaces/shows-api-deletion-edit'; @Component({ selector: 'app-shows', @@ -47,10 +46,10 @@ export class ShowsComponent { createNewShow() { this.modalService.open(CreateEditModalComponent).result.then( - (result: Show) => { - this.shows.push(result) + (closeResult: Show) => { + this.shows.push(closeResult) }, - (result) => { + () => { // Dismissed, do nothing } ) @@ -60,11 +59,11 @@ export class ShowsComponent { const modal: NgbModalRef = this.modalService.open(DeleteModalComponent) modal.componentInstance.showName = show.title; modal.result.then( - (result) => { - if (result) { + (closeResult) => { + if (closeResult) { if (show._id != null) { this.api.deleteShw(show._id).subscribe({ - next: (response: ShowsApiDeletionEdit) => { + next: () => { // Do nothing }, error: (err: any) => { console.log(err) @@ -77,7 +76,7 @@ export class ShowsComponent { } } }, - (result) => { + () => { // Dismissed, do nothing } ) @@ -92,7 +91,8 @@ export class ShowsComponent { (closeResult: Show) => { this.shows[index] = closeResult }, - (dissmissResult) => { + () => { + // Dismissed, do nothing } ) }