From 484da7936d8780fe35d6cc28d56d2ca8eb562ecb Mon Sep 17 00:00:00 2001 From: ACX <8075870+acx10@users.noreply.github.com> Date: Fri, 6 Mar 2026 17:29:32 -0700 Subject: [PATCH] Allow importing and exporting magic shelf JSON from the UI (#3183) (#3210) --- .../service/library-shelf-menu.service.ts | 11 +++++ .../component/magic-shelf-component.html | 20 +++++++++ .../component/magic-shelf-component.scss | 23 ++++++++++ .../component/magic-shelf-component.ts | 43 ++++++++++++++++++- booklore-ui/src/i18n/en/book.json | 2 + booklore-ui/src/i18n/en/magic-shelf.json | 9 ++++ booklore-ui/src/i18n/es/book.json | 2 + booklore-ui/src/i18n/es/magic-shelf.json | 9 ++++ 8 files changed, 117 insertions(+), 2 deletions(-) diff --git a/booklore-ui/src/app/features/book/service/library-shelf-menu.service.ts b/booklore-ui/src/app/features/book/service/library-shelf-menu.service.ts index a737a310d..6b0eb9a62 100644 --- a/booklore-ui/src/app/features/book/service/library-shelf-menu.service.ts +++ b/booklore-ui/src/app/features/book/service/library-shelf-menu.service.ts @@ -244,6 +244,17 @@ export class LibraryShelfMenuService { this.dialogLauncherService.openMagicShelfEditDialog((entity?.id as number)); } }, + { + label: this.t.translate('book.shelfMenuService.magicShelf.exportJson'), + icon: 'pi pi-copy', + command: () => { + if (entity?.filterJson) { + navigator.clipboard.writeText(entity.filterJson).then(() => { + this.messageService.add({severity: 'success', summary: this.t.translate('common.success'), detail: this.t.translate('book.shelfMenuService.toast.magicShelfJsonCopiedDetail')}); + }); + } + } + }, { separator: true }, diff --git a/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.html b/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.html index 08eea088c..309355cb6 100644 --- a/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.html +++ b/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.html @@ -72,6 +72,16 @@ } + @if (showImportPanel) { +
+ +
+ + +
+
+ } +
@@ -79,6 +89,16 @@
+ @if (!editMode) { + + }
= { standalone: true, imports: [ ReactiveFormsModule, + FormsModule, NgTemplateOutlet, InputText, Select, @@ -241,7 +243,8 @@ const READ_STATUS_KEYS: Record = { CheckboxModule, IconDisplayComponent, Tooltip, - TranslocoDirective + TranslocoDirective, + TextareaModule ] }) export class MagicShelfComponent implements OnInit { @@ -450,6 +453,8 @@ export class MagicShelfComponent implements OnInit { shelfId: number | null = null; isAdmin: boolean = false; editMode!: boolean; + showImportPanel = false; + importJson = ''; libraryService = inject(LibraryService); shelfService = inject(ShelfService); @@ -794,6 +799,40 @@ export class MagicShelfComponent implements OnInit { this.form.get('isPublic')?.setValue(checked); } + toggleImportPanel() { + this.showImportPanel = !this.showImportPanel; + if (this.showImportPanel) { + this.importJson = ''; + } + } + + applyImportedJson() { + const trimmed = this.importJson.trim(); + if (!trimmed) { + this.messageService.add({severity: 'warn', summary: this.t.translate('magicShelf.toast.validationErrorSummary'), detail: this.t.translate('magicShelf.importJson.emptyError')}); + return; + } + + let parsed: GroupRule; + try { + parsed = JSON.parse(trimmed); + } catch { + this.messageService.add({severity: 'error', summary: this.t.translate('magicShelf.toast.errorSummary'), detail: this.t.translate('magicShelf.importJson.parseError')}); + return; + } + + if (parsed.type !== 'group' || !Array.isArray(parsed.rules)) { + this.messageService.add({severity: 'error', summary: this.t.translate('magicShelf.toast.errorSummary'), detail: this.t.translate('magicShelf.importJson.structureError')}); + return; + } + + const builtGroup = this.buildGroupFromData(parsed); + this.form.setControl('group', builtGroup); + this.showImportPanel = false; + this.importJson = ''; + this.messageService.add({severity: 'success', summary: this.t.translate('magicShelf.toast.successSummary'), detail: this.t.translate('magicShelf.importJson.successDetail')}); + } + submit() { if (!this.hasAtLeastOneValidRule(this.group)) { this.messageService.add({severity: 'warn', summary: this.t.translate('magicShelf.toast.validationErrorSummary'), detail: this.t.translate('magicShelf.toast.validationErrorDetail')}); diff --git a/booklore-ui/src/i18n/en/book.json b/booklore-ui/src/i18n/en/book.json index 8478c8864..0b1553e71 100644 --- a/booklore-ui/src/i18n/en/book.json +++ b/booklore-ui/src/i18n/en/book.json @@ -279,6 +279,7 @@ "magicShelf": { "optionsLabel": "Options", "editMagicShelf": "Edit Magic Shelf", + "exportJson": "Copy JSON", "deleteMagicShelf": "Delete Magic Shelf" }, "confirm": { @@ -298,6 +299,7 @@ "shelfDeleteFailedDetail": "Failed to delete shelf", "magicShelfDeletedDetail": "Magic shelf was deleted", "magicShelfDeleteFailedDetail": "Failed to delete shelf", + "magicShelfJsonCopiedDetail": "Magic shelf JSON copied to clipboard", "failedSummary": "Failed" }, "loading": { diff --git a/booklore-ui/src/i18n/en/magic-shelf.json b/booklore-ui/src/i18n/en/magic-shelf.json index f24d00ed3..d22aca63f 100644 --- a/booklore-ui/src/i18n/en/magic-shelf.json +++ b/booklore-ui/src/i18n/en/magic-shelf.json @@ -265,6 +265,15 @@ "comicCoverArtists": "Cover Artists", "comicEditors": "Editors" }, + "importJson": { + "buttonLabel": "Import", + "placeholder": "{\n \"type\": \"group\",\n \"join\": \"and\",\n \"rules\": [\n { \"field\": \"readStatus\", \"operator\": \"equals\", \"value\": \"READING\" }\n ]\n}", + "apply": "Apply", + "emptyError": "Please paste a JSON configuration first.", + "parseError": "Invalid JSON. Please check the syntax and try again.", + "structureError": "Invalid structure. The JSON must have \"type\": \"group\" and a \"rules\" array.", + "successDetail": "Rules imported successfully. Review and save when ready." + }, "toast": { "validationErrorSummary": "Validation Error", "validationErrorDetail": "You must add at least one valid rule before saving.", diff --git a/booklore-ui/src/i18n/es/book.json b/booklore-ui/src/i18n/es/book.json index 1ce765ba9..84578a807 100644 --- a/booklore-ui/src/i18n/es/book.json +++ b/booklore-ui/src/i18n/es/book.json @@ -279,6 +279,7 @@ "magicShelf": { "optionsLabel": "Opciones", "editMagicShelf": "Editar estante mágico", + "exportJson": "Copiar JSON", "deleteMagicShelf": "Eliminar estante mágico" }, "confirm": { @@ -298,6 +299,7 @@ "shelfDeleteFailedDetail": "Error al eliminar el estante", "magicShelfDeletedDetail": "Estante mágico eliminado", "magicShelfDeleteFailedDetail": "Error al eliminar el estante", + "magicShelfJsonCopiedDetail": "JSON del estante mágico copiado al portapapeles", "failedSummary": "Error" }, "loading": { diff --git a/booklore-ui/src/i18n/es/magic-shelf.json b/booklore-ui/src/i18n/es/magic-shelf.json index 1cafcd5d9..b5c2d5d3f 100644 --- a/booklore-ui/src/i18n/es/magic-shelf.json +++ b/booklore-ui/src/i18n/es/magic-shelf.json @@ -265,6 +265,15 @@ "comicCoverArtists": "Artistas de Portada", "comicEditors": "Editores" }, + "importJson": { + "buttonLabel": "Importar", + "placeholder": "{\n \"type\": \"group\",\n \"join\": \"and\",\n \"rules\": [\n { \"field\": \"readStatus\", \"operator\": \"equals\", \"value\": \"READING\" }\n ]\n}", + "apply": "Aplicar", + "emptyError": "Pegue una configuración JSON primero.", + "parseError": "JSON inválido. Verifique la sintaxis e intente de nuevo.", + "structureError": "Estructura inválida. El JSON debe tener \"type\": \"group\" y un arreglo \"rules\".", + "successDetail": "Reglas importadas exitosamente. Revise y guarde cuando esté listo." + }, "toast": { "validationErrorSummary": "Error de Validación", "validationErrorDetail": "Debe agregar al menos una regla válida antes de guardar.",