From 52e8433f993c815da232251b13a1796e10c8abaa Mon Sep 17 00:00:00 2001 From: emma Date: Mon, 27 Jan 2025 18:44:53 -0500 Subject: [PATCH] wip --- .../collections/collection-edit-dialog.ts | 14 ++- .../edit-dialog/general-section.ts | 45 +++++++- .../edit-dialog/sharing-section.ts | 107 +----------------- ...omepage-section.ts => thumbnail-select.ts} | 33 ++---- frontend/src/features/collections/index.ts | 2 +- 5 files changed, 66 insertions(+), 135 deletions(-) rename frontend/src/features/collections/edit-dialog/{homepage-section.ts => thumbnail-select.ts} (84%) diff --git a/frontend/src/features/collections/collection-edit-dialog.ts b/frontend/src/features/collections/collection-edit-dialog.ts index 34db016dbc..1b39343377 100644 --- a/frontend/src/features/collections/collection-edit-dialog.ts +++ b/frontend/src/features/collections/collection-edit-dialog.ts @@ -16,6 +16,10 @@ 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 SelectSnapshotDetail, + type SnapshotItem, +} from "./select-collection-start-page"; import { BtrixElement } from "@/classes/BtrixElement"; import type { Dialog } from "@/components/ui/dialog"; @@ -86,6 +90,9 @@ export class CollectionEdit extends BtrixElement { defaultThumbnailName: `${Thumbnail}` | null = this.collection ?.defaultThumbnailName as `${Thumbnail}` | null; + @state() + selectedSnapshot: SnapshotItem | null = null; + @query("btrix-dialog") readonly dialog?: Dialog; @@ -103,6 +110,11 @@ export class CollectionEdit extends BtrixElement { this.onReset(); this.collection = undefined; } + if (changedProperties.has("collection")) { + this.defaultThumbnailName = this.collection?.defaultThumbnailName as + | `${Thumbnail}` + | null; + } } readonly checkChanged = checkChanged.bind(this); @@ -196,7 +208,7 @@ export class CollectionEdit extends BtrixElement { > ${this.renderTab({ panel: "general", - icon: "info-lg", + icon: "info-square", string: msg("About"), })} ${this.renderTab({ diff --git a/frontend/src/features/collections/edit-dialog/general-section.ts b/frontend/src/features/collections/edit-dialog/general-section.ts index 836aaa2b1e..92eceea44b 100644 --- a/frontend/src/features/collections/edit-dialog/general-section.ts +++ b/frontend/src/features/collections/edit-dialog/general-section.ts @@ -13,6 +13,7 @@ import { DEFAULT_THUMBNAIL_VARIANT, Thumbnail, } from "../collection-thumbnail"; +import { type SelectSnapshotDetail } from "../select-collection-start-page"; import type { PublicCollection } from "@/types/collection"; @@ -67,7 +68,19 @@ export default function renderGeneral(this: CollectionEdit) { ${renderThumbnails.bind(this)()} - `; + + ) => { + this.selectedSnapshot = e.detail.item; + this.dispatchEvent( + new CustomEvent("btrix-change", { + bubbles: true, + }), + ); + }} + >`; } function renderThumbnails(this: CollectionEdit) { @@ -86,11 +99,23 @@ function renderThumbnails(this: CollectionEdit) { } const thumbnail = ( - thumbnail: Thumbnail | NonNullable, + thumbnail?: Thumbnail | NonNullable, ) => { let name: Thumbnail | null = null; let path = ""; + if (!thumbnail) + return html` `; + if (Object.values(Thumbnail).some((t) => t === thumbnail)) { name = thumbnail as Thumbnail; path = CollectionThumbnail.Variants[name].path; @@ -110,7 +135,7 @@ function renderThumbnails(this: CollectionEdit) { - - `; - }; - - return html` -
- ${when(this.collection?.thumbnail, (t) => thumbnail(t))} - ${thumbnail(Thumbnail.Cyan)} ${thumbnail(Thumbnail.Green)} - ${thumbnail(Thumbnail.Yellow)} ${thumbnail(Thumbnail.Orange)} -
- `; - } } diff --git a/frontend/src/features/collections/edit-dialog/homepage-section.ts b/frontend/src/features/collections/edit-dialog/thumbnail-select.ts similarity index 84% rename from frontend/src/features/collections/edit-dialog/homepage-section.ts rename to frontend/src/features/collections/edit-dialog/thumbnail-select.ts index 7ba36921b9..11d07399e8 100644 --- a/frontend/src/features/collections/edit-dialog/homepage-section.ts +++ b/frontend/src/features/collections/edit-dialog/thumbnail-select.ts @@ -12,6 +12,7 @@ import { import type { SelectSnapshotDetail } from "../select-collection-start-page"; import { BtrixElement } from "@/classes/BtrixElement"; +import { type Collection } from "@/types/collection"; const OPTIONS: Record< HomeView, @@ -29,11 +30,11 @@ const OPTIONS: Record< }, }; -@customElement("btrix-collection-homepage-settings") +@customElement("btrix-collection-thumbnail-select") @localized() -export class CollectionHomepageSettings extends BtrixElement { - @property({ type: String }) - collectionId?: string; +export class CollectionThumbnailSelect extends BtrixElement { + @property({ type: Object }) + collection?: Collection; @property({ type: String }) homeUrl?: string | null = null; @@ -50,8 +51,6 @@ export class CollectionHomepageSettings extends BtrixElement { @state() homeView = HomeView.Pages; - useThumbnail = true; - @state() selectedSnapshot?: SelectSnapshotDetail["item"]; @@ -88,11 +87,11 @@ export class CollectionHomepageSettings extends BtrixElement { } : null); - const replaySource = `/api/orgs/${this.orgId}/collections/${this.collectionId}/replay.json`; + const replaySource = `/api/orgs/${this.orgId}/collections/${this.collection!.id}/replay.json`; // TODO Get query from replay-web-page embed const query = queryString.stringify({ source: replaySource, - customColl: this.collectionId, + customColl: this.collection!.id, embed: "default", noCache: 1, noSandbox: 1, @@ -107,7 +106,7 @@ export class CollectionHomepageSettings extends BtrixElement { html` -
- ) => { - this.selectedSnapshot = e.detail.item; - this.dispatchEvent( - new CustomEvent("btrix-change", { - bubbles: true, - }), - ); - }} - > -
+
`, )} `; diff --git a/frontend/src/features/collections/index.ts b/frontend/src/features/collections/index.ts index cb6463e6db..f18fa3cda5 100644 --- a/frontend/src/features/collections/index.ts +++ b/frontend/src/features/collections/index.ts @@ -10,4 +10,4 @@ import("./select-collection-start-page"); import("./share-collection"); import("./collection-thumbnail"); import("./edit-dialog/sharing-section"); -import("./edit-dialog/homepage-section"); +import("./edit-dialog/thumbnail-select");