From f0af24d78fb679d273151f980f475422482ae271 Mon Sep 17 00:00:00 2001
From: Gani Georgiev <gani.georgiev@gmail.com>
Date: Mon, 21 Aug 2023 18:06:35 +0300
Subject: [PATCH] use the presentable prop when displaying relations

---
 .../collections/schema/SchemaField.svelte     | 16 ++++-
 .../schema/SchemaFieldRelation.svelte         | 61 +------------------
 .../records/RecordFieldValue.svelte           |  2 +-
 ui/src/components/records/RecordInfo.svelte   |  9 +--
 .../components/records/RecordsPicker.svelte   |  6 +-
 .../records/fields/RelationField.svelte       |  2 +-
 ui/src/scss/_schema_field.scss                |  1 +
 ui/src/utils/CommonHelper.js                  | 12 ++--
 8 files changed, 32 insertions(+), 77 deletions(-)

diff --git a/ui/src/components/collections/schema/SchemaField.svelte b/ui/src/components/collections/schema/SchemaField.svelte
index abcba1f3..add1ed04 100644
--- a/ui/src/components/collections/schema/SchemaField.svelte
+++ b/ui/src/components/collections/schema/SchemaField.svelte
@@ -216,7 +216,21 @@
                                     text: `Requires the field value NOT to be ${CommonHelper.zeroDefaultStr(
                                         field
                                     )}.`,
-                                    position: "right",
+                                }}
+                            />
+                        </label>
+                    </Field>
+                </div>
+
+                <div class="col-sm-4">
+                    <Field class="form-field form-field-toggle m-0" name="presentable" let:uniqueId>
+                        <input type="checkbox" id={uniqueId} bind:checked={field.presentable} />
+                        <label for={uniqueId}>
+                            <span class="txt">Presentable</span>
+                            <i
+                                class="ri-information-line link-hint"
+                                use:tooltip={{
+                                    text: `Whether the field should be preferred in the Admin UI relation listings.`,
                                 }}
                             />
                         </label>
diff --git a/ui/src/components/collections/schema/SchemaFieldRelation.svelte b/ui/src/components/collections/schema/SchemaFieldRelation.svelte
index d84d4c00..d262827c 100644
--- a/ui/src/components/collections/schema/SchemaFieldRelation.svelte
+++ b/ui/src/components/collections/schema/SchemaFieldRelation.svelte
@@ -21,13 +21,8 @@
         { label: "True", value: true },
     ];
 
-    const baseFields = ["id", "created", "updated"];
-
-    const authFields = ["username", "email", "emailVisibility", "verified"];
-
     let upsertPanel = null;
     let displayFieldsList = [];
-    let oldCollectionId = null;
     let isSingle = field.options?.maxSelect == 1;
     let oldIsSingle = isSingle;
 
@@ -50,45 +45,15 @@
 
     $: selectedColection = $collections.find((c) => c.id == field.options.collectionId) || null;
 
-    $: if (oldCollectionId != field.options.collectionId) {
-        oldCollectionId = field.options.collectionId;
-        refreshDisplayFieldsList();
-    }
-
     function loadDefaults() {
         field.options = {
             maxSelect: 1,
             collectionId: null,
             cascadeDelete: false,
-            displayFields: [],
         };
         isSingle = true;
         oldIsSingle = isSingle;
     }
-
-    function refreshDisplayFieldsList() {
-        displayFieldsList = baseFields.slice(0);
-        if (!selectedColection) {
-            return;
-        }
-
-        if (selectedColection.type === "auth") {
-            displayFieldsList = displayFieldsList.concat(authFields);
-        }
-
-        for (const f of selectedColection.schema) {
-            displayFieldsList.push(f.name);
-        }
-
-        // deselect any missing display field
-        if (field.options?.displayFields?.length > 0) {
-            for (let i = field.options.displayFields.length - 1; i >= 0; i--) {
-                if (!displayFieldsList.includes(field.options.displayFields[i])) {
-                    field.options.displayFields.splice(i, 1);
-                }
-            }
-        }
-    }
 </script>
 
 <SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
@@ -174,29 +139,7 @@
                 </div>
             {/if}
 
-            <div class="col-sm-6">
-                <Field class="form-field" name="schema.{key}.options.displayFields" let:uniqueId>
-                    <label for={uniqueId}>
-                        <span class="txt">Display fields</span>
-                        <i
-                            class="ri-information-line link-hint"
-                            use:tooltip={{
-                                text: "Optionally select the field(s) that will be used in the listings UI. Leave empty for auto.",
-                                position: "top",
-                            }}
-                        />
-                    </label>
-                    <Select
-                        multiple
-                        searchable
-                        id={uniqueId}
-                        selectPlaceholder="Auto"
-                        items={displayFieldsList}
-                        bind:selected={field.options.displayFields}
-                    />
-                </Field>
-            </div>
-            <div class="col-sm-6">
+            <div class="col-sm-12">
                 <Field class="form-field" name="schema.{key}.options.cascadeDelete" let:uniqueId>
                     <label for={uniqueId}>
                         <span class="txt">Cascade delete</span>
@@ -205,7 +148,7 @@
                             class="ri-information-line link-hint"
                             use:tooltip={{
                                 text: [
-                                    `Whether on ${selectedColection?.name || "relation"} record deletion to delete also the corresponding current collection record(s).`,
+                                    `Whether on ${selectedColection?.name || "relation"} record deletion to delete also the current corresponding collection record(s).`,
                                     !isSingle ? `For "Multiple" relation fields the cascade delete is triggered only when all ${selectedColection?.name || "relation"} ids are removed from the corresponding record.` : null
                                 ].filter(Boolean).join("\n\n"),
                                 position: "top",
diff --git a/ui/src/components/records/RecordFieldValue.svelte b/ui/src/components/records/RecordFieldValue.svelte
index 91db1b31..c06613bd 100644
--- a/ui/src/components/records/RecordFieldValue.svelte
+++ b/ui/src/components/records/RecordFieldValue.svelte
@@ -89,7 +89,7 @@
         {#if expanded.length}
             {#each expanded.slice(0, relLimit) as item, i (i + item)}
                 <span class="label">
-                    <RecordInfo record={item} displayFields={field.options?.displayFields} />
+                    <RecordInfo record={item} />
                 </span>
             {/each}
         {:else}
diff --git a/ui/src/components/records/RecordInfo.svelte b/ui/src/components/records/RecordInfo.svelte
index d3be96b2..da0c977a 100644
--- a/ui/src/components/records/RecordInfo.svelte
+++ b/ui/src/components/records/RecordInfo.svelte
@@ -5,19 +5,14 @@
     import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
 
     export let record;
-    export let displayFields = [];
 
     $: collection = $collections?.find((item) => item.id == record?.collectionId);
 
     $: fileDisplayFields =
-        displayFields?.filter((name) => {
-            return !!collection?.schema?.find((field) => field.name == name && field.type == "file");
-        }) || [];
+        collection?.schema?.filter((f) => f.presentable && f.type == "file")?.map((f) => f.name) || [];
 
     $: textDisplayFields =
-        (!fileDisplayFields.length
-            ? displayFields
-            : displayFields?.filter((name) => !fileDisplayFields.includes(name))) || [];
+        collection?.schema?.filter((f) => f.presentable && f.type != "file")?.map((f) => f.name) || [];
 </script>
 
 <div class="record-info">
diff --git a/ui/src/components/records/RecordsPicker.svelte b/ui/src/components/records/RecordsPicker.svelte
index 696422af..1dcecdba 100644
--- a/ui/src/components/records/RecordsPicker.svelte
+++ b/ui/src/components/records/RecordsPicker.svelte
@@ -32,8 +32,6 @@
 
     $: collectionId = field?.options?.collectionId;
 
-    $: displayFields = field?.options?.displayFields;
-
     $: collection = $collections.find((c) => c.id == collectionId) || null;
 
     $: if (typeof filter !== "undefined" && pickerPanel?.isActive()) {
@@ -252,7 +250,7 @@
                     <i class="ri-checkbox-blank-circle-line txt-disabled" />
                 {/if}
                 <div class="content">
-                    <RecordInfo {record} {displayFields} />
+                    <RecordInfo {record} />
                 </div>
                 {#if !isView}
                     <div class="actions nonintrusive">
@@ -301,7 +299,7 @@
             {#each selected as record, i}
                 <Draggable bind:list={selected} index={i} let:dragging let:dragover>
                     <span class="label" class:label-danger={dragging} class:label-warning={dragover}>
-                        <RecordInfo {record} {displayFields} />
+                        <RecordInfo {record} />
                         <button
                             type="button"
                             title="Remove"
diff --git a/ui/src/components/records/fields/RelationField.svelte b/ui/src/components/records/fields/RelationField.svelte
index 9cbf4a02..b8acf64f 100644
--- a/ui/src/components/records/fields/RelationField.svelte
+++ b/ui/src/components/records/fields/RelationField.svelte
@@ -149,7 +149,7 @@
                 >
                     <div class="list-item" class:dragging class:dragover>
                         <div class="content">
-                            <RecordInfo {record} displayFields={field.options?.displayFields} />
+                            <RecordInfo {record} />
                         </div>
                         <div class="actions">
                             <button
diff --git a/ui/src/scss/_schema_field.scss b/ui/src/scss/_schema_field.scss
index 4f9655f6..b5adc542 100644
--- a/ui/src/scss/_schema_field.scss
+++ b/ui/src/scss/_schema_field.scss
@@ -62,6 +62,7 @@
         left: 4px;
         top: 4px;
         display: inline-flex;
+        flex-direction: column;
         align-items: center;
         gap: 5px;
         .marker {
diff --git a/ui/src/utils/CommonHelper.js b/ui/src/utils/CommonHelper.js
index ecc8bb93..261e8859 100644
--- a/ui/src/utils/CommonHelper.js
+++ b/ui/src/utils/CommonHelper.js
@@ -1414,8 +1414,10 @@ export default class CommonHelper {
     /**
      * Tries to output the first displayable field of the provided model.
      *
-     * @param  {Object} model
-     * @return {Any}
+     * @param  {Object}        model
+     * @param  {Array<string>} displayFields
+     * @param  {String}        [missingValue]
+     * @return {String}
      */
     static displayValue(model, displayFields, missingValue = "N/A") {
         model = model || {};
@@ -1423,8 +1425,8 @@ export default class CommonHelper {
 
         let result = [];
 
-        for (const field of displayFields) {
-            let val = model[field];
+        for (const prop of displayFields) {
+            let val = model[prop];
 
             if (typeof val === "undefined") {
                 continue
@@ -1445,10 +1447,12 @@ export default class CommonHelper {
             "slug",
             "email",
             "username",
+            "nickname",
             "label",
             "heading",
             "message",
             "key",
+            "identifier",
             "id",
         ];