From 4128c7f01be49ffef5432ba2dd721f5c3f4334df Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 17 Apr 2024 22:48:27 +0530
Subject: [PATCH] Nc fix: gallery, kanban view cover image load issue if column
 is hidden  (#8290)

* fix(nc-gui): gallery, kanban view cover image load issue if column is hidden

* chore(nc-gui): lint

* fix(nocodb): delete single query cache on update view card cover image

* chore(nc-gui): lint
---
 .../nc-gui/components/dashboard/Sidebar/UserInfo.vue |  2 +-
 packages/nc-gui/components/smartsheet/grid/Table.vue |  4 ++--
 .../components/smartsheet/toolbar/FieldsMenu.vue     | 12 ++++++++++--
 packages/nocodb/src/models/GalleryView.ts            |  9 +++++++++
 packages/nocodb/src/models/KanbanView.ts             |  9 +++++++++
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index e5f1b109a4..c3efd5f604 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -54,7 +54,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex w-full flex-col py-0.9 px-1  border-gray-200 gap-y-1">
+  <div class="flex w-full flex-col py-0.9 px-1 border-gray-200 gap-y-1">
     <NcDropdown v-model:visible="isMenuOpen" placement="topLeft" overlay-class-name="!min-w-64">
       <div
         class="flex flex-row py-1 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-8"
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 003ce7f1aa..2733d0147d 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -1973,8 +1973,8 @@ onKeyStroke('ArrowDown', onDown)
             v-e="[isAddNewRecordGridMode ? 'c:row:add:grid' : 'c:row:add:form']"
             class="nc-grid-add-new-row"
             type="secondary"
-            @click="onNewRecordToFormClick()"
             :disabled="isPaginationLoading"
+            @click="onNewRecordToFormClick()"
           >
             {{ $t('activity.newRecord') }}
           </NcButton>
@@ -1983,8 +1983,8 @@ onKeyStroke('ArrowDown', onDown)
             v-e="[isAddNewRecordGridMode ? 'c:row:add:grid:toggle' : 'c:row:add:form:toggle']"
             class="nc-grid-add-new-row"
             placement="top"
-            @click="isAddNewRecordGridMode ? addEmptyRow() : onNewRecordToFormClick()"
             :disabled="isPaginationLoading"
+            @click="isAddNewRecordGridMode ? addEmptyRow() : onNewRecordToFormClick()"
           >
             <div data-testid="nc-pagination-add-record" class="flex items-center px-2 text-gray-600 hover:text-black">
               <span>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 3417ca3b48..d72330aefa 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -180,7 +180,15 @@ const updateCoverImage = async (val?: string | null) => {
       })
       ;(activeView.value.view as CalendarType).fk_cover_image_col_id = val
     }
-    reloadViewMetaHook?.trigger()
+
+    await reloadViewMetaHook?.trigger()
+
+    // Load data only if the view column is hidden to fetch cover image column data in records.
+    if (val && !fields.value?.find((f) => f.fk_column_id === val)?.show) {
+      await reloadViewDataHook?.trigger({
+        shouldShowLoading: false,
+      })
+    }
   }
 }
 
@@ -356,7 +364,7 @@ useMenuCloseOnEsc(open)
         @click.stop
       >
         <div
-          v-if="!filterQuery && !isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
+          v-if="!isPublic && (activeView?.type === ViewTypes.GALLERY || activeView?.type === ViewTypes.KANBAN)"
           class="flex flex-col gap-y-2 px-2 mb-6"
         >
           <div class="flex text-sm select-none">Select cover image field</div>
diff --git a/packages/nocodb/src/models/GalleryView.ts b/packages/nocodb/src/models/GalleryView.ts
index d24bd481de..10b69e1631 100644
--- a/packages/nocodb/src/models/GalleryView.ts
+++ b/packages/nocodb/src/models/GalleryView.ts
@@ -117,6 +117,15 @@ export default class GalleryView implements GalleryType {
       prepareForResponse(updateObj),
     );
 
+    const view = await View.get(galleryId);
+
+    // on update, delete any optimised single query cache
+    await View.clearSingleQueryCache(
+      view.fk_model_id,
+      [{ id: galleryId }],
+      ncMeta,
+    );
+
     return res;
   }
 }
diff --git a/packages/nocodb/src/models/KanbanView.ts b/packages/nocodb/src/models/KanbanView.ts
index df85f4404c..ac3a2208ca 100644
--- a/packages/nocodb/src/models/KanbanView.ts
+++ b/packages/nocodb/src/models/KanbanView.ts
@@ -125,6 +125,15 @@ export default class KanbanView implements KanbanType {
       prepareForResponse(updateObj),
     );
 
+    const view = await View.get(kanbanId);
+
+    // on update, delete any optimised single query cache
+    await View.clearSingleQueryCache(
+      view.fk_model_id,
+      [{ id: kanbanId }],
+      ncMeta,
+    );
+
     return res;
   }
 }