mirror/booklore
1
0
Fork 0
mirror of https://github.com/booklore-app/booklore.git synced 2025-12-23 22:28:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

Some jaziness

Browse Source
This commit is contained in:
aditya.chandel
2025-01-04 00:49:56 -07:00
parent 6646813a09
commit 692fa59480
3 changed files with 120 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
booklore-ui/src/app/book-info-tabs/metadata-searcher/metadata-searcher.component.html
View File

@@ -4,7 +4,12 @@
<label for="title" class="label">Title</label>
<div class="input-container">
<input pInputText id="title" formControlName="title" class="input"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('title')"/>
<p-button
[icon]="isValueCopied('title') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('title')}"
class="arrow-button"
(click)="copyFetchedToCurrent('title')"/>
<input pInputText [value]="fetchedMetadata.title" class="input"/>
</div>
</div>
@@ -13,7 +18,12 @@
<label for="authors" class="label">Authors</label>
<div class="input-container">
<input pInputText id="authors" formControlName="authors" class="input"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('authors')"/>
<p-button
[icon]="isValueCopied('authors') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('authors')}"
class="arrow-button"
(click)="copyFetchedToCurrent('authors')"/>
<input pInputText [value]="fetchedAuthorsString()" class="input"/>
</div>
</div>
@@ -22,7 +32,12 @@
<label for="categories" class="label">Categories</label>
<div class="input-container">
<input pInputText id="categories" formControlName="categories" class="input"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('categories')"/>
<p-button
[icon]="isValueCopied('categories') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('categories')}"
class="arrow-button"
(click)="copyFetchedToCurrent('categories')"/>
<input pInputText [value]="fetchedCategoriesString()" class="input"/>
</div>
</div>
@@ -31,7 +46,12 @@
<label for="publisher" class="label">Publisher</label>
<div class="input-container">
<input pInputText id="publisher" formControlName="publisher" class="input"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('publisher')"/>
<p-button
[icon]="isValueCopied('publisher') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('publisher')}"
class="arrow-button"
(click)="copyFetchedToCurrent('publisher')"/>
<input pInputText [value]="fetchedMetadata.publisher" class="input"/>
</div>
</div>
@@ -40,7 +60,12 @@
<label for="publishedDate" class="label">Published</label>
<div class="input-container">
<input pInputText id="publishedDate" formControlName="publishedDate" class="input"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('publishedDate')"/>
<p-button
[icon]="isValueCopied('publishedDate') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('publishedDate')}"
class="arrow-button"
(click)="copyFetchedToCurrent('publishedDate')"/>
<input pInputText [value]="fetchedMetadata.publishedDate" class="input"/>
</div>
</div>
@@ -49,7 +74,12 @@
<label for="isbn10" class="label">ISBN-10</label>
<div class="input-container">
<input pInputText id="isbn10" formControlName="isbn10" class="input"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('isbn10')"/>
<p-button
[icon]="isValueCopied('isbn10') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('isbn10')}"
class="arrow-button"
(click)="copyFetchedToCurrent('isbn10')"/>
<input pInputText [value]="fetchedMetadata.isbn10" class="input"/>
</div>
</div>
@@ -58,15 +88,26 @@
<label for="language" class="label">Language</label>
<div class="input-container">
<input pInputText id="language" formControlName="language" class="input"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('language')"/>
<p-button
[icon]="isValueCopied('language') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('language')}"
class="arrow-button"
(click)="copyFetchedToCurrent('language')"/>
<input pInputText [value]="fetchedMetadata.language" class="input"/>
</div>
</div>
<div class="form-row">
<label for="pageCount" class="label">Pages</label>
<div class="input-container">
<input pInputText id="pageCount" formControlName="pageCount" class="input"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('pageCount')"/>
<p-button
[icon]="isValueCopied('pageCount') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('pageCount')}"
class="arrow-button"
(click)="copyFetchedToCurrent('pageCount')"/>
<input pInputText [value]="fetchedMetadata.pageCount" class="input"/>
</div>
</div>
@@ -75,7 +116,12 @@
<label for="description" class="label">Description</label>
<div class="input-container">
<textarea id="description" formControlName="description" class="input"></textarea>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="copyFetchedToCurrent('description')"/>
<p-button
[icon]="isValueCopied('description') ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': isValueCopied('description')}"
class="arrow-button"
(click)="copyFetchedToCurrent('description')"/>
<textarea [value]="fetchedMetadata.description" class="input"></textarea>
</div>
</div>
@@ -85,7 +131,12 @@
<div class="input-container">
<img *ngIf="!updateThumbnailUrl" [src]="coverImageSrc(currentBookId)" alt="Book Thumbnail" class="thumbnail"/>
<img *ngIf="updateThumbnailUrl" [src]="fetchedMetadata.thumbnailUrl" alt="Fetched Thumbnail" class="thumbnail"/>
<p-button icon="pi pi-arrow-left" [outlined]="true" class="arrow-button" (click)="shouldUpdateThumbnail()"/>
<p-button
[icon]="updateThumbnailUrl ? 'pi pi-check' : 'pi pi-arrow-left'"
[outlined]="true"
[ngClass]="{'green-outlined-button': updateThumbnailUrl}"
class="arrow-button"
(click)="shouldUpdateThumbnail()"/>
<img [src]="fetchedMetadata.thumbnailUrl" alt="Fetched Thumbnail" class="thumbnail"/>
</div>
</div>
@@ -94,13 +145,11 @@
<div class="flex flex-col gap-x-4 mt-auto">
<p-divider></p-divider>
<div class="flex justify-between">
<p-button label="Back" icon="pi pi-arrow-left" severity="warn" (onClick)="goBackClick()"></p-button>
<p-button label="Back" icon="pi pi-arrow-left" severity="info" (onClick)="goBackClick()"></p-button>
<div class="flex gap-x-4 justify-end">
<p-button label="Cancel" icon="pi pi-times" severity="secondary"></p-button>
<p-button label="Save" icon="pi pi-check" severity="primary" type="submit"></p-button>
</div>
</div>
</div>
</form>

5
booklore-ui/src/app/book-info-tabs/metadata-searcher/metadata-searcher.component.scss
View File

@@ -40,3 +40,8 @@
padding-left: 1rem;
padding-right: 1rem;
}
.green-outlined-button {
--p-button-outlined-primary-border-color: limegreen;
--p-button-outlined-primary-color: limegreen;
}

76
booklore-ui/src/app/book-info-tabs/metadata-searcher/metadata-searcher.component.ts
View File

@@ -1,15 +1,15 @@
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FetchedMetadata} from '../../book/model/book.model';
import {BookService} from '../../book/service/book.service';
import {MessageService} from 'primeng/api';
import {Button} from 'primeng/button';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {InputText} from 'primeng/inputtext';
import {NgIf} from '@angular/common';
import {Divider} from 'primeng/divider';
import {BookInfoService} from '../book-info.service';
import {Observable} from 'rxjs';
import {BookMetadataBI} from '../../book/model/book-metadata-for-book-info.model';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FetchedMetadata } from '../../book/model/book.model';
import { BookService } from '../../book/service/book.service';
import { MessageService } from 'primeng/api';
import { Button } from 'primeng/button';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { InputText } from 'primeng/inputtext';
import {NgClass, NgIf} from '@angular/common';
import { Divider } from 'primeng/divider';
import { BookInfoService } from '../book-info.service';
import { Observable } from 'rxjs';
import { BookMetadataBI } from '../../book/model/book-metadata-for-book-info.model';
@Component({
selector: 'app-metadata-searcher',
@@ -22,7 +22,8 @@ import {BookMetadataBI} from '../../book/model/book-metadata-for-book-info.model
InputText,
NgIf,
Divider,
ReactiveFormsModule
ReactiveFormsModule,
NgClass
]
})
export class MetadataSearcherComponent implements OnInit {
@@ -34,6 +35,7 @@ export class MetadataSearcherComponent implements OnInit {
bookMetadata$: Observable<BookMetadataBI | null>;
currentBookId!: number;
updateThumbnailUrl: boolean = false;
copiedFields: { [key: string]: boolean } = {};
constructor(private bookService: BookService, private bookInfoService: BookInfoService, private messageService: MessageService) {
this.bookMetadata$ = this.bookInfoService.bookMetadata$;
@@ -90,20 +92,21 @@ export class MetadataSearcherComponent implements OnInit {
onSave(): void {
const updatedBookMetadata: BookMetadataBI = {
bookId: this.currentBookId,
title: this.bookMetadataForm.get('title')?.value || this.fetchedMetadata.title,
subtitle: this.bookMetadataForm.get('subtitle')?.value || this.fetchedMetadata.subtitle,
title: this.getValueOrCopied('title'),
subtitle: this.getValueOrCopied('subtitle'),
authors: this.getArrayFromFormField('authors', this.fetchedMetadata.authors),
categories: this.getArrayFromFormField('categories', this.fetchedMetadata.categories),
publisher: this.bookMetadataForm.get('publisher')?.value || this.fetchedMetadata.publisher,
publishedDate: this.bookMetadataForm.get('publishedDate')?.value || this.fetchedMetadata.publishedDate,
isbn10: this.bookMetadataForm.get('isbn10')?.value || this.fetchedMetadata.isbn10,
isbn13: this.bookMetadataForm.get('isbn13')?.value || this.fetchedMetadata.isbn13,
asin: this.bookMetadataForm.get('asin')?.value || this.fetchedMetadata.asin,
description: this.bookMetadataForm.get('description')?.value || this.fetchedMetadata.description,
pageCount: this.bookMetadataForm.get('pageCount')?.value || this.fetchedMetadata.pageCount,
language: this.bookMetadataForm.get('language')?.value || this.fetchedMetadata.language,
publisher: this.getValueOrCopied('publisher'),
publishedDate: this.getValueOrCopied('publishedDate'),
isbn10: this.getValueOrCopied('isbn10'),
isbn13: this.getValueOrCopied('isbn13'),
asin: this.getValueOrCopied('asin'),
description: this.getValueOrCopied('description'),
pageCount: this.getPageCountOrCopied(),
language: this.getValueOrCopied('language'),
thumbnailUrl: this.updateThumbnailUrl ? this.fetchedMetadata.thumbnailUrl : undefined
};
this.bookService.updateMetadata(updatedBookMetadata.bookId, updatedBookMetadata).subscribe({
next: () => {
this.messageService.add({severity: 'info', summary: 'Success', detail: 'Book metadata updated'});
@@ -115,6 +118,24 @@ export class MetadataSearcherComponent implements OnInit {
});
}
private getPageCountOrCopied(): number | null {
const formValue = this.bookMetadataForm.get('pageCount')?.value;
if (formValue === '' || formValue === null || isNaN(formValue)) {
this.copiedFields['pageCount'] = true;
return this.fetchedMetadata.pageCount || null;
}
return Number(formValue);
}
private getValueOrCopied(field: string): string {
const formValue = this.bookMetadataForm.get(field)?.value;
if (!formValue || formValue === '') {
this.copiedFields[field] = true;
return this.fetchedMetadata[field] || '';
}
return formValue;
}
private getArrayFromFormField(field: string, fallbackValue: string[]): string[] {
const fieldValue = this.bookMetadataForm.get(field)?.value;
if (fieldValue) {
@@ -131,9 +152,18 @@ export class MetadataSearcherComponent implements OnInit {
const value = this.fetchedMetadata[field];
if (value) {
this.bookMetadataForm.get(field)?.setValue(value);
this.highlightCopiedInput(field);
}
}
highlightCopiedInput(field: string): void {
this.copiedFields = { ...this.copiedFields, [field]: true };
}
isValueCopied(field: string): boolean {
return this.copiedFields[field];
}
goBackClick() {
this.goBack.emit(true);
}