Merge pull request #1441 from plone/contentbrowser-customcomponent

Fix unselecting items in custom components
plone · Mar 4, 2025 · 525f8e4 · 525f8e4
2 parents a265e4d + e746402
commit 525f8e4
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 123 deletions.
diff --git a/src/pat/contentbrowser/src/SelectedItem.svelte b/src/pat/contentbrowser/src/SelectedItem.svelte
@@ -4,10 +4,7 @@
 
     // item data
     export let item;
-
-    // parent method to remove selected item from list
-    const unselectItem = getContext("unselectItem");
-
+    export let unselectItem;
 </script>
 
 <div class="selected-item border border-secondary-subtle rounded p-2 mb-1 bg-body-tertiary" data-uuid={item.UID}>

diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -8,6 +8,7 @@
 
     let ref;
     let initializing = true;
+    let RegisteredSelectedItem;
 
     // get reactive context config
     const config = getContext("config");
@@ -21,30 +22,37 @@
     // showContentBrowser reactive state
     const showContentBrowser = getContext("showContentBrowser");
 
-    // get selectedItem component from registry.
-    // the registry key can be customized with pattern_options
-    // if an addon registers a custom component to a custom key
-    const RegisteredSelectedItem = plone_registry.getComponent(
-        $config.componentRegistryKeys?.selectedItem || "pat-contentbrowser.SelectedItem",
-    );
-
     onMount(async () => {
         await initializeSelectedItemsStore();
         initializeSorting();
         initializing = false;
     });
 
+    async function getSelectedItemComponent() {
+        // get selectedItem component from registry.
+        // the registry key can be customized with pattern_options
+        // if an addon registers a custom component to a custom key
+        if ($config.componentRegistryKeys?.selectedItem) {
+            RegisteredSelectedItem = plone_registry.getComponent(
+                $config.componentRegistryKeys.selectedItem,
+            );
+        }
+        // fallback if no custom component was registered
+        // or no valid component in registry
+        if (!RegisteredSelectedItem?.component) {
+            RegisteredSelectedItem = plone_registry.getComponent(
+                "pat-contentbrowser.SelectedItem",
+            );
+        }
+    }
+
     function unselectItem(uid) {
         selectedItems.update((n) => {
             return n.filter((x) => x.UID !== uid);
         });
         selectedUids.update(() => $selectedItems.map((x) => x.UID));
     }
 
-    // use this function in "SelectedItem" component with
-    // const unselectItem = getContext("unselectItem")
-    setContext("unselectItem", unselectItem);
-
     async function initializeSelectedItemsStore() {
         const initialValue = $config.selection.length
             ? $config.selection
@@ -123,9 +131,13 @@
         on:click={() => ($showContentBrowser = $selectedItems.length ? false : true)}
     >
         {#if $selectedItems}
-            {#each $selectedItems as selItem, i (selItem.UID)}
-                <div use:LoadSelectedItemComponent={{ item: selItem }} />
-            {/each}
+            {#await getSelectedItemComponent() then}
+                {#each $selectedItems as selItem, i (selItem.UID)}
+                    <div use:LoadSelectedItemComponent={{ item: selItem, unselectItem: unselectItem }} />
+                {/each}
+            {:catch error}
+                <p style="color: red">{error.message}</p>
+            {/await}
         {/if}
         {#if !$selectedItems}
             <p>{_t("loading selected items")}</p>