From 51fa54bed32d34b47c8936b2af9a1d003ec08110 Mon Sep 17 00:00:00 2001 From: Muppetteer Date: Sun, 7 Dec 2025 03:16:42 +1100 Subject: [PATCH] Improve bookdrop UI (#1768) * Improve bookdrop UI * Rename resetAll as it doesn't apply to all now * Fix display of copied metadata fields --- ...okdrop-file-metadata-picker.component.html | 238 ++++++++++-------- ...okdrop-file-metadata-picker.component.scss | 43 +++- ...bookdrop-file-metadata-picker.component.ts | 17 +- .../bookdrop-file-review.component.html | 115 ++++----- .../bookdrop-file-review.component.scss | 30 +-- .../bookdrop-file-review.component.ts | 43 +++- 6 files changed, 298 insertions(+), 188 deletions(-) diff --git a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.html b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.html index d5d49c1c9..dc5bb36b3 100644 --- a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.html +++ b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.html @@ -1,11 +1,13 @@ -@if (fetchedMetadata) { -
+@if (fetchedMetadata && fetchedMetadata.title) { +
-
-
-

Current Metadata

-
+
+ +
+

Current Metadata

+
-

Fetched Metadata

+

Fetched Metadata

-
+
-
+
- +
- +
- +
-
- -
+ - -
- - -
+
} @for (field of metadataDescription; track field) {
- +
- + - +
} @for (field of metadataFieldsBottom; track field) {
- +
-
-

Current Metadata:

- - @for (field of metadataFieldsTop; track field) { -
- -
- -
-
- } - - @for (field of metadataChips; track field) { -
- -
- -
-
- } - - @for (field of metadataDescription; track field) { -
- -
- -
-
- } - - @for (field of metadataFieldsBottom; track field) { -
- -
- -
-
- } -
- -
-
- Book Thumbnail - + +
+
+

+ + Unable to fetch new metadata for this file +

+
+
+
+
+ Book Thumbnail + +
+
+ +
+ @for (field of metadataFieldsTop; track field) { +
+ +
+ +
+
+ } + + @for (field of metadataChips; track field) { +
+ +
+ +
+
+ } + + @for (field of metadataDescription; track field) { +
+ +
+ +
+
+ } + + @for (field of metadataFieldsBottom; track field) { +
+ +
+ +
+
+ } +
+
} diff --git a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.scss b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.scss index 6ea5335cf..accae36fc 100644 --- a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.scss +++ b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.scss @@ -22,10 +22,49 @@ --p-button-outlined-primary-color: #E32636; } -.outlined-input-green { - border: 0.75px solid forestgreen !important; +input.outlined-input-green, +textarea.outlined-input-green, +::ng-deep p-autocomplete.outlined-input-green ul.p-autocomplete-input-multiple { + border: 1px solid forestgreen !important; } ::ng-deep .p-inputchips { width: 100% !important; } + +::ng-deep .p-autocomplete .p-chip .p-chip-label { + font-size: 12px; +} + +.metapicker { + box-sizing: border-box; +} + +.metaheader { + border-bottom: 1px solid var(--border-color); + padding: 1rem; + margin-bottom: 1rem; + justify-content: space-between; +} + +.metaheader .midbuttons { + white-space: nowrap; +} + +.metacontent { + padding: 0 1rem 1rem; +} + +.metadata-status { + &.copied { + color: rgb(34, 197, 94); + } + + &.no-metadata { + color: rgb(59, 130, 246); + } + + &.not-applied { + color: rgb(239, 68, 68); + } +} \ No newline at end of file diff --git a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.ts b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.ts index f9fc1a4cc..84d2e02fe 100644 --- a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.ts +++ b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-metadata-picker/bookdrop-file-metadata-picker.component.ts @@ -10,6 +10,7 @@ import {Textarea} from 'primeng/textarea'; import {AutoComplete} from 'primeng/autocomplete'; import {Image} from 'primeng/image'; import {LazyLoadImageModule} from 'ng-lazyload-image'; +import {ConfirmationService} from 'primeng/api'; @Component({ selector: 'app-bookdrop-file-metadata-picker-component', @@ -30,6 +31,8 @@ import {LazyLoadImageModule} from 'ng-lazyload-image'; }) export class BookdropFileMetadataPickerComponent { + private readonly confirmationService = inject(ConfirmationService); + @Input() fetchedMetadata!: BookMetadata; @Input() originalMetadata?: BookMetadata; @Input() metadataForm!: FormGroup; @@ -97,10 +100,10 @@ export class BookdropFileMetadataPickerComponent { }); } - copyAll() { + copyAll(includeCover: boolean = true): void { if (this.fetchedMetadata) { Object.keys(this.fetchedMetadata).forEach((field) => { - if (this.fetchedMetadata[field] && field !== 'thumbnailUrl') { + if (this.fetchedMetadata[field] && (includeCover || field !== 'thumbnailUrl')) { this.copyFetchedToCurrent(field); } }); @@ -164,6 +167,16 @@ export class BookdropFileMetadataPickerComponent { } } + confirmReset(): void { + this.confirmationService.confirm({ + message: 'Are you sure you want to reset all metadata changes made to this file?', + header: 'Reset Metadata Changes?', + icon: 'pi pi-exclamation-triangle', + acceptButtonStyleClass: 'p-button-danger', + accept: () => this.resetAll() + }); + } + resetAll() { if (this.originalMetadata) { this.metadataForm.patchValue({ diff --git a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-review/bookdrop-file-review.component.html b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-review/bookdrop-file-review.component.html index cfbe582ff..882abe819 100644 --- a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-review/bookdrop-file-review.component.html +++ b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-review/bookdrop-file-review.component.html @@ -20,7 +20,7 @@
- -
- Library for All Files: - - - - Subpath for All Files: - - - - - -
-
+ + + +
+ +
+ + + + + - - -
} @@ -182,7 +163,7 @@ }" [pTooltip]="copiedFlags[file.file.id] ? 'Fetched metadata has been applied.' - : !file.file.fetchedMetadata + : (!file.file.fetchedMetadata || !file.file.fetchedMetadata.title) ? 'No fetched metadata available. Original metadata will be used.' : 'Fetched metadata hasn’t been applied yet. Open metadata picker to review.'" tooltipPosition="top"> @@ -242,7 +223,7 @@
@if (bookdropFileUis.length > 0) { + [showJumpToPageDropdown]="true" + [showPageLinks]="false" + [showFirstLastIcon]="false" + currentPageReportTemplate="Page {currentPage} of {totalPages}">
+ + * + * { - margin: 0.25rem; - } } .header { @@ -96,7 +92,9 @@ } .controls-section { - padding: 0 1.5rem 0.5rem; + padding: 0 1.5rem 1.5rem; + margin: 0; + border-bottom: 1px solid var(--p-content-border-color); } .saving-overlay { @@ -145,12 +143,6 @@ gap: 1rem; align-items: center; - span { - font-size: 0.875rem; - color: rgb(209, 213, 219); - font-weight: 500; - } - p-select { min-width: 8rem; max-width: 16rem; @@ -160,20 +152,23 @@ .action-buttons { display: flex; gap: 1rem; + align-items: center; + + span { + font-size: 0.875rem; + color: rgb(209, 213, 219); + font-weight: 500; + } } .content-area { flex: 1; overflow-y: auto; - padding: 1rem 1rem 1rem; + padding: 1rem; > * + * { margin-top: 0.5rem; } - - @media (min-width: 768px) { - padding: 1rem 1.5rem 1rem; - } } .empty-state { @@ -249,7 +244,6 @@ } .details-section { - padding: 2rem 3rem; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); diff --git a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-review/bookdrop-file-review.component.ts b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-review/bookdrop-file-review.component.ts index 5d069ecb0..d1aa6c649 100644 --- a/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-review/bookdrop-file-review.component.ts +++ b/booklore-ui/src/app/features/bookdrop/component/bookdrop-file-review/bookdrop-file-review.component.ts @@ -86,6 +86,7 @@ export class BookdropFileReviewComponent implements OnInit { copiedFlags: Record = {}; loading = true; saving = false; + includeCoversOnCopy = true; pageSize = 50; totalRecords = 0; @@ -231,13 +232,13 @@ export class BookdropFileReviewComponent implements OnInit { }); } - copyAll(includeThumbnail: boolean): void { + copyAll(): void { Object.values(this.fileUiCache).forEach(fileUi => { const fetched = fileUi.file.fetchedMetadata; const form = fileUi.metadataForm; if (!fetched) return; for (const key of Object.keys(fetched)) { - if (!includeThumbnail && key === 'thumbnailUrl') continue; + if (!this.includeCoversOnCopy && key === 'thumbnailUrl') continue; const value = fetched[key as keyof typeof fetched]; if (value != null) { form.get(key)?.setValue(value); @@ -248,8 +249,16 @@ export class BookdropFileReviewComponent implements OnInit { }); } - resetAll(): void { - Object.values(this.fileUiCache).forEach(fileUi => { + resetMetadata(): void { + const selectedFiles = Object.values(this.fileUiCache).filter(file => { + if (this.selectAllAcrossPages) { + return !this.excludedFiles.has(file.file.id); + } else { + return file.selected; + } + }); + + const files = selectedFiles.map(fileUi => { const original = fileUi.file.originalMetadata; fileUi.metadataForm.patchValue({ title: original?.title || null, @@ -283,8 +292,8 @@ export class BookdropFileReviewComponent implements OnInit { }); fileUi.copiedFields = {}; fileUi.savedFields = {}; + this.copiedFlags[fileUi.file.id] = false; }); - this.copiedFlags = {}; } selectAll(selected: boolean): void { @@ -317,6 +326,26 @@ export class BookdropFileReviewComponent implements OnInit { this.syncCurrentPageSelection(); } + confirmReset(): void { + const selectedCount = this.selectedCount; + if (selectedCount === 0) { + this.messageService.add({ + severity: 'warn', + summary: 'No files selected', + detail: 'Please select files to reset metadata.', + }); + return; + } + + this.confirmationService.confirm({ + message: 'Are you sure you want to reset all metadata changes made to the selected files?', + header: 'Confirm Reset', + icon: 'pi pi-exclamation-triangle', + acceptButtonStyleClass: 'p-button-danger', + accept: () => this.resetMetadata() + }); + } + confirmFinalize(): void { const selectedCount = this.selectedCount; if (selectedCount === 0) { @@ -332,8 +361,7 @@ export class BookdropFileReviewComponent implements OnInit { message: `Are you sure you want to finalize the import of ${selectedCount} file${selectedCount !== 1 ? 's' : ''}?`, header: 'Confirm Finalize', icon: 'pi pi-exclamation-triangle', - acceptLabel: 'Yes', - rejectLabel: 'Cancel', + acceptButtonStyleClass: 'p-button-danger', accept: () => this.finalizeImport(), }); } @@ -353,6 +381,7 @@ export class BookdropFileReviewComponent implements OnInit { message: `Are you sure you want to delete ${selectedCount} selected Bookdrop file${selectedCount !== 1 ? 's' : ''}? This action cannot be undone.`, header: 'Confirm Delete', icon: 'pi pi-exclamation-triangle', + acceptButtonStyleClass: 'p-button-danger', accept: () => { const payload: any = { selectAll: this.selectAllAcrossPages,