[Feature/958] Update Existing Correction Form with Current System

src/app/admin-pages/admin.module.ts

@@ -19,16 +19,16 @@ import { ModeratorInputModalComponent } from "./book-correction/moderator-input-
 		UserManagementComponent,
 		DataCorrectionComponent,
 		UserReportComponent,
-		BookCorrectionLandingComponent,
-		BookCorrectionComponent
+		BookCorrectionLandingComponent
 	],
 	imports: [
 		CommonModule,
 		AdminRoutingModule,
 		MatTableModule,
 		FormsModule,
 		ReactiveFormsModule,
-		ModeratorInputModalComponent
+		ModeratorInputModalComponent,
+		BookCorrectionComponent
 	]
 })
 export class AdminModule {}

src/app/admin-pages/book-correction-landing/book-correction-landing.component.ts

@@ -5,6 +5,8 @@ import { MynewormAPIService } from "src/app/services/myneworm-api.service";
 import { ActivatedRoute, Router } from "@angular/router";
 import { BookCorrectionDisplayEntry } from "src/app/models/BookCorrection";
 import { MynewormAdminService } from "src/app/services/myneworm-admin.service";
+import { BookFormatPipe } from "src/app/pipes/BookFormat.pipe";
+import { TitleCasePipe } from "@angular/common";
 
 @Component({
 	selector: "book-correction-landing",
@@ -26,9 +28,12 @@ export class BookCorrectionLandingComponent {
 			data.forEach((correction) => {
 				this.service.getByISBN(correction.isbn.toString()).subscribe((data) => {
 					if (data === null) {
-						correction.title = "Unknown Entry";
+						correction.title = "New Entry";
 					} else {
-						correction.title = `${data.title} (${this.utilities.formatReadable(data.format_name)}, ${this.utilities.formatReadable(
+						const formatPipe = new BookFormatPipe();
+						const titlecasePipe = new TitleCasePipe();
+
+						correction.title = `${data.title} (${formatPipe.transform(data.format_name)}, ${titlecasePipe.transform(
 							data.book_type_name
 						)})`;
 					}

src/app/admin-pages/book-correction/book-correction.component.html

@@ -11,16 +11,15 @@ <h2>Correction for ISBN <a class="hidden-link" href="/book/{{correctionData.isbn
             <p class="info-label" *ngIf="submitterUsername.startsWith('Removed User')">
                 Submitted by: {{submitterUsername}}
             </p>
-            <p>{{correctionData.comment}}</p>
+            <p>{{correctionData.comment ? correctionData.comment : 'No comment provided' }}</p>
         </div>
         <div class="correction-info" *ngIf="correctionData.approved !== null">
             <p class="info-label">
                 Reviewed by: 
                 <a *ngIf="!modUsername.startsWith('Removed User')" class="linked-user" href="/user/{{modUsername}}">{{modUsername}}</a>
                 <span *ngIf="modUsername.startsWith('Removed User')">{{modUsername}}</span>
             </p>
-            <p *ngIf="correctionData.mod_note">{{correctionData.mod_note}}</p>
-            <p *ngIf="!correctionData.mod_note">No note provided.</p>
+            <p>{{correctionData.mod_note ? correctionData.mod_note : 'No note provided' }}</p>
         </div>
     </div>
     <form>
@@ -31,22 +30,22 @@ <h2>Correction for ISBN <a class="hidden-link" href="/book/{{correctionData.isbn
                     <label class="correction-label-inner">New</label>
                     <input class="form-control correction-input title-input" type="text" name="title" [(ngModel)]="correctionData.title" disabled>
                 </div>
-                <div class="correction-field">
+                <div class="correction-field" *ngIf="bookData">
                     <label class="correction-label-inner">Current</label>
                     <div class="title-input old-data-display">
                         <p>{{bookData.title}}</p>
                     </div>                    
                 </div>
             </div>
         </div>
-        <div class="correction-section">
+        <div class="correction-section" *ngIf="correctionData.cover_image">
             <label class="correction-label">Cover Image</label>
             <div class="correction-comparison">
                 <div class="correction-field">
                     <label class="correction-label-inner">New</label>
-                    <img class="form-control correction-input" src="{{correctionData.cover_url}}" />
+                    <img class="form-control correction-input" src="{{correctionData.cover_image}}" />
                 </div>
-                <div class="correction-field">
+                <div class="correction-field" *ngIf="bookData">
                     <label class="correction-label-inner">Current</label>
                     <img class="form-control correction-input" src="{{getImage()}}" />
                 </div>
@@ -59,7 +58,7 @@ <h2>Correction for ISBN <a class="hidden-link" href="/book/{{correctionData.isbn
                     <label class="correction-label-inner">New</label>
                     <textarea class="form-control correction-input" [formControl]="correctionDescription"></textarea>
                 </div>
-                <div class="correction-field">
+                <div class="correction-field" *ngIf="bookData">
                     <label class="correction-label-inner">Current</label>
                     <p *ngIf="bookData.description !== '' && bookData.description !== null" [innerHTML]="bookData.description"></p>
                     <p *ngIf="bookData.description === '' || bookData.description === null">No description available.</p>
@@ -75,7 +74,7 @@ <h2>Correction for ISBN <a class="hidden-link" href="/book/{{correctionData.isbn
                     <label class="correction-label-inner">New</label>
                     <input class="form-control correction-input" type="date" name="releaseDate" [(ngModel)]="correctionData.release_date" disabled>
                 </div>
-                <div class="correction-field">
+                <div class="correction-field" *ngIf="bookData">
                     <label class="correction-label-inner">Current</label>
                     <div class="old-data-display">
                         <p>{{bookData.release_date}}</p>
@@ -89,13 +88,12 @@ <h2>Correction for ISBN <a class="hidden-link" href="/book/{{correctionData.isbn
                 <div class="correction-field">
                     <label class="correction-label-inner" for="new-imprint">New</label>
                     <select class="form-select correction-input" name="new-imprint" [(ngModel)]="correctionData.publisher_id" disabled>
-                        <option value=""></option>
                         <option *ngFor="let publisher of publishers" [ngValue]="publisher.publisher_id">
                             {{publisher.name}}
                         </option>
                     </select> 
                 </div>
-                <div class="correction-field">
+                <div class="correction-field" *ngIf="bookData">
                     <label class="correction-label-inner" for="old-imprint">Current</label>
                     <select class="form-select correction-input" name="old-imprint" value="bookData.publisher_id" disabled>
                         <option *ngFor="let publisher of publishers" [ngValue]="publisher.publisher_id">
@@ -111,17 +109,16 @@ <h2>Correction for ISBN <a class="hidden-link" href="/book/{{correctionData.isbn
                 <div class="correction-field">
                     <label class="correction-label-inner" for="new-type">New</label>
                     <select class="form-select correction-input" name="new-type" [(ngModel)]="correctionData.book_type" disabled>
-                        <option value=""></option>
                         <option *ngFor="let type of types" [ngValue]="type.book_type_name">
-                            {{this.utilities.toTitleCase(type.book_type_name)}}
+                            {{type.book_type_name | titlecase }}
                         </option>
                     </select> 
                 </div>
-                <div class="correction-field">
+                <div class="correction-field" *ngIf="bookData">
                     <label class="correction-label-inner" for="old-type">Current</label>
                     <select class="form-select correction-input" name="old-type" value="bookData.book_type_name" disabled>
                         <option *ngFor="let type of types" [ngValue]="type.book_type_name">
-                            {{this.utilities.toTitleCase(type.book_type_name)}}
+                            {{type.book_type_name | titlecase }}
                         </option>
                     </select> 
                 </div>
@@ -133,17 +130,16 @@ <h2>Correction for ISBN <a class="hidden-link" href="/book/{{correctionData.isbn
                 <div class="correction-field">
                     <label class="correction-label-inner" for="new-format">New</label>
                     <select class="form-select correction-input" name="new-format" [(ngModel)]="correctionData.format_name" disabled>
-                        <option value=""></option>
                         <option *ngFor="let format of formats" [ngValue]="format.format_name">
-                            {{this.utilities.formatReadable(format.format_name)}}
+                            {{format.format_name | bookFormat}}
                         </option>
                     </select> 
                 </div>
-                <div class="correction-field">
+                <div class="correction-field" *ngIf="bookData">
                     <label class="correction-label-inner" for="old-format">Current</label>
                     <select class="form-select correction-input" name="old-format" value="bookData.format_name" disabled>
                         <option *ngFor="let format of formats" [ngValue]="format.format_name">
-                            {{this.utilities.formatReadable(format.format_name)}}
+                            {{format.format_name | bookFormat}}
                         </option>
                     </select> 
                 </div>

src/app/admin-pages/book-correction/book-correction.component.ts

@@ -1,5 +1,5 @@
-import { Component, SecurityContext } from "@angular/core";
-import { Location } from "@angular/common";
+import { Component, OnInit, SecurityContext } from "@angular/core";
+import { CommonModule, Location } from "@angular/common";
 import { ActivatedRoute, Router } from "@angular/router";
 import { MynewormAPIService } from "src/app/services/myneworm-api.service";
 import { BookData } from "src/app/models/bookData";
@@ -8,19 +8,21 @@
 import { BookFormat } from "src/app/models/BookFormat";
 import { BookType } from "src/app/models/BookType";
 import { ImprintData } from "src/app/models/imprintData";
-import { UtilitiesService } from "src/app/services/utilities.service";
 import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 import { ModeratorInputModalComponent } from "./moderator-input-modal/moderator-input-modal.component";
-import { FormControl } from "@angular/forms";
+import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
 import * as moment from "moment";
+import { BookFormatPipe } from "src/app/pipes/BookFormat.pipe";
 
 @Component({
 	selector: "book-correction",
 	templateUrl: "./book-correction.component.html",
-	styleUrls: ["./book-correction.component.css"]
+	styleUrls: ["./book-correction.component.css"],
+	standalone: true,
+	imports: [CommonModule, FormsModule, ReactiveFormsModule, BookFormatPipe]
 })
-export class BookCorrectionComponent {
+export class BookCorrectionComponent implements OnInit {
 	bookData: BookData;
 	correctionData: BookCorrectionEntry;
 	isReady = 0;
@@ -37,7 +39,6 @@
 		private route: ActivatedRoute,
 		private router: Router,
 		private adminService: MynewormAdminService,
-		public utilities: UtilitiesService,
 		private matDialog: MatDialog,
 		private sanitizer: DomSanitizer
 	) {
@@ -80,12 +81,14 @@
 			});
 			this.service.getByISBN(data.isbn).subscribe((bookInfo) => {
 				if (!bookInfo) {
+					this.isReady++;
 					return;
 				}
 
 				this.bookData = bookInfo;
-				this.bookData.release_date = moment(this.bookData.release_date.split("T")[0]).format("MM/DD/YYYY");
-
+				if (this.bookData.release_date) {
+					this.bookData.release_date = moment(this.bookData.release_date.split("T")[0]).format("MM/DD/YYYY");
+				}
 				this.isReady++;
 			});
 		});
@@ -143,7 +146,7 @@
 		});
 	}
 
 	sanitizeInput(value: any) {
 		if (this.correctionData) {
 			const sanitizedValue = this.sanitizer.sanitize(SecurityContext.HTML, value);
 			this.correctionData.description = sanitizedValue ? sanitizedValue.toString() : "";

src/app/app-routing.module.ts

@@ -4,23 +4,40 @@ import { BookPageComponent } from "./pages/book-page/book-page.component";
 import { HomePageComponent } from "./home-page/home-page.component";
 import { ImprintPageComponent } from "./imprint-page/imprint-page.component";
 import { ImprintIndexComponent } from "./imprint-index/imprint-index.component";
-import { MissingPageComponent } from "./missing-page/missing-page.component";
+import { MissingPageComponent } from "./pages/missing-page/missing-page.component";
 import { SeriesPageComponent } from "./series-page/series-page.component";
-import { DataCorrectionFormComponent } from "./data-correction-form/data-correction-form.component";
 import { SearchPageComponent } from "./search-page/search-page.component";
-import { LoginPageComponent } from "./login-page/login-page.component";
+import { LoginPageComponent } from "./pages/login/login.component";
 import { AuthenticationGuard } from "./services/authentication/authentication.guard";
 import { UserSettingsPageComponent } from "./user-settings-page/user-settings-page.component";
-import { RegistrationPageComponent } from "./registration-page/registration-page.component";
+import { RegistrationPageComponent } from "./pages/registration/registration.component";
 
 const routes: Routes = [
 	{ path: "", component: HomePageComponent },
 	{ path: "home", pathMatch: "full", redirectTo: "" },
-	{ path: "book/:isbn", component: BookPageComponent },
-	{ path: "publisher", component: ImprintIndexComponent },
-	{ path: "publisher/:id", component: ImprintPageComponent },
 	{ path: "series/:id", component: SeriesPageComponent },
 	{ path: "search", component: SearchPageComponent },
+	{
+		path: "book",
+		children: [
+			{
+				path: "correction",
+				canActivate: [AuthenticationGuard],
+				loadComponent: () =>
+					import("./pages/book-correction-form/book-correction-form.component").then(
+						(m) => m.BookCorrectionFormComponent
+					)
+			},
+			{ path: ":isbn", component: BookPageComponent }
+		]
+	},
+	{
+		path: "publisher",
+		children: [
+			{ path: "", pathMatch: "full", component: ImprintIndexComponent },
+			{ path: ":id", component: ImprintPageComponent }
+		]
+	},
 	{
 		path: "about",
 		loadComponent: () => import("./about-page/about-page.component").then((m) => m.AboutPageComponent)
@@ -29,14 +46,13 @@ const routes: Routes = [
 		path: "faq",
 		loadComponent: () => import("./pages/faq/faq.component").then((m) => m.FaqComponent)
 	},
-	{ path: "correction", component: DataCorrectionFormComponent },
 	{
 		path: "support",
 		loadComponent: () => import("./pages/support/support.component").then((m) => m.SupportPageComponent)
 	},
 	{
 		path: "privacy",
-		loadComponent: () => import("./privacy-page/privacy-page.component").then((m) => m.PrivacyPageComponent)
+		loadComponent: () => import("./pages/privacy/privacy.component").then((m) => m.PrivacyPageComponent)
 	},
 	{
 		path: "guidelines",

src/app/app.module.ts

@@ -8,28 +8,25 @@ import { HomePageModule } from "./home-page/home-page.module";
 import { BookPageModule } from "./pages/book-page/book-page.module";
 import { ImprintPageModule } from "./imprint-page/imprint-page.module";
 import { HttpClientModule } from "@angular/common/http";
-import { SupportPageModule } from "./support-page/support-page.module";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ImprintIndexModule } from "./imprint-index/imprint-index.module";
-import { MissingPageComponent } from "./missing-page/missing-page.component";
+import { MissingPageComponent } from "./pages/missing-page/missing-page.component";
 import { SeriesPageModule } from "./series-page/series-page.module";
 import { SearchBarModule } from "./search-bar/search-bar.module";
-import { DataCorrectionFormComponent } from "./data-correction-form/data-correction-form.component";
 import { MatDialogModule } from "@angular/material/dialog";
 import { SearchPageModule } from "./search-page/search-page.module";
-import { LoginPageComponent } from "./login-page/login-page.component";
+import { LoginPageComponent } from "./pages/login/login.component";
 import { UserNavMenuComponent } from "./user-nav-menu/user-nav-menu.component";
 import { LocalCookiesService } from "./services/authentication/local-cookies.service";
 import { UserSettingsPageComponent } from "./user-settings-page/user-settings-page.component";
-import { RegistrationPageComponent } from "./registration-page/registration-page.component";
+import { RegistrationPageComponent } from "./pages/registration/registration.component";
 import { SharedModule } from "./shared/shared.module";
 import { DeleteConfirmationComponent } from "./user-settings-page/delete-confirmation/delete-confirmation.component";
 
 @NgModule({
 	declarations: [
 		AppComponent,
 		MissingPageComponent,
-		DataCorrectionFormComponent,
 		LoginPageComponent,
 		UserNavMenuComponent,
 		UserSettingsPageComponent,
@@ -44,7 +41,6 @@ import { DeleteConfirmationComponent } from "./user-settings-page/delete-confirm
 		HomePageModule,
 		BookPageModule,
 		ImprintPageModule,
-		SupportPageModule,
 		BrowserAnimationsModule,
 		ImprintIndexModule,
 		SeriesPageModule,