added records file picker support for the editor field

ui/src/components/admins/AdminUpsertPanel.svelte

@@ -160,7 +160,7 @@
                 {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as index}
                     <button
                         type="button"
-                        class="link-fade thumb thumb-circle {index == avatar ? 'thumb-active' : 'thumb-sm'}"
+                        class="link-fade thumb thumb-circle {index == avatar ? 'thumb-primary' : 'thumb-sm'}"
                         on:click={() => (avatar = index)}
                     >
                         <img

ui/src/components/base/FilterAutocompleteInput.svelte

@@ -219,7 +219,7 @@
 
         let result = CommonHelper.getAllCollectionIdentifiers(collection, prefix);
 
-        for (const field of collection.schema) {
+        for (const field of collection?.schema || []) {
             const key = prefix + field.name;
 
             // add relation fields

ui/src/components/base/Searchbar.svelte

@@ -54,6 +54,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <form class="searchbar" on:click|stopPropagation on:submit|preventDefault={submit}>
     <label for={uniqueId} class="m-l-10 txt-xl">
         <i class="ri-search-line" />
@@ -85,7 +86,7 @@
     {#if (value.length || tempValue.length) && tempValue != value}
         <button
             type="submit"
-            class="btn btn-expanded btn-sm btn-warning"
+            class="btn btn-expanded-sm btn-sm btn-warning"
             transition:fly={{ duration: 150, x: 5 }}
         >
             <span class="txt">Search</span>

ui/src/components/base/Select.svelte

@@ -12,6 +12,7 @@
     export let multiple = false;
     export let disabled = false;
     export let readonly = false;
+    export let upside = false;
     export let selected = multiple ? [] : undefined;
     export let toggle = multiple; // toggle option on click
     export let closable = true; // close the dropdown on option select/deselect
@@ -199,7 +200,7 @@
     });
 </script>
 
-<div bind:this={container} class="select {classes}" class:multiple class:disabled class:readonly>
+<div bind:this={container} class="select {classes}" class:upside class:multiple class:disabled class:readonly>
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
         bind:this={labelDiv}
@@ -218,6 +219,7 @@
 
                 {#if multiple || toggle}
                     <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-no-static-element-interactions -->
                     <span
                         class="clear"
                         use:tooltip={"Clear"}
@@ -237,7 +239,7 @@
     {#if !disabled && !readonly}
         <Toggler
             bind:this={toggler}
-            class="dropdown dropdown-block options-dropdown dropdown-left"
+            class="dropdown dropdown-block options-dropdown dropdown-left {upside ? 'dropdown-upside' : ''}"
             trigger={labelDiv}
             on:show={onDropdownShow}
             on:hide
@@ -276,6 +278,7 @@
             <div class="options-list">
                 {#each filteredItems as item}
                     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+                    <!-- svelte-ignore a11y-no-static-element-interactions -->
                     <div
                         tabindex="0"
                         class="dropdown-item option"

ui/src/components/records/RecordFieldValue.svelte

@@ -48,7 +48,7 @@
 {:else if field.type === "editor"}
     {#if short}
         <span class="txt">
-            {CommonHelper.truncate(CommonHelper.plainText(rawValue), 250)}
+            {CommonHelper.truncate(CommonHelper.plainText(rawValue), 195)}
         </span>
     {:else}
         <TinyMCE

ui/src/components/records/RecordFilePicker.svelte

@@ -0,0 +1,336 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+    import CommonHelper from "@/utils/CommonHelper";
+    import ApiClient from "@/utils/ApiClient";
+    import scrollend from "@/actions/scrollend";
+    import tooltip from "@/actions/tooltip";
+    import { collections } from "@/stores/collections";
+    import OverlayPanel from "@/components/base/OverlayPanel.svelte";
+    import Searchbar from "@/components/base/Searchbar.svelte";
+    import Field from "@/components/base/Field.svelte";
+    import ObjectSelect from "@/components/base/ObjectSelect.svelte";
+    import RecordUpsertPanel from "@/components/records/RecordUpsertPanel.svelte";
+
+    const dispatch = createEventDispatcher();
+    const uniqueId = "file_picker_" + CommonHelper.randomString(5);
+    const batchSize = 50;
+
+    export let title = "Select a file";
+    export let submitText = "Insert";
+    export let fileTypes = ["image", "document", "video", "audio", "file"];
+
+    let pickerPanel;
+    let upsertPanel;
+    let filter = "";
+    let list = [];
+    let currentPage = 1;
+    let lastItemsCount = 0;
+    let isLoading = false;
+    let fileCollections = [];
+    let fileFields = [];
+    let sizeOptions = [];
+    let selectedCollection = {};
+    let selectedFile = {};
+    let selectedSize = "";
+
+    // find all collections with at least one non-protected file field
+    $: fileCollections = $collections.filter((c) => {
+        return (
+            c.type !== "view" &&
+            !!CommonHelper.toArray(c.schema).find((f) => f.type === "file" && !f.options?.protected)
+        );
+    });
+
+    // auto select the first collection from the list
+    $: if (!selectedCollection?.id && fileCollections.length > 0) {
+        selectedCollection = fileCollections[0];
+    }
+
+    $: fileFields = selectedCollection?.schema?.filter((f) => f.type === "file" && !f.options?.protected);
+
+    // reset filter on collection change
+    $: if (selectedCollection?.id) {
+        clearFilter();
+        refreshSizeOptions();
+    }
+
+    // reset list on filter or collection change
+    $: if (typeof filter !== "undefined" && selectedCollection?.id && pickerPanel?.isActive()) {
+        loadList(true);
+    }
+
+    $: isSelected = (record, name) => {
+        return selectedFile?.name == name && selectedFile?.record?.id == record.id;
+    };
+
+    $: hasAtleastOneFile = list.find((r) => extractFiles(r).length > 0);
+
+    $: canLoadMore = !isLoading && lastItemsCount == batchSize;
+
+    $: canSubmit = !isLoading && !!selectedFile?.name;
+
+    export function show() {
+        loadList(true);
+
+        return pickerPanel?.show();
+    }
+
+    export function hide() {
+        return pickerPanel?.hide();
+    }
+
+    function clearList() {
+        list = [];
+        selectedFile = {};
+        selectedSize = "";
+    }
+
+    function clearFilter() {
+        filter = "";
+    }
+
+    async function loadList(reset = false) {
+        if (!selectedCollection?.id) {
+            return;
+        }
+
+        isLoading = true;
+
+        if (reset) {
+            clearList();
+        }
+
+        try {
+            const page = reset ? 1 : currentPage + 1;
+
+            const fallbackSearchFields = CommonHelper.getAllCollectionIdentifiers(selectedCollection);
+
+            const result = await ApiClient.collection(selectedCollection.id).getList(page, batchSize, {
+                filter: CommonHelper.normalizeSearchFilter(filter, fallbackSearchFields),
+                sort: "-created",
+                fields: "*:excerpt(100)",
+                skipTotal: 1,
+                requestKey: uniqueId + "loadImagePicker",
+            });
+
+            list = CommonHelper.filterDuplicatesByKey(list.concat(result.items));
+            currentPage = result.page;
+            lastItemsCount = result.items.length;
+
+            isLoading = false;
+        } catch (err) {
+            if (!err.isAbort) {
+                ApiClient.error(err);
+                isLoading = false;
+            }
+        }
+    }
+
+    function refreshSizeOptions() {
+        let sizes = [];
+
+        for (const field of fileFields) {
+            const thumbs = CommonHelper.toArray(field.options?.thumbs);
+            for (const thumb of thumbs) {
+                if (!sizes.includes(thumb)) {
+                    sizes.push(thumb);
+                }
+            }
+        }
+
+        sizeOptions = [
+            { label: "Original size", value: "" },
+            { label: "100x100 thumb", value: "100x100" },
+        ];
+        for (const size of sizes) {
+            sizeOptions.push({
+                label: `${size} thumb`,
+                value: size,
+            });
+        }
+    }
+
+    function extractFiles(record) {
+        let result = [];
+
+        for (const field of fileFields) {
+            const names = CommonHelper.toArray(record[field.name]);
+            for (const name of names) {
+                if (fileTypes.includes(CommonHelper.getFileType(name))) {
+                    result.push(name);
+                }
+            }
+        }
+
+        return result;
+    }
+
+    function select(record, name) {
+        selectedFile = { record, name };
+    }
+
+    function submit() {
+        if (!canSubmit) {
+            return;
+        }
+
+        dispatch(
+            "submit",
+            Object.assign(
+                {
+                    size: selectedSize,
+                },
+                selectedFile
+            )
+        );
+
+        hide();
+    }
+</script>
+
+<OverlayPanel bind:this={pickerPanel} popup class="file-picker-popup" on:hide on:show {...$$restProps}>
+    <svelte:fragment slot="header">
+        <h4>{title}</h4>
+    </svelte:fragment>
+
+    {#if !fileCollections.length}
+        <h6 class="txt-center txt-hint">
+            You currently don't have any collection with <code>file</code> field.
+        </h6>
+    {:else}
+        <div class="file-picker">
+            <aside class="file-picker-sidebar">
+                {#each fileCollections as collection (collection.id)}
+                    <button
+                        type="button"
+                        class="sidebar-item"
+                        class:active={selectedCollection?.id == collection.id}
+                        on:click|preventDefault={() => {
+                            selectedCollection = collection;
+                        }}
+                    >
+                        {collection.name}
+                    </button>
+                {/each}
+            </aside>
+
+            <div class="file-picker-content">
+                <div class="flex m-b-base flex-gap-10">
+                    <Searchbar
+                        value={filter}
+                        placeholder="Record search term or filter..."
+                        autocompleteCollection={selectedCollection}
+                        on:submit={(e) => (filter = e.detail)}
+                    />
+                    <button
+                        type="button"
+                        class="btn btn-pill btn-transparent btn-hint p-l-xs p-r-xs"
+                        on:click={() => upsertPanel?.show()}
+                    >
+                        <div class="txt">New record</div>
+                    </button>
+                </div>
+                <div
+                    class="files-list"
+                    use:scrollend={{
+                        threshold: 150,
+                        callback: () => {
+                            if (canLoadMore) {
+                                loadList();
+                            }
+                        },
+                    }}
+                >
+                    {#if hasAtleastOneFile}
+                        {#each list as record (record.id)}
+                            {@const names = extractFiles(record)}
+                            {#each names as name}
+                                <button
+                                    type="button"
+                                    class="thumb thumb-xl handle"
+                                    use:tooltip={name + "\n(record: " + record.id + ")"}
+                                    class:thumb-warning={isSelected(record, name)}
+                                    on:click|preventDefault={select(record, name)}
+                                >
+                                    {#if CommonHelper.hasImageExtension(name)}
+                                        <img
+                                            loading="lazy"
+                                            src={ApiClient.files.getUrl(record, name, { thumb: "100x100" })}
+                                            alt={name}
+                                        />
+                                    {:else}
+                                        <i class="ri-file-3-line" />
+                                    {/if}
+                                </button>
+                            {/each}
+                        {/each}
+                    {:else if !isLoading}
+                        <div class="inline-flex">
+                            <span class="txt txt-hint">No records found.</span>
+                            {#if filter?.length}
+                                <button
+                                    type="button"
+                                    class="btn btn-hint btn-sm"
+                                    on:click|preventDefault={clearFilter}
+                                >
+                                    <span class="txt">Clear filter</span>
+                                </button>
+                            {/if}
+                        </div>
+                    {/if}
+
+                    {#if isLoading}
+                        <div class="block txt-center">
+                            <span class="loader loader-sm active" />
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        </div>
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <button type="button" class="btn btn-transparent m-r-auto" disabled={isLoading} on:click={hide}>
+            <span class="txt">Cancel</span>
+        </button>
+
+        {#if CommonHelper.hasImageExtension(selectedFile?.name)}
+            <Field class="form-field file-picker-size-select" let:uniqueId>
+                <ObjectSelect
+                    upside
+                    id={uniqueId}
+                    items={sizeOptions}
+                    disabled={!canSubmit}
+                    bind:keyOfSelected={selectedSize}
+                />
+            </Field>
+        {/if}
+
+        <button type="button" class="btn btn-expanded" disabled={!canSubmit} on:click={submit}>
+            <span class="txt">{submitText}</span>
+        </button>
+    </svelte:fragment>
+</OverlayPanel>
+
+<RecordUpsertPanel
+    bind:this={upsertPanel}
+    collection={selectedCollection}
+    on:save={(e) => {
+        CommonHelper.removeByKey(list, "id", e.detail.record.id);
+        list.unshift(e.detail.record);
+        list = list;
+
+        const names = extractFiles(e.detail.record);
+        if (names.length > 0) {
+            select(e.detail.record, names[0]);
+        }
+    }}
+    on:delete={(e) => {
+        if (selectedFile?.record?.id == e.detail.id) {
+            selectedFile = {};
+        }
+
+        CommonHelper.removeByKey(list, "id", e.detail.id);
+        list = list;
+    }}
+/>

ui/src/components/records/RecordFileThumb.svelte

@@ -11,7 +11,7 @@
     let thumbUrl = "";
     let originalUrl = "";
     let token = "";
-    let isLoadingToken = false;
+    let isLoadingToken = true;
 
     loadFileToken();
 
@@ -76,4 +76,6 @@
     </a>
 {/if}
 
-<PreviewPopup bind:this={previewPopup} />
+{#if hasPreview}
+    <PreviewPopup bind:this={previewPopup} />
+{/if}

ui/src/components/records/RecordsList.svelte

@@ -17,7 +17,7 @@
 
     const dispatch = createEventDispatcher();
     const sortRegex = /^([\+\-])?(\w+)$/;
-    const perPage = 45;
+    const perPage = 40;
 
     export let collection;
     export let sort = "";
@@ -186,10 +186,10 @@
                     const currentYieldId = ++yieldedRecordsId;
                     while (result.items?.length) {
                         if (yieldedRecordsId != currentYieldId) {
-                            break; // new yeild has been started
+                            break; // new yield has been started
                         }
 
-                        records = records.concat(result.items.splice(0, 15));
+                        records = records.concat(result.items.splice(0, 20));
 
                         await CommonHelper.yieldToMain();
                     }
@@ -550,7 +550,7 @@
                 <tr>
                     <td colspan="99" class="txt-center">
                         <button
-                            class="btn btn-expanded-lg btn-secondary"
+                            class="btn btn-expanded-lg btn-secondary btn-horizontal-sticky"
                             disabled={isLoading}
                             class:btn-loading={isLoading}
                             on:click|preventDefault={() => load(currentPage + 1)}

ui/src/components/records/RecordsPicker.svelte

@@ -214,7 +214,7 @@
         {#if !isView}
             <button
                 type="button"
-                class="btn btn-transparent btn-hint p-l-sm p-r-sm"
+                class="btn btn-pill btn-transparent btn-hint p-l-xs p-r-xs"
                 on:click={() => upsertPanel?.show()}
             >
                 <div class="txt">New record</div>

ui/src/components/records/fields/EditorField.svelte

@@ -1,12 +1,16 @@
 <script>
-    import CommonHelper from "@/utils/CommonHelper";
-    import Field from "@/components/base/Field.svelte";
-    import TinyMCE from "@tinymce/tinymce-svelte";
     import { onMount } from "svelte";
+    import TinyMCE from "@tinymce/tinymce-svelte";
+    import CommonHelper from "@/utils/CommonHelper";
+    import ApiClient from "@/utils/ApiClient";
+    import Field from "@/components/base/Field.svelte";
+    import RecordFilePicker from "@/components/records/RecordFilePicker.svelte";
 
     export let field;
     export let value = "";
 
+    let picker;
+    let editor;
     let mounted = false;
     let mountedTimeoutId = null;
 
@@ -44,8 +48,29 @@
             scriptSrc="{import.meta.env.BASE_URL}libs/tinymce/tinymce.min.js"
             {conf}
             bind:value
+            on:init={(initEvent) => {
+                editor = initEvent.detail.editor;
+                editor.on("collections_file_picker", () => {
+                    picker?.show();
+                });
+            }}
         />
     {:else}
         <div class="tinymce-wrapper" />
     {/if}
 </Field>
+
+<RecordFilePicker
+    bind:this={picker}
+    title="Select an image"
+    fileTypes={["image"]}
+    on:submit={(e) => {
+        editor?.execCommand(
+            "InsertImage",
+            false,
+            ApiClient.files.getUrl(e.detail.record, e.detail.name, {
+                thumb: e.detail.size,
+            })
+        );
+    }}
+/>