get most aspects of dialog working!

webrecorder · Jan 28, 2025 · cd004fe · cd004fe
1 parent 52e8433
commit cd004fe
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 196 deletions.
diff --git a/frontend/src/features/collections/collection-edit-dialog.ts b/frontend/src/features/collections/collection-edit-dialog.ts
@@ -16,10 +16,7 @@ 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 { type CollectionThumbnailSelect } from "./edit-dialog/thumbnail-select";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
@@ -90,9 +87,6 @@ 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;
 
@@ -102,6 +96,9 @@ export class CollectionEdit extends BtrixElement {
   @query("btrix-collection-share-settings")
   readonly shareSettings?: CollectionShareSettings;
 
+  @query("btrix-collection-thumbnail-select")
+  readonly thumbnailSelector?: CollectionThumbnailSelect;
+
   protected willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has("collectionId") && this.collectionId) {
       void this.fetchCollection(this.collectionId);

diff --git a/frontend/src/features/collections/edit-dialog/general-section.ts b/frontend/src/features/collections/edit-dialog/general-section.ts
@@ -13,7 +13,6 @@ import {
   DEFAULT_THUMBNAIL_VARIANT,
   Thumbnail,
 } from "../collection-thumbnail";
-import { type SelectSnapshotDetail } from "../select-collection-start-page";
 
 import type { PublicCollection } from "@/types/collection";
 
@@ -69,18 +68,11 @@ export default function renderGeneral(this: CollectionEdit) {
       </div>
       ${renderThumbnails.bind(this)()}
     </div>
-    <btrix-select-collection-start-page
+    <btrix-collection-thumbnail-select
       .collection=${this.collection}
-      .collectionId=${this.collectionId || this.collection.id}
-      @btrix-select=${async (e: CustomEvent<SelectSnapshotDetail>) => {
-        this.selectedSnapshot = e.detail.item;
-        this.dispatchEvent(
-          new CustomEvent("btrix-change", {
-            bubbles: true,
-          }),
-        );
-      }}
-    ></btrix-select-collection-start-page>`;
+      .replayLoaded=${this.replayLoaded}
+    >
+    </btrix-collection-thumbnail-select>`;
 }
 
 function renderThumbnails(this: CollectionEdit) {

diff --git a/frontend/src/features/collections/edit-dialog/helpers/check-changed.ts b/frontend/src/features/collections/edit-dialog/helpers/check-changed.ts
@@ -1,36 +1,28 @@
 import { type CollectionEdit } from "../../collection-edit-dialog";
-import { HomeView } from "../../collection-snapshot-preview";
 
 import gatherState from "./gather-state";
 
 import type { CollectionUpdate } from "@/types/collection";
 
 export default async function checkChanged(this: CollectionEdit) {
   try {
-    const { collectionUpdate, homepage } = await gatherState.bind(this)();
+    const { collectionUpdate, thumbnail } = await gatherState.bind(this)();
     const updates = (
       Object.entries(collectionUpdate) as [
         keyof CollectionUpdate,
         CollectionUpdate[keyof CollectionUpdate],
       ][]
     ).filter(([name, value]) => this.collection?.[name] !== value) as [
-      keyof CollectionUpdate | "homepage",
-      CollectionUpdate[keyof CollectionUpdate] | typeof homepage,
+      keyof CollectionUpdate | "thumbnail",
+      CollectionUpdate[keyof CollectionUpdate] | typeof thumbnail,
     ][];
 
-    const pageId =
-      (homepage.homeView === HomeView.URL &&
-        homepage.selectedSnapshot?.pageId) ||
-      null;
-
     const shouldUpload =
-      homepage.homeView === HomeView.URL &&
-      homepage.useThumbnail &&
-      homepage.selectedSnapshot &&
-      this.collection?.homeUrlPageId !== homepage.selectedSnapshot.pageId;
+      thumbnail.selectedSnapshot &&
+      this.collection?.thumbnail?.thumbnailPage !== thumbnail.selectedSnapshot;
 
-    if (pageId != this.collection?.homeUrlPageId || shouldUpload) {
-      updates.push(["homepage", homepage]);
+    if (shouldUpload) {
+      updates.push(["thumbnail", thumbnail]);
     }
     console.log({ updates });
     if (updates.length > 0) {

diff --git a/frontend/src/features/collections/edit-dialog/helpers/gather-state.ts b/frontend/src/features/collections/edit-dialog/helpers/gather-state.ts
@@ -14,12 +14,6 @@ import {
 export default async function gatherState(this: CollectionEdit) {
   const form = await this.form;
 
-  if (!this.descriptionEditor?.checkValidity()) {
-    this.errorTab = "about";
-    void this.descriptionEditor?.focus();
-    throw new Error("invalid_data");
-  }
-
   const elements = getFormControls(form);
   const invalidElement = elements.find(
     (el) => !(el as HTMLInputElement).checkValidity(),
@@ -34,28 +28,21 @@ export default async function gatherState(this: CollectionEdit) {
     this.errorTab = null;
   }
 
-  const description = this.descriptionEditor.value;
-
-  const { access, allowPublicDownload, defaultThumbnailName } =
-    this.shareSettings ?? {};
+  const { access, allowPublicDownload } = this.shareSettings ?? {};
 
   const formData = serialize(form) as CollectionUpdate;
 
-  const { homeView, useThumbnail, selectedSnapshot } = this.homepageSettings!;
+  const selectedSnapshot = this.thumbnailSelector?.selectedSnapshot;
 
   const data = {
     ...formData,
-    description,
     access,
     allowPublicDownload,
-    defaultThumbnailName,
   };
 
   return {
     collectionUpdate: collectionUpdateSchema.parse(data),
-    homepage: {
-      homeView,
-      useThumbnail,
+    thumbnail: {
       selectedSnapshot,
     },
   };

diff --git a/frontend/src/features/collections/edit-dialog/helpers/submit-task.ts b/frontend/src/features/collections/edit-dialog/helpers/submit-task.ts
@@ -5,10 +5,11 @@ import {
   type CollectionEdit,
   type CollectionSavedEvent,
 } from "../../collection-edit-dialog";
-import { HomeView } from "../../collection-snapshot-preview";
-import { type SnapshotItem } from "../../select-collection-start-page";
 
-import { type CollectionUpdate } from "@/types/collection";
+import {
+  type CollectionThumbnailPage,
+  type CollectionUpdate,
+} from "@/types/collection";
 import { isApiError } from "@/utils/api";
 
 export default function submitTask(
@@ -20,55 +21,25 @@ export default function submitTask(
       const updates = await this.checkChanged();
       if (!updates) throw new Error("invalid_data");
       const updateObject = Object.fromEntries(updates) as CollectionUpdate & {
-        homepage?: {
-          homeView: `${HomeView}`;
-          useThumbnail: "on" | "off";
-          selectedSnapshot: SnapshotItem | null;
+        thumbnail?: {
+          selectedSnapshot: CollectionThumbnailPage;
         };
       };
-      const { homepage, ...rest } = updateObject;
-      const pageId =
-        (homepage?.homeView === HomeView.URL &&
-          homepage.selectedSnapshot?.pageId) ||
-        null;
+      const { thumbnail: { selectedSnapshot } = {}, ...rest } = updateObject;
       const tasks = [];
 
-      if (this.collection.homeUrlPageId !== pageId) {
-        tasks.push(
-          this.api.fetch(
-            `/orgs/${this.orgId}/collections/${this.collection.id}/home-url`,
-            {
-              method: "POST",
-              body: JSON.stringify({
-                pageId,
-              }),
-              signal,
-            },
-          ),
-        );
-      }
-
-      const shouldUpload =
-        homepage?.homeView === HomeView.URL &&
-        homepage.useThumbnail === "on" &&
-        homepage.selectedSnapshot &&
-        this.homePageId !== homepage.selectedSnapshot.pageId;
-
       // TODO get filename from rwp?
-      const fileName = `page-thumbnail_${homepage?.selectedSnapshot?.pageId}.jpeg`;
+      const fileName = `page-thumbnail_${selectedSnapshot?.urlPageId}.jpeg`;
       let file: File | undefined;
 
-      if (shouldUpload && this.homepageSettings?.thumbnailPreview) {
-        const blob = await this.homepageSettings.thumbnailPreview.thumbnailBlob;
-
+      if (selectedSnapshot) {
+        const blob =
+          await this.thumbnailSelector?.thumbnailPreview?.thumbnailBlob;
         if (blob) {
           file = new File([blob], fileName, {
             type: blob.type,
           });
         }
-      }
-
-      if (shouldUpload) {
         if (!file) throw new Error("invalid_data");
         tasks.push(
           this.api.upload(
@@ -79,7 +50,8 @@ export default function submitTask(
         );
         rest.defaultThumbnailName = null;
       }
-      console.log({ rest, shouldUpload });
+
+      console.log({ rest });
       if (Object.keys(rest).length)
         tasks.push(
           await this.api.fetch<{ updated: boolean }>(