From 32078be60bb9618f60eee621359b65fb47f3a40f Mon Sep 17 00:00:00 2001 From: emma Date: Thu, 30 Jan 2025 18:33:17 -0500 Subject: [PATCH] clean up thumbnail selector & add better error handling & informing --- .../collections/collection-edit-dialog.ts | 11 ++-- .../collection-snapshot-preview.ts | 6 +- .../edit-dialog/general-section.ts | 54 +++++++++++++---- .../edit-dialog/helpers/gather-state.ts | 2 +- .../edit-dialog/thumbnail-select.ts | 59 ------------------- frontend/src/features/collections/index.ts | 1 - .../select-collection-start-page.ts | 22 +++---- 7 files changed, 65 insertions(+), 90 deletions(-) delete mode 100644 frontend/src/features/collections/edit-dialog/thumbnail-select.ts diff --git a/frontend/src/features/collections/collection-edit-dialog.ts b/frontend/src/features/collections/collection-edit-dialog.ts index 3c563db9c..fc41725bb 100644 --- a/frontend/src/features/collections/collection-edit-dialog.ts +++ b/frontend/src/features/collections/collection-edit-dialog.ts @@ -17,7 +17,6 @@ import renderGeneral from "./edit-dialog/general-section"; import checkChanged from "./edit-dialog/helpers/check-changed"; import submitTask from "./edit-dialog/helpers/submit-task"; import { type CollectionShareSettings } from "./edit-dialog/sharing-section"; -import { type CollectionThumbnailSelect } from "./edit-dialog/thumbnail-select"; import { BtrixElement } from "@/classes/BtrixElement"; import type { Dialog } from "@/components/ui/dialog"; @@ -110,8 +109,8 @@ export class CollectionEdit extends BtrixElement { @queryAsync("btrix-collection-share-settings") readonly shareSettings?: Promise; - @query("btrix-collection-thumbnail-select") - readonly thumbnailSelector?: CollectionThumbnailSelect; + // @query("btrix-collection-thumbnail-select") + // readonly thumbnailSelector?: CollectionThumbnailSelect; @query("btrix-collection-snapshot-preview") public readonly thumbnailPreview?: CollectionSnapshotPreview | null; @@ -124,7 +123,10 @@ export class CollectionEdit extends BtrixElement { this.onReset(); this.collection = undefined; } - if (changedProperties.has("collection")) { + if ( + changedProperties.has("collection") && + changedProperties.get("collection")?.id != this.collection?.id + ) { this.defaultThumbnailName = (this.collection?.defaultThumbnailName as `${Thumbnail}` | null) || null; @@ -171,6 +173,7 @@ export class CollectionEdit extends BtrixElement { this.dirty = false; this.errorTab = null; this.blobIsLoaded = false; + console.log("BBBBB"); this.selectedSnapshot = this.collection?.thumbnailSource ?? null; this.defaultThumbnailName = (this.collection?.defaultThumbnailName as diff --git a/frontend/src/features/collections/collection-snapshot-preview.ts b/frontend/src/features/collections/collection-snapshot-preview.ts index 220911cc6..c5d9b1cb7 100644 --- a/frontend/src/features/collections/collection-snapshot-preview.ts +++ b/frontend/src/features/collections/collection-snapshot-preview.ts @@ -66,7 +66,7 @@ export class CollectionSnapshotPreview extends TailwindElement { return this.blobTask.taskComplete.then(() => this.blobTask.value); } - private readonly blobTask = new Task(this, { + public readonly blobTask = new Task(this, { task: async ([collectionId, snapshot], { signal }) => { try { console.debug("waiting for iframe to load", { collectionId, snapshot }); @@ -231,9 +231,9 @@ export class CollectionSnapshotPreview extends TailwindElement { private readonly renderError = () => html`

- ${msg("Couldn't load preview. Try another URL or timestamp.")} + ${msg("This page doesn’t have a preview. Try another URL or timestamp.")}

`; diff --git a/frontend/src/features/collections/edit-dialog/general-section.ts b/frontend/src/features/collections/edit-dialog/general-section.ts index 14f824871..6767e9762 100644 --- a/frontend/src/features/collections/edit-dialog/general-section.ts +++ b/frontend/src/features/collections/edit-dialog/general-section.ts @@ -1,4 +1,5 @@ import { msg } from "@lit/localize"; +import { TaskStatus } from "@lit/task"; import { type SlInput } from "@shoelace-style/shoelace"; import clsx from "clsx"; import { html, nothing } from "lit"; @@ -16,8 +17,9 @@ import { DEFAULT_THUMBNAIL_VARIANT, Thumbnail, } from "../collection-thumbnail"; +import { type SelectSnapshotDetail } from "../select-collection-start-page"; -import { sourceToSnapshot } from "./helpers/snapshots"; +import { snapshotToSource, sourceToSnapshot } from "./helpers/snapshots"; import type { PublicCollection } from "@/types/collection"; import { tw } from "@/utils/tailwind"; @@ -61,16 +63,44 @@ export default function renderGeneral(this: CollectionEdit) {
${renderThumbnails.bind(this)()}
- { - await this.updateComplete; - this.selectedSnapshot = - this.thumbnailSelector?.selectedSnapshot ?? null; - }} - > - `; +
+ ) => { + if (!e.detail.item) return; + this.dispatchEvent(new CustomEvent("btrix-change")); + await this.updateComplete; + this.selectedSnapshot = snapshotToSource(e.detail.item); + }} + > + ${this.thumbnailPreview?.blobTask.status === TaskStatus.PENDING + ? html`` + : nothing} + ${this.thumbnailPreview?.blobTask.status === TaskStatus.ERROR + ? html` + + ` + : nothing} + +
`; } function renderThumbnails(this: CollectionEdit) { @@ -214,7 +244,7 @@ function renderPageThumbnail( (!!this.selectedSnapshot && this.blobIsLoaded) || !!initialPath; console.log({ - selectedSnapshot: !!this.selectedSnapshot, + selectedSnapshot: this.selectedSnapshot, blobIsLoaded: !!this.blobIsLoaded, initialPath: !!initialPath, }); diff --git a/frontend/src/features/collections/edit-dialog/helpers/gather-state.ts b/frontend/src/features/collections/edit-dialog/helpers/gather-state.ts index cab0eb120..8d7a3f17c 100644 --- a/frontend/src/features/collections/edit-dialog/helpers/gather-state.ts +++ b/frontend/src/features/collections/edit-dialog/helpers/gather-state.ts @@ -32,7 +32,7 @@ export default async function gatherState(this: CollectionEdit) { const formData = serialize(form) as CollectionUpdate; - const selectedSnapshot = this.thumbnailSelector?.selectedSnapshot; + const selectedSnapshot = this.selectedSnapshot; if (this.defaultThumbnailName == null && !selectedSnapshot) { formData.thumbnailSource = null; diff --git a/frontend/src/features/collections/edit-dialog/thumbnail-select.ts b/frontend/src/features/collections/edit-dialog/thumbnail-select.ts deleted file mode 100644 index bb4083715..000000000 --- a/frontend/src/features/collections/edit-dialog/thumbnail-select.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { localized } from "@lit/localize"; -import { html, type PropertyValues } from "lit"; -import { customElement, property, state } from "lit/decorators.js"; - -import type { SelectSnapshotDetail } from "../select-collection-start-page"; - -import { snapshotToSource } from "./helpers/snapshots"; - -import { BtrixElement } from "@/classes/BtrixElement"; -import { - type Collection, - type CollectionThumbnailSource, -} from "@/types/collection"; - -@customElement("btrix-collection-thumbnail-select") -@localized() -export class CollectionThumbnailSelect extends BtrixElement { - @property({ type: Object }) - collection?: Collection; - - @property({ type: Boolean }) - replayLoaded = false; - - @state() - selectedSnapshot: CollectionThumbnailSource | null = - this.collection?.thumbnailSource ?? null; - - protected willUpdate(changedProperties: PropertyValues): void { - if (changedProperties.has("collection")) { - this.selectedSnapshot = this.collection?.thumbnailSource ?? null; - } - } - - render() { - return html`
- ) => { - this.dispatchEvent( - new CustomEvent("btrix-change", { - bubbles: true, - }), - ); - if (!e.detail.item) return; - this.selectedSnapshot = snapshotToSource(e.detail.item); - }} - > -
`; - } -} diff --git a/frontend/src/features/collections/index.ts b/frontend/src/features/collections/index.ts index c3caf3719..49e118fd7 100644 --- a/frontend/src/features/collections/index.ts +++ b/frontend/src/features/collections/index.ts @@ -10,4 +10,3 @@ import("./select-collection-start-page"); import("./share-collection"); import("./collection-thumbnail"); import("./edit-dialog/sharing-section"); -import("./edit-dialog/thumbnail-select"); diff --git a/frontend/src/features/collections/select-collection-start-page.ts b/frontend/src/features/collections/select-collection-start-page.ts index 72dfea1e8..847413ba5 100644 --- a/frontend/src/features/collections/select-collection-start-page.ts +++ b/frontend/src/features/collections/select-collection-start-page.ts @@ -275,16 +275,18 @@ export class SelectCollectionPage extends BtrixElement { @sl-blur=${this.pageUrlOnBlur} >
- - - + + + + +
${this.renderSearchResults()}