From 68baecc3f2efe2df66e7aebc1fa3a6f33ae13f7f Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Fri, 15 Mar 2024 23:31:28 +0100
Subject: [PATCH] grid view, use SearchableText, levelInfo

---
 .../contentbrowser/src/ContentBrowser.svelte  | 44 ++++++++++++++---
 src/pat/contentbrowser/src/ContentStore.js    | 48 ++++++++++++++-----
 .../contentbrowser/src/SelectedItems.svelte   |  6 +--
 src/pat/contentbrowser/src/stores.js          |  3 +-
 4 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/src/pat/contentbrowser/src/ContentBrowser.svelte b/src/pat/contentbrowser/src/ContentBrowser.svelte
index e00637a2f..a36b4d0d4 100644
--- a/src/pat/contentbrowser/src/ContentBrowser.svelte
+++ b/src/pat/contentbrowser/src/ContentBrowser.svelte
@@ -53,7 +53,7 @@
             allowPathSelection: false,
             hiddenInputContainer: ".upload-wrapper",
             success: (fileUpload, obj) => {
-                contentItems.get($currentPath, null, null, true);
+                contentItems.get($currentPath, null, true);
             },
         });
     }
@@ -127,7 +127,7 @@
 
     $: {
         if ($config.vocabularyUrl) {
-            contentItems.get($currentPath, null, currentLevelData);
+            contentItems.get($currentPath);
         }
     }
 
@@ -199,9 +199,19 @@
                                     </button>
                                 {/if}
                                 <div class="levelActions">
-                                    <!-- <button class="btn btn-link btn-sm grid-view">
+                                    {#if !level.gridView}
+                                    <button class="btn btn-link btn-sm grid-view"
+                                        on:click={() => (level.gridView = true)}
+                                    >
                                         <svg use:resolveIcon={{ iconName: "grid" }} />
-                                    </button> -->
+                                    </button>
+                                    {:else}
+                                    <button class="btn btn-link btn-sm grid-view"
+                                        on:click={() => (level.gridView = false)}
+                                    >
+                                        <svg use:resolveIcon={{ iconName: "list" }} />
+                                    </button>
+                                    {/if}
                                 </div>
                             </div>
                             {#each level.results as item, n}
@@ -218,6 +228,20 @@
                                     on:keydown={() => changePath(item)}
                                     on:click={() => changePath(item)}
                                 >
+                                    {#if level.gridView}
+                                    <div class="grid-preview">
+                                        {#if item.getIcon}
+                                        <img src={`${item.getURL}/@@images/image/thumb`} alt={item.Title}>
+                                        {:else}
+                                        <svg
+                                            use:resolveIcon={{
+                                                iconName: `contenttype/${item.portal_type.toLowerCase().replace(/\.| /g, "-")}`,
+                                            }}
+                                        />
+                                        {/if}
+                                        {item.Title}
+                                    </div>
+                                    {:else}
                                     <div title={item.portal_type}>
                                         <svg
                                             use:resolveIcon={{
@@ -226,6 +250,7 @@
                                         />
                                         {item.Title}
                                     </div>
+                                    {/if}
                                     {#if item.is_folderish}
                                         <svg
                                             use:resolveIcon={{
@@ -285,8 +310,7 @@
         background-color: rgba(0, 0, 0, 0.25);
     }
     .content-browser {
-        height: 99vh;
-        /* padding: 1rem; */
+        height: 100vh;
         min-width: 550px;
         background-color: var(--bs-light-bg-subtle);
         border-left: var(--bs-border-style) var(--bs-border-width) #fff;
@@ -387,6 +411,13 @@
         max-width: 100%;
     }
 
+    .contentItem .grid-preview > img {
+        width:95px;
+        height:95px;
+        object-fit:cover;
+        float: left;
+        margin-right: 1rem;
+    }
     .preview {
         min-width: 320px;
         max-width: 500px;
@@ -397,6 +428,7 @@
     }
     .preview .info {
         padding: 0.5rem;
+        width: 100%;
     }
     .preview h4 {
         font-size: 1.2 rem;
diff --git a/src/pat/contentbrowser/src/ContentStore.js b/src/pat/contentbrowser/src/ContentStore.js
index 64ea90863..333ce5387 100644
--- a/src/pat/contentbrowser/src/ContentStore.js
+++ b/src/pat/contentbrowser/src/ContentStore.js
@@ -1,5 +1,5 @@
 import { writable, get } from "svelte/store";
-import { cache } from "./stores";
+import { pathCache } from "./stores";
 
 
 export default function (config) {
@@ -11,6 +11,7 @@ export default function (config) {
         uids = null,
         params = null,
         searchTerm = null,
+        levelInfoPath = null,
         selectableTypes = [],
     }) => {
         let vocabQuery = {
@@ -29,6 +30,17 @@ export default function (config) {
                 sort_order: "ascending",
             };
         }
+        if (levelInfoPath) {
+            vocabQuery = {
+                criteria: [
+                    {
+                        i: "path",
+                        o: "plone.app.querystring.operation.string.path",
+                        v: `${levelInfoPath}::0`,
+                    },
+                ],
+            };
+        }
         if (uids) {
             vocabQuery = {
                 criteria: [
@@ -42,7 +54,7 @@ export default function (config) {
         }
         if(searchTerm) {
             vocabQuery.criteria.push({
-                i: "Title",
+                i: "SearchableText",
                 o: "plone.app.querystring.operation.string.contains",
                 v: `${searchTerm}`,
 
@@ -92,7 +104,7 @@ export default function (config) {
         }
     };
 
-    store.get = async (path, searchTerm, levelData, skipCache) => {
+    store.get = async (path, searchTerm, skipCache) => {
         let parts = path.split("/") || [];
         const depth = parts.length >= config.maxDepth ? config.maxDepth : parts.length;
         let paths = [];
@@ -111,14 +123,15 @@ export default function (config) {
 
         let levels = [];
         let pathCounter = 0;
+
         for (var p of paths) {
             pathCounter++;
             const isFirstPath = pathCounter == 1;
             if(typeof skipCache === "undefined") {
-                skipCache = isFirstPath || searchTerm;
+                skipCache = isFirstPath && searchTerm;
             }
             let level = {};
-            const c = get(cache);
+            const c = get(pathCache);
             if (Object.keys(c).indexOf(p) === -1 || skipCache) {
                 let query = {
                     method: "GET"
@@ -130,22 +143,31 @@ export default function (config) {
                 queryPath = queryPath + p;
                 query["path"] = queryPath;
                 if(isFirstPath && searchTerm){
-                    query["searchTerm"] = searchTerm + "*";
+                    query["searchTerm"] = "*" + searchTerm + "*";
                 }
                 if(config.selectableTypes.length) {
                     query["selectableTypes"] = config.selectableTypes;
                 }
                 level = await store.request(query);
-                cache.update((n) => {
-                    n[p] = level;
-                    return n;
-                });
+                // do not update cache when searching
+                if(!skipCache) {
+                    const levelInfo = await store.request({
+                        "levelInfoPath": queryPath,
+                    });
+                    if (levelInfo.total) {
+                        level.UID = levelInfo.results[0].UID;
+                        level.Title = levelInfo.results[0].Title;
+                    }
+                    level.gridView = false;
+                    level.path = p;
+                    pathCache.update((n) => {
+                        n[p] = level;
+                        return n;
+                    });
+                }
             } else {
                 level = c[p];
             }
-            level.path = p;
-            level.UID = levelData?.UID;
-            level.Title = levelData?.Title;
             levels = [level, ...levels];
         }
         store.set(levels);
diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index dc3117375..303aa001d 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -115,10 +115,6 @@
         selectedItemsNode.value = node_val;
     }
 
-    function openContentBrowser() {
-        $showContentBrowser = true;
-    }
-
     $: {
         $selectedItems;
         console.log(
@@ -169,7 +165,7 @@
         style="border-radius:0 var(--bs-border-radius) var(--bs-border-radius) 0"
         disabled={$config.maximumSelectionSize > 0 &&
             ($selectedItems.length || 0) >= $config.maximumSelectionSize}
-        on:click|preventDefault={openContentBrowser}
+        on:click|preventDefault={() => ($showContentBrowser = true)}
         >{#if config.maximumSelectionSize == 1}choose{:else}add{/if}</button
     >
 </div>
diff --git a/src/pat/contentbrowser/src/stores.js b/src/pat/contentbrowser/src/stores.js
index 8a8d5cedd..2653f750b 100644
--- a/src/pat/contentbrowser/src/stores.js
+++ b/src/pat/contentbrowser/src/stores.js
@@ -2,7 +2,8 @@ import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 
 export const currentPath = writable('/');
-export const cache = writable({});
+export const gridView = writable(false);
+export const pathCache = writable({});
 
 // reactive context stores
 export function setSelectedItems() {