use the presentable prop when displaying relations

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>

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">
+            <div class="col-sm-12">
-                <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">
                 <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",

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}

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) => {
+        collection?.schema?.filter((f) => f.presentable && f.type == "file")?.map((f) => f.name) || [];
-            return !!collection?.schema?.find((field) => field.name == name && field.type == "file");
-        }) || [];
 
     $: textDisplayFields =
-        (!fileDisplayFields.length
+        collection?.schema?.filter((f) => f.presentable && f.type != "file")?.map((f) => f.name) || [];
-            ? displayFields
-            : displayFields?.filter((name) => !fileDisplayFields.includes(name))) || [];
 </script>
 
 <div class="record-info">

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"

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

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 {

ui/src/utils/CommonHelper.js

@@ -1415,7 +1415,9 @@ export default class CommonHelper {
      * Tries to output the first displayable field of the provided model.
      *
      * @param  {Object}        model
-     * @return {Any}
+     * @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) {
+        for (const prop of displayFields) {
-            let val = model[field];
+            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",
         ];