Merge branch 'fix/save-rows-on-tab-switch' into fix/3565-new-row-insert

# Conflicts:
#	packages/nc-gui/components/smartsheet/Row.vue
#	packages/nc-gui/composables/useSmartsheetRowStore.ts
#	packages/nc-gui/composables/useViewData.ts

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

@@ -17,6 +17,7 @@ import {
   useDebounceFn,
   useVModel,
 } from '#imports'
+import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { NavigateDir } from '~/lib'
 
 interface Props {
@@ -57,13 +58,14 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-let changed = $ref(false)
+const { currentRow } = useSmartsheetRowStoreOrThrow()
 
 const syncValue = useDebounceFn(function () {
-  changed = false
+  currentRow.value.rowMeta.changed = false
   emit('save')
 }, 1000)
 
+
 const isAutoSaved = $computed(() => {
   return [
     UITypes.SingleLineText,
@@ -89,13 +91,13 @@ const vModel = computed({
   get: () => props.modelValue,
   set: (val) => {
     if (val !== props.modelValue) {
-      changed = true
+      currentRow.value.rowMeta.changed = true
       emit('update:modelValue', val)
       if (isAutoSaved) {
         syncValue()
       } else if (!isManualSaved) {
         emit('save')
-        changed = true
+        currentRow.value.rowMeta.changed = true
       }
     }
   },
@@ -129,9 +131,9 @@ const {
 const syncAndNavigate = (dir: NavigateDir) => {
   if (isJSON.value) return
 
-  if (changed) {
+  if (currentRow.value.rowMeta.changed) {
     emit('save')
-    changed = false
+    currentRow.value.rowMeta.changed = false
   }
   emit('navigate', dir)
 }

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

@@ -248,8 +248,7 @@ const onKeyDown = async (e: KeyboardEvent) => {
       e.preventDefault()
       if (selected.row < data.value.length - 1) selected.row++
       break
-    default:
+    default: {
-      {
       const rowObj = data.value[selected.row]
       const columnObj = fields.value[selected.col]
 
@@ -324,6 +323,31 @@ const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) =
     contextMenuTarget.value = target
   }
 }
+
+const rowRefs = $ref<any[]>()
+
+onBeforeUnmount(async () => {
+  console.log(rowRefs)
+  for (const [index, currentRow] of Object.entries(data.value)) {
+    if (currentRow.rowMeta.new) {
+      const syncLTARRefs = rowRefs[index]!.syncLTARRefs
+      const savedRow = await updateOrSaveRow(currentRow, null)
+      await syncLTARRefs(savedRow)
+      currentRow.rowMeta.changed = false
+      continue
+    }
+    if (currentRow.rowMeta.changed) {
+      currentRow.rowMeta.changed = false
+      for (const field of meta?.value.columns ?? []) {
+        if (isVirtualCol(field)) continue
+        if (currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
+          await updateOrSaveRow(currentRow, field.title!)
+        }
+      }
+    }
+  }
+})
+
 </script>
 
 <template>
@@ -399,7 +423,7 @@ const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) =
           </tr>
           </thead>
           <tbody>
-            <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
+          <SmartsheetRow ref="rowRefs" v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
             <template #default="{ state }">
               <tr class="nc-grid-row">
                 <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
@@ -419,7 +443,8 @@ const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) =
                       <a-checkbox v-model:checked="row.rowMeta.selected" />
                     </div>
                     <span class="flex-1" />
-                      <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                    <div v-if="!readOnly && !isLocked" class="nc-expand"
+                         :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Row } from '~/composables'
-import { useProvideSmartsheetRowStore, useSmartsheetStoreOrThrow } from '#imports'
+import { ReloadRowDataHookInj, useProvideSmartsheetRowStore, useSmartsheetStoreOrThrow } from '#imports'
-import { ReloadRowDataHookInj } from '~/context'
 
 interface Props {
   row: Row
@@ -34,6 +33,10 @@ reloadHook.on(() => {
 })
 
 provide(ReloadRowDataHookInj, reloadHook)
+
+defineExpose({
+  syncLTARRefs
+})
 </script>
 
 <template>

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -21,6 +21,11 @@ import {
 
 import type { TabItem } from '~/composables'
 
+
+const { activeTab } = defineProps<{
+  activeTab: TabItem
+}>()
+
 const { metas } = useMetas()
 
 const activeView = ref()
@@ -29,11 +34,15 @@ const el = ref<typeof SmartsheetGrid>()
 
 const fields = ref<ColumnType[]>([])
 
-const tabMeta = inject(
+// const tabMeta = inject(
+//   TabMetaInj,
+//   computed(() => ({} as TabItem)),
+// )
+provide(
   TabMetaInj,
-  computed(() => ({} as TabItem)),
+  ref(activeTab),
 )
-const meta = computed<TableType>(() => metas.value?.[tabMeta?.value?.id as string])
+const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 
 const reloadEventHook = createEventHook<void>()
 const openNewRecordFormHook = createEventHook<void>()

packages/nc-gui/composables/useSmartsheetRowStore.ts

@@ -29,6 +29,8 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
 
   const { metas } = useMetas()
 
+  const currentRow = ref(row)
+
   // state
   const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
 
@@ -132,6 +134,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     removeLTARRef,
     syncLTARRefs,
     loadRow,
+    currentRow
   }
 }, 'smartsheet-row-store')
 

packages/nc-gui/composables/useViewData.ts

@@ -28,6 +28,7 @@ export interface Row {
     new?: boolean
     selected?: boolean
     commentCount?: number
+    changed?: boolean
   }
 }
 
@@ -162,7 +163,6 @@ export function useViewData(
   }
 
   async function loadData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
-    console.log(queryParams.value)
     if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
     const response = !isPublic.value
       ? await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
@@ -253,7 +253,7 @@ export function useViewData(
 
   async function updateOrSaveRow(row: Row, property: string) {
     if (row.rowMeta.new) {
-      await insertRow(row.row, formattedData.value.indexOf(row))
+      return await insertRow(row.row, formattedData.value.indexOf(row))
     } else {
       await updateRowProperty(row, property)
     }
@@ -280,11 +280,9 @@ export function useViewData(
 
     if (res.message) {
       message.info(
-        `Row delete failed: ${h('div', {
+        `Row delete failed: ${`Unable to delete row with ID ${id} because of the following:
-          innerHTML: `<div style="padding:10px 4px">Unable to delete row with ID ${id} because of the following:
+              \n${res.message.join('\n')}.\n
-              <br><br>${res.message.join('<br>')}<br><br>
+              Clear the data first & try again`})}`,
-              Clear the data first & try again</div>`,
-        })}`,
       )
       return false
     }

packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

@@ -1,8 +1,16 @@
 <script setup lang="ts">
+import { TabItem } from '~/composables'
+import { TabMetaInj } from '~/context'
+
 const { getMeta } = useMetas()
 const route = useRoute()
 const loading = ref(true)
 
+const activeTab = inject(
+  TabMetaInj,
+  computed(() => ({} as TabItem)),
+)
+
 getMeta(route.params.title as string, true).finally(() => {
   loading.value = false
 })
@@ -12,7 +20,7 @@ getMeta(route.params.title as string, true).finally(() => {
   <div v-if="loading" class="flex items-center justify-center h-full w-full">
     <a-spin size="large" />
   </div>
-  <TabsSmartsheet v-else />
+  <TabsSmartsheet :active-tab="activeTab" :key="route.params.title" v-else />
 </template>
 
 <style scoped></style>