From d4a2f050753b2473638604f5ebbb725e214fa8f3 Mon Sep 17 00:00:00 2001
From: Gani Georgiev <gani.georgiev@gmail.com>
Date: Sun, 11 Feb 2024 22:30:54 +0200
Subject: [PATCH] added presentable file field fallback

---
 ui/src/components/base/CopyIcon.svelte        |  8 ++--
 .../collections/CollectionSidebarItem.svelte  |  4 +-
 ui/src/components/records/RecordInfo.svelte   | 40 ++++++++++++++-----
 ui/src/components/records/RecordsList.svelte  |  4 +-
 .../records/fields/RelationField.svelte       |  2 +-
 ui/src/scss/_base.scss                        |  2 +-
 6 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/base/CopyIcon.svelte b/ui/src/components/base/CopyIcon.svelte
index 8734595a..dfd9be1a 100644
--- a/ui/src/components/base/CopyIcon.svelte
+++ b/ui/src/components/base/CopyIcon.svelte
@@ -1,9 +1,10 @@
 <script>
     import { onMount } from "svelte";
     import CommonHelper from "@/utils/CommonHelper";
-    import tooltip from "@/actions/tooltip";
+    import tooltipAction from "@/actions/tooltip";
 
     export let value = "";
+    export let tooltip = "Copy";
     export let idleClasses = "ri-file-copy-line txt-sm link-hint";
     export let successClasses = "ri-check-line txt-sm txt-success";
     export let successDuration = 500; // ms
@@ -34,9 +35,10 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <i
     class={copyTimeout ? successClasses : idleClasses}
-    aria-label={"Copy"}
-    use:tooltip={!copyTimeout ? "Copy" : ""}
+    aria-label={"Copy to clipboard"}
+    use:tooltipAction={!copyTimeout ? tooltip : undefined}
     on:click|stopPropagation={copy}
 />
diff --git a/ui/src/components/collections/CollectionSidebarItem.svelte b/ui/src/components/collections/CollectionSidebarItem.svelte
index ba229aeb..3bf35e3e 100644
--- a/ui/src/components/collections/CollectionSidebarItem.svelte
+++ b/ui/src/components/collections/CollectionSidebarItem.svelte
@@ -2,9 +2,7 @@
     import { link } from "svelte-spa-router";
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
-    import { hideControls } from "@/stores/app";
-    import { collections, activeCollection, isCollectionsLoading } from "@/stores/collections";
-    import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
+    import { activeCollection } from "@/stores/collections";
 
     export let collection;
     export let pinnedIds;
diff --git a/ui/src/components/records/RecordInfo.svelte b/ui/src/components/records/RecordInfo.svelte
index da0c977a..84e7a712 100644
--- a/ui/src/components/records/RecordInfo.svelte
+++ b/ui/src/components/records/RecordInfo.svelte
@@ -6,13 +6,37 @@
 
     export let record;
 
+    let fileDisplayFields = [];
+    let nonFileDisplayFields = [];
+
     $: collection = $collections?.find((item) => item.id == record?.collectionId);
 
-    $: fileDisplayFields =
-        collection?.schema?.filter((f) => f.presentable && f.type == "file")?.map((f) => f.name) || [];
+    $: if (collection) {
+        loadDisplayFields();
+    }
 
-    $: textDisplayFields =
-        collection?.schema?.filter((f) => f.presentable && f.type != "file")?.map((f) => f.name) || [];
+    function loadDisplayFields() {
+        const fields = collection?.schema || [];
+
+        // reset
+        fileDisplayFields = fields.filter((f) => f.presentable && f.type == "file").map((f) => f.name);
+        nonFileDisplayFields = fields.filter((f) => f.presentable && f.type != "file").map((f) => f.name);
+
+        // fallback to the first single file field that accept images
+        // if no presentable field is available
+        if (!fileDisplayFields.length && !nonFileDisplayFields.length) {
+            const fallbackFileField = fields.find((f) => {
+                return (
+                    f.type == "file" &&
+                    f.options?.maxSelect == 1 &&
+                    f.options?.mimeTypes?.find((t) => t.startsWith("image/"))
+                );
+            });
+            if (fallbackFileField) {
+                fileDisplayFields.push(fallbackFileField.name);
+            }
+        }
+    }
 </script>
 
 <div class="record-info">
@@ -22,7 +46,7 @@
             text: CommonHelper.truncate(
                 JSON.stringify(CommonHelper.truncateObject(record), null, 2),
                 800,
-                true
+                true,
             ),
             class: "code",
             position: "left",
@@ -39,7 +63,7 @@
     {/each}
 
     <span class="txt txt-ellipsis">
-        {CommonHelper.truncate(CommonHelper.displayValue(record, textDisplayFields), 70)}
+        {CommonHelper.truncate(CommonHelper.displayValue(record, nonFileDisplayFields), 70)}
     </span>
 </div>
 
@@ -51,10 +75,6 @@
         max-width: 100%;
         min-width: 0;
         gap: 5px;
-        line-height: normal;
-        > * {
-            line-height: inherit;
-        }
         :global(.thumb) {
             box-shadow: none;
         }
diff --git a/ui/src/components/records/RecordsList.svelte b/ui/src/components/records/RecordsList.svelte
index 91064408..abd8bbbe 100644
--- a/ui/src/components/records/RecordsList.svelte
+++ b/ui/src/components/records/RecordsList.svelte
@@ -83,7 +83,7 @@
             return { id: f.id, name: f.name };
         }),
         hasCreated ? { id: "@created", name: "created" } : [],
-        hasUpdated ? { id: "@updated", name: "updated" } : []
+        hasUpdated ? { id: "@updated", name: "updated" } : [],
     );
 
     function updateStoredHiddenColumns() {
@@ -282,7 +282,7 @@
         return Promise.all(promises)
             .then(() => {
                 addSuccessToast(
-                    `Successfully deleted the selected ${totalBulkSelected === 1 ? "record" : "records"}.`
+                    `Successfully deleted the selected ${totalBulkSelected === 1 ? "record" : "records"}.`,
                 );
 
                 dispatch("delete", bulkSelected);
diff --git a/ui/src/components/records/fields/RelationField.svelte b/ui/src/components/records/fields/RelationField.svelte
index 0e147310..31f0f192 100644
--- a/ui/src/components/records/fields/RelationField.svelte
+++ b/ui/src/components/records/fields/RelationField.svelte
@@ -76,7 +76,7 @@
                     filter: filters.join("||"),
                     fields: "*:excerpt(200)",
                     requestKey: null,
-                })
+                }),
             );
         }
 
diff --git a/ui/src/scss/_base.scss b/ui/src/scss/_base.scss
index 17a7ca0c..01504dc0 100644
--- a/ui/src/scss/_base.scss
+++ b/ui/src/scss/_base.scss
@@ -489,7 +489,7 @@ a,
     background: var(--baseAlt2Color);
     color: var(--txtPrimaryColor);
     white-space: nowrap;
-    border-radius: 30px;
+    border-radius: 15px;
 
     .btn:last-child {
         margin-right: calc(-0.5 * var(--labelHPadding));