From d9a26a66454599a342293c067549a69e88a4f07d Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 01:12:56 +0100 Subject: [PATCH 01/17] Components/delete-modal: fix --- src/components/delete-modal/delete-modal.component.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/delete-modal/delete-modal.component.ts b/src/components/delete-modal/delete-modal.component.ts index 6031af5..bb2085a 100644 --- a/src/components/delete-modal/delete-modal.component.ts +++ b/src/components/delete-modal/delete-modal.component.ts @@ -33,10 +33,11 @@ export class DeleteModalComponent { deletePressed() { - const regex = new RegExp(this.showName) - const control = new FormControl("", [Validators.required, Validators.pattern(regex)]) - this.confirmationForm.setControl("name", control) if (this.formHidden) { + // Only add the control the first time the button is pressed + const regex = new RegExp(this.showName) + const control = new FormControl("", [Validators.required, Validators.pattern(regex)]) + this.confirmationForm.setControl("name", control) this.formHidden = false; this.buttonDisabled = true; } else { From e16cda30cc5e1faa63954f0065f331c55920cba3 Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 01:25:47 +0100 Subject: [PATCH 02/17] Components/create-modal: rename to create-edit-modal --- .../create-edit-modal.component.css} | 0 .../create-edit-modal.component.html} | 0 .../create-edit-modal.component.spec.ts} | 10 +++++----- .../create-edit-modal.component.ts} | 8 ++++---- src/pages/shows/shows.component.ts | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) rename src/components/create-modal/{create-modal/create-modal.component.css => create-edit-modal/create-edit-modal.component.css} (100%) rename src/components/create-modal/{create-modal/create-modal.component.html => create-edit-modal/create-edit-modal.component.html} (100%) rename src/components/create-modal/{create-modal/create-modal.component.spec.ts => create-edit-modal/create-edit-modal.component.spec.ts} (56%) rename src/components/create-modal/{create-modal/create-modal.component.ts => create-edit-modal/create-edit-modal.component.ts} (91%) diff --git a/src/components/create-modal/create-modal/create-modal.component.css b/src/components/create-modal/create-edit-modal/create-edit-modal.component.css similarity index 100% rename from src/components/create-modal/create-modal/create-modal.component.css rename to src/components/create-modal/create-edit-modal/create-edit-modal.component.css diff --git a/src/components/create-modal/create-modal/create-modal.component.html b/src/components/create-modal/create-edit-modal/create-edit-modal.component.html similarity index 100% rename from src/components/create-modal/create-modal/create-modal.component.html rename to src/components/create-modal/create-edit-modal/create-edit-modal.component.html diff --git a/src/components/create-modal/create-modal/create-modal.component.spec.ts b/src/components/create-modal/create-edit-modal/create-edit-modal.component.spec.ts similarity index 56% rename from src/components/create-modal/create-modal/create-modal.component.spec.ts rename to src/components/create-modal/create-edit-modal/create-edit-modal.component.spec.ts index 66f91f8..8acc209 100644 --- a/src/components/create-modal/create-modal/create-modal.component.spec.ts +++ b/src/components/create-modal/create-edit-modal/create-edit-modal.component.spec.ts @@ -1,18 +1,18 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {CreateModalComponent} from './create-modal.component'; +import {CreateEditModalComponent} from './create-edit-modal.component'; describe('CreateModalComponent', () => { - let component: CreateModalComponent; - let fixture: ComponentFixture; + let component: CreateEditModalComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [CreateModalComponent] + imports: [CreateEditModalComponent] }) .compileComponents(); - fixture = TestBed.createComponent(CreateModalComponent); + fixture = TestBed.createComponent(CreateEditModalComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/components/create-modal/create-modal/create-modal.component.ts b/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts similarity index 91% rename from src/components/create-modal/create-modal/create-modal.component.ts rename to src/components/create-modal/create-edit-modal/create-edit-modal.component.ts index b503914..7d3a217 100644 --- a/src/components/create-modal/create-modal/create-modal.component.ts +++ b/src/components/create-modal/create-edit-modal/create-edit-modal.component.ts @@ -6,14 +6,14 @@ import {ShowsApiCreation} from '../../../interfaces/shows-api-creation'; import {ToastService} from '../../../services/toast/toast.service'; @Component({ - selector: 'app-create-modal', + selector: 'app-create-edit-modal', imports: [ ReactiveFormsModule ], - templateUrl: './create-modal.component.html', - styleUrl: './create-modal.component.css' + templateUrl: './create-edit-modal.component.html', + styleUrl: './create-edit-modal.component.css' }) -export class CreateModalComponent { +export class CreateEditModalComponent { private activeModal = inject(NgbActiveModal) private showsService = inject(ShowsApiService) private toastService = inject(ToastService) diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 44add53..8798d79 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -5,7 +5,7 @@ import {ShowsApiResponse} from '../../interfaces/shows-api-response'; import {Toast} from '../../interfaces/toast'; import {ToastService} from '../../services/toast/toast.service'; import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap'; -import {CreateModalComponent} from '../../components/create-modal/create-modal/create-modal.component'; +import {CreateEditModalComponent} from '../../components/create-modal/create-edit-modal/create-edit-modal.component'; import {DatePipe} from '@angular/common'; import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response'; import {DeleteModalComponent} from '../../components/delete-modal/delete-modal.component'; @@ -47,7 +47,7 @@ export class ShowsComponent { } createNewShow() { - this.modalService.open(CreateModalComponent).result.then( + this.modalService.open(CreateEditModalComponent).result.then( (result) => { console.log(`Result: ${result}`) From d9e773c7368f0930889ea555ea66a821c364f161 Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 01:49:06 +0100 Subject: [PATCH 03/17] Components/create-edit-modal: add editMode and show variables --- .../create-edit-modal/create-edit-modal.component.ts | 3 +++ 1 file changed, 3 insertions(+) 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 7d3a217..39874be 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 @@ -19,6 +19,9 @@ export class CreateEditModalComponent { private toastService = inject(ToastService) protected newShowForm: FormGroup + protected editMode: boolean = false + protected show?: Show + constructor() { this.newShowForm = new FormGroup({ title: new FormControl("", Validators.required), From 3c80eadf7e9f08650f172aba4a8af874e5eb2cfb Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 01:49:35 +0100 Subject: [PATCH 04/17] Components/create-edit-modal: change title depending on mode --- .../create-edit-modal/create-edit-modal.component.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/create-modal/create-edit-modal/create-edit-modal.component.html b/src/components/create-modal/create-edit-modal/create-edit-modal.component.html index 69e43d5..951fd1b 100644 --- a/src/components/create-modal/create-edit-modal/create-edit-modal.component.html +++ b/src/components/create-modal/create-edit-modal/create-edit-modal.component.html @@ -1,5 +1,11 @@
-

Add new show

+

+ @if (editMode) { + Edit show + } @else { + Add new show + } +

From be31699167d482493d7bf99b282d7ce8aaf6cb9b Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 01:50:46 +0100 Subject: [PATCH 05/17] Components/create-edit-modal: show values from show, if set --- .../create-edit-modal/create-edit-modal.component.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 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 39874be..ca412ee 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 @@ -24,11 +24,11 @@ export class CreateEditModalComponent { constructor() { this.newShowForm = new FormGroup({ - title: new FormControl("", Validators.required), - 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) + title: new FormControl(this.show?.title, Validators.required), + date: new FormControl(this.show?.date, Validators.required), + seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]), + episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]), + description: new FormControl(this.show?.description, Validators.required) }) } From fd41663f868c433cd109e4e39829af71a15435f0 Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 01:51:15 +0100 Subject: [PATCH 06/17] Components/create-edit-modal: move FormGroup init to separate function --- .../create-edit-modal/create-edit-modal.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 ca412ee..faffd99 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 @@ -4,6 +4,7 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/ import {ShowsApiService} from '../../../services/shows/shows-api.service'; import {ShowsApiCreation} from '../../../interfaces/shows-api-creation'; import {ToastService} from '../../../services/toast/toast.service'; +import {Show} from '../../../interfaces/show'; @Component({ selector: 'app-create-edit-modal', @@ -17,12 +18,16 @@ export class CreateEditModalComponent { private activeModal = inject(NgbActiveModal) private showsService = inject(ShowsApiService) private toastService = inject(ToastService) - protected newShowForm: FormGroup + protected newShowForm: FormGroup = new FormGroup({}) protected editMode: boolean = false protected show?: Show constructor() { + this.initForm() + } + + private initForm() { this.newShowForm = new FormGroup({ title: new FormControl(this.show?.title, Validators.required), date: new FormControl(this.show?.date, Validators.required), From 3a95b89bf7b721b2c6046e0c54867bfe355f21a4 Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 01:53:47 +0100 Subject: [PATCH 07/17] Pages/shows: ignore create modal dismiss result --- src/pages/shows/shows.component.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 8798d79..fefe8a6 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -59,6 +59,9 @@ export class ShowsComponent { }, complete: () => { } }) + }, + (result) => { + // Dismissed, do nothing } ) } From ef02fe8c820a1719288f30da6a7fae6e19dcfa2f Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 01:54:17 +0100 Subject: [PATCH 08/17] Pages/shows: change delete modal ref to const from let --- src/pages/shows/shows.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index fefe8a6..1788700 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -67,7 +67,7 @@ export class ShowsComponent { } deleteShow(show: Show) { - let modal: NgbModalRef = this.modalService.open(DeleteModalComponent) + const modal: NgbModalRef = this.modalService.open(DeleteModalComponent) modal.componentInstance.showName = show.title; modal.result.then( (result) => { From ee6ebfd98c4ebacc0871e68bb5b996a01eb67a22 Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 02:13:13 +0100 Subject: [PATCH 09/17] Components/create-edit-modal: fix date input in edit mode --- .../create-edit-modal/create-edit-modal.component.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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 faffd99..776215f 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 @@ -5,6 +5,7 @@ import {ShowsApiService} from '../../../services/shows/shows-api.service'; import {ShowsApiCreation} from '../../../interfaces/shows-api-creation'; import {ToastService} from '../../../services/toast/toast.service'; import {Show} from '../../../interfaces/show'; +import {formatDate} from '@angular/common'; @Component({ selector: 'app-create-edit-modal', @@ -28,13 +29,19 @@ export class CreateEditModalComponent { } private initForm() { + let formattedDate: string this.newShowForm = new FormGroup({ title: new FormControl(this.show?.title, Validators.required), - date: new FormControl(this.show?.date, Validators.required), seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]), episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]), description: new FormControl(this.show?.description, Validators.required) }) + if (this.show?.date !== undefined) { + formattedDate = formatDate(this.show?.date, "YYYY-MM-dd", "en") + } else { + formattedDate = "" + } + this.newShowForm.addControl("date", new FormControl(formattedDate, Validators.required)) } protected dismiss() { From 92360fdad9d94136738d2c4aab9d4e6fbbf465e7 Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 02:20:40 +0100 Subject: [PATCH 10/17] Interfaces/show: make id optional --- src/interfaces/show.ts | 3 ++- src/pages/shows/shows.component.ts | 22 ++++++++++++---------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/interfaces/show.ts b/src/interfaces/show.ts index 9655a9c..bdb1933 100644 --- a/src/interfaces/show.ts +++ b/src/interfaces/show.ts @@ -1,5 +1,6 @@ export interface Show { - _id: string + // ID is assigned by the DB, so I don't want to have to specify it + _id?: string title: string date: Date seasons: number diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 1788700..18356ae 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -72,17 +72,19 @@ export class ShowsComponent { modal.result.then( (result) => { if (result) { - this.api.deleteShw(show._id).subscribe({ - next: (response: ShowsApiDeletion) => { - // Do nothing - }, error: (err: any) => { - console.log(err) - }, complete: () => { - this.toastService.show({body: "Show deleted!"}) - this.shows = this.shows.filter(((s: Show) => s != show)) + if (show._id != null) { + this.api.deleteShw(show._id).subscribe({ + next: (response: ShowsApiDeletion) => { + // Do nothing + }, error: (err: any) => { + console.log(err) + }, complete: () => { + this.toastService.show({body: "Show deleted!"}) + this.shows = this.shows.filter(((s: Show) => s != show)) + } } - } - ) + ) + } } }, (result) => { From b52a8af0bf03cd4b980f24f2af28a5210805504b Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 02:21:32 +0100 Subject: [PATCH 11/17] Components/create-edit-modal: change new show variable type --- .../create-edit-modal/create-edit-modal.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 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 776215f..3a23e35 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 @@ -49,12 +49,14 @@ export class CreateEditModalComponent { } protected formSubmitted(form: FormGroup) { - let show: {} = { + let show: Show = { title: form.get("title")?.value, date: form.get("date")?.value, seasons: form.get("seasons")?.value, episodes: form.get("episodes")?.value, - description: form.get("description")?.value + description: form.get("description")?.value, + //TODO: Allow user to specify genres + genres: [] } let newId: string; this.showsService.sendShow(show).subscribe({ From 77be63e88fe79123d83ba5dda9eb45dd8ef04ac9 Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 02:27:55 +0100 Subject: [PATCH 12/17] Components/create-edit-modal: return new show instead of id on creation --- .../create-edit-modal.component.ts | 5 ++--- src/pages/shows/shows.component.ts | 13 ++----------- 2 files changed, 4 insertions(+), 14 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 3a23e35..040e7d8 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 @@ -58,10 +58,9 @@ export class CreateEditModalComponent { //TODO: Allow user to specify genres genres: [] } - let newId: string; this.showsService.sendShow(show).subscribe({ next: (response: ShowsApiCreation) => { - newId = response.newId + show._id = response.newId }, error: err => { this.toastService.show({ body: "Could not add show!", @@ -73,7 +72,7 @@ export class CreateEditModalComponent { body: "Show added successfully!", htmlClass: "bg-success text-light" }) - this.activeModal.close(newId) + this.activeModal.close(show) } }) } diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index 18356ae..dbb2bca 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -48,17 +48,8 @@ export class ShowsComponent { createNewShow() { this.modalService.open(CreateEditModalComponent).result.then( - (result) => { - console.log(`Result: ${result}`) - - this.api.getShow(result).subscribe({ - next: (response: ShowsApiIdResponse) => { - this.shows.push(response.show) - }, error: (err: any) => { - console.error(`Error: ${err}`) - }, complete: () => { - } - }) + (result: Show) => { + this.shows.push(result) }, (result) => { // Dismissed, do nothing From 42329818a512f7ad464f38b808451cb47bc6f69d Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 02:28:39 +0100 Subject: [PATCH 13/17] Pages/shows: remove unused import --- src/pages/shows/shows.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts index dbb2bca..71dac8c 100644 --- a/src/pages/shows/shows.component.ts +++ b/src/pages/shows/shows.component.ts @@ -7,7 +7,6 @@ import {ToastService} from '../../services/toast/toast.service'; 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 {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response'; import {DeleteModalComponent} from '../../components/delete-modal/delete-modal.component'; import {ShowsApiDeletion} from '../../interfaces/shows-api-deletion'; From afa9b4a4a1164926579b73445c788f1a867c3a1d Mon Sep 17 00:00:00 2001 From: Toast Date: Wed, 5 Feb 2025 02:36:04 +0100 Subject: [PATCH 14/17] Services/shows: refactor --- 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 4a65bfd..a868129 100644 --- a/src/services/shows/shows-api.service.ts +++ b/src/services/shows/shows-api.service.ts @@ -5,6 +5,7 @@ import {ShowsApiResponse} from '../../interfaces/shows-api-response'; import {ShowsApiCreation} from '../../interfaces/shows-api-creation'; import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response'; import {ShowsApiDeletion} from '../../interfaces/shows-api-deletion'; +import {Show} from '../../interfaces/show'; @Injectable({ providedIn: 'root' @@ -27,7 +28,7 @@ export class ShowsApiService { return this.http.get(this.showsEndpoint + "id/" + id) } - sendShow(newShow: {}) { + sendShow(newShow: Show): Observable { return this.http.post(this.showsEndpoint, newShow) } From d9c96be8c45c5b79ced7fb6b960763d1c4c77595 Mon Sep 17 00:00:00 2001 From: Toast Date: Thu, 6 Feb 2025 09:40:52 +0100 Subject: [PATCH 15/17] Add icon to navbar --- src/app/app.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/app.component.html b/src/app/app.component.html index 10d0c83..a115b2f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,7 @@