From a4820db86b52e31481fb6468a70961f9dedd39fa Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Sat, 16 Sep 2023 17:05:21 +0530
Subject: [PATCH] fix: keep linked status throughout pagination

---
 .../virtual-cell/components/ListItems.vue     |  3 -
 packages/nc-gui/composables/useLTARStore.ts   | 56 +++++++++----------
 2 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 619b51e43e..ead74d2e94 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -49,8 +49,6 @@ const isForm = inject(IsFormInj, ref(false))
 
 const saveRow = inject(SaveRowInj, () => {})
 
-const selectedRowIndex = ref(0)
-
 const isFocused = ref(false)
 
 const linkRow = async (row: Record<string, any>, id: number) => {
@@ -83,7 +81,6 @@ watch(vModel, (nextVal, prevVal) => {
       loadChildrenList()
     }
     loadChildrenExcludedList(rowState.value)
-    selectedRowIndex.value = 0
   }
 })
 
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 68e9dc8c0f..91aaef9e71 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -72,6 +72,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const isChildrenExcludedListLinked = ref<Array<boolean>>([])
 
+    const newRowState = reactive({
+      state: null,
+    })
+
     const childrenListCount = ref(0)
 
     const { t } = useI18n()
@@ -121,6 +125,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     })
 
     const loadChildrenExcludedList = async (activeState?: any) => {
+      if (activeState) newRowState.state = activeState
       try {
         if (isPublic.value) {
           const router = useRouter()
@@ -146,26 +151,6 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             },
           )
 
-          if (childrenExcludedList.value?.list && activeState && activeState[column.value.title]) {
-            childrenExcludedList.value.list = childrenExcludedList.value?.list.filter((c: any) => {
-              // filter out exact same objects in activeState[column.value.title]
-              // compare all keys and values
-              const found = activeState[column.value.title].find((a: any) => {
-                let isSame = true
-
-                for (const key in a) {
-                  if (a[key] !== c[key]) {
-                    isSame = false
-                  }
-                }
-
-                return isSame
-              })
-
-              return !found
-            })
-          }
-
           /** if new row load all records */
         } else if (isNewRow?.value) {
           childrenExcludedList.value = await $api.dbTableRow.list(
@@ -199,10 +184,32 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             } as any,
           )
         }
+
         childrenExcludedList.value?.list.forEach((row: Record<string, any>, index: number) => {
           isChildrenExcludedListLinked.value[index] = false
           isChildrenExcludedListLoading.value[index] = false
         })
+
+        if (childrenExcludedList.value?.list && activeState && activeState[column.value.title]) {
+          // Mark out exact same objects in activeState[column.value.title] as Linked
+          // compare all keys and values
+          childrenExcludedList.value.list.forEach((row: any, index: number) => {
+            const found = activeState[column.value.title].find((a: any) => {
+              let isSame = true
+
+              for (const key in a) {
+                if (a[key] !== row[key]) {
+                  isSame = false
+                }
+              }
+              return isSame
+            })
+
+            if (found) {
+              isChildrenExcludedListLinked.value[index] = true
+            }
+          })
+        }
       } catch (e: any) {
         message.error(`${t('msg.error.failedToLoadList')}: ${await extractSdkResponseErrorMsg(e)}`)
       }
@@ -424,20 +431,13 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     // watchers
     watch(childrenExcludedListPagination, async () => {
-      await loadChildrenExcludedList()
+      await loadChildrenExcludedList(newRowState.state)
     })
 
     watch(childrenListPagination, async () => {
       await loadChildrenList()
     })
 
-    watch(childrenExcludedList, async () => {
-      childrenExcludedList.value?.list.forEach((row: Record<string, any>, index: number) => {
-        isChildrenExcludedListLinked.value[index] = false
-        isChildrenExcludedListLoading.value[index] = false
-      })
-    })
-
     watch(childrenList, async () => {
       childrenList.value?.list.forEach((row: Record<string, any>, index: number) => {
         isChildrenListLinked.value[index] = true