[#976] added optional RelationOptions.DisplayFields and refactored the relation picker UI

ui/src/components/collections/schema/RelationOptions.svelte

@@ -1,10 +1,11 @@
 <script>
-    import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
     import Field from "@/components/base/Field.svelte";
+    import Select from "@/components/base/Select.svelte";
     import ObjectSelect from "@/components/base/ObjectSelect.svelte";
     import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
+    import { collections } from "@/stores/collections";
 
     export let key = "";
     export let options = {};
@@ -14,9 +15,13 @@
         { label: "True", value: true },
     ];
 
-    let isLoading = false;
-    let collections = [];
+    const baseFields = ["id", "created", "updated"];
+
+    const authFields = ["username", "email", "emailVisibility", "verified"];
+
     let upsertPanel = null;
+    let displayFieldsList = [];
+    let oldCollectionId = null;
 
     // load defaults
     $: if (CommonHelper.isEmpty(options)) {
@@ -24,27 +29,39 @@
             maxSelect: 1,
             collectionId: null,
             cascadeDelete: false,
+            displayFields: [],
         };
     }
 
-    $: selectedColection = collections.find((c) => c.id == options.collectionId) || null;
+    $: selectedColection = $collections.find((c) => c.id == options.collectionId) || null;
 
-    loadCollections();
+    $: if (oldCollectionId != options.collectionId) {
+        oldCollectionId = options.collectionId;
+        refreshDisplayFieldsList();
+    }
 
-    async function loadCollections() {
-        isLoading = true;
-
-        try {
-            const result = await ApiClient.collections.getFullList(200, {
-                sort: "created",
-            });
-
-            collections = CommonHelper.sortCollections(result);
-        } catch (err) {
-            ApiClient.errorResponseHandler(err);
+    function refreshDisplayFieldsList() {
+        displayFieldsList = baseFields.slice(0);
+        if (!selectedColection) {
+            return;
         }
 
-        isLoading = false;
+        if (selectedColection.isAuth) {
+            displayFieldsList = displayFieldsList.concat(authFields);
+        }
+
+        for (const field of selectedColection.schema) {
+            displayFieldsList.push(field.name);
+        }
+
+        // deselect any missing display field
+        if (options?.displayFields?.length > 0) {
+            for (let i = options.displayFields.length - 1; i >= 0; i--) {
+                if (!displayFieldsList.includes(options.displayFields[i])) {
+                    options.displayFields.splice(i, 1);
+                }
+            }
+        }
     }
 </script>
 
@@ -53,19 +70,21 @@
         <Field class="form-field required" name="schema.{key}.options.collectionId" let:uniqueId>
             <label for={uniqueId}>Collection</label>
             <ObjectSelect
-                searchable={collections.length > 5}
-                selectPlaceholder={isLoading ? "Loading..." : "Select collection"}
+                searchable={$collections.length > 5}
+                selectPlaceholder={"Select collection"}
                 noOptionsText="No collections found"
                 selectionKey="id"
-                items={collections}
+                items={$collections}
                 bind:keyOfSelected={options.collectionId}
             >
                 <svelte:fragment slot="afterOptions">
+                    <hr />
                     <button
                         type="button"
-                        class="btn btn-warning btn-block btn-sm m-t-5"
+                        class="btn btn-transparent btn-block btn-sm"
                         on:click={() => upsertPanel?.show()}
                     >
+                        <i class="ri-add-line" />
                         <span class="txt">New collection</span>
                     </button>
                 </svelte:fragment>
@@ -87,11 +106,30 @@
             <input type="number" id={uniqueId} step="1" min="1" bind:value={options.maxSelect} />
         </Field>
     </div>
-    <div class="col-sm-12">
-        <Field class="form-field" name="schema.{key}.options.cascadeDelete" let:uniqueId>
+    <div class="col-sm-9">
+        <Field class="form-field" name="schema.{key}.options.displayFields" let:uniqueId>
             <label for={uniqueId}>
-                Delete record on {selectedColection ? selectedColection.name : "relation"} delete
+                <span class="txt">Display fields</span>
+                <i
+                    class="ri-information-line link-hint"
+                    use:tooltip={{
+                        text: "Optional select the field(s) that will be used in the listings UI. Leave empty for auto.",
+                        position: "top",
+                    }}
+                />
             </label>
+            <Select
+                multiple
+                searchable
+                id={uniqueId}
+                items={displayFieldsList}
+                bind:selected={options.displayFields}
+            />
+        </Field>
+    </div>
+    <div class="col-sm-3">
+        <Field class="form-field" name="schema.{key}.options.cascadeDelete" let:uniqueId>
+            <label for={uniqueId}>Cascade delete</label>
             <ObjectSelect id={uniqueId} items={defaultOptions} bind:keyOfSelected={options.cascadeDelete} />
         </Field>
     </div>
@@ -103,6 +141,5 @@
         if (e?.detail?.collection?.id) {
             options.collectionId = e.detail.collection.id;
         }
-        loadCollections();
     }}
 />