Merge pull request #149 from AurelicButter/feature/744

[Feature/744] Added Until Release Display on Book Page

src/app/app.module.ts

@@ -5,7 +5,6 @@ import { FormsModule } from "@angular/forms";
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
 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 { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@@ -22,6 +21,7 @@ import { UserSettingsPageComponent } from "./user-settings-page/user-settings-pa
 import { RegistrationPageComponent } from "./pages/registration/registration.component";
 import { SharedModule } from "./shared/shared.module";
 import { DeleteConfirmationComponent } from "./user-settings-page/delete-confirmation/delete-confirmation.component";
+import { BookPageComponent } from "./pages/book-page/book-page.component";
 
 @NgModule({
 	declarations: [
@@ -39,15 +39,15 @@ import { DeleteConfirmationComponent } from "./user-settings-page/delete-confirm
 		FormsModule,
 		AppRoutingModule,
 		HomePageModule,
-		BookPageModule,
 		ImprintPageModule,
 		BrowserAnimationsModule,
 		ImprintIndexModule,
 		SeriesPageModule,
 		SearchBarModule,
 		SearchPageModule,
 		MatDialogModule,
-		SharedModule
+		SharedModule,
+		BookPageComponent
 	],
 	providers: [Title, LocalCookiesService],
 	bootstrap: [AppComponent]

src/app/home-page/home-page.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
 import { HomePageComponent } from "./home-page.component";
 
 import { SharedModule } from "../shared/shared.module";
+import { CommonModule } from "@angular/common";
 
 @NgModule({
 	declarations: [HomePageComponent],
-	imports: [BrowserModule, SharedModule],
+	imports: [CommonModule, SharedModule],
 	exports: [HomePageComponent]
 })
 export class HomePageModule {}

src/app/imprint-index/imprint-index.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
 import { ImprintIndexComponent } from "./imprint-index.component";
+import { CommonModule } from "@angular/common";
 
 @NgModule({
 	declarations: [ImprintIndexComponent],
-	imports: [BrowserModule],
+	imports: [CommonModule],
 	exports: [ImprintIndexComponent]
 })
 export class ImprintIndexModule {}

src/app/imprint-page/imprint-page.module.ts

@@ -1,11 +1,11 @@
 import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
 import { SharedModule } from "../shared/shared.module";
 import { ImprintPageComponent } from "./imprint-page.component";
+import { CommonModule } from "@angular/common";
 
 @NgModule({
 	declarations: [ImprintPageComponent],
-	imports: [BrowserModule, SharedModule],
+	imports: [CommonModule, SharedModule],
 	exports: [ImprintPageComponent]
 })
 export class ImprintPageModule {}

src/app/pages/book-page/book-page.component.css

@@ -1,24 +1,65 @@
-.page-title {
-    border-bottom: 1px solid grey;
-    margin-bottom: 20px;
-}
-
 .book-cover {
     width: 100%;
 }
 
 .aside-content {
-    margin-right: 2%;
+    max-width: 300px;
 }
 
 .aside-btn-group {
     display: flex;
-    flex-direction: row;
     justify-content: space-evenly;
     margin-top: 10px;
     margin-bottom: 16px;
 }
 
+.release-date > p {
+    margin: 0;
+}
+
+.days-until-release {
+    font-style: italic;
+    padding: 8px 0px;
+    padding-right: 4px;
+    width: fit-content;
+}
+
+.aside-info {
+    display: inline-flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.aside-item {
+    display: inline-flex;
+    justify-content: space-between;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.aside-item-title {
+    font-weight: bold;
+    width: 25%;
+    min-width: fit-content;
+    margin-right: 6px;
+}
+
+.aside-item-value {
+    width: 70%;
+}
+
+@media screen and (min-width: 1024px) {
+    a.col-5 {
+        width: inherit;
+    }
+}
+
+@media screen and (min-width: 1024px) and (max-width: 1200px) {
+    a.col-5 {
+        font-size: 1.1rem;
+    }
+}
+
 @media screen and (max-width: 1024px) {
     .page-title {
         text-align: center;
@@ -35,6 +76,16 @@
     .aside-content {
         width: 25%;
     }
+
+    a.col-5 {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .aside-content {
+        width: 30%;
+    }
 }
 
 @media screen and (max-width: 425px) {
@@ -79,4 +130,12 @@
         padding-top: 16px;
         padding-bottom: 16px;
     }
+
+    .aside-item {
+        flex-direction: column;
+    }
+
+    .aside-item {
+        width: 50%;
+    }
 }

src/app/pages/book-page/book-page.component.html

@@ -1,25 +1,46 @@
 <div *ngIf="book != undefined">
     <h2 class="page-title">{{book.title}}</h2>
     <div class="row">
-        <aside class="col-2 aside-content">
+        <aside class="col-3 aside-content">
             <img class="book-cover" src='{{getCover()}}' alt='Cover for {{book.title}}'>
             <div class="aside-btn-group">
-                <a class="btn btn-lg myneworm-btn" role="button" (click)="updateListEntry()" [ngClass]="{ disabled: !isLoggedIn }"
+                <a class="btn btn-lg col-5 myneworm-btn" role="button" (click)="updateListEntry()" [ngClass]="{ disabled: !isLoggedIn }"
                     [attr.aria-disabled]="!isLoggedIn" tabindex='{{isLoggedIn ? 0 : -1}}'>{{ hasExistingEntry ? 'Update List' : 'Add to List' }}</a>
-                <a [routerLink]="'/book/correction'" [queryParams]="{isbn: book.isbn}" class="btn btn-lg myneworm-btn" role="button" [ngClass]="{ disabled: !isLoggedIn }">Edit Entry</a>
+                <a [routerLink]="'/book/correction'" [queryParams]="{isbn: book.isbn}" class="btn btn-lg col-5 myneworm-btn" 
+                    role="button" [ngClass]="{ disabled: !isLoggedIn }">Edit Entry</a>
             </div>
             <div class="aside-info">
-                <p class="format-label"><strong>Format:</strong> {{book.format_name | bookFormat}}</p>
-                <p class="type-label"><strong>Type:</strong> {{book.book_type_name | titlecase}}</p>
-                <p><strong>Release:</strong> {{ book.release_date !== null ? this.utilities.dateReadable(book.release_date) : 'Unknown' }}</p>
-                <p *ngIf="publisher != undefined"><strong>Imprint: </strong><a
-                        routerLink="/publisher/{{book.publisher_id}}" class="aside-link">{{publisher.name}}</a></p>
+                <div class="aside-item">
+                    <span class="aside-item-title">Format</span>
+                    <span class="aside-item-value">{{book.format_name | bookFormat}}</span>
+                </div>
+                <div class="aside-item">
+                    <span class="aside-item-title">Type</span>
+                    <span class="aside-item-value">{{book.book_type_name | titlecase}}</span>
+                </div>
+                <div class="aside-item">
+                    <span class="aside-item-title">Release</span>
+                    <div class="aside-item-value release-date" *ngIf="book.release_date; else noRelease">
+                        <p>{{ book.release_date | DateReadable }}</p>
+                        <p class="days-until-release" *ngIf="remainingMsg">{{ remainingMsg }}</p>
+                    </div>
+
+                    <ng-template #noRelease>
+                        Unknown
+                    </ng-template>
+                </div>
+                <div class="aside-item">
+                    <span class="aside-item-title">Imprint</span>
+                    <span class="aside-item-value">
+                        <a routerLink="/publisher/{{book.publisher_id}}" class="aside-link" *ngIf="publisher">{{publisher.name}}</a>
+                    </span>
+                </div>
             </div>
         </aside>
-        <main class="col-8">
+        <main class="col-7">
             <div class="book-description">
-                <p *ngIf="book.description !== '' && book.description !== null" [innerHTML]="book.description"></p>
-                <p *ngIf="book.description === '' || book.description === null">No description available.</p>
+                <p *ngIf="book.description; else noDescription" [innerHTML]="book.description"></p>
+                <ng-template #noDescription>No description available.</ng-template>
             </div>
         </main>
     </div>

src/app/pages/book-page/book-page.component.ts

@@ -1,33 +1,39 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute, Router, RouterModule } from "@angular/router";
 import { catchError, of } from "rxjs";
 import { BookData } from "../../models/bookData";
 import { PublisherData } from "../../models/publisherData";
 import { MetadataService } from "../../services/metadata.service";
 import { MynewormAPIService } from "../../services/myneworm-api.service";
-import { UtilitiesService } from "../../services/utilities.service";
 import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 import { ListEntryModalComponent } from "../../shared/list-entry-modal/list-entry-modal.component";
 import { LocalCookiesService } from "../../services/authentication/local-cookies.service";
 import { ListEntry } from "../../models/ListEntry";
 import { ToastService } from "../../services/toast.service";
+import { CommonModule } from "@angular/common";
+import { DateReadablePipe } from "src/app/pipes/DateReadable.pipe";
+import { BookFormatPipe } from "src/app/pipes/BookFormat.pipe";
+import { SharedModule } from "src/app/shared/shared.module";
+import * as moment from "moment";
 
 @Component({
 	selector: "book-page",
 	templateUrl: "./book-page.component.html",
-	styleUrls: ["./book-page.component.css"]
+	styleUrls: ["./book-page.component.css"],
+	standalone: true,
+	imports: [CommonModule, RouterModule, SharedModule, BookFormatPipe, DateReadablePipe]
 })
 export class BookPageComponent implements OnInit {
 	book: BookData;
 	publisher: PublisherData;
 	isLoggedIn = false;
 	private userID: string;
 	hasExistingEntry = false;
+	remainingMsg: string;
 
 	constructor(
 		private route: ActivatedRoute,
 		private service: MynewormAPIService,
-		public utilities: UtilitiesService,
 		private metaService: MetadataService,
 		private matDialog: MatDialog,
 		private cookieService: LocalCookiesService,
@@ -56,12 +62,14 @@ export class BookPageComponent implements OnInit {
 					this.book.title,
 					`/book/${this.book.isbn}`,
 					this.book.description,
-					this.service.getAsset(`${this.book.isbn}`)
+					this.service.getAsset(this.book.isbn)
 				);
 
 				this.service.getPublisher(data.publisher_id.toString()).subscribe((pubData: PublisherData) => {
 					this.publisher = pubData;
 				});
+
+				this.calculateDaysLeft();
 			});
 
 			if (this.isLoggedIn) {
@@ -111,4 +119,22 @@ export class BookPageComponent implements OnInit {
 			this.hasExistingEntry = result !== null;
 		});
 	}
+
+	calculateDaysLeft() {
+		const release = moment(this.book.release_date).startOf("day");
+		const today = moment().startOf("day");
+
+		if (today.isBefore(release)) {
+			const diff = release.diff(today, "day");
+			if (diff > 1) {
+				this.remainingMsg = "Releasing " + release.fromNow() + "!";
+			} else {
+				this.remainingMsg = "Releasing tomorrow!";
+			}
+		} else if (today.isSame(release, "day")) {
+			this.remainingMsg = "Releasing today!";
+		} else {
+			this.remainingMsg = "";
+		}
+	}
 }

src/app/pipes/DateReadable.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+	standalone: true,
+	name: "DateReadable"
+})
+export class DateReadablePipe implements PipeTransform {
+	months = [...Array(12).keys()].map((key) => new Date(0, key).toLocaleString("en", { month: "long" }));
+
+	transform(value: string) {
+		if (!value) {
+			return "";
+		}
+		const dateObj = new Date(value);
+		return `${dateObj.getDate()} ${this.months[dateObj.getMonth()]}, ${dateObj.getFullYear()}`;
+	}
+}

src/app/search-bar/search-bar.module.ts

@@ -1,17 +1,17 @@
 import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
 import { SearchBarComponent } from "./search-bar.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { MatButtonModule } from "@angular/material/button";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
 import { MatTableModule } from "@angular/material/table";
 import { BookFormatPipe } from "../pipes/BookFormat.pipe";
+import { CommonModule } from "@angular/common";
 
 @NgModule({
 	declarations: [SearchBarComponent],
 	imports: [
-		BrowserModule,
+		CommonModule,
 		FormsModule,
 		ReactiveFormsModule,
 		MatButtonModule,

src/app/search-page/search-page.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
 import { SearchPageComponent } from "./search-page.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { MatButtonModule } from "@angular/material/button";
@@ -8,11 +7,12 @@ import { MatInputModule } from "@angular/material/input";
 import { MatTableModule } from "@angular/material/table";
 import { RouterModule } from "@angular/router";
 import { BookFormatPipe } from "../pipes/BookFormat.pipe";
+import { CommonModule } from "@angular/common";
 
 @NgModule({
 	declarations: [SearchPageComponent],
 	imports: [
-		BrowserModule,
+		CommonModule,
 		FormsModule,
 		ReactiveFormsModule,
 		MatButtonModule,