Merge pull request #4495 from nocodb/fix/page-switch-bug

fix(nc-gui): page swtich bug + gallery display bug

packages/nc-gui/app.vue

@@ -36,7 +36,7 @@ if (typeof window !== 'undefined') {
 <template>
   <a-config-provider>
     <NuxtLayout :name="disableBaseLayout ? false : 'base'">
-      <NuxtPage :key="key" />
+      <NuxtPage :transition="false" :key="key" />
     </NuxtLayout>
   </a-config-provider>
 </template>

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -80,7 +80,12 @@ const isRowEmpty = (record: any, col: any) => {
 
 const attachments = (record: any): Attachment[] => {
   try {
-    return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : []
+    if (coverImageColumn?.title && record.row[coverImageColumn.title]) {
+      return typeof record.row[coverImageColumn.title] === 'string'
+        ? JSON.parse(record.row[coverImageColumn.title])
+        : record.row[coverImageColumn.title]
+    }
+    return []
   } catch (e) {
     return []
   }

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -116,7 +116,12 @@ reloadViewDataHook?.on(async () => {
 
 const attachments = (record: any): Attachment[] => {
   try {
-    return coverImageColumn?.title && record.row[coverImageColumn.title] ? JSON.parse(record.row[coverImageColumn.title]) : []
+    if (coverImageColumn?.title && record.row[coverImageColumn.title]) {
+      return typeof record.row[coverImageColumn.title] === 'string'
+        ? JSON.parse(record.row[coverImageColumn.title])
+        : record.row[coverImageColumn.title]
+    }
+    return []
   } catch (e) {
     return []
   }

packages/nc-gui/pages/account/index/users.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
-    <NuxtPage />
-  </div>
-</template>

packages/nc-gui/pages/account/index/users/[[nestedPage]].vue

@@ -5,18 +5,20 @@ const { isUIAllowed } = useUIPermission()
 </script>
 
 <template>
-  <template
-    v-if="
-      $route.params.nestedPage === 'password-reset' ||
-      (!isUIAllowed('superAdminUserManagement') && !isUIAllowed('superAdminAppSettings'))
-    "
-  >
-    <LazyAccountResetPassword />
-  </template>
-  <template v-else-if="$route.params.nestedPage === 'settings'">
-    <LazyAccountSignupSettings />
-  </template>
-  <template v-else-if="isUIAllowed('superAdminUserManagement')">
-    <LazyAccountUserList />
-  </template>
+  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
+    <template
+      v-if="
+        $route.params.nestedPage === 'password-reset' ||
+        (!isUIAllowed('superAdminUserManagement') && !isUIAllowed('superAdminAppSettings'))
+      "
+    >
+      <LazyAccountResetPassword />
+    </template>
+    <template v-else-if="$route.params.nestedPage === 'settings'">
+      <LazyAccountSignupSettings />
+    </template>
+    <template v-else-if="isUIAllowed('superAdminUserManagement')">
+      <LazyAccountUserList />
+    </template>
+  </div>
 </template>

packages/nc-gui/pages/index/index/index.vue

@@ -212,92 +212,94 @@ const copyProjectMeta = async () => {
       </a-dropdown>
     </div>
 
-    <Transition name="layout" mode="out-in">
-      <div v-if="isLoading">
-        <a-skeleton />
-      </div>
-
-      <a-table
-        v-else
-        :custom-row="customRow"
-        :data-source="filteredProjects"
-        :pagination="{ position: ['bottomCenter'] }"
-        :table-layout="md ? 'auto' : 'fixed'"
-      >
-        <template #emptyText>
-          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
-        </template>
+    <!--
+      TODO: bring back transition after fixing the bug with navigation
+      <Transition name="layout" mode="out-in"> -->
+    <div v-if="isLoading">
+      <a-skeleton />
+    </div>
 
-        <!-- Title -->
-        <a-table-column key="title" :title="$t('general.title')" data-index="title">
-          <template #default="{ text, record }">
-            <div class="flex items-center">
-              <div @click.stop>
-                <a-menu class="!border-0 !m-0 !p-0" trigger-sub-menu-action="click">
-                  <template v-if="isUIAllowed('projectTheme')">
-                    <a-sub-menu key="theme" popup-class-name="custom-color">
-                      <template #title>
-                        <div
-                          class="color-selector"
-                          :style="{
-                            'background-color': getProjectPrimary(record),
-                            'width': '8px',
-                            'height': '100%',
-                          }"
-                        />
-                      </template>
+    <a-table
+      v-else
+      :custom-row="customRow"
+      :data-source="filteredProjects"
+      :pagination="{ position: ['bottomCenter'] }"
+      :table-layout="md ? 'auto' : 'fixed'"
+    >
+      <template #emptyText>
+        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
+      </template>
+
+      <!-- Title -->
+      <a-table-column key="title" :title="$t('general.title')" data-index="title">
+        <template #default="{ text, record }">
+          <div class="flex items-center">
+            <div @click.stop>
+              <a-menu class="!border-0 !m-0 !p-0" trigger-sub-menu-action="click">
+                <template v-if="isUIAllowed('projectTheme')">
+                  <a-sub-menu key="theme" popup-class-name="custom-color">
+                    <template #title>
+                      <div
+                        class="color-selector"
+                        :style="{
+                          'background-color': getProjectPrimary(record),
+                          'width': '8px',
+                          'height': '100%',
+                        }"
+                      />
+                    </template>
 
-                      <template #expandIcon></template>
+                    <template #expandIcon></template>
 
-                      <LazyGeneralColorPicker
-                        :model-value="getProjectPrimary(record)"
-                        :colors="projectThemeColors"
-                        :row-size="9"
-                        :advanced="false"
-                        @input="handleProjectColor(record.id, $event)"
-                      />
+                    <LazyGeneralColorPicker
+                      :model-value="getProjectPrimary(record)"
+                      :colors="projectThemeColors"
+                      :row-size="9"
+                      :advanced="false"
+                      @input="handleProjectColor(record.id, $event)"
+                    />
 
-                      <a-sub-menu key="pick-primary">
-                        <template #title>
-                          <div class="nc-project-menu-item group !py-0">
-                            <ClarityColorPickerSolid class="group-hover:text-accent" />
-                            Custom Color
-                          </div>
-                        </template>
+                    <a-sub-menu key="pick-primary">
+                      <template #title>
+                        <div class="nc-project-menu-item group !py-0">
+                          <ClarityColorPickerSolid class="group-hover:text-accent" />
+                          Custom Color
+                        </div>
+                      </template>
 
-                        <template #expandIcon></template>
+                      <template #expandIcon></template>
 
-                        <LazyGeneralChromeWrapper @input="handleProjectColor(record.id, $event)" />
-                      </a-sub-menu>
+                      <LazyGeneralChromeWrapper @input="handleProjectColor(record.id, $event)" />
                     </a-sub-menu>
-                  </template>
-                </a-menu>
-              </div>
-              <div
-                class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2"
-              >
-                {{ text }}
-              </div>
+                  </a-sub-menu>
+                </template>
+              </a-menu>
             </div>
-          </template>
-        </a-table-column>
-        <!-- Actions -->
-
-        <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
-          <template #default="{ text, record }">
-            <div class="flex items-center gap-2">
-              <MdiEditOutline v-e="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
-
-              <MdiDeleteOutline
-                class="nc-action-btn"
-                :data-testid="`delete-project-${record.title}`"
-                @click.stop="deleteProject(record)"
-              />
+            <div
+              class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2"
+            >
+              {{ text }}
             </div>
-          </template>
-        </a-table-column>
-      </a-table>
-    </Transition>
+          </div>
+        </template>
+      </a-table-column>
+      <!-- Actions -->
+
+      <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
+        <template #default="{ text, record }">
+          <div class="flex items-center gap-2">
+            <MdiEditOutline v-e="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
+
+            <MdiDeleteOutline
+              class="nc-action-btn"
+              :data-testid="`delete-project-${record.title}`"
+              @click.stop="deleteProject(record)"
+            />
+          </div>
+        </template>
+      </a-table-column>
+    </a-table>
+    <!--    </Transition> -->
   </div>
 </template>
 

packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/BaseModelSqlv2.ts

@@ -2617,7 +2617,9 @@ class BaseModelSqlv2 {
 
       const proto = await this.getProto();
 
-      const result = (await groupedQb)?.map((d) => {
+      let data = await groupedQb;
+      data = this.convertAttachmentType(data);
+      const result = data?.map((d) => {
         d.__proto__ = proto;
         return d;
       });