From 49227f5436193cf51b8a4b25296643861bc694a8 Mon Sep 17 00:00:00 2001
From: Gani Georgiev <gani.georgiev@gmail.com>
Date: Sun, 12 Mar 2023 16:44:24 +0200
Subject: [PATCH] fixed views relation picker load action and updated the
 record preview

---
 ui/.env                                       |  2 +-
 .../records/RecordFieldValue.svelte           | 26 ++++++++++++++-----
 .../records/RecordPreviewPanel.svelte         | 16 ++++++++----
 .../components/records/RecordsPicker.svelte   |  2 +-
 .../settings/PageExportCollections.svelte     |  4 ++-
 5 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/ui/.env b/ui/.env
index 99146835..302d78fd 100644
--- a/ui/.env
+++ b/ui/.env
@@ -8,4 +8,4 @@ PB_DOCS_URL          = "https://pocketbase.io/docs/"
 PB_JS_SDK_URL        = "https://github.com/pocketbase/js-sdk"
 PB_DART_SDK_URL      = "https://github.com/pocketbase/dart-sdk"
 PB_RELEASES          = "https://github.com/pocketbase/pocketbase/releases"
-PB_VERSION           = "v0.13.2"
+PB_VERSION           = "v0.13.3"
diff --git a/ui/src/components/records/RecordFieldValue.svelte b/ui/src/components/records/RecordFieldValue.svelte
index 4454fdbe..10f9201c 100644
--- a/ui/src/components/records/RecordFieldValue.svelte
+++ b/ui/src/components/records/RecordFieldValue.svelte
@@ -2,6 +2,7 @@
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
     import FormattedDate from "@/components/base/FormattedDate.svelte";
+    import CopyIcon from "@/components/base/CopyIcon.svelte";
     import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
     import RecordInfo from "@/components/records/RecordInfo.svelte";
     import TinyMCE from "@tinymce/tinymce-svelte";
@@ -14,11 +15,17 @@
 </script>
 
 {#if field.type === "json"}
-    <span class="txt txt-ellipsis">
-        {short
-            ? CommonHelper.truncate(JSON.stringify(rawValue))
-            : CommonHelper.truncate(JSON.stringify(rawValue, null, 2), 2000, true)}
-    </span>
+    {@const stringifiedJson = JSON.stringify(rawValue)}
+    {#if short}
+        <span class="txt txt-ellipsis">
+            {CommonHelper.truncate(stringifiedJson)}
+        </span>
+    {:else}
+        <span class="txt">
+            {CommonHelper.truncate(stringifiedJson, 500, true)}
+        </span>
+        <CopyIcon value={JSON.stringify(rawValue, null, 2)} />
+    {/if}
 {:else if CommonHelper.isEmpty(rawValue)}
     <span class="txt-hint">N/A</span>
 {:else if field.type === "bool"}
@@ -103,5 +110,12 @@
         {CommonHelper.truncate(rawValue)}
     </span>
 {:else}
-    <span class="block txt-break">{CommonHelper.truncate(rawValue, 2000)}</span>
+    <div class="block txt-break fallback-block">{rawValue}</div>
 {/if}
+
+<style>
+    .fallback-block {
+        max-height: 100px;
+        overflow: auto;
+    }
+</style>
diff --git a/ui/src/components/records/RecordPreviewPanel.svelte b/ui/src/components/records/RecordPreviewPanel.svelte
index 1cbeaf4b..55c7a511 100644
--- a/ui/src/components/records/RecordPreviewPanel.svelte
+++ b/ui/src/components/records/RecordPreviewPanel.svelte
@@ -33,11 +33,11 @@
         <h4><strong>{collection?.name}</strong> record preview</h4>
     </svelte:fragment>
 
-    <table class="table-border">
+    <table class="table-border preview-table">
         <tbody>
             <tr>
                 <td class="min-width txt-hint txt-bold">id</td>
-                <td>
+                <td class="col-field">
                     <div class="label">
                         <CopyIcon value={record.id} />
                         <span class="txt">{record.id}</span>
@@ -48,7 +48,7 @@
             {#each collection?.schema as field}
                 <tr>
                     <td class="min-width txt-hint txt-bold">{field.name}</td>
-                    <td>
+                    <td class="col-field">
                         <RecordFieldValue {field} {record} />
                     </td>
                 </tr>
@@ -57,14 +57,14 @@
             {#if record.created}
                 <tr>
                     <td class="min-width txt-hint txt-bold">created</td>
-                    <td><FormattedDate date={record.created} /></td>
+                    <td class="col-field"><FormattedDate date={record.created} /></td>
                 </tr>
             {/if}
 
             {#if record.updated}
                 <tr>
                     <td class="min-width txt-hint txt-bold">updated</td>
-                    <td><FormattedDate date={record.updated} /></td>
+                    <td class="col-field"><FormattedDate date={record.updated} /></td>
                 </tr>
             {/if}
         </tbody>
@@ -76,3 +76,9 @@
         </button>
     </svelte:fragment>
 </OverlayPanel>
+
+<style lang="scss">
+    .col-field {
+        max-width: 1px; // text overflow workaround
+    }
+</style>
diff --git a/ui/src/components/records/RecordsPicker.svelte b/ui/src/components/records/RecordsPicker.svelte
index 9ea4724a..63659a7f 100644
--- a/ui/src/components/records/RecordsPicker.svelte
+++ b/ui/src/components/records/RecordsPicker.svelte
@@ -134,7 +134,7 @@
 
             const result = await ApiClient.collection(collectionId).getList(page, batchSize, {
                 filter: filter,
-                sort: "-created",
+                sort: !collection?.isView ? "-created" : "",
                 $cancelKey: uniqueId + "loadList",
             });
 
diff --git a/ui/src/components/settings/PageExportCollections.svelte b/ui/src/components/settings/PageExportCollections.svelte
index 198f3a81..db56b545 100644
--- a/ui/src/components/settings/PageExportCollections.svelte
+++ b/ui/src/components/settings/PageExportCollections.svelte
@@ -25,6 +25,7 @@
         try {
             collections = await ApiClient.collections.getFullList(100, {
                 $cancelKey: uniqueId,
+                sort: "updated",
             });
             // delete timestamps
             for (let collection of collections) {
@@ -70,9 +71,10 @@
                     </p>
                 </div>
 
+                <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
                 <div
-                    tabindex="0"
                     bind:this={previewContainer}
+                    tabindex="0"
                     class="export-preview"
                     on:keydown={(e) => {
                         // select all