fix: expanded form continuous paging

packages/nc-gui/components/general/WorkspaceIcon.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { WorkspaceType } from 'nocodb-sdk'
-import { stringToColor } from '~/utils/colorsUtils'
+import { isColorDark, stringToColor } from '~/utils/colorsUtils'
 
 const props = defineProps<{
   workspace: WorkspaceType | undefined
@@ -26,7 +26,13 @@ const size = computed(() => props.size || 'medium')
     :style="{ backgroundColor: workspaceColor }"
   >
     <template v-if="!props.hideLabel">
-      <div class="font-black">
+      <div
+        class="font-semibold"
+        :class="{
+          'text-white': isColorDark(workspaceColor),
+          'text-black': !isColorDark(workspaceColor),
+        }"
+      >
         {{ props.workspace?.title?.slice(0, 2) }}
       </div>
     </template>

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -194,7 +194,7 @@ watch(commentsWrapperEl, () => {
         </div>
         <div v-if="hasEditPermission" class="p-2 bg-gray-50 gap-2 flex">
           <div class="h-14 flex flex-row w-full bg-white py-2.75 px-1.5 items-center rounded-xl border-1 border-gray-200">
-            <GeneralUserIcon size="base" class="!w-10" />
+            <GeneralUserIcon size="base" class="!w-10" :email="user?.email" />
             <a-input
               v-model:value="comment"
               class="!rounded-lg border-1 bg-white !px-2.5 !py-2 !border-gray-200 nc-comment-box !outline-none"
@@ -230,6 +230,7 @@ watch(commentsWrapperEl, () => {
               <div class="flex justify-between">
                 <div class="flex items-center gap-2">
                   <GeneralUserIcon size="base" :email="log.user" />
+
                   <div class="flex flex-col">
                     <span class="truncate font-bold max-w-50">
                       {{ log.display_name ?? log.user.split('@')[0].slice(0, 2) ?? 'Shared source' }}

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -67,6 +67,8 @@ const state = toRef(props, 'state')
 
 const meta = toRef(props, 'meta')
 
+const islastRow = toRef(props, 'lastRow')
+
 const route = useRoute()
 
 const router = useRouter()
@@ -143,8 +145,12 @@ const isExpanded = useVModel(props, 'modelValue', emits, {
 })
 
 const onClose = () => {
-  if (_row.value?.rowMeta?.new) emits('cancel')
-  isExpanded.value = false
+  if (changedColumns.value.size > 0) {
+    isCloseModalOpen.value = true
+  } else {
+    if (_row.value?.rowMeta?.new) emits('cancel')
+    isExpanded.value = false
+  }
 }
 
 const onDuplicateRow = () => {
@@ -180,18 +186,26 @@ const save = async () => {
 }
 
 const isPreventChangeModalOpen = ref(false)
+const isCloseModalOpen = ref(false)
 
 const discardPreventModal = () => {
-  emits('next')
-  isPreventChangeModalOpen.value = false
+  if (isPreventChangeModalOpen.value) {
+    emits('next')
+    isPreventChangeModalOpen.value = false
+  }
+  if (isCloseModalOpen.value) {
+    isCloseModalOpen.value = false
+    if (_row.value?.rowMeta?.new) emits('cancel')
+    isExpanded.value = false
+  }
 }
 
 const onNext = async () => {
   if (changedColumns.value.size > 0) {
     isPreventChangeModalOpen.value = true
-  } else {
-    emits('next')
+    return
   }
+  emits('next')
 }
 
 const copyRecordUrl = () => {
@@ -206,9 +220,17 @@ const copyRecordUrl = () => {
 }
 
 const saveChanges = async () => {
-  isUnsavedFormExist.value = false
-  await save()
-  emits('next')
+  if (isPreventChangeModalOpen.value) {
+    isUnsavedFormExist.value = false
+    await save()
+    emits('next')
+    isPreventChangeModalOpen.value = false
+  }
+  if (isCloseModalOpen.value) {
+    isCloseModalOpen.value = false
+    await save()
+    isExpanded.value = false
+  }
 }
 const reloadParentRowHook = inject(ReloadRowDataHookInj, createEventHook())
 
@@ -369,6 +391,8 @@ watch(rowId, async (nRow) => {
 const showRightSections = computed(() => {
   return !isNew.value && commentsDrawer.value && isUIAllowed('commentList')
 })
+
+const preventModalStatus = computed(() => isCloseModalOpen.value || isPreventChangeModalOpen.value)
 </script>
 
 <script lang="ts">
@@ -404,7 +428,7 @@ export default {
               </NcButton>
               <NcButton
                 v-if="props.showNextPrevIcons"
-                :disabled="props.lastRow"
+                :disabled="islastRow"
                 type="secondary"
                 class="nc-next-arrow !w-10"
                 @click="onNext"
@@ -706,7 +730,6 @@ export default {
     <template #entity-preview>
       <span>
         <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
-          <component :is="iconMap.record" class="nc-view-icon" />
           <div class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75 break-keep whitespace-nowrap">
             {{ displayValue }}
           </div>
@@ -716,16 +739,16 @@ export default {
   </GeneralDeleteModal>
 
   <!-- Prevent unsaved change modal -->
-  <NcModal v-model:visible="isPreventChangeModalOpen" size="small">
+  <NcModal v-model:visible="preventModalStatus" size="small">
     <template #header>
       <div class="flex flex-row items-center gap-x-2">Do you want to save the changes ?</div>
     </template>
     <div class="mt-2">
       <div class="flex flex-row justify-end gap-x-2 mt-6">
-        <NcButton type="secondary" @click="discardPreventModal">{{ $t('general.quit') }}</NcButton>
+        <NcButton type="secondary" @click="discardPreventModal">{{ $t('labels.discard') }}</NcButton>
 
         <NcButton key="submit" type="primary" label="Rename Table" loading-label="Renaming Table" @click="saveChanges">
-          {{ $t('activity.saveAndQuit') }}
+          {{ $t('general.save') }}
         </NcButton>
       </div>
     </div>

packages/nc-gui/components/smartsheet/grid/index.vue

@@ -68,6 +68,7 @@ const {
   bulkUpdateRows,
   bulkUpdateView,
   optimisedQuery,
+  islastRow,
 } = useViewData(meta, view, xWhere)
 
 const rowHeight = computed(() => {
@@ -183,6 +184,17 @@ onMounted(() => {
       if (coreWrapperRef.value) resizeObserver.observe(coreWrapperRef.value)
     })
 })
+
+const goToNextRow = () => {
+  const currentIndex = getExpandedRowIndex()
+  /* when last index of current page is reached we should move to next page */
+  if (!paginationData.value.isLastPage && currentIndex === paginationData.value.pageSize) {
+    const nextPage = paginationData.value?.page ? paginationData.value?.page + 1 : 1
+    changePage(nextPage)
+  }
+
+  navigateToSiblingRow(NavigateDir.NEXT)
+}
 </script>
 
 <template>
@@ -226,7 +238,6 @@ onMounted(() => {
       :expand-form="expandForm"
       :view-width="viewWidth"
     />
-
     <Suspense>
       <LazySmartsheetExpandedForm
         v-if="expandedFormRow && expandedFormDlg"
@@ -238,7 +249,6 @@ onMounted(() => {
         @update:model-value="addRowExpandOnClose(expandedFormRow)"
       />
     </Suspense>
-
     <SmartsheetExpandedForm
       v-if="expandedFormOnRowIdDlg"
       v-model="expandedFormOnRowIdDlg"
@@ -249,8 +259,8 @@ onMounted(() => {
       :view="view"
       show-next-prev-icons
       :first-row="getExpandedRowIndex() === 0"
-      :last-row="getExpandedRowIndex() === data.length - 1"
-      @next="navigateToSiblingRow(NavigateDir.NEXT)"
+      :last-row="islastRow"
+      @next="goToNextRow()"
       @prev="navigateToSiblingRow(NavigateDir.PREV)"
     />
 

packages/nc-gui/components/workspace/View.vue

@@ -53,9 +53,7 @@ onMounted(() => {
 <template>
   <div v-if="activeWorkspace" class="flex flex-col nc-workspace-settings">
     <div class="flex gap-2 items-center min-w-0 p-6">
-      <span class="nc-workspace-avatar !w-8 !h-8" :style="{ backgroundColor: getWorkspaceColor(activeWorkspace) }">
-        {{ activeWorkspace?.title?.slice(0, 2) }}
-      </span>
+      <GeneralWorkspaceIcon :workspace="activeWorkspace" />
       <h1 class="text-3xl font-weight-bold tracking-[0.5px] mb-0 nc-workspace-title truncate min-w-10 capitalize">
         {{ activeWorkspace?.title }}
       </h1>

packages/nc-gui/composables/useViewData.ts

@@ -99,6 +99,11 @@ export function useViewData(
     },
   })
 
+  const islastRow = computed(() => {
+    const currentIndex = getExpandedRowIndex()
+    return paginationData.value?.isLastPage && currentIndex === formattedData.value.length - 1
+  })
+
   const queryParams = computed(() => ({
     offset: ((paginationData.value.page ?? 0) - 1) * (paginationData.value.pageSize ?? appInfoDefaultLimit),
     limit: paginationData.value.pageSize ?? appInfoDefaultLimit,
@@ -303,6 +308,8 @@ export function useViewData(
   }
 
   const navigateToSiblingRow = async (dir: NavigateDir) => {
+    console.log('test')
+
     const expandedRowIndex = getExpandedRowIndex()
 
     // calculate next row index based on direction
@@ -378,5 +385,6 @@ export function useViewData(
     navigateToSiblingRow,
     getExpandedRowIndex,
     optimisedQuery,
+    islastRow,
   }
 }