From 659e124168b268188255d5776e0c3edc8c908f25 Mon Sep 17 00:00:00 2001 From: Emma Segal-Grossman Date: Fri, 14 Feb 2025 01:03:13 -0500 Subject: [PATCH] Disable "Update collection thumbnail" checkbox on initial page selection dialog until thumbnail is loaded (#2392) Closes #2391 --- ...g.ts => collection-initial-view-dialog.ts} | 21 ++++++++++++++----- .../collection-snapshot-preview.ts | 6 +++--- .../edit-dialog/presentation-section.ts | 4 ++-- frontend/src/features/collections/index.ts | 2 +- frontend/src/pages/org/collection-detail.ts | 4 ++-- 5 files changed, 24 insertions(+), 13 deletions(-) rename frontend/src/features/collections/{collection-replay-dialog.ts => collection-initial-view-dialog.ts} (94%) diff --git a/frontend/src/features/collections/collection-replay-dialog.ts b/frontend/src/features/collections/collection-initial-view-dialog.ts similarity index 94% rename from frontend/src/features/collections/collection-replay-dialog.ts rename to frontend/src/features/collections/collection-initial-view-dialog.ts index 618381032b..7825d2d5f7 100644 --- a/frontend/src/features/collections/collection-replay-dialog.ts +++ b/frontend/src/features/collections/collection-initial-view-dialog.ts @@ -8,6 +8,7 @@ import queryString from "query-string"; import { HomeView, + type BtrixValidateDetail, type CollectionSnapshotPreview, } from "./collection-snapshot-preview"; import type { SelectSnapshotDetail } from "./select-collection-page"; @@ -20,8 +21,8 @@ import type { Collection } from "@/types/collection"; * @fires btrix-change */ @localized() -@customElement("btrix-collection-replay-dialog") -export class CollectionStartPageDialog extends BtrixElement { +@customElement("btrix-collection-initial-view-dialog") +export class CollectionInitialViewDialog extends BtrixElement { static readonly Options: Record< HomeView, { label: string; icon: NonNullable; detail: string } @@ -71,6 +72,9 @@ export class CollectionStartPageDialog extends BtrixElement { @query("#thumbnailPreview") private readonly thumbnailPreview?: CollectionSnapshotPreview | null; + @state() + validThumbnail = false; + willUpdate(changedProperties: PropertyValues) { if (changedProperties.has("collection") && this.collection) { this.homeView = this.collection.homeUrl ? HomeView.URL : HomeView.Pages; @@ -174,6 +178,12 @@ export class CollectionStartPageDialog extends BtrixElement { view=${this.homeView} replaySrc=${`/replay/?${query}#view=pages`} .snapshot=${snapshot} + @btrix-validate=${({ + detail: { valid }, + }: CustomEvent) => { + console.log({ valid }); + this.validThumbnail = valid; + }} > @@ -192,7 +202,7 @@ export class CollectionStartPageDialog extends BtrixElement { } private renderForm() { - const { icon, detail } = CollectionStartPageDialog.Options[this.homeView]; + const { icon, detail } = CollectionInitialViewDialog.Options[this.homeView]; return html`
@@ -226,7 +236,7 @@ export class CollectionStartPageDialog extends BtrixElement { ${Object.values(HomeView).map((homeView) => { const { label, icon, detail } = - CollectionStartPageDialog.Options[homeView]; + CollectionInitialViewDialog.Options[homeView]; return html` @@ -255,7 +265,8 @@ export class CollectionStartPageDialog extends BtrixElement { ("btrix-validate", { + new CustomEvent("btrix-validate", { detail: { valid: true }, }), ); @@ -105,7 +105,7 @@ export class CollectionSnapshotPreview extends TailwindElement { console.error(e); if (signal.aborted) return; this.dispatchEvent( - new CustomEvent("btrix-validate", { + new CustomEvent("btrix-validate", { detail: { valid: false }, }), ); diff --git a/frontend/src/features/collections/edit-dialog/presentation-section.ts b/frontend/src/features/collections/edit-dialog/presentation-section.ts index 18da48d407..f4d913a00e 100644 --- a/frontend/src/features/collections/edit-dialog/presentation-section.ts +++ b/frontend/src/features/collections/edit-dialog/presentation-section.ts @@ -12,7 +12,7 @@ import { validateNameMax, type CollectionEdit, } from "../collection-edit-dialog"; -import { type BtrixValidateDetails } from "../collection-snapshot-preview"; +import { type BtrixValidateDetail } from "../collection-snapshot-preview"; import { CollectionThumbnail, DEFAULT_THUMBNAIL_VARIANT, @@ -305,7 +305,7 @@ function renderPageThumbnail( isEqual(this.selectedSnapshot, this.collection?.thumbnailSource)} @btrix-validate=${({ detail: { valid }, - }: CustomEvent) => { + }: CustomEvent) => { if (this.defaultThumbnailName == null && !valid) { this.errorTab = "general"; } else { diff --git a/frontend/src/features/collections/index.ts b/frontend/src/features/collections/index.ts index 1163924aaa..2ed846c3b7 100644 --- a/frontend/src/features/collections/index.ts +++ b/frontend/src/features/collections/index.ts @@ -3,7 +3,7 @@ import("./collections-grid"); import("./collection-items-dialog"); import("./collection-edit-dialog"); import("./collection-create-dialog"); -import("./collection-replay-dialog"); +import("./collection-initial-view-dialog"); import("./collection-workflow-list"); import("./select-collection-access"); import("./select-collection-page"); diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts index ce2c125fac..5e8fa5264d 100644 --- a/frontend/src/pages/org/collection-detail.ts +++ b/frontend/src/pages/org/collection-detail.ts @@ -328,7 +328,7 @@ export class CollectionDetail extends BtrixElement { > - { // Don't do full refresh of rwp so that rwp-url-change fires @@ -341,7 +341,7 @@ export class CollectionDetail extends BtrixElement { .collection=${this.collection} ?replayLoaded=${this.isRwpLoaded} > - +