initial v0.8 pre-release

ui/src/components/records/RecordSelect.svelte

@@ -3,6 +3,7 @@
     import CommonHelper from "@/utils/CommonHelper";
     import ObjectSelect from "@/components/base/ObjectSelect.svelte";
     import RecordSelectOption from "./RecordSelectOption.svelte";
+    import RecordUpsertPanel from "@/components/records/RecordUpsertPanel.svelte";
 
     const uniqueId = "select_" + CommonHelper.randomString(5);
 
@@ -21,8 +22,12 @@
     let totalItems = 0;
     let isLoadingList = false;
     let isLoadingSelected = false;
+    let isLoadingCollection = false;
+    let collection = null;
+    let upsertPanel;
 
     $: if (collectionId) {
+        loadCollection();
         loadSelected().then(() => {
             loadList(true);
         });
@@ -32,6 +37,26 @@
 
     $: canLoadMore = totalItems > list.length;
 
+    async function loadCollection() {
+        if (!collectionId) {
+            collection = null;
+            isLoadingCollection = false;
+            return;
+        }
+
+        isLoadingCollection = true;
+
+        try {
+            collection = await ApiClient.collections.getOne(collectionId, {
+                $cancelKey: "collection_" + uniqueId,
+            });
+        } catch (err) {
+            ApiClient.errorResponseHandler(err);
+        }
+
+        isLoadingCollection = false;
+    }
+
     async function loadSelected() {
         const selectedIds = CommonHelper.toArray(keyOfSelected);
 
@@ -41,21 +66,34 @@
 
         isLoadingSelected = true;
 
-        try {
+        let loadedItems = [];
+
+        // batch load all selected records to avoid parser stack overflow errors
+        const filterIds = selectedIds.slice();
+        const loadPromises = [];
+        while (filterIds.length > 0) {
             const filters = [];
-            for (const id of selectedIds) {
+            for (const id of filterIds.splice(0, 50)) {
                 filters.push(`id="${id}"`);
             }
 
-            const result = await ApiClient.records.getFullList(collectionId, 200, {
-                filter: filters.join("||"),
-                $cancelKey: uniqueId + "loadSelected",
+            loadPromises.push(
+                ApiClient.collection(collectionId).getFullList(200, {
+                    filter: filters.join("||"),
+                    $autoCancel: false,
+                })
+            );
+        }
+
+        try {
+            await Promise.all(loadPromises).then((values) => {
+                loadedItems = loadedItems.concat(...values);
             });
 
             // preserve selected order
             selected = [];
             for (const id of selectedIds) {
-                const item = CommonHelper.findByKey(result, "id", id);
+                const item = CommonHelper.findByKey(loadedItems, "id", id);
                 if (item) {
                     selected.push(item);
                 }
@@ -80,7 +118,7 @@
         try {
             const page = reset ? 1 : currentPage + 1;
 
-            const result = await ApiClient.records.getList(collectionId, page, 200, {
+            const result = await ApiClient.collection(collectionId).getList(page, 200, {
                 sort: "-created",
                 $cancelKey: uniqueId + "loadList",
             });
@@ -108,6 +146,7 @@
     searchable={list.length > 5}
     selectionKey="id"
     labelComponent={optionComponent}
+    disabled={isLoading}
     {optionComponent}
     {multiple}
     bind:keyOfSelected
@@ -118,10 +157,19 @@
     {...$$restProps}
 >
     <svelte:fragment slot="afterOptions">
+        {#if !isLoadingCollection && collection}
+            <button
+                type="button"
+                class="btn btn-warning btn-block btn-sm m-t-5"
+                on:click={() => upsertPanel?.show()}
+            >
+                <span class="txt">New record</span>
+            </button>
+        {/if}
         {#if canLoadMore}
             <button
                 type="button"
-                class="btn btn-block btn-sm"
+                class="btn btn-block btn-sm m-t-5"
                 class:btn-loading={isLoadingList}
                 class:btn-disabled={isLoadingList}
                 on:click|stopPropagation={() => loadList()}
@@ -131,3 +179,14 @@
         {/if}
     </svelte:fragment>
 </ObjectSelect>
+
+<RecordUpsertPanel
+    bind:this={upsertPanel}
+    {collection}
+    on:save={(e) => {
+        if (e?.detail?.id) {
+            keyOfSelected = CommonHelper.toArray(keyOfSelected).concat(e.detail.id);
+        }
+        loadList(true);
+    }}
+/>