From 5732bc38e3ca7cff87f6734b1db5106837d6f1c8 Mon Sep 17 00:00:00 2001
From: Gani Georgiev <gani.georgiev@gmail.com>
Date: Sun, 1 Oct 2023 15:57:20 +0300
Subject: [PATCH] reload the records counter and remove drafts failures from
 LocalStorage

---
 CHANGELOG.md                                        | 2 +-
 ui/src/components/records/PageRecords.svelte        | 7 ++++++-
 ui/src/components/records/RecordUpsertPanel.svelte  | 4 +++-
 ui/src/components/records/fields/EditorField.svelte | 3 ++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 911a4cdb..7c362dc2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@
 - Various Admin UI improvements:
   - Count the total records separately to speed up the query execution for large datasets ([#3344](https://github.com/pocketbase/pocketbase/issues/3344)).
   - Enclosed the listing scrolling area within the table so that the horizontal scrollbar and table header are always reachable ([#2505](https://github.com/pocketbase/pocketbase/issues/2505)).
-  - Allowed opening the record update form via direct URL ([#2682](https://github.com/pocketbase/pocketbase/discussions/2682)).
+  - Allowed opening the record preview/update form via direct URL ([#2682](https://github.com/pocketbase/pocketbase/discussions/2682)).
   - Reintroduced the local `date` field tooltip on hover.
   - Speed up the listing loading times for records with large `editor` field values by initially fetching only a partial of the records data (the complete record data is loaded on record preview/update).
 
diff --git a/ui/src/components/records/PageRecords.svelte b/ui/src/components/records/PageRecords.svelte
index eaca62db..0bf69daa 100644
--- a/ui/src/components/records/PageRecords.svelte
+++ b/ui/src/components/records/PageRecords.svelte
@@ -175,7 +175,12 @@
                     </button>
                 {/if}
 
-                <RefreshButton on:refresh={() => recordsList?.load()} />
+                <RefreshButton
+                    on:refresh={() => {
+                        recordsList?.load();
+                        recordsCount?.reload();
+                    }}
+                />
             </div>
 
             <div class="btns-group">
diff --git a/ui/src/components/records/RecordUpsertPanel.svelte b/ui/src/components/records/RecordUpsertPanel.svelte
index e9e13347..7ccc6509 100644
--- a/ui/src/components/records/RecordUpsertPanel.svelte
+++ b/ui/src/components/records/RecordUpsertPanel.svelte
@@ -184,6 +184,7 @@
             // ignore local storage errors in case the serialized data
             // exceed the browser localStorage single value quota
             console.warn("updateDraft failure:", e);
+            window.localStorage.removeItem(draftKey());
         }
     }
 
@@ -535,11 +536,12 @@
         {/if}
     </svelte:fragment>
 
-    <div class="tabs-content">
+    <div class="tabs-content no-animations">
         <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
         <form
             id={formId}
             class="tab-item"
+            class:no-pointer-events={isLoading}
             class:active={activeTab === tabFormKey}
             on:submit|preventDefault={save}
             on:keydown={handleFormKeydown}
diff --git a/ui/src/components/records/fields/EditorField.svelte b/ui/src/components/records/fields/EditorField.svelte
index 823c3d72..496e43e1 100644
--- a/ui/src/components/records/fields/EditorField.svelte
+++ b/ui/src/components/records/fields/EditorField.svelte
@@ -5,7 +5,7 @@
     import { onMount } from "svelte";
 
     export let field;
-    export let value = undefined;
+    export let value = "";
 
     let mounted = false;
     let mountedTimeoutId = null;
@@ -22,6 +22,7 @@
     }
 
     onMount(() => {
+        // slight "offset" the editor mount to avoid blocking the rendering of the other fields
         mountedTimeoutId = setTimeout(() => {
             mounted = true;
         }, 100);