From 5ff412038a9b879dd34748c07b13039112981879 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 12:35:28 +0200
Subject: [PATCH 01/25] chore(gui-v2): apply theme scrollbar on ant modal

---
 packages/nc-gui-v2/assets/style-v2.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index c94a2803ff..462ee5f05b 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -104,3 +104,7 @@ html {
 .nc-active-btn > .ant-btn{
   @apply bg-primary/20;
 }
+
+.ant-modal-wrap {
+  @apply !scrollbar-thin-primary;
+}

From 1cb745160dac1828a34485ae79a6a4c8a349ddbf Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 16:14:16 +0800
Subject: [PATCH 02/25] fix(gui-v2): rating select object value issue

---
 .../smartsheet-column/RatingOptions.vue       | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 7907a710e6..b5d4bf9640 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -35,7 +35,8 @@ const picked = ref(formState.value.meta.color || enumColor.light[0])
 
 // set default value
 formState.value.meta = {
-  icons: {
+  iconIdx: 0,
+  icon: {
     full: 'mdi-star',
     empty: 'mdi-star-outline',
   },
@@ -43,22 +44,36 @@ formState.value.meta = {
   max: 5,
   ...formState.value.meta,
 }
+
+// antdv doesn't support object as value
+// use iconIdx as value and update back in watch
+const iconIdx = iconList.findIndex(
+  (ele) => ele.full === formState.value.meta.icon.full && ele.empty === formState.value.meta.icon.empty,
+)
+
+formState.value.meta.iconIdx = iconIdx === -1 ? 0 : iconIdx
+
+watch(
+  () => formState.value.meta.iconIdx,
+  (v) => {
+    formState.value.meta.icon = iconList[v]
+  },
+)
 </script>
 
 <template>
   <a-row>
     <a-col :span="12">
       <a-form-item label="Icon">
-        <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
-          <!-- FIXME: antdv doesn't support object as value -->
-          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon">
+        <a-select v-model:value="formState.meta.iconIdx" size="small" class="w-52">
+          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
             <component
               :is="getMdiIcon(icon.full)"
+              class="mx-1"
               :style="{
                 color: formState.meta.color,
               }"
             />
-            {{ ' ' }}
             <component
               :is="getMdiIcon(icon.empty)"
               :style="{

From 60097d164c0f5bbf0d01e4e3456ca832e6aa121c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 16:19:45 +0800
Subject: [PATCH 03/25] fix(gui-v2): checkbox select object value issue

---
 .../smartsheet-column/CheckboxOptions.vue     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
index dd1e2743ac..1d2d4c3864 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
@@ -50,22 +50,36 @@ formState.value.meta = {
   color: '#777',
   ...formState.value.meta,
 }
+
+// antdv doesn't support object as value
+// use iconIdx as value and update back in watch
+const iconIdx = iconList.findIndex(
+  (ele) => ele.checked === formState.value.meta.icon.checked && ele.unchecked === formState.value.meta.icon.unchecked,
+)
+
+formState.value.meta.iconIdx = iconIdx === -1 ? 0 : iconIdx
+
+watch(
+  () => formState.value.meta.iconIdx,
+  (v) => {
+    formState.value.meta.icon = iconList[v]
+  },
+)
 </script>
 
 <template>
   <a-row>
     <a-col :span="24">
       <a-form-item label="Icon">
-        <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
-          <!-- FIXME: antdv doesn't support object as value -->
-          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon">
+        <a-select v-model:value="formState.meta.iconIdx" size="small" class="w-52">
+          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="i">
             <component
               :is="getMdiIcon(icon.checked)"
+              class="mx-1"
               :style="{
                 color: formState.meta.color,
               }"
             />
-            {{ ' ' }}
             <component
               :is="getMdiIcon(icon.unchecked)"
               :style="{

From 0df12311a61a0ddde1a40a77a289e8b47c488992 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 5 Aug 2022 14:05:12 +0530
Subject: [PATCH 04/25] refactor/gui v2 added Percent column

---
 .../smartsheet-column/EditOrAdd.vue           |  1 +
 .../smartsheet-column/PercentOptions.vue      | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 2ab00f6aae..e1e3f8f73f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -96,6 +96,7 @@ watchEffect(() => {
       <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" />
       <SmartsheetColumnLinkedToAnotherRecordOptions v-if="formState.uidt === UITypes.LinkToAnotherRecord" />
       <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
+      <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />
 
       <div
         v-if="!isVirtualCol(formState.uidt)"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue
new file mode 100644
index 0000000000..f8fb5b7c96
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/PercentOptions.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { precisions } from '@/utils/percentUtils'
+
+const { formState } = $(useColumnCreateStoreOrThrow())
+
+if (!formState.meta) formState.meta = {}
+if (!formState.meta?.precision) formState.meta.precision = precisions[0].id
+if (!formState.meta?.negative) formState.meta.negative = false
+if (!formState.meta?.default) formState.meta.default = null
+</script>
+
+<template>
+  <div class="flex flex-col mt-2">
+    <div class="flex flex-row space-x-2">
+      <a-form-item class="flex w-1/2" label="Precision">
+        <a-select v-model:value="formState.meta.precision" size="small">
+          <a-select-option v-for="(precision, i) of precisions" :key="i" :value="precision.id">
+            <div class="flex flex-row items-center">
+              <div class="text-xs">
+                {{ precision.title }}
+              </div>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="Default Number (%)">
+        <a-input v-model:value="formState.meta.default" size="small" name="default" type="number" />
+      </a-form-item>
+    </div>
+    <div class="flex flex-row mt-2">
+      <a-form-item>
+        <div class="flex flex-row space-x-2 items-center">
+          <a-switch v-model:checked="formState.meta.negative" name="negative" />
+          <div class="text-xs">Allow negative numbers</div>
+        </div>
+      </a-form-item>
+    </div>
+  </div>
+</template>

From 4ba29b92cf8642ac956d32df1a268b139d829594 Mon Sep 17 00:00:00 2001
From: Pranav C <61551451+pranavxc@users.noreply.github.com>
Date: Sun, 31 Jul 2022 22:42:10 +0530
Subject: [PATCH 05/25] wip(gui-v2): bt column

---
 .../composables/columns/useLTARColumn.ts      | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 packages/nc-gui-v2/composables/columns/useLTARColumn.ts

diff --git a/packages/nc-gui-v2/composables/columns/useLTARColumn.ts b/packages/nc-gui-v2/composables/columns/useLTARColumn.ts
new file mode 100644
index 0000000000..4450878126
--- /dev/null
+++ b/packages/nc-gui-v2/composables/columns/useLTARColumn.ts
@@ -0,0 +1,63 @@
+import {ColumnType, LinkToAnotherRecordType, TableType} from "nocodb-sdk";
+import {Ref} from "vue";
+
+export default (column: Ref<ColumnType>) =>{
+
+  const {$api} = useNuxtApp()
+  const {metas,getMeta} = useMetas()
+
+  const colOptions = computed<LinkToAnotherRecordType>(() => column.value.colOptions as LinkToAnotherRecordType)
+  const relatedTableMeta = computed<TableType>(() => colOptions?.value && metas.value?.[colOptions.value?.fk_related_model_id as string])
+
+  const removeChild = () => {
+    // todo: audit
+    // await this.$api.dbTableRow.nestedRemove(
+    //   'noco',
+    //   this.projectName,
+    //   this.meta.title,
+    //   id,
+    //   'bt',
+    //   this.column.title,
+    //   parent[this.parentPrimaryKey]
+    // );
+  }
+
+  const addChild = () => {
+    // await this.$api.dbTableRow.nestedAdd('noco', this.projectName, this.meta.title, id, 'bt', this.column.title, pid);
+  }
+
+ const loadRelatedTableMeta= async ()=>{
+   return getMeta(colOptions.value?.fk_related_model_id as string)
+ }
+
+
+  // this.data = await this.$api.dbTableRow.nestedChildrenExcludedList(
+  //   'noco',
+  //   this.projectName,
+  //   this.parentMeta.title,
+  //   this.rowId,
+  //   this.column.colOptions.type,
+  //   this.column.title,
+  //   {
+  //     limit: this.size,
+  //     offset: this.size * (this.page - 1),
+  //     where: this.query && `(${this.primaryCol},like,${this.query})`,
+  //   }
+  // );
+
+
+  //   this.data = await this.$api.dbTableRow.nestedList(
+  //           'noco',
+  //           this.projectName,
+  //           this.parentMeta.title,
+  //           this.rowId,
+  //           this.column.colOptions.type,
+  //           this.column.title,
+  //           {
+  //             limit: this.size,
+  //             offset: this.size * (this.page - 1),
+  //           }
+  //         );
+
+  return  {addChild, removeChild, loadRelatedTableMeta, relatedTableMeta}
+}

From d2b6c12bd0b77a54a9ed125297ed16e1da686f22 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 2 Aug 2022 23:31:13 +0530
Subject: [PATCH 06/25] wip(gui-v2): belongs to cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  |   5 +-
 .../components/smartsheet/VirtualCell.vue     |   8 +-
 .../components/virtual-cell/BelongsTo.vue     | 472 +-----------------
 .../virtual-cell/components/ItemChip.vue      |  15 +-
 packages/nc-gui-v2/context/index.ts           |   2 +
 5 files changed, 24 insertions(+), 478 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 528ebcba5c..bc2918123f 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { isVirtualCol } from 'nocodb-sdk'
+import { ColumnType, isVirtualCol } from 'nocodb-sdk'
 import {
+  Row,
   inject,
   onKeyStroke,
   onMounted,
@@ -13,6 +14,7 @@ import {
 import {
   ActiveViewInj,
   ChangePageInj,
+  EditModeInj,
   FieldsInj,
   IsFormInj,
   IsGridInj,
@@ -279,6 +281,7 @@ const onNavigate = (dir: NavigateDir) => {
                     v-model="row.row[columnObj.title]"
                     :column="columnObj"
                     @navigate="onNavigate"
+                    :active="selected.col === colIndex && selected.row === rowIndex"
                   />
 
                   <SmartsheetCell
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 24e8967347..2af5cd62bf 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, useVirtualCell } from '#imports'
-import { ColumnInj, ValueInj } from '~/context'
+import { ColumnInj, ValueInj, ActiveCellInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
   column: ColumnType
   modelValue: any
+  active?: boolean
 }
 
-const { column, modelValue: value } = defineProps<Props>()
+const props = defineProps<Props>()
+const  { column, modelValue: value,  } = props
+const active = toRef(props, 'active', false)
 
 const emit = defineEmits(['update:modelValue', 'navigate'])
 
 provide(ColumnInj, column)
 provide(ValueInj, value)
+provide(ActiveCellInj, active)
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 7ccd995023..1b49a7767a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -3,6 +3,7 @@ import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
 import { ColumnInj, ValueInj } from '~/context'
 import { useBelongsTo } from '#imports'
+import MdiExpandIcon from '~icons/mdi/arrow-expand'
 
 const column = inject(ColumnInj)
 const value = inject(ValueInj)
@@ -11,480 +12,17 @@ const localState = null
 
 const { parentMeta, loadParentMeta, primaryValueProp } = useBelongsTo(column as ColumnType)
 await loadParentMeta()
-// import ApiFactory from '@/components/project/spreadsheet/apis/apiFactory'
-/* import { RelationTypes, UITypes, isSystemColumn } from 'nocodb-sdk'
-import ListItems from '~/components/project/spreadsheet/components/virtualCell/components/ListItems'
-import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
-import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/ItemChip'
-import { parseIfInteger } from '@/helpers'
 
-export default {
-  name: 'BelongsToCell',
-  components: { ListChildItems, ItemChip, ListItems },
-  props: {
-    isLocked: Boolean,
-    breadcrumbs: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    isForm: Boolean,
-    value: [Array, Object],
-    meta: [Object],
-    nodes: [Object],
-    row: [Object],
-    api: [Object, Function],
-    sqlUi: [Object, Function],
-    active: Boolean,
-    isNew: Boolean,
-    disabledColumns: Object,
-    isPublic: Boolean,
-    metas: Object,
-    password: String,
-    column: Object,
-  },
-  data: () => ({
-    newRecordModal: false,
-    parentListModal: false,
-    // parentMeta: null,
-    list: null,
-    childList: null,
-    dialogShow: false,
-    confirmAction: null,
-    confirmMessage: '',
-    selectedParent: null,
-    isNewParent: false,
-    expandFormModal: false,
-    localState: null,
-    pid: null,
-  }),
-  computed: {
-    parentMeta() {
-      return this.metas
-        ? this.metas[this.column.colOptions.fk_related_model_id]
-        : this.$store.state.meta.metas[this.column.colOptions.fk_related_model_id]
-    },
-    // todo : optimize
-    parentApi() {},
-    parentId() {
-      return (
-        this.pid ??
-        (this.value &&
-          this.parentMeta &&
-          this.parentMeta.columns
-            .filter((c) => c.pk)
-            .map((c) => this.value[c.title])
-            .join('___'))
-      )
-    },
-    rowId() {
-      return (
-        this.row &&
-        this.meta &&
-        this.meta.columns
-          .filter((c) => c.pk)
-          .map((c) => this.row[c.title])
-          .join('___')
-      )
-    },
-    parentPrimaryCol() {
-      return this.parentMeta && (this.parentMeta.columns.find((c) => c.pv) || {}).title
-    },
-    parentPrimaryKey() {
-      return this.parentMeta && (this.parentMeta.columns.find((c) => c.pk) || {}).title
-    },
-    parentReferenceKey() {
-      return (
-        this.parentMeta && (this.parentMeta.columns.find((c) => c.id === this.column.colOptions.fk_parent_column_id) || {}).title
-      )
-    },
-    btWhereClause() {
-      // if parent reference key is pk, then filter out the selected value
-      // else, filter out the selected value + empty values (as we can't set an empty value)
-      const prk = this.parentReferenceKey
-      const selectedValue =
-        this.meta && this.meta.columns
-          ? this.meta.columns
-              .filter((c) => c.id === this.column.colOptions.fk_child_column_id)
-              .map((c) => this.row[c.title] || '')
-              .join('___')
-          : ''
-      return `(${prk},not,${selectedValue})~or(${prk},is,null)`
-    },
-    parentQueryParams() {
-      if (!this.parentMeta) {
-        return {}
-      }
-      // todo: use reduce
-      return {}
-    },
-    parentAvailableColumns() {
-      if (!this.parentMeta) {
-        return []
-      }
-
-      const columns = []
-      if (this.parentMeta.columns) {
-        columns.push(...this.parentMeta.columns.filter((c) => !isSystemColumn(c)))
-      }
-      return columns
-    },
-    // todo:
-    form() {
-      return this.selectedParent && !this.isPublic
-        ? () => import('~/components/project/spreadsheet/components/ExpandedForm')
-        : 'span'
-    },
-    cellValue() {
-      if (this.value || this.localState) {
-        if (this.parentMeta && this.parentPrimaryCol) {
-          return (this.value || this.localState)[this.parentPrimaryCol]
-        }
-        return Object.values(this.value || this.localState)[1]
-      }
-      return null
-    },
-  },
-  watch: {
-    isNew(n, o) {
-      if (!n && o) {
-        this.localState = null
-        this.$emit('update:localState', this.localState)
-      }
-    },
-  },
-  async mounted() {
-    if (this.isNew && this.value) {
-      this.localState = this.value
-    }
-    if (this.isForm) {
-      await this.loadParentMeta()
-    }
-  },
-  created() {
-    this.loadParentMeta()
-  },
-  methods: {
-    async onParentSave(parent) {
-      if (this.isNewParent) {
-        await this.addChildToParent(parent)
-      } else {
-        this.$emit('loadTableData')
-      }
-    },
-    async insertAndMapNewParentRecord() {
-      await this.loadParentMeta()
-      this.newRecordModal = false
-      this.isNewParent = true
-      this.selectedParent = {
-        [(
-          this.parentMeta.columns.find(
-            (c) =>
-              c.uidt === UITypes.LinkToAnotherRecord &&
-              c.colOptions &&
-              this.column.colOptions &&
-              c.colOptions.fk_child_column_id === this.column.colOptions.fk_child_column_id &&
-              c.colOptions.fk_parent_column_id === this.column.colOptions.fk_parent_column_id &&
-              c.colOptions.type === RelationTypes.HAS_MANY,
-          ) || {}
-        ).title]: [this.row],
-      }
-      this.expandFormModal = true
-    },
-
-    async unlink(parent) {
-      const column = this.meta.columns.find((c) => c.id === this.column.colOptions.fk_child_column_id)
-      const _cn = column.title
-      if (this.isNew) {
-        this.$emit('updateCol', this.row, _cn, null)
-        this.localState = null
-        this.$emit('update:localState', this.localState)
-        return
-      }
-      if (column.rqd) {
-        this.$toast.info('Unlink is not possible, instead map to another parent.').goAway(3000)
-        return
-      }
-      const id = this.meta.columns
-        .filter((c) => c.pk)
-        .map((c) => this.row[c.title])
-        .join('___')
-
-      // todo: audit
-      await this.$api.dbTableRow.nestedRemove(
-        NOCO,
-        this.projectName,
-        this.meta.title,
-        id,
-        'bt',
-        this.column.title,
-        parent[this.parentPrimaryKey],
-      )
-
-      this.$emit('loadTableData')
-      if (this.isForm && this.$refs.childList) {
-        this.$refs.childList.loadData()
-      }
-    },
-    async showParentListModal() {
-      this.parentListModal = true
-      await this.loadParentMeta()
-      const pid = this.meta.columns
-        .filter((c) => c.pk)
-        .map((c) => this.row[c.title])
-        .join('___')
-      const _cn = this.parentMeta.columns.find((c) => c.column_name === this.hm.column_name).title
-      this.childList = await this.parentApi.paginatedList({
-        where: `(${_cn},eq,${pid})`,
-      })
-    },
-    async removeChild(child) {
-      this.dialogShow = true
-      this.confirmMessage = 'Do you want to delete the record?'
-      this.confirmAction = async (act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
-        } else {
-          const id = this.parentMeta.columns
-            .filter((c) => c.pk)
-            .map((c) => child[c.title])
-            .join('___')
-          await this.parentApi.delete(id)
-          this.pid = null
-          this.dialogShow = false
-          this.$emit('loadTableData')
-          if (this.isForm && this.$refs.childList) {
-            this.$refs.childList.loadData()
-          }
-        }
-      }
-    },
-    async loadParentMeta() {
-      // todo: optimize
-      if (!this.parentMeta) {
-        await this.$store.dispatch('meta/ActLoadMeta', {
-          env: this.nodes.env,
-          dbAlias: this.nodes.dbAlias,
-          id: this.column.colOptions.fk_related_model_id,
-        })
-      }
-    },
-    async showNewRecordModal() {
-      await this.loadParentMeta()
-      this.newRecordModal = true
-    },
-    async addChildToParent(parent) {
-      const pid = this._extractRowId(parent, this.parentMeta)
-      const id = this._extractRowId(this.row, this.meta)
-      const _cn = this.meta.columns.find((c) => c.id === this.column.colOptions.fk_child_column_id).title
-
-      if (this.isNew) {
-        const _rcn = this.parentMeta.columns.find((c) => c.id === this.column.colOptions.fk_parent_column_id).title
-        this.localState = parent
-        this.$emit('update:localState', this.localState)
-        this.$emit('updateCol', this.row, _cn, parent[_rcn])
-        this.newRecordModal = false
-        return
-      }
-      await this.$api.dbTableRow.nestedAdd(NOCO, this.projectName, this.meta.title, id, 'bt', this.column.title, pid)
-
-      this.pid = pid
-
-      this.newRecordModal = false
-
-      this.$emit('loadTableData')
-      if (this.isForm && this.$refs.childList) {
-        this.$refs.childList.loadData()
-      }
-    },
-    async editParent(parent) {
-      await this.loadParentMeta()
-      this.isNewParent = false
-      this.selectedParent = parent
-      this.expandFormModal = true
-      setTimeout(() => {
-        this.$refs.expandedForm && this.$refs.expandedForm.reload()
-      }, 500)
-    },
-  },
-} */
 </script>
 
 <template>
-  <div class="d-flex d-100 chips-wrapper" :class="{ active }">
-    <!--    <template v-if="!isForm"> -->
-    <div class="chips d-flex align-center img-container flex-grow-1 hm-items">
+  <div class="flex w-full chips-wrapper align-center group" :class="{ active }">
+    <div class="chips d-flex align-center flex-grow">
       <template v-if="value || localState">
         <ItemChip :active="active" :item="value" :value="value[primaryValueProp]" />
-        <!--                      :readonly="isLocked || (isPublic && !isForm)"
-                    @edit="editParent"
-                    @unlink="unlink" -->
       </template>
     </div>
-    <!--      <div
-            v-if="!isLocked && _isUIAllowed('xcDatatableEditable') && (isForm || !isPublic)"
-            class="action align-center justify-center px-1 flex-shrink-1"
-            :class="{ 'd-none': !active, 'd-flex': active }"
-          >
-            <x-icon small :color="['primary', 'grey']" @click="showNewRecordModal">
-              {{ value ? 'mdi-arrow-expand' : 'mdi-plus' }}
-            </x-icon>
-          </div> -->
-    <!--    </template> -->
-    <!--    <ListItems
-          v-if="newRecordModal"
-          :key="parentId"
-          v-model="newRecordModal"
-          :size="10"
-          :meta="parentMeta"
-          :column="column"
-          :primary-col="parentPrimaryCol"
-          :primary-key="parentPrimaryKey"
-          :parent-meta="meta"
-          :api="parentApi"
-          :query-params="{
-            ...parentQueryParams,
-            where: isNew ? null : `${btWhereClause}`,
-          }"
-          :is-public="isPublic"
-          :tn="bt && bt.rtn"
-          :password="password"
-          :row-id="rowId"
-          @add-new-record="insertAndMapNewParentRecord"
-          @add="addChildToParent"
-        />
-
-        <ListChildItems
-          v-if="parentMeta && isForm"
-          ref="childList"
-          :is-form="isForm"
-          :local-state="localState ? [localState] : []"
-          :is-new="isNew"
-          :size="10"
-          :parent-meta="parentMeta"
-          :meta="parentMeta"
-          :primary-col="parentPrimaryCol"
-          :primary-key="parentPrimaryKey"
-          :api="parentApi"
-          :query-params="{
-            ...parentQueryParams,
-            where: `(${parentPrimaryKey},eq,${parentId})`,
-          }"
-          :bt="value"
-          :is-public="isPublic"
-          :row-id="parentId"
-          @new-record="showNewRecordModal"
-          @edit="editParent"
-          @unlink="unlink"
-        />
-
-        <v-dialog
-          v-if="!isPublic && selectedParent"
-          v-model="expandFormModal"
-          :overlay-opacity="0.8"
-          width="1000px"
-          max-width="100%"
-          class="mx-auto"
-        >
-          <component
-            :is="form"
-            v-if="selectedParent"
-            ref="expandedForm"
-            v-model="selectedParent"
-            v-model:is-new="isNewParent"
-            :db-alias="nodes.dbAlias"
-            :has-many="parentMeta.hasMany"
-            :belongs-to="parentMeta.belongsTo"
-            :table="parentMeta.table_name"
-            :old-row="{ ...selectedParent }"
-            :meta="parentMeta"
-            :sql-ui="sqlUi"
-            :primary-value-column="parentPrimaryCol"
-            :api="parentApi"
-            :available-columns="parentAvailableColumns"
-            :nodes="nodes"
-            :query-params="parentQueryParams"
-            icon-color="warning"
-            :breadcrumbs="breadcrumbs"
-            @cancel="
-              selectedParent = null
-              expandFormModal = false
-            "
-            @input="onParentSave"
-          />
-        </v-dialog> -->
+    <div class="flex-1" />
+    <MdiExpandIcon class="hidden group-hover:inline text-xs text-gray-500/50 hover:text-gray-500" />
   </div>
 </template>
-
-<style scoped lang="scss">
-.items-container {
-  overflow-x: visible;
-  max-height: min(500px, 60vh);
-  overflow-y: auto;
-}
-
-.primary-value {
-  .primary-key {
-    display: none;
-    margin-left: 0.5em;
-  }
-
-  &:hover .primary-key {
-    display: inline;
-  }
-}
-
-.child-card {
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 0 0.2em var(--v-textColor-lighten5);
-  }
-}
-
-.hm-items {
-  flex-wrap: wrap;
-  row-gap: 3px;
-  gap: 3px;
-  margin: 3px auto;
-}
-
-.chips-wrapper {
-  .chips {
-    max-width: 100%;
-  }
-
-  &.active {
-    .chips {
-      max-width: calc(100% - 22px);
-    }
-  }
-}
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- * @author Md Ishtiaque Zafar <ishtiaque.zafar92@gmail.com>
- * @author Wing-Kam Wong <wingkwong.code@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index cd0571b444..ce0642d6a9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
-import { ReadonlyInj } from '~/context'
+import { ActiveCellInj, ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
 interface Props {
   value?: string | number | boolean
-  active?: boolean
   item?: any
 }
 
-const { value, active, item } = defineProps<Props>()
+const { value, item } = defineProps<Props>()
 const readonly = inject(ReadonlyInj, false)
+const active = inject(ActiveCellInj, false)
 </script>
 
 <template>
-  <v-chip class="chip" :class="{ active }" small text-color="textColor">
+  <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }" >
     <span class="name">{{ value }}</span>
-
-    <div v-show="active" v-if="!readonly" class="mr-n1 ml-2">
-      <MdiCloseThickIcon class="unlink-icon" />
+    <div v-show="active" v-if="!readonly" class="flex align-center ">
+      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" />
     </div>
-  </v-chip>
+  </div>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 58aea722a6..988084f1c1 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -4,6 +4,8 @@ import type { EventHook } from '@vueuse/core'
 import type { useViewData } from '#imports'
 import type { TabItem } from '~/composables/useTabs'
 
+export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled')
+export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')

From 8e1c7fca092a2cc497021092d6a524572b27b292 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 01:59:24 +0530
Subject: [PATCH 07/25] fix(gui-v2): create a store for LTAR column

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/VirtualCell.vue     | 12 +++-
 .../components/virtual-cell/BelongsTo.vue     | 12 ++--
 .../virtual-cell/components/ItemChip.vue      |  4 +-
 .../composables/columns/useLTARColumn.ts      | 25 ++++---
 packages/nc-gui-v2/composables/index.ts       |  1 +
 .../nc-gui-v2/composables/useLTARStore.ts     | 65 +++++++++++++++++++
 packages/nc-gui-v2/context/index.ts           |  1 +
 7 files changed, 97 insertions(+), 23 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useLTARStore.ts

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 2af5cd62bf..3d74a14c6f 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -1,24 +1,30 @@
 <script setup lang="ts">
+import { computed } from '@vue/reactivity'
+import { Row } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, useVirtualCell } from '#imports'
-import { ColumnInj, ValueInj, ActiveCellInj } from '~/context'
+import { ColumnInj, ValueInj, ActiveCellInj, RowInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
   column: ColumnType
   modelValue: any
+  row: Record<string, any>
   active?: boolean
 }
 
 const props = defineProps<Props>()
-const  { column, modelValue: value,  } = props
+const emit = defineEmits(['update:modelValue', 'navigate'])
+
+const { column, modelValue: value, row } = props
 const active = toRef(props, 'active', false)
 
-const emit = defineEmits(['update:modelValue', 'navigate'])
 
 provide(ColumnInj, column)
 provide(ValueInj, value)
 provide(ActiveCellInj, active)
+provide(RowInj, row)
+provide('value', value)
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 1b49a7767a..3b49f0536f 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -1,25 +1,27 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj, ValueInj } from '~/context'
+import { ColumnInj, ValueInj, RowInj } from '~/context'
 import { useBelongsTo } from '#imports'
+import { useProvideLTARStore } from '#imports'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 
 const column = inject(ColumnInj)
 const value = inject(ValueInj)
+const row = inject(RowInj)
 const active = false
 const localState = null
 
-const { parentMeta, loadParentMeta, primaryValueProp } = useBelongsTo(column as ColumnType)
-await loadParentMeta()
-
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp,childrenExcludedList } = useProvideLTARStore(column as ColumnType, row)
+await loadRelatedTableMeta()
+const data = await childrenExcludedList()
 </script>
 
 <template>
   <div class="flex w-full chips-wrapper align-center group" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="value || localState">
-        <ItemChip :active="active" :item="value" :value="value[primaryValueProp]" />
+        <ItemChip :active="active" :item="value" :value="value[relatedTablePrimaryValueProp]" />
       </template>
     </div>
     <div class="flex-1" />
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index ce0642d6a9..6d732515f9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -13,9 +13,9 @@ const active = inject(ActiveCellInj, false)
 </script>
 
 <template>
-  <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }" >
+  <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }">
     <span class="name">{{ value }}</span>
-    <div v-show="active" v-if="!readonly" class="flex align-center ">
+    <div v-show="active" v-if="!readonly" class="flex align-center">
       <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" />
     </div>
   </div>
diff --git a/packages/nc-gui-v2/composables/columns/useLTARColumn.ts b/packages/nc-gui-v2/composables/columns/useLTARColumn.ts
index 4450878126..26e62e4503 100644
--- a/packages/nc-gui-v2/composables/columns/useLTARColumn.ts
+++ b/packages/nc-gui-v2/composables/columns/useLTARColumn.ts
@@ -1,13 +1,14 @@
-import {ColumnType, LinkToAnotherRecordType, TableType} from "nocodb-sdk";
-import {Ref} from "vue";
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 
-export default (column: Ref<ColumnType>) =>{
-
-  const {$api} = useNuxtApp()
-  const {metas,getMeta} = useMetas()
+export default (column: Ref<ColumnType>) => {
+  const { $api } = useNuxtApp()
+  const { metas, getMeta } = useMetas()
 
   const colOptions = computed<LinkToAnotherRecordType>(() => column.value.colOptions as LinkToAnotherRecordType)
-  const relatedTableMeta = computed<TableType>(() => colOptions?.value && metas.value?.[colOptions.value?.fk_related_model_id as string])
+  const relatedTableMeta = computed<TableType>(
+    () => colOptions?.value && metas.value?.[colOptions.value?.fk_related_model_id as string],
+  )
 
   const removeChild = () => {
     // todo: audit
@@ -26,10 +27,9 @@ export default (column: Ref<ColumnType>) =>{
     // await this.$api.dbTableRow.nestedAdd('noco', this.projectName, this.meta.title, id, 'bt', this.column.title, pid);
   }
 
- const loadRelatedTableMeta= async ()=>{
-   return getMeta(colOptions.value?.fk_related_model_id as string)
- }
-
+  const loadRelatedTableMeta = async () => {
+    return getMeta(colOptions.value?.fk_related_model_id as string)
+  }
 
   // this.data = await this.$api.dbTableRow.nestedChildrenExcludedList(
   //   'noco',
@@ -45,7 +45,6 @@ export default (column: Ref<ColumnType>) =>{
   //   }
   // );
 
-
   //   this.data = await this.$api.dbTableRow.nestedList(
   //           'noco',
   //           this.projectName,
@@ -59,5 +58,5 @@ export default (column: Ref<ColumnType>) =>{
   //           }
   //         );
 
-  return  {addChild, removeChild, loadRelatedTableMeta, relatedTableMeta}
+  return { addChild, removeChild, loadRelatedTableMeta, relatedTableMeta }
 }
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index 5194a601ea..bc73072247 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -21,3 +21,4 @@ export * from './useViewSorts'
 export * from './useVirtualCell'
 export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'
+export * from './useLTARStore'
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
new file mode 100644
index 0000000000..7930188a24
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -0,0 +1,65 @@
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import { useMetas } from './useMetas'
+import { useInjectionState } from '#imports'
+import { useProject } from '~/composables/useProject'
+import { NOCO } from '~/lib'
+
+const [useProvideLTARStore, useLTARStore] = useInjectionState((column: ColumnType, row?: Record<string, any>) => {
+  // state
+  const { metas, getMeta } = useMetas()
+  const { project } = useProject()
+  const { $api } = useNuxtApp()
+
+  // getters
+  const meta = computed(() => metas?.value?.[column.fk_model_id as string])
+  const relatedTableMeta = computed<TableType>(() => {
+    return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
+  })
+
+  const rowId = computed(() =>
+    meta.value.columns
+      .filter((c) => c.pk)
+      .map((c) => row?.[c.title])
+      .join('___'),
+  )
+
+  // actions
+  const loadRelatedTableMeta = async () => {
+    await getMeta((column.colOptions as any)?.fk_related_model_id as string)
+  }
+
+  const relatedTablePrimaryValueProp = computed(() => {
+    return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+  })
+
+  const size = 25
+  const query = ''
+  const page = 1
+  const childrenExcludedList = async () => {
+    // this.data =
+    return await $api.dbTableRow.nestedChildrenExcludedList(
+      NOCO,
+      project.value.id as string,
+      meta.value.title,
+      rowId.value,
+      (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
+      column.title as string,
+      // todo: swagger type correction
+      {
+        limit: size,
+        offset: size * (page - 1),
+        where: query && `(${relatedTablePrimaryValueProp.value},like,${query})`,
+      } as any,
+    )
+  }
+
+  return { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, childrenExcludedList, rowId }
+}, 'ltar-store')
+
+export { useProvideLTARStore }
+
+export function useLTARStoreOrThrow() {
+  const ltarStore = useLTARStore()
+  if (ltarStore == null) throw new Error('Please call `useLTARStore` on the appropriate parent component')
+  return ltarStore
+}
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 988084f1c1..b32961942d 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -6,6 +6,7 @@ import type { TabItem } from '~/composables/useTabs'
 
 export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled')
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
+export const RowInj: InjectionKey<Ref<Record<string, any>>> = Symbol('row')
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')

From 29e430fd698f0350e2dd6c80c0dc019647ad98c6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 11:19:19 +0530
Subject: [PATCH 08/25] feat(gui-v2): excluded child list modal

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/BelongsTo.vue     |  12 +-
 .../virtual-cell/components/ListItems.vue     |  84 +++++----
 .../nc-gui-v2/composables/useLTARStore.ts     | 168 ++++++++++++++++--
 3 files changed, 209 insertions(+), 55 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 3b49f0536f..7872a7cb16 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
+import ListItems from './components/ListItems.vue'
 import { ColumnInj, ValueInj, RowInj } from '~/context'
-import { useBelongsTo } from '#imports'
 import { useProvideLTARStore } from '#imports'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 
@@ -11,10 +11,13 @@ const value = inject(ValueInj)
 const row = inject(RowInj)
 const active = false
 const localState = null
+const listItemsDlg = ref(false)
 
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp,childrenExcludedList } = useProvideLTARStore(column as ColumnType, row)
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp } = useProvideLTARStore(
+  column as Required<ColumnType>,
+  row,
+)
 await loadRelatedTableMeta()
-const data = await childrenExcludedList()
 </script>
 
 <template>
@@ -25,6 +28,7 @@ const data = await childrenExcludedList()
       </template>
     </div>
     <div class="flex-1" />
-    <MdiExpandIcon class="hidden group-hover:inline text-xs text-gray-500/50 hover:text-gray-500" />
+    <MdiExpandIcon class="hidden group-hover:inline text-xs text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <ListItems v-model="listItemsDlg" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 59e0e88923..5cc11ac1fe 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,23 @@
-<script>
-import Pagination from '~/components/project/spreadsheet/components/Pagination'
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { useLTARStoreOrThrow } from '~/composables'
+
+const props = defineProps<{ modelValue: boolean }>()
+const emit = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(props, 'modelValue', emit)
+
+const {
+  childrenExcludedList,
+  loadChildrenExcludedList,
+  childrenExcludedListPagination,
+  relatedTablePrimaryValueProp,
+  link
+} =
+  useLTARStoreOrThrow()
+
+await loadChildrenExcludedList()
+/* import Pagination from '~/components/project/spreadsheet/components/Pagination'
 import { NOCO } from '~/lib/constants'
 
 export default {
@@ -100,14 +118,30 @@ export default {
       }
     },
   },
-}
+} */
 </script>
 
 <template>
-  <v-dialog v-model="show" width="600" content-class="dialog">
+  <a-modal v-model:visible="vModel" :footer="null" title="Related table rows">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
+      <div class="flex-1 overflow-auto min-h-0">
+        <a-card v-for="row in childrenExcludedList.list" class="my-1 cursor-pointer" @click="link(row)">
+          {{ row[relatedTablePrimaryValueProp] }}
+        </a-card>
+      </div>
+      <a-pagination class="mt-2 mx-auto"
+                    size="small"
+                    v-model:current="childrenExcludedListPagination.page"
+                    v-model:page-size="childrenExcludedListPagination.size"
+                    :total="childrenExcludedList.pageInfo.totalRows"
+                    show-less-items />
+    </div>
+  </a-modal>
+
+  <!--  <v-dialog v-model="show" width="600" content-class="dialog">
     <v-icon small class="close-icon" @click="$emit('input', false)"> mdi-close </v-icon>
     <v-card width="600">
-      <v-card-title class="textColor--text mx-2 justify-center">
+      <v-card-title class="textColor&#45;&#45;text mx-2 justify-center">
         {{ title }}
       </v-card-title>
 
@@ -137,9 +171,9 @@ export default {
         <div class="items-container">
           <template v-if="data && data.list && data.list.length">
             <v-card v-for="(ch, i) in data.list" :key="i" v-ripple class="ma-2 child-card" outlined @click="$emit('add', ch)">
-              <v-card-text class="primary-value textColor--text text--lighten-2 d-flex">
+              <v-card-text class="primary-value textColor&#45;&#45;text text&#45;&#45;lighten-2 d-flex">
                 <span class="font-weight-bold"> {{ ch[primaryCol] || (ch && Object.values(ch).slice(0, 1).join()) }}&nbsp;</span>
-                <span v-if="primaryKey" class="grey--text caption primary-key">(Primary Key : {{ ch[primaryKey] }})</span>
+                <span v-if="primaryKey" class="grey&#45;&#45;text caption primary-key">(Primary Key : {{ ch[primaryKey] }})</span>
                 <v-spacer />
                 <v-chip v-if="hm && ch[`${hm._rtn}Read`] && ch[`${hm._rtn}Read`][hmParentPrimaryValCol]" x-small>
                   {{ ch[`${hm._rtn}Read`][hmParentPrimaryValCol] }}
@@ -148,8 +182,8 @@ export default {
             </v-card>
           </template>
 
-          <div v-else-if="data" class="text-center py-15 textLight--text">
-            <!-- No items found -->
+          <div v-else-if="data" class="text-center py-15 textLight&#45;&#45;text">
+            &lt;!&ndash; No items found &ndash;&gt;
             {{ $t('placeholder.noItemsFound') }}
           </div>
         </div>
@@ -165,11 +199,11 @@ export default {
         />
       </v-card-actions>
     </v-card>
-  </v-dialog>
+  </v-dialog> -->
 </template>
 
 <style scoped lang="scss">
-.child-list-modal {
+/*.child-list-modal {
   position: relative;
 
   .remove-child-icon {
@@ -222,29 +256,9 @@ export default {
       z-index: 9;
     }
   }
+}*/
+
+:deep(.ant-pagination-item a) {
+  line-height: 21px !important;
 }
 </style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 7930188a24..0d5d44b4d6 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,14 +1,34 @@
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { useMetas } from './useMetas'
 import { useInjectionState } from '#imports'
 import { useProject } from '~/composables/useProject'
 import { NOCO } from '~/lib'
 
-const [useProvideLTARStore, useLTARStore] = useInjectionState((column: ColumnType, row?: Record<string, any>) => {
+interface DataApiResponse {
+  list: Record<string, any>
+  pageInfo: PaginatedType
+}
+
+const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<ColumnType>, row?: Record<string, any>) => {
   // state
   const { metas, getMeta } = useMetas()
   const { project } = useProject()
   const { $api } = useNuxtApp()
+  const childrenExcludedList: Ref<DataApiResponse | undefined> = ref()
+  const childrenList: Ref<DataApiResponse | undefined> = ref()
+  const childrenExcludedListPagination = reactive({
+    page: 1,
+    query: '',
+    size: 10,
+  })
+  const childrenListPagination = reactive({
+    page: 1,
+    query: '',
+    size: 10,
+  })
+
+  const colOptions = column.colOptions as LinkToAnotherRecordType
 
   // getters
   const meta = computed(() => metas?.value?.[column.fk_model_id as string])
@@ -18,12 +38,19 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: ColumnTyp
 
   const rowId = computed(() =>
     meta.value.columns
-      .filter((c) => c.pk)
-      .map((c) => row?.[c.title])
+      .filter((c: Required<ColumnType>) => c.pk)
+      .map((c: Required<ColumnType>) => row?.[c.title])
       .join('___'),
   )
 
   // actions
+  const getRelatedTableRowId = (row: Record<string, any>) => {
+    return relatedTableMeta.value?.columns
+      ?.filter((c) => c.pk)
+      .map((c) => row?.[c.title as string])
+      .join('___')
+  }
+
   const loadRelatedTableMeta = async () => {
     await getMeta((column.colOptions as any)?.fk_related_model_id as string)
   }
@@ -31,29 +58,138 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: ColumnTyp
   const relatedTablePrimaryValueProp = computed(() => {
     return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
   })
+  const primaryValueProp = computed(() => {
+    return (meta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+  })
 
-  const size = 25
-  const query = ''
-  const page = 1
-  const childrenExcludedList = async () => {
-    // this.data =
-    return await $api.dbTableRow.nestedChildrenExcludedList(
+  const loadChildrenExcludedList = async () => {
+    childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
       NOCO,
       project.value.id as string,
-      meta.value.title,
+      meta.value.id,
       rowId.value,
       (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
-      column.title as string,
+      column.title,
+      // todo: swagger type correction
+      {
+        limit: childrenExcludedListPagination.size,
+        offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+        where:
+          childrenExcludedListPagination.query &&
+          `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+      } as any,
+    )
+  }
+
+  const loadChildrenList = async () => {
+    childrenList.value = await $api.dbTableRow.nestedList(
+      NOCO,
+      project.value.id as string,
+      meta.value.id,
+      rowId.value,
+      colOptions.type as 'mm' | 'hm',
+      column.title,
       // todo: swagger type correction
       {
-        limit: size,
-        offset: size * (page - 1),
-        where: query && `(${relatedTablePrimaryValueProp.value},like,${query})`,
+        limit: childrenListPagination.size,
+        offset: childrenListPagination.size * (childrenListPagination.page - 1),
+        where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
       } as any,
     )
   }
+  const unlink = async (row: Record<string, any>) => {
+    // const column = meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id);
+    // todo: handle if new record
+    // if (this.isNew) {
+    //   this.$emit('updateCol', this.row, _cn, null);
+    //   this.localState = null;
+    //   this.$emit('update:localState', this.localState);
+    //   return;
+    // }
+    // todo: handle bt column if required
+    // if (column.rqd) {
+    //   this.$toast.info('Unlink is not possible, instead map to another parent.').goAway(3000);
+    //   return;
+    // }
 
-  return { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, childrenExcludedList, rowId }
+    // todo: audit
+    await $api.dbTableRow.nestedRemove(
+      NOCO,
+      project.value.title as string,
+      meta.value.title,
+      rowId.value,
+      colOptions.type as 'mm' | 'hm',
+      column.title,
+      getRelatedTableRowId(row) as string,
+    )
+
+    // todo: reload table data and children list
+    // this.$emit('loadTableData');
+    // if (this.isForm && this.$refs.childList) {
+    //   this.$refs.childList.loadData();
+    // }
+  }
+
+  const link = async (row: Record<string, any>) => {
+    // todo: handle new record
+    //   const pid = this._extractRowId(parent, this.parentMeta);
+    // const id = this._extractRowId(this.row, this.meta);
+    // const _cn = this.meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id).title;
+    //
+    // if (this.isNew) {
+    //   const _rcn = this.parentMeta.columns.find(c => c.id === this.column.colOptions.fk_parent_column_id).title;
+    //   this.localState = parent;
+    //   this.$emit('update:localState', this.localState);
+    //   this.$emit('updateCol', this.row, _cn, parent[_rcn]);
+    //   this.newRecordModal = false;
+    //   return;
+    // }
+    await $api.dbTableRow.nestedAdd(
+      NOCO,
+      project.value.title as string,
+      meta.value.title as string,
+      rowId.value,
+      colOptions.type as 'mm' | 'hm',
+      column.title,
+      getRelatedTableRowId(row) as string,
+    )
+
+    // todo: reload table data and child list
+    // this.pid = pid;
+    //
+    // this.newRecordModal = false;
+    //
+    // this.$emit('loadTableData');
+    // if (this.isForm && this.$refs.childList) {
+    //   this.$refs.childList.loadData();
+    // }
+  }
+
+
+  // watchers
+  watch(childrenExcludedListPagination, async () => {
+    await loadChildrenExcludedList()
+  })
+  watch(childrenListPagination, async () => {
+    await loadChildrenList()
+  })
+
+  return {
+    relatedTableMeta,
+    loadRelatedTableMeta,
+    relatedTablePrimaryValueProp,
+    childrenExcludedList,
+    childrenList,
+    rowId,
+    childrenExcludedListPagination,
+    childrenListPagination,
+    primaryValueProp,
+    meta,
+    unlink,
+    link,
+    loadChildrenExcludedList,
+    loadChildrenList,
+  }
 }, 'ltar-store')
 
 export { useProvideLTARStore }

From 423125c229b506f6e584cb9903ffece5fc587628 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 15:49:57 +0530
Subject: [PATCH 09/25] feat(gui-v2): has many and belongs to cell with child
 list

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/BelongsTo.vue     |   6 +-
 .../components/virtual-cell/HasMany.vue       |  34 +-
 .../components/virtual-cell/ManyToMany.vue    | 631 ++----------------
 .../virtual-cell/components/ItemChip.vue      |   4 +-
 .../components/ListChildItems.vue             | 267 +-------
 .../virtual-cell/components/ListItems.vue     |  24 +-
 .../nc-gui-v2/composables/useLTARStore.ts     |   4 +-
 7 files changed, 109 insertions(+), 861 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 7872a7cb16..6e42ada4bd 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -13,7 +13,7 @@ const active = false
 const localState = null
 const listItemsDlg = ref(false)
 
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp } = useProvideLTARStore(
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Required<ColumnType>,
   row,
 )
@@ -24,11 +24,11 @@ await loadRelatedTableMeta()
   <div class="flex w-full chips-wrapper align-center group" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="value || localState">
-        <ItemChip :active="active" :item="value" :value="value[relatedTablePrimaryValueProp]" />
+        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value || localState)" />
       </template>
     </div>
     <div class="flex-1" />
-    <MdiExpandIcon class="hidden group-hover:inline text-xs text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <MdiExpandIcon class="hidden group-hover:inline text-md text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     <ListItems v-model="listItemsDlg" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 19c291bea1..d90fe2d953 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -6,10 +6,16 @@ import { useHasMany } from '#imports'
 
 const column = inject(ColumnInj)
 const value = inject(ValueInj)
-const active = false
+const row = inject(RowInj)
 
-const { childMeta, loadChildMeta, primaryValueProp } = useHasMany(column as ColumnType)
-await loadChildMeta()
+const listItemsDlg = ref(false)
+const childListDlg = ref(false)
+
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+  column as Required<ColumnType>,
+  row,
+)
+await loadRelatedTableMeta()
 
 /* // import ApiFactory from '@/components/project/spreadsheet/apis/apiFactory'
 import { RelationTypes, UITypes, isSystemColumn } from 'nocodb-sdk'
@@ -373,11 +379,11 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex d-100 chips-wrapper" :class="{ active }">
+  <div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }">
     <!--    <template v-if="!isForm"> -->
-    <div class="chips d-flex align-center img-container flex-grow-1 hm-items flex-nowrap">
+    <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="value || localState">
-        <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[primaryValueProp]" />
+        <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
 
         <!--
                     :active="active"     :item="ch"
@@ -386,15 +392,15 @@ export default {
                     @edit="editChild"
                     @unlink="unlinkChild "        -->
 
-        <!--          <span
-                    v-if="!isLocked && value && value.length === 10"
-                    class="caption pointer ml-1 grey&#45;&#45;text"
-                    @click="showChildListModal"
-                    >more...
-                  </span> -->
+        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
 
+    <MdiExpandIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+    <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <ListItems v-model="listItemsDlg" />
+    <ListChildItems v-model="childListDlg" />
+
     <!--      <div -->
     <!--        v-if="!isLocked" -->
     <!--        class="actions align-center justify-center px-1 flex-shrink-1" -->
@@ -513,7 +519,7 @@ export default {
 </template>
 
 <style scoped lang="scss">
-.items-container {
+/*.items-container {
   overflow-x: visible;
   max-height: min(500px, 60vh);
   overflow-y: auto;
@@ -575,7 +581,7 @@ export default {
       max-width: calc(100% - 44px);
     }
   }
-}
+}*/
 </style>
 <!--
 /**
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 909fb880bd..920105a92f 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -1,611 +1,56 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import { useProvideLTARStore } from '~/composables'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj, ValueInj } from '~/context'
-import { useManyToMany } from '#imports'
+import ListChildItems from './components/ListChildItems.vue'
+import ListItems from './components/ListItems.vue'
+import { ColumnInj, RowInj, ValueInj } from '~/context'
 
 const column = inject(ColumnInj)
+const row = inject(RowInj)
 const value = inject(ValueInj)
-const active = false
-const isLocked = false
 
-const { childMeta, loadChildMeta, primaryValueProp } = useManyToMany(column as ColumnType)
-await loadChildMeta()
+const {
+  relatedTableMeta,
+  loadRelatedTableMeta,
+  relatedTablePrimaryValueProp,
+  unlink
+} = useProvideLTARStore(column as Required<ColumnType>, row)
 
-/* import { RelationTypes, UITypes, isSystemColumn } from 'nocodb-sdk'
-import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
-import ListItems from '~/components/project/spreadsheet/components/virtualCell/components/ListItems'
-import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
-import listChildItemsModal from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItemsModal'
-import { parseIfInteger } from '@/helpers'
-import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/ItemChip'
+await loadRelatedTableMeta()
 
-export default {
-  name: 'ManyToManyCell',
-  components: { ListChildItems, ItemChip, ListItems, DlgLabelSubmitCancel, ListChildItemsModal: listChildItemsModal },
-  props: {
-    isLocked: Boolean,
-    breadcrumbs: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    value: [Object, Array],
-    meta: [Object],
-    mm: Object,
-    nodes: [Object],
-    row: [Object],
-    api: [Object, Function],
-    sqlUi: [Object, Function],
-    active: Boolean,
-    isNew: Boolean,
-    isForm: Boolean,
-    required: Boolean,
-    isPublic: Boolean,
-    metas: Object,
-    password: String,
-    column: Object,
-  },
-  data: () => ({
-    isNewChild: false,
-    newRecordModal: false,
-    childListModal: false,
-    // childMeta: null,
-    // assocMeta: null,
-    childList: null,
-    dialogShow: false,
-    confirmAction: null,
-    confirmMessage: '',
-    selectedChild: null,
-    expandFormModal: false,
-    localState: [],
-  }),
-  computed: {
-    getCellValue() {
-      return (cellObj) => {
-        if (cellObj) {
-          if (this.childPrimaryCol) {
-            return cellObj[this.childPrimaryCol]
-          }
-          return Object.values(cellObj)[1]
-        }
-      }
-    },
-    childMeta() {
-      return this.metas
-        ? this.metas[this.column.colOptions.fk_related_model_id]
-        : this.$store.state.meta.metas[this.column.colOptions.fk_related_model_id]
-    },
-    assocMeta() {
-      return this.metas
-        ? this.metas[this.column.colOptions.fk_mm_model_id]
-        : this.$store.state.meta.metas[this.column.colOptions.fk_mm_model_id]
-    },
-    // todo : optimize
-    childApi() {
-      // return this.childMeta && this.$ncApis.get({
-      //   env: this.nodes.env,
-      //   dbAlias: this.nodes.dbAlias,
-      //   id: this.column.colOptions.fk_related_model_id
-      // })
-      //
-      // return this.childMeta && this.childMeta.title
-      //   ? ApiFactory.create(
-      //     this.$store.getters['project/GtrProjectType'],
-      //     this.childMeta.title,
-      //     this.childMeta.columns,
-      //     this,
-      //     this.childMeta
-      //   )
-      //   : null
-    },
-    // todo : optimize
-    assocApi() {
-      // return this.childMeta && this.$ncApis.get({
-      //   env: this.nodes.env,
-      //   dbAlias: this.nodes.dbAlias,
-      //   id: this.column.colOptions.fk_mm_model_id
-      // })
-      // return this.assocMeta && this.assocMeta.title
-      //   ? ApiFactory.create(
-      //     this.$store.getters['project/GtrProjectType'],
-      //     this.assocMeta.title,
-      //     this.assocMeta.columns,
-      //     this,
-      //     this.assocMeta
-      //   )
-      //   : null
-    },
-    childPrimaryCol() {
-      return this.childMeta && (this.childMeta.columns.find((c) => c.pv) || {}).title
-    },
-    childPrimaryKey() {
-      return this.childMeta && (this.childMeta.columns.find((c) => c.pk) || {}).title
-    },
-    parentPrimaryKey() {
-      return this.meta && (this.meta.columns.find((c) => c.pk) || {}).title
-    },
-    childQueryParams() {
-      if (!this.childMeta) {
-        return {}
-      }
-      // todo: use reduce
-      return {
-        hm:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.hm)
-              .map(({ hm }) => hm.table_name)
-              .join()) ||
-          '',
-        bt:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.bt)
-              .map(({ bt }) => bt.rtn)
-              .join()) ||
-          '',
-        mm:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.mm)
-              .map(({ mm }) => mm.rtn)
-              .join()) ||
-          '',
-      }
-    },
-    conditionGraph() {
-      // if (!this.childMeta || !this.assocMeta) { return null }
-      // return {
-      //   [this.assocMeta.table_name]: {
-      //     relationType: 'hm',
-      //     [this.assocMeta.columns.find(c => c.column_name === this.mm.vcn).column_name]: {
-      //       eq: this.row[this.parentPrimaryKey]
-      //     }
-      //   }
-      // }
-    },
-    childAvailableColumns() {
-      if (!this.childMeta) {
-        return []
-      }
-
-      const columns = []
-      if (this.childMeta.columns) {
-        columns.push(...this.childMeta.columns.filter((c) => !isSystemColumn(c)))
-      }
-      return columns
-    },
-    // todo:
-    form() {
-      return this.selectedChild && !this.isPublic
-        ? () => import('~/components/project/spreadsheet/components/ExpandedForm')
-        : 'span'
-    },
-  },
-  watch: {
-    async isNew(n, o) {
-      if (!n && o) {
-        await this.saveLocalState()
-      }
-    },
-  },
-  async mounted() {
-    if (this.isForm) {
-      await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
-    }
-
-    if (this.isNew && this.value) {
-      this.localState = [...this.value]
-    }
-  },
-  created() {
-    this.loadChildMeta()
-    this.loadAssociateTableMeta()
-  },
-  methods: {
-    async onChildSave(child) {
-      if (this.isNewChild) {
-        this.isNewChild = false
-        await this.addChildToParent(child)
-      } else {
-        this.$emit('loadTableData')
-      }
-    },
-    async showChildListModal() {
-      await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
-      this.childListModal = true
-    },
-    async unlinkChild(child) {
-      if (this.isNew) {
-        this.localState.splice(this.localState.indexOf(child), 1)
-        this.$emit('update:localState', [...this.localState])
-        return
-      }
-      await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
-      const cid = this.childMeta.columns
-        .filter((c) => c.pk)
-        .map((c) => child[c.title])
-        .join('___')
-      const pid = this.meta.columns
-        .filter((c) => c.pk)
-        .map((c) => this.row[c.title])
-        .join('___')
-
-      await this.$api.dbTableRow.nestedRemove(NOCO, this.projectName, this.meta.title, pid, 'mm', this.column.title, cid)
-
-      this.$emit('loadTableData')
-      if ((this.childListModal || this.isForm) && this.$refs.childList) {
-        this.$refs.childList.loadData()
-      }
-    },
-    async removeChild(child) {
-      this.dialogShow = true
-      this.confirmMessage = 'Do you want to delete the record?'
-      this.confirmAction = async (act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
-        } else {
-          const id = this.childMeta.columns
-            .filter((c) => c.pk)
-            .map((c) => child[c.title])
-            .join('___')
-          await this.childApi.delete(id)
-          this.dialogShow = false
-          this.$emit('loadTableData')
-          if ((this.childListModal || this.isForm) && this.$refs.childList) {
-            this.$refs.childList.loadData()
-          }
-        }
-      }
-    },
-    async loadChildMeta() {
-      // todo: optimize
-      if (!this.childMeta) {
-        await this.$store.dispatch('meta/ActLoadMeta', {
-          env: this.nodes.env,
-          dbAlias: this.nodes.dbAlias,
-          // tn: this.mm.rtn,
-          id: this.column.colOptions.fk_related_model_id,
-        })
-        // const parentTableData = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-        //   env: this.nodes.env,
-        //   dbAlias: this.nodes.dbAlias
-        // }, 'tableXcModelGet', {
-        //   tn: this.mm.rtn
-        // }]);
-        // this.childMeta = JSON.parse(parentTableData.meta)
-      }
-    },
-    async loadAssociateTableMeta() {
-      // todo: optimize
-      if (!this.assocMeta) {
-        await this.$store.dispatch('meta/ActLoadMeta', {
-          env: this.nodes.env,
-          dbAlias: this.nodes.dbAlias,
-          id: this.column.colOptions.fk_mm_model_id,
-        })
-        // const assocTableData = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-        //   env: this.nodes.env,
-        //   dbAlias: this.nodes.dbAlias
-        // }, 'tableXcModelGet', {
-        //   tn: this.mm.vtn
-        // }]);
-        // this.assocMeta = JSON.parse(assocTableData.meta)
-      }
-    },
-    async showNewRecordModal() {
-      await Promise.all([this.loadChildMeta(), this.loadAssociateTableMeta()])
-      this.newRecordModal = true
-      // this.list = await this.c hildApi.paginatedList({})
-    },
-    async addChildToParent(child) {
-      if (this.isNew && this.localState.every((it) => it[this.childForeignKey] !== child[this.childPrimaryKey])) {
-        this.localState.push(child)
-        this.$emit('update:localState', [...this.localState])
-        this.$emit('saveRow')
-        this.newRecordModal = false
-        return
-      }
-      const cid = this.childMeta.columns
-        .filter((c) => c.pk)
-        .map((c) => child[c.title])
-        .join('___')
-      const pid = this.meta.columns
-        .filter((c) => c.pk)
-        .map((c) => this.row[c.title])
-        .join('___')
-
-      // const vcidCol = this.assocMeta.columns.find(c => c.id === this.column.colOptions.fk_mm_parent_column_id).title
-      // const vpidCol = this.assocMeta.columns.find(c => c.id === this.column.colOptions.fk_mm_child_column_id).title
-
-      await this.$api.dbTableRow.nestedAdd(NOCO, this.projectName, this.meta.title, pid, 'mm', this.column.title, cid)
-
-      try {
-        this.$emit('loadTableData')
-      } catch (e) {
-        // todo: handle
-        console.log(e)
-      }
-      this.newRecordModal = false
-      if ((this.childListModal || this.isForm) && this.$refs.childList) {
-        this.$refs.childList.loadData()
-      }
-    },
-
-    async insertAndAddNewChildRecord() {
-      this.newRecordModal = false
-      await this.loadChildMeta()
-      this.isNewChild = true
-      this.selectedChild = {
-        [this.childForeignKey]: this.parentId,
-        [(
-          this.childMeta.columns.find(
-            (c) =>
-              c.uidt === UITypes.LinkToAnotherRecord &&
-              c.colOptions &&
-              this.column.colOptions &&
-              c.colOptions.fk_child_column_id === this.column.colOptions.fk_parent_column_id &&
-              c.colOptions.fk_parent_column_id === this.column.colOptions.fk_child_column_id &&
-              c.colOptions.fk_mm_model_id === this.column.colOptions.fk_mm_model_id &&
-              c.colOptions.type === RelationTypes.MANY_TO_MANY,
-          ) || {}
-        ).title]: [this.row],
-      }
-      this.expandFormModal = true
-      setTimeout(() => {
-        this.$refs.expandedForm &&
-          this.$refs.expandedForm.$set(this.$refs.expandedForm.changedColumns, this.childForeignKey, true)
-      }, 500)
-    },
-    async editChild(child) {
-      await this.loadChildMeta()
-      this.isNewChild = false
-      this.selectedChild = child
-      this.expandFormModal = true
-      setTimeout(() => {
-        this.$refs.expandedForm && this.$refs.expandedForm.reload()
-      }, 500)
-    },
-    async saveLocalState(row) {
-      let child
-      // eslint-disable-next-line no-cond-assign
-      while ((child = this.localState.pop())) {
-        if (row) {
-          const cid = this.childMeta.columns
-            .filter((c) => c.pk)
-            .map((c) => child[c.title])
-            .join('___')
-          const pid = this.meta.columns
-            .filter((c) => c.pk)
-            .map((c) => row[c.title])
-            .join('___')
-
-          await this.$api.dbTableRow.nestedAdd(NOCO, this.projectName, this.meta.title, pid, 'mm', this.column.title, cid)
-        } else {
-          await this.addChildToParent(child)
-        }
-      }
-      this.$emit('newRecordsSaved')
-    },
-  },
-} */
 </script>
 
 <template>
   <div class="d-flex d-100 chips-wrapper" :class="{ active }">
-    <!--    <template v-if="!isForm"> -->
-    <div class="chips d-flex align-center img-container flex-grow-1 hm-items flex-nowrap">
-      <template v-if="value || localState">
-        <ItemChip v-for="(v, j) in value || localState" :key="j" :item="v" :value="v[primaryValueProp]" />
-
-        <!--                           :active="active"
-       :readonly="isLocked || isPublic"
-            @edit="editChild"
-            @unlink="unlinkChild" -->
-      </template>
-      <span v-if="!isLocked && value && value.length === 10" class="caption pointer ml-1 grey--text" @click="showChildListModal"
-        >more...</span
-      >
-    </div>
-    <!--      <div -->
-    <!--        v-if="!isLocked" -->
-    <!--        class="actions align-center justify-center px-1 flex-shrink-1" -->
-    <!--        :class="{ 'd-none': !active, 'd-flex': active }" -->
-    <!--      > -->
-    <!--        <x-icon -->
-    <!--          v-if="_isUIAllowed('xcDatatableEditable') && (isForm || !isPublic)" -->
-    <!--          small -->
-    <!--          :color="['primary', 'grey']" -->
-    <!--          @click="showNewRecordModal" -->
-    <!--        > -->
-    <!--          mdi-plus -->
-    <!--        </x-icon> -->
-    <!--        <x-icon x-small :color="['primary', 'grey']" class="ml-2" @click="showChildListModal"> mdi-arrow-expand </x-icon> -->
-    <!--      </div> -->
-    <!--    </template> -->
-
-    <!--    <ListItems
-      v-if="newRecordModal"
-      v-model="newRecordModal"
-      :hm="true"
-      :size="10"
-      :column="column"
-      :meta="childMeta"
-      :primary-col="childPrimaryCol"
-      :primary-key="childPrimaryKey"
-      :parent-meta="meta"
-      :api="api"
-      :mm="mm"
-      :tn="mm && mm.rtn"
-      :parent-id="row && row[parentPrimaryKey]"
-      :is-public="isPublic"
-      :query-params="childQueryParams"
-      :password="password"
-      :row-id="row && row[parentPrimaryKey]"
-      @add-new-record="insertAndAddNewChildRecord"
-      @add="addChildToParent"
-    />
+    <div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }">
+      <!--    <template v-if="!isForm"> -->
+      <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+        <template v-if="value || localState">
+          <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]"
+                    @unlink="unlink(ch)" />
+
+          <!--
+                      :active="active"     :item="ch"
+                      :value="getCellValue(ch)"
+                      :readonly="isLocked || isPublic"
+                      @edit="editChild"
+                      @unlink="unlinkChild "        -->
+
+          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text"
+                @click="childListDlg = true">more... </span>
+        </template>
+      </div>
+
+      <MdiExpandIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
+                     @click="childListDlg = true" />
+      <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
+                   @click="listItemsDlg = true" />
+      <ListItems v-model="listItemsDlg" />
+      <ListChildItems v-model="childListDlg" />
 
-    <ListChildItems
-      :is="isForm ? 'list-child-items' : 'list-child-items-modal'"
-      v-if="childMeta && assocMeta && (isForm || childListModal)"
-      ref="childList"
-      v-model="childListModal"
-      :is-form="isForm"
-      :is-new="isNew"
-      :size="10"
-      :meta="childMeta"
-      :parent-meta="meta"
-      :primary-col="childPrimaryCol"
-      :primary-key="childPrimaryKey"
-      :api="childApi"
-      :mm="mm"
-      :parent-id="row && row[parentPrimaryKey]"
-      :query-params="{ ...childQueryParams, conditionGraph }"
-      :local-state="localState"
-      :is-public="isPublic"
-      :row-id="row && row[parentPrimaryKey]"
-      :column="column"
-      type="mm"
-      :password="password"
-      @new-record="showNewRecordModal"
-      @edit="editChild"
-      @unlink="unlinkChild"
-    />
-    <DlgLabelSubmitCancel
-      v-if="dialogShow"
-      type="primary"
-      :actions-mtd="confirmAction"
-      :dialog-show="dialogShow"
-      :heading="confirmMessage"
-    />
 
-    &lt;!&ndash; todo : move to list item component &ndash;&gt;
-    <v-dialog
-      v-if="selectedChild && !isPublic"
-      v-model="expandFormModal"
-      :overlay-opacity="0.8"
-      width="1000px"
-      max-width="100%"
-      class="mx-auto"
-    >
-      <component
-        :is="form"
-        v-if="selectedChild"
-        ref="expandedForm"
-        v-model="selectedChild"
-        :db-alias="nodes.dbAlias"
-        :has-many="childMeta.hasMany"
-        :belongs-to="childMeta.belongsTo"
-        v-model:is-new="isNewChild"
-        :table="childMeta.table_name"
-        :old-row="{ ...selectedChild }"
-        :meta="childMeta"
-        :primary-value-column="childPrimaryCol"
-        :available-columns="childAvailableColumns"
-        icon-color="warning"
-        :nodes="nodes"
-        :query-params="childQueryParams"
-        :breadcrumbs="breadcrumbs"
-        @cancel="
-          selectedChild = null
-          expandFormModal = false
-        "
-        @input="onChildSave"
-      />
-    </v-dialog> -->
+    </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.items-container {
-  overflow-x: visible;
-  max-height: min(500px, 60vh);
-  overflow-y: auto;
-}
-
-.primary-value {
-  .primary-key {
-    display: none;
-    margin-left: 0.5em;
-  }
-
-  &:hover .primary-key {
-    display: inline;
-  }
-}
-
-.child-list-modal {
-  position: relative;
-
-  .remove-child-icon {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    bottom: 10px;
-    opacity: 0;
-  }
-
-  &:hover .remove-child-icon {
-    opacity: 1;
-  }
-}
-
-.child-card {
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 0 0.2em var(--v-textColor-lighten5);
-  }
-}
-
-.hm-items {
-  //min-width: 200px;
-  //max-width: 400px;
-  flex-wrap: wrap;
-  row-gap: 3px;
-  gap: 3px;
-  margin: 3px auto;
-}
-
-.chips-wrapper {
-  .chips {
-    max-width: 100%;
-  }
-
-  &.active {
-    .chips {
-      max-width: calc(100% - 44px);
-    }
-  }
-}
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 6d732515f9..bea4454b29 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useLTARStoreOrThrow } from '~/composables'
 import { ActiveCellInj, ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
@@ -8,6 +9,7 @@ interface Props {
 }
 
 const { value, item } = defineProps<Props>()
+const emit = defineEmits(['unlink'])
 const readonly = inject(ReadonlyInj, false)
 const active = inject(ActiveCellInj, false)
 </script>
@@ -16,7 +18,7 @@ const active = inject(ActiveCellInj, false)
   <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }">
     <span class="name">{{ value }}</span>
     <div v-show="active" v-if="!readonly" class="flex align-center">
-      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" />
+      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 8bd1c4175b..5f93ca99c2 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,254 +1,39 @@
-<script>
-import { RelationTypes } from 'nocodb-sdk'
-import { NOCO } from '~/lib/constants'
-import Pagination from '~/components/project/spreadsheet/components/Pagination'
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import { useLTARStoreOrThrow } from '~/composables'
 
-export default {
-  name: 'ListChildItems',
-  components: { Pagination },
-  props: {
-    readOnly: Boolean,
-    isForm: Boolean,
-    bt: [Object],
-    localState: [Array],
-    isNew: Boolean,
-    value: Boolean,
-    title: {
-      type: String,
-      default: 'Link Record',
-    },
-    queryParams: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    primaryKey: String,
-    primaryCol: String,
-    meta: Object,
-    parentMeta: Object,
-    size: Number,
-    api: [Object, Function],
-    mm: [Object, Boolean],
-    isPublic: Boolean,
-    rowId: [String, Number],
-    column: Object,
-    type: String,
-    password: String,
-  },
-  emits: ['input', 'edit', 'delete', 'unlink', 'newRecord'],
-  data: () => ({
-    RelationTypes,
-    data: null,
-    page: 1,
-  }),
-  computed: {
-    isDataAvail() {
-      return (this.data && this.data.list && this.data.list.length) || (this.localState && this.localState.length)
-    },
-    show: {
-      set(v) {
-        this.$emit('input', v)
-      },
-      get() {
-        return this.value
-      },
-    },
-  },
-  watch: {
-    queryParams() {
-      this.loadData()
-    },
-  },
-  mounted() {
-    this.loadData()
-  },
-  methods: {
-    async loadData() {
-      if (!this.isForm && this.isPublic && this.$route.params.id) {
-        if (this.column && this.column.colOptions && this.rowId) {
-          this.data = await this.$api.public.dataNestedList(
-            this.$route.params.id,
-            this.rowId,
-            this.column.colOptions.type,
-            this.column.fk_column_id || this.column.id,
-            {
-              limit: this.size,
-              offset: this.size * (this.page - 1),
-            },
-            {},
-          )
-        }
+const props = defineProps<{ modelValue: boolean }>()
+const emit = defineEmits(['update:modelValue'])
 
-        return
-      }
+const vModel = useVModel(props, 'modelValue', emit)
 
-      if (this.isNew) {
-        return
-      }
-      if (this.column && this.column.colOptions) {
-        this.data = await this.$api.dbTableRow.nestedList(
-          NOCO,
-          this.projectName,
-          this.parentMeta.title,
-          this.rowId,
-          this.column.colOptions.type,
-          this.column.title,
-          {
-            limit: this.size,
-            offset: this.size * (this.page - 1),
-          },
-        )
-      } else {
-        this.data = await this.$api.dbTableRow.list(NOCO, this.projectName, this.meta.title, {
-          limit: this.size,
-          offset: this.size * (this.page - 1),
-          ...this.queryParams,
-        })
-      }
-    },
-  },
-}
+const { childrenList, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, link } = useLTARStoreOrThrow()
+
+await loadChildrenList()
 </script>
 
 <template>
-  <v-card width="600" color="">
-    <v-card-title v-if="!isForm" class="textColor--text mx-2" :class="{ 'py-2': isForm }">
-      <span v-if="!isForm">{{ meta ? meta.title : 'Children' }}</span>
-      <v-spacer />
-      <v-icon small class="mr-1" @click="loadData()"> mdi-reload </v-icon>
-      <v-btn
-        v-if="(isForm || !isPublic) && !readOnly && (isPublic || _isUIAllowed('xcDatatableEditable'))"
-        small
-        class="caption"
-        color="primary"
-        @click="$emit('newRecord')"
-      >
-        <v-icon small> mdi-link </v-icon>&nbsp; Link to '{{ meta.title }}'
-      </v-btn>
-    </v-card-title>
-    <v-card-text>
-      <div class="items-container pt-2 mb-n4" :class="{ 'mx-n2': isForm }">
-        <div v-if="!readOnly && (isPublic || _isUIAllowed('xcDatatableEditable'))" class="text-right mb-2 mt-n2 mx-2">
-          <v-btn v-if="isForm" x-small class="caption" color="primary" outlined @click="$emit('newRecord')">
-            <v-icon x-small> mdi-link </v-icon>&nbsp; Link to '{{ meta.title }}'
-          </v-btn>
-        </div>
-        <template v-if="isDataAvail">
-          <v-card
-            v-for="(ch, i) in (data && data.list) || localState"
-            :key="i"
-            class="mx-2 mb-2 child-list-modal child-card"
-            outlined
-            @click="!readOnly && $emit('edit', ch)"
-          >
-            <div class="remove-child-icon d-flex align-center">
-              <x-icon
-                v-if="((isPublic && isForm) || (!isPublic && _isUIAllowed('xcDatatableEditable'))) && !readOnly"
-                :tooltip="`Unlink this '${meta.title}' from '${parentMeta.title}'`"
-                :color="['error', 'grey']"
-                small
-                class="mr-1 mt-n1"
-                @click.stop="$emit('unlink', ch, i)"
-              >
-                mdi-link-variant-remove
-              </x-icon>
-              <x-icon
-                v-if="!isPublic && type === RelationTypes.HAS_MANY && !readOnly && _isUIAllowed('xcDatatableEditable')"
-                :tooltip="`Delete row in '${meta.title}'`"
-                :color="['error', 'grey']"
-                small
-                @click.stop="$emit('delete', ch, i)"
-              >
-                mdi-delete-outline
-              </x-icon>
-            </div>
-
-            <v-card-title class="primary-value textColor--text text--lighten-2">
-              {{ ch[primaryCol] }}
-              <span v-if="primaryKey" class="grey--text caption primary-key ml-1"> (Primary Key : {{ ch[primaryKey] }})</span>
-            </v-card-title>
-          </v-card>
-        </template>
-
-        <div
-          v-else-if="data || localState"
-          class="text-center textLight--text"
-          :class="{ 'pt-6 pb-4': !isForm, 'pt-4 pb-3': isForm }"
-        >
-          No item{{ bt ? '' : 's' }} found
-        </div>
-
-        <div v-if="isForm" class="mb-2 d-flex align-center justify-center">
-          <Pagination
-            v-if="!bt && data && data.pageInfo && data.pageInfo.totalRows > 1"
-            v-model="page"
-            :size="size"
-            :count="data && data.pageInfo && data.pageInfo.totalRows"
-            @input="loadData"
-          />
-        </div>
+  <a-modal v-model:visible="vModel" :footer="null" title="Child list">
+    <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
+      <div class="flex-1 overflow-auto min-h-0">
+        <a-card v-for="row in childrenList.list" class="my-1 cursor-pointer" @click="link(row)">
+          {{ row[relatedTablePrimaryValueProp] }}
+        </a-card>
       </div>
-    </v-card-text>
-    <v-card-actions v-if="!isForm" class="justify-center flex-column" :class="{ 'py-0': isForm }">
-      <Pagination
-        v-if="!bt && data && data.pageInfo && data.pageInfo.totalRows > 1"
-        v-model="page"
-        :size="size"
-        :count="data && data.pageInfo && data.pageInfo.totalRows"
-        class="mb-3"
-        @input="loadData"
+      <a-pagination
+        v-model:current="childrenListPagination.page"
+        v-model:page-size="childrenListPagination.size"
+        class="mt-2 mx-auto"
+        size="small"
+        :total="childrenList.pageInfo.totalRows"
+        show-less-items
       />
-    </v-card-actions>
-  </v-card>
-  <!--  </v-dialog> -->
+    </div>
+  </a-modal>
 </template>
 
 <style scoped lang="scss">
-.child-list-modal {
-  position: relative;
-
-  .remove-child-icon {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    bottom: 10px;
-    opacity: 0;
-  }
-
-  &:hover .remove-child-icon {
-    opacity: 1;
-  }
-}
-
-.items-container {
-  overflow-x: visible;
-  max-height: min(500px, 60vh);
-  overflow-y: auto;
+:deep(.ant-pagination-item a) {
+  line-height: 21px !important;
 }
 </style>
-
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 5cc11ac1fe..3e23ab8a27 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { useLTARStoreOrThrow } from '~/composables'
+import MdiReloadIcon from '~icons/mdi/reload'
 
 const props = defineProps<{ modelValue: boolean }>()
 const emit = defineEmits(['update:modelValue'])
@@ -12,7 +13,7 @@ const {
   loadChildrenExcludedList,
   childrenExcludedListPagination,
   relatedTablePrimaryValueProp,
-  link
+  link,
 } =
   useLTARStoreOrThrow()
 
@@ -124,17 +125,26 @@ export default {
 <template>
   <a-modal v-model:visible="vModel" :footer="null" title="Related table rows">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
+      <div class="flex mb-4 align-center gap-2">
+        <a-input
+          v-model:value="childrenExcludedListPagination.query" class="max-w-[200px]" size="small"></a-input>
+        <div class="flex-1" />
+        <MdiReloadIcon class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
+        <a-button type="primary" size="small" @click="$emit('addNewRecord')">Add new record</a-button>
+      </div>
       <div class="flex-1 overflow-auto min-h-0">
         <a-card v-for="row in childrenExcludedList.list" class="my-1 cursor-pointer" @click="link(row)">
           {{ row[relatedTablePrimaryValueProp] }}
         </a-card>
       </div>
-      <a-pagination class="mt-2 mx-auto"
-                    size="small"
-                    v-model:current="childrenExcludedListPagination.page"
-                    v-model:page-size="childrenExcludedListPagination.size"
-                    :total="childrenExcludedList.pageInfo.totalRows"
-                    show-less-items />
+      <a-pagination
+        v-model:current="childrenExcludedListPagination.page"
+        v-model:page-size="childrenExcludedListPagination.size"
+        class="mt-2 mx-auto !text-xs"
+        size="small"
+        :total="childrenExcludedList.pageInfo.totalRows"
+        show-less-items
+      />
     </div>
   </a-modal>
 
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 0d5d44b4d6..75aef8ee92 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -52,7 +52,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
   }
 
   const loadRelatedTableMeta = async () => {
-    await getMeta((column.colOptions as any)?.fk_related_model_id as string)
+    debugger
+    await getMeta(colOptions?.fk_related_model_id as string)
   }
 
   const relatedTablePrimaryValueProp = computed(() => {
@@ -165,7 +166,6 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
     // }
   }
 
-
   // watchers
   watch(childrenExcludedListPagination, async () => {
     await loadChildrenExcludedList()

From 09c04823d257916455e067da42a9f033c39be603 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 16:17:53 +0530
Subject: [PATCH 10/25] refactor: cleanup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/HasMany.vue       | 219 +-----------------
 .../components/virtual-cell/ManyToMany.vue    |  14 +-
 .../components/ListChildItems.vue             |   9 +-
 .../virtual-cell/components/ListItems.vue     |   7 +-
 .../nc-gui-v2/composables/useLTARStore.ts     |   1 -
 5 files changed, 26 insertions(+), 224 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index d90fe2d953..4e1ac0cc1d 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -379,19 +379,11 @@ export default {
 </script>
 
 <template>
-  <div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }">
+  <div class="flex align-center gap-1 w-full chips-wrapper group">
     <!--    <template v-if="!isForm"> -->
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-      <template v-if="value || localState">
-        <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
-
-        <!--
-                    :active="active"     :item="ch"
-                    :value="getCellValue(ch)"
-                    :readonly="isLocked || isPublic"
-                    @edit="editChild"
-                    @unlink="unlinkChild "        -->
-
+      <template v-if="value">
+        <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
         <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
@@ -401,210 +393,5 @@ export default {
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" />
 
-    <!--      <div -->
-    <!--        v-if="!isLocked" -->
-    <!--        class="actions align-center justify-center px-1 flex-shrink-1" -->
-    <!--        :class="{ 'd-none': !active, 'd-flex': active }" -->
-    <!--      > -->
-    <!--        <x-icon -->
-    <!--          v-if="_isUIAllowed('xcDatatableEditable') && (isForm || !isPublic)" -->
-    <!--          small -->
-    <!--          :color="['primary', 'grey']" -->
-    <!--          @click="showNewRecordModal" -->
-    <!--        > -->
-    <!--          mdi-plus -->
-    <!--        </x-icon> -->
-    <!--        <x-icon x-small :color="['primary', 'grey']" class="ml-2" @click="showChildListModal"> mdi-arrow-expand </x-icon> -->
-    <!--      </div> -->
-    <!--    </template> -->
-
-    <!--    <ListItems
-          v-if="newRecordModal"
-          v-model="newRecordModal"
-          :size="10"
-          :meta="childMeta"
-          :primary-col="childPrimaryCol"
-          :primary-key="childPrimaryKey"
-          :api="childApi"
-          :parent-meta="meta"
-          :column="column"
-          :query-params="{
-            ...childQueryParams,
-            // check if it needs to bypass to
-            // avoid foreign key constraint violation in real relation
-            isByPass,
-            where:
-              // show all for new record
-              isNew
-                ? null
-                : // filter out those selected items
-                  `~not(${childForeignKey},eq,${parentId})` +
-                  // allow the child with empty key
-                  `~or(${childForeignKey},is,null)`,
-          }"
-          :is-public="isPublic"
-          :password="password"
-          :row-id="parentId"
-          @add-new-record="insertAndAddNewChildRecord"
-          @add="addChildToParent"
-        />
-
-        <ListChildItems
-          :is="isForm ? 'list-child-items' : 'list-child-items-modal'"
-          v-if="childMeta && (childListModal || isForm)"
-          ref="childList"
-          v-model="childListModal"
-          v-model:local-state="localState"
-          :is-form="isForm"
-          :is-new="isNew"
-          :size="10"
-          :meta="childMeta"
-          :parent-meta="meta"
-          :password="password"
-          :primary-col="childPrimaryCol"
-          :primary-key="childPrimaryKey"
-          :api="childApi"
-          :column="column"
-          :query-params="{
-            ...childQueryParams,
-            where: `(${childForeignKey},eq,${parentId})`,
-          }"
-          :is-public="isPublic"
-          :row-id="parentId"
-          type="hm"
-          @new-record="showNewRecordModal"
-          @edit="editChild"
-          @unlink="unlinkChild"
-          @delete="deleteChild"
-        />
-
-        <DlgLabelSubmitCancel
-          v-if="dialogShow"
-          type="primary"
-          :actions-mtd="confirmAction"
-          :dialog-show="dialogShow"
-          :heading="confirmMessage"
-        />
-
-        <v-dialog v-model="expandFormModal" :overlay-opacity="0.8" width="1000px" max-width="100%" class="mx-auto">
-          <component
-            :is="form"
-            v-if="selectedChild"
-            ref="expandedForm"
-            v-model="selectedChild"
-            :db-alias="nodes.dbAlias"
-            :has-many="childMeta.hasMany"
-            :belongs-to="childMeta.belongsTo"
-            :table="childMeta.table_name"
-            v-model:is-new="isNewChild"
-            :old-row="{ ...selectedChild }"
-            :meta="childMeta"
-            :primary-value-column="childPrimaryCol"
-            :api="childApi"
-            :available-columns="childAvailableColumns"
-            icon-color="warning"
-            :nodes="nodes"
-            :query-params="childQueryParams"
-            :disabled-columns="disabledChildColumns"
-            :breadcrumbs="breadcrumbs"
-            @cancel="
-              selectedChild = null
-              expandFormModal = false
-            "
-            @input="onChildSave"
-          />
-        </v-dialog>
-      -->
   </div>
 </template>
-
-<style scoped lang="scss">
-/*.items-container {
-  overflow-x: visible;
-  max-height: min(500px, 60vh);
-  overflow-y: auto;
-}
-
-.primary-value {
-  .primary-key {
-    display: none;
-    margin-left: 0.5em;
-  }
-
-  &:hover .primary-key {
-    display: inline;
-  }
-}
-
-.child-card {
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 0 0.2em var(--v-textColor-lighten5);
-  }
-}
-
-.hm-items {
-  //min-width: 200px;
-  //max-width: 400px;
-  flex-wrap: wrap;
-  row-gap: 3px;
-  gap: 3px;
-  margin: 3px auto;
-}
-
-::v-deep {
-  .unlink-icon {
-    padding: 0px 1px 2px 1px;
-    margin-top: 2px;
-    margin-right: -2px;
-  }
-
-  .search-field {
-    input {
-      max-height: 28px !important;
-    }
-
-    .v-input__slot {
-      min-height: auto !important;
-    }
-  }
-}
-
-.chips-wrapper {
-  .chips {
-    max-width: 100%;
-  }
-
-  &.active {
-    .chips {
-      max-width: calc(100% - 44px);
-    }
-  }
-}*/
-</style>
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- * @author Wing-Kam Wong <wingkwong.code@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 920105a92f..bb214c21cd 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -4,12 +4,18 @@ import { useProvideLTARStore } from '~/composables'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
+import MdiExpandIcon from '~icons/mdi/arrow-expand'
+import MdiPlusIcon from '~icons/mdi/plus'
 import { ColumnInj, RowInj, ValueInj } from '~/context'
 
 const column = inject(ColumnInj)
 const row = inject(RowInj)
 const value = inject(ValueInj)
 
+
+const listItemsDlg = ref(false)
+const childListDlg = ref(false)
+
 const {
   relatedTableMeta,
   loadRelatedTableMeta,
@@ -22,12 +28,12 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="d-flex d-100 chips-wrapper" :class="{ active }">
-    <div class="flex align-center gap-1 w-full chips-wrapper group" :class="{ active }">
+  <div class="d-flex d-100 chips-wrapper" >
+    <div class="flex align-center gap-1 w-full chips-wrapper group" >
       <!--    <template v-if="!isForm"> -->
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-        <template v-if="value || localState">
-          <ItemChip v-for="(ch, i) in value || localState" :key="i" :value="ch[relatedTablePrimaryValueProp]"
+        <template v-if="value ">
+          <ItemChip v-for="(ch, i) in value " :key="i" :value="ch[relatedTablePrimaryValueProp]"
                     @unlink="unlink(ch)" />
 
           <!--
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 5f93ca99c2..c17578e9a4 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,15 +1,20 @@
 <script lang="ts" setup>
+import { watchEffect } from '@vue/runtime-core'
 import { useVModel } from '@vueuse/core'
 import { useLTARStoreOrThrow } from '~/composables'
 
-const props = defineProps<{ modelValue: boolean }>()
+const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
 const { childrenList, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, link } = useLTARStoreOrThrow()
 
-await loadChildrenList()
+watchEffect(() => {
+  if (vModel.value) {
+    loadChildrenList()
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 3e23ab8a27..46fae50271 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { watchEffect } from '@vue/runtime-core'
 import { useVModel } from '@vueuse/core'
 import { useLTARStoreOrThrow } from '~/composables'
 import MdiReloadIcon from '~icons/mdi/reload'
@@ -17,7 +18,11 @@ const {
 } =
   useLTARStoreOrThrow()
 
-await loadChildrenExcludedList()
+watchEffect(() => {
+  if (vModel.value) {
+    loadChildrenExcludedList()
+  }
+})
 /* import Pagination from '~/components/project/spreadsheet/components/Pagination'
 import { NOCO } from '~/lib/constants'
 
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 75aef8ee92..0cee4a43fe 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -52,7 +52,6 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
   }
 
   const loadRelatedTableMeta = async () => {
-    debugger
     await getMeta(colOptions?.fk_related_model_id as string)
   }
 

From e9142983a2fc8d3becee97b6e98ae970c3896b3e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 19:22:26 +0530
Subject: [PATCH 11/25] fix(gui-v2): many to many

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  |   1 +
 .../components/smartsheet/VirtualCell.vue     |  16 +-
 .../components/virtual-cell/HasMany.vue       | 370 +-----------------
 .../components/virtual-cell/ManyToMany.vue    |  40 +-
 .../components/ListChildItems.vue             |   5 +-
 .../virtual-cell/components/ListItems.vue     | 238 +----------
 .../nc-gui-v2/composables/useLTARStore.ts     |   6 +-
 packages/nc-gui-v2/context/index.ts           |   3 +-
 8 files changed, 45 insertions(+), 634 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index bc2918123f..febc2570d6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -282,6 +282,7 @@ const onNavigate = (dir: NavigateDir) => {
                     :column="columnObj"
                     @navigate="onNavigate"
                     :active="selected.col === colIndex && selected.row === rowIndex"
+                    :row="row"
                   />
 
                   <SmartsheetCell
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 3d74a14c6f..6ab9fc31a2 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -1,30 +1,28 @@
 <script setup lang="ts">
-import { computed } from '@vue/reactivity'
-import { Row } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { provide, useVirtualCell } from '#imports'
-import { ColumnInj, ValueInj, ActiveCellInj, RowInj } from '~/context'
+import { provide, toRef, useVirtualCell } from '#imports'
+import type { Row } from '~/composables'
+import { ActiveCellInj, ColumnInj, RowInj, ValueInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
   column: ColumnType
   modelValue: any
-  row: Record<string, any>
+  row: Row
   active?: boolean
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'navigate'])
-
-const { column, modelValue: value, row } = props
+const { column, modelValue: value } = props
 const active = toRef(props, 'active', false)
-
+const row = toRef(props, 'row')
 
 provide(ColumnInj, column)
 provide(ValueInj, value)
 provide(ActiveCellInj, active)
 provide(RowInj, row)
-provide('value', value)
+provide(ValueInj, value)
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 4e1ac0cc1d..2d8e72fbce 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj, ValueInj } from '~/context'
-import { useHasMany } from '#imports'
+import ListChildItems from './components/ListChildItems.vue'
+import ListItems from './components/ListItems.vue'
+import { useProvideLTARStore } from '~/composables'
+import { ColumnInj, RowInj, ValueInj } from '~/context'
+import MdiExpandIcon from '~icons/mdi/arrow-expand'
+import MdiPlusIcon from '~icons/mdi/plus'
 
 const column = inject(ColumnInj)
 const value = inject(ValueInj)
@@ -16,371 +20,10 @@ const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, un
   row,
 )
 await loadRelatedTableMeta()
-
-/* // import ApiFactory from '@/components/project/spreadsheet/apis/apiFactory'
-import { RelationTypes, UITypes, isSystemColumn } from 'nocodb-sdk'
-import DlgLabelSubmitCancel from '~/components/utils/DlgLabelSubmitCancel'
-import Pagination from '~/components/project/spreadsheet/components/Pagination'
-import ListItems from '~/components/project/spreadsheet/components/virtualCell/components/ListItems'
-import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
-import listChildItemsModal from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItemsModal'
-import { parseIfInteger } from '@/helpers'
-import ItemChip from '~/components/project/spreadsheet/components/virtualCell/components/ItemChip'
-
-// todo: handling add new record for new row
-
-export default {
-  name: 'HasManyCell',
-  components: {
-    ListChildItems,
-    ItemChip,
-    ListItems,
-    Pagination,
-    DlgLabelSubmitCancel,
-    ListChildItemsModal: listChildItemsModal,
-  },
-  props: {
-    isLocked: Boolean,
-    breadcrumbs: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    value: [Object, Array],
-    meta: [Object],
-    nodes: [Object],
-    row: [Object],
-    active: Boolean,
-    isNew: Boolean,
-    isForm: Boolean,
-    required: Boolean,
-    isPublic: Boolean,
-    metas: Object,
-    password: String,
-    column: Object,
-  },
-  data: () => ({
-    newRecordModal: false,
-    childListModal: false,
-    // childMeta: null,
-    dialogShow: false,
-    confirmAction: null,
-    confirmMessage: '',
-    selectedChild: null,
-    expandFormModal: false,
-    isNewChild: false,
-    localState: [],
-  }),
-  computed: {
-    childMeta() {
-      return this.metas
-        ? this.metas[this.column.colOptions.fk_related_model_id]
-        : this.$store.state.meta.metas[this.column.colOptions.fk_related_model_id]
-    },
-    // todo : optimize
-    childApi() {},
-    childPrimaryCol() {
-      return this.childMeta && (this.childMeta.columns.find((c) => c.pv) || {}).title
-    },
-    primaryCol() {
-      return this.meta && (this.meta.columns.find((c) => c.pv) || {}).title
-    },
-    childPrimaryKey() {
-      return this.childMeta && (this.childMeta.columns.find((c) => c.pk) || {}).title
-    },
-    childForeignKey() {
-      return (
-        this.childMeta && (this.childMeta.columns.find((c) => c.id === this.column.colOptions.fk_child_column_id) || {}).title
-      )
-    },
-    childForeignKeyVal() {
-      return this.meta && this.meta.columns
-        ? this.meta.columns
-            .filter((c) => c.title === this.childForeignKey)
-            .map((c) => this.row[c.title] || '')
-            .join('___')
-        : ''
-    },
-    isVirtualRelation() {
-      return this.column && this.column.colOptions.virtual // (this.childMeta && (!!this.childMeta.columns.find(c => c.column_name === this.hm.column_name && this.hm.type === 'virtual'))) || false
-    },
-    isByPass() {
-      if (this.isVirtualRelation) {
-        return false
-      }
-      // if child fk references a column in parent which is not pk,
-      // then this column has to be filled
-      // if (((this.meta && this.meta.columns.find(c => !c.pk && c.id === this.hm.rcn)) || false)) {
-      //   return this.childForeignKeyVal === ''
-      // }
-      if ((this.meta && this.meta.columns.find((c) => !c.pk && c.id === this.column.fk_parent_column_id)) || false) {
-        return this.childForeignKeyVal === ''
-      }
-      return false
-    },
-    disabledChildColumns() {
-      return { [this.childForeignKey]: true }
-    },
-    // todo:
-    form() {
-      return this.selectedChild && !this.isPublic
-        ? () => import('~/components/project/spreadsheet/components/ExpandedForm')
-        : 'span'
-    },
-    childAvailableColumns() {
-      if (!this.childMeta) {
-        return []
-      }
-
-      const columns = []
-      if (this.childMeta.columns) {
-        columns.push(...this.childMeta.columns.filter((c) => !isSystemColumn(c)))
-      }
-      return columns
-    },
-    childQueryParams() {
-      if (!this.childMeta) {
-        return {}
-      }
-      // todo: use reduce
-      return {
-        hm:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.hm)
-              .map(({ hm }) => hm.table_name)
-              .join()) ||
-          '',
-        bt:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.bt)
-              .map(({ bt }) => bt.rtn)
-              .join()) ||
-          '',
-        mm:
-          (this.childMeta &&
-            this.childMeta.v &&
-            this.childMeta.v
-              .filter((v) => v.mm)
-              .map(({ mm }) => mm.rtn)
-              .join()) ||
-          '',
-      }
-    },
-    parentId() {
-      return (
-        (this.meta &&
-          this.meta.columns &&
-          (this.meta.columns
-            .filter((c) => c.title === this.childForeignKey)
-            .map((c) => this.row[c.title] || '')
-            .join('___') ||
-            this.meta.columns
-              .filter((c) => c.pk)
-              .map((c) => this.row[c.title])
-              .join('___'))) ||
-        ''
-      )
-    },
-  },
-  watch: {
-    isNew(n, o) {
-      if (!n && o) {
-        this.saveLocalState()
-      }
-    },
-  },
-  async mounted() {
-    await this.loadChildMeta()
-
-    if (this.isNew && this.value) {
-      this.localState = [...this.value]
-    }
-  },
-  created() {
-    this.loadChildMeta()
-  },
-  methods: {
-    onChildSave() {
-      if (this.isNew) {
-        this.addChildToParent(this.selectedChild)
-      } else {
-        this.$emit('loadTableData')
-      }
-    },
-    async showChildListModal() {
-      await this.loadChildMeta()
-      this.childListModal = true
-    },
-    async deleteChild(child) {
-      this.dialogShow = true
-      this.confirmMessage = 'Do you want to delete the record?'
-      this.confirmAction = async (act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
-        } else {
-          const id = this.childMeta.columns
-            .filter((c) => c.pk)
-            .map((c) => child[c.title])
-            .join('___')
-          try {
-            await this.$api.data.delete(this.childMeta.id, id)
-            this.dialogShow = false
-            this.$emit('loadTableData')
-            if ((this.childListModal || this.isForm) && this.$refs.childList) {
-              this.$refs.childList.loadData()
-            }
-          } catch (e) {
-            this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
-          }
-        }
-      }
-    },
-    async unlinkChild(child) {
-      if (this.isNew) {
-        this.localState.splice(this.localState.indexOf(child), 1)
-        this.$emit('update:localState', [...this.localState])
-        return
-      }
-
-      await this.loadChildMeta()
-      const column = this.childMeta.columns.find((c) => c.id === this.column.colOptions.fk_child_column_id)
-
-      if (column.rqd) {
-        this.$toast.info('Unlink is not possible, instead add to another record.').goAway(3000)
-        return
-      }
-      const id = this.childMeta.columns
-        .filter((c) => c.pk)
-        .map((c) => child[c.title])
-        .join('___')
-      await this.$api.dbTableRow.nestedRemove(
-        NOCO,
-        this.projectName,
-        this.meta.title,
-        this.parentId,
-        RelationTypes.HAS_MANY,
-        this.column.title,
-        id,
-      )
-
-      this.$emit('loadTableData')
-      if ((this.childListModal || this.isForm) && this.$refs.childList) {
-        this.$refs.childList.loadData()
-      }
-      // }
-      // }
-    },
-    async loadChildMeta() {
-      // todo: optimize
-      if (!this.childMeta) {
-        await this.$store.dispatch('meta/ActLoadMeta', {
-          env: this.nodes.env,
-          dbAlias: this.nodes.dbAlias,
-          id: this.column.colOptions.fk_related_model_id,
-        })
-      }
-    },
-    async showNewRecordModal() {
-      await this.loadChildMeta()
-      this.newRecordModal = true
-    },
-    async addChildToParent(child) {
-      if (this.isNew && this.localState.every((it) => it[this.childForeignKey] !== child[this.childPrimaryKey])) {
-        this.localState.push(child)
-        this.$emit('update:localState', [...this.localState])
-        this.$emit('saveRow')
-        this.newRecordModal = false
-        return
-      }
-
-      const id = this.childMeta.columns
-        .filter((c) => c.pk)
-        .map((c) => child[c.title])
-        .join('___')
-      this.newRecordModal = false
-      await this.$api.dbTableRow.nestedAdd(NOCO, this.projectName, this.meta.title, this.parentId, 'hm', this.column.title, id)
-
-      this.$emit('loadTableData')
-      if ((this.childListModal || this.isForm) && this.$refs.childList) {
-        await this.$refs.childList.loadData()
-      }
-    },
-    async editChild(child) {
-      await this.loadChildMeta()
-      this.isNewChild = false
-      this.expandFormModal = true
-      this.selectedChild = child
-      setTimeout(() => {
-        this.$refs.expandedForm && this.$refs.expandedForm.reload()
-      }, 500)
-    },
-    async insertAndAddNewChildRecord() {
-      this.newRecordModal = false
-      await this.loadChildMeta()
-      this.isNewChild = true
-      this.selectedChild = {
-        [this.childForeignKey]: parseIfInteger(this.parentId),
-        [(
-          this.childMeta.columns.find(
-            (c) =>
-              c.uidt === UITypes.LinkToAnotherRecord &&
-              c.colOptions &&
-              this.column.colOptions &&
-              c.colOptions.fk_child_column_id === this.column.colOptions.fk_child_column_id &&
-              c.colOptions.fk_parent_column_id === this.column.colOptions.fk_parent_column_id &&
-              c.colOptions.type === RelationTypes.BELONGS_TO,
-          ) || {}
-        ).title]: this.row,
-      }
-      this.expandFormModal = true
-      if (!this.isNew) {
-        setTimeout(() => {
-          this.$refs.expandedForm &&
-            this.$refs.expandedForm.$set(this.$refs.expandedForm.changedColumns, this.childForeignKey, true)
-        }, 500)
-      }
-    },
-    getCellValue(cellObj) {
-      if (cellObj) {
-        if (this.childMeta && this.childPrimaryCol) {
-          return cellObj[this.childPrimaryCol]
-        }
-        return Object.values(cellObj)[1]
-      }
-    },
-    async saveLocalState(row) {
-      let child
-      // eslint-disable-next-line no-cond-assign
-      while ((child = this.localState.pop())) {
-        if (row) {
-          const pid = this.meta.columns
-            .filter((c) => c.pk)
-            .map((c) => row[c.title])
-            .join('___')
-          const id = this.childMeta.columns
-            .filter((c) => c.pk)
-            .map((c) => child[c.title])
-            .join('___')
-
-          await this.$api.dbTableRow.nestedAdd(NOCO, this.projectName, this.meta.title, pid, 'hm', this.column.title, id)
-        } else {
-          await this.addChildToParent(child)
-        }
-      }
-      this.$emit('newRecordsSaved')
-    },
-  },
-} */
 </script>
 
 <template>
   <div class="flex align-center gap-1 w-full chips-wrapper group">
-    <!--    <template v-if="!isForm"> -->
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="value">
         <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
@@ -392,6 +35,5 @@ export default {
     <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" />
-
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index bb214c21cd..f18249d76a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -1,40 +1,35 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { useProvideLTARStore } from '~/composables'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
+import { useProvideLTARStore } from '~/composables'
+import { ColumnInj, RowInj, ValueInj } from '~/context'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 import MdiPlusIcon from '~icons/mdi/plus'
-import { ColumnInj, RowInj, ValueInj } from '~/context'
 
 const column = inject(ColumnInj)
 const row = inject(RowInj)
 const value = inject(ValueInj)
 
-
 const listItemsDlg = ref(false)
 const childListDlg = ref(false)
 
-const {
-  relatedTableMeta,
-  loadRelatedTableMeta,
-  relatedTablePrimaryValueProp,
-  unlink
-} = useProvideLTARStore(column as Required<ColumnType>, row)
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+  column as Required<ColumnType>,
+  row,
+)
 
 await loadRelatedTableMeta()
-
 </script>
 
 <template>
-  <div class="d-flex d-100 chips-wrapper" >
-    <div class="flex align-center gap-1 w-full chips-wrapper group" >
+  <div class="d-flex d-100 chips-wrapper">
+    <div class="flex align-center gap-1 w-full chips-wrapper group">
       <!--    <template v-if="!isForm"> -->
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-        <template v-if="value ">
-          <ItemChip v-for="(ch, i) in value " :key="i" :value="ch[relatedTablePrimaryValueProp]"
-                    @unlink="unlink(ch)" />
+        <template v-if="value">
+          <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
 
           <!--
                       :active="active"     :item="ch"
@@ -43,20 +38,17 @@ await loadRelatedTableMeta()
                       @edit="editChild"
                       @unlink="unlinkChild "        -->
 
-          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text"
-                @click="childListDlg = true">more... </span>
+          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
       </div>
 
-      <MdiExpandIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
-                     @click="childListDlg = true" />
-      <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
-                   @click="listItemsDlg = true" />
+      <MdiExpandIcon
+        class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
+        @click="childListDlg = true"
+      />
+      <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
       <ListItems v-model="listItemsDlg" />
       <ListChildItems v-model="childListDlg" />
-
-
     </div>
   </div>
 </template>
-
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index c17578e9a4..a6e03d46a7 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -10,7 +10,7 @@ const vModel = useVModel(props, 'modelValue', emit)
 
 const { childrenList, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, link } = useLTARStoreOrThrow()
 
-watchEffect(() => {
+watch(vModel, () => {
   if (vModel.value) {
     loadChildrenList()
   }
@@ -21,11 +21,12 @@ watchEffect(() => {
   <a-modal v-model:visible="vModel" :footer="null" title="Child list">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
       <div class="flex-1 overflow-auto min-h-0">
-        <a-card v-for="row in childrenList.list" class="my-1 cursor-pointer" @click="link(row)">
+        <a-card v-for="row in childrenList?.list ?? []" class="my-1 cursor-pointer" @click="link(row)">
           {{ row[relatedTablePrimaryValueProp] }}
         </a-card>
       </div>
       <a-pagination
+        v-if="childrenList?.pageInfo"
         v-model:current="childrenListPagination.page"
         v-model:page-size="childrenListPagination.size"
         class="mt-2 mx-auto"
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 46fae50271..3edff22475 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -9,140 +9,32 @@ const emit = defineEmits(['update:modelValue'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const {
-  childrenExcludedList,
-  loadChildrenExcludedList,
-  childrenExcludedListPagination,
-  relatedTablePrimaryValueProp,
-  link,
-} =
+const { childrenExcludedList, loadChildrenExcludedList, childrenExcludedListPagination, relatedTablePrimaryValueProp, link } =
   useLTARStoreOrThrow()
 
-watchEffect(() => {
+watch(vModel, () => {
   if (vModel.value) {
     loadChildrenExcludedList()
   }
 })
-/* import Pagination from '~/components/project/spreadsheet/components/Pagination'
-import { NOCO } from '~/lib/constants'
-
-export default {
-  name: 'ListItems',
-  components: { Pagination },
-  props: {
-    value: Boolean,
-    tn: String,
-    hm: [Object, Function, Boolean],
-    title: {
-      type: String,
-      default: 'Link Record',
-    },
-    queryParams: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    primaryKey: String,
-    primaryCol: String,
-    meta: Object,
-    size: Number,
-    api: [Object, Function],
-    mm: [Object, Function],
-    parentId: [String, Number],
-    parentMeta: [Object],
-    isPublic: Boolean,
-    password: String,
-    column: Object,
-    rowId: [Number, String],
-  },
-  emits: ['input', 'add', 'addNewRecord'],
-  data: () => ({
-    data: null,
-    page: 1,
-    query: '',
-  }),
-  computed: {
-    show: {
-      set(v) {
-        this.$emit('input', v)
-      },
-      get() {
-        return this.value
-      },
-    },
-    hmParentPrimaryValCol() {
-      return this.hm && this.parentMeta && this.parentMeta.columns.find((v) => v.pv).title
-    },
-  },
-  mounted() {
-    this.loadData()
-  },
-  methods: {
-    async loadData() {
-      if (this.isPublic) {
-        this.data = await this.$api.public.dataRelationList(
-          this.$route.params.id,
-          this.column.id,
-          {},
-          {
-            headers: {
-              'xc-password': this.password,
-            },
-            query: {
-              limit: this.size,
-              offset: this.size * (this.page - 1),
-              ...this.queryParams,
-            },
-          },
-        )
-      } else {
-        const where = `(${this.primaryCol},like,%${this.query}%)`
-
-        if (this.column && this.column.colOptions && this.rowId) {
-          this.data = await this.$api.dbTableRow.nestedChildrenExcludedList(
-            NOCO,
-            this.projectName,
-            this.parentMeta.title,
-            this.rowId,
-            this.column.colOptions.type,
-            this.column.title,
-            {
-              limit: this.size,
-              offset: this.size * (this.page - 1),
-              where: this.query && `(${this.primaryCol},like,${this.query})`,
-            },
-          )
-        } else {
-          this.data = await this.$api.dbTableRow.list(NOCO, this.projectName, this.meta.title, {
-            limit: this.size,
-            offset: this.size * (this.page - 1),
-            ...this.queryParams,
-            where,
-          })
-        }
-      }
-    },
-  },
-} */
 </script>
 
 <template>
   <a-modal v-model:visible="vModel" :footer="null" title="Related table rows">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
       <div class="flex mb-4 align-center gap-2">
-        <a-input
-          v-model:value="childrenExcludedListPagination.query" class="max-w-[200px]" size="small"></a-input>
+        <a-input v-model:value="childrenExcludedListPagination.query" class="max-w-[200px]" size="small"></a-input>
         <div class="flex-1" />
         <MdiReloadIcon class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
         <a-button type="primary" size="small" @click="$emit('addNewRecord')">Add new record</a-button>
       </div>
       <div class="flex-1 overflow-auto min-h-0">
-        <a-card v-for="row in childrenExcludedList.list" class="my-1 cursor-pointer" @click="link(row)">
+        <a-card v-for="row in childrenExcludedList?.list ?? []" class="my-1 cursor-pointer" @click="link(row)">
           {{ row[relatedTablePrimaryValueProp] }}
         </a-card>
       </div>
       <a-pagination
+        v-if="childrenList?.pageInfo"
         v-model:current="childrenExcludedListPagination.page"
         v-model:page-size="childrenExcludedListPagination.size"
         class="mt-2 mx-auto !text-xs"
@@ -152,127 +44,9 @@ export default {
       />
     </div>
   </a-modal>
-
-  <!--  <v-dialog v-model="show" width="600" content-class="dialog">
-    <v-icon small class="close-icon" @click="$emit('input', false)"> mdi-close </v-icon>
-    <v-card width="600">
-      <v-card-title class="textColor&#45;&#45;text mx-2 justify-center">
-        {{ title }}
-      </v-card-title>
-
-      <v-card-title>
-        <v-text-field
-          v-model="query"
-          hide-details
-          dense
-          outlined
-          placeholder="Filter query"
-          class="caption search-field ml-2"
-          @keydown.enter="loadData"
-        >
-          <template #append>
-            <x-icon tooltip="Apply filter" small icon class="mt-1" @click="loadData"> mdi-keyboard-return </x-icon>
-          </template>
-        </v-text-field>
-        <v-spacer />
-
-        <v-icon small class="mr-1" @click="loadData()"> mdi-reload </v-icon>
-        <v-btn v-if="!isPublic" small class="caption mr-2" color="primary" @click="$emit('addNewRecord')">
-          <v-icon small> mdi-plus </v-icon>&nbsp; New Record
-        </v-btn>
-      </v-card-title>
-
-      <v-card-text>
-        <div class="items-container">
-          <template v-if="data && data.list && data.list.length">
-            <v-card v-for="(ch, i) in data.list" :key="i" v-ripple class="ma-2 child-card" outlined @click="$emit('add', ch)">
-              <v-card-text class="primary-value textColor&#45;&#45;text text&#45;&#45;lighten-2 d-flex">
-                <span class="font-weight-bold"> {{ ch[primaryCol] || (ch && Object.values(ch).slice(0, 1).join()) }}&nbsp;</span>
-                <span v-if="primaryKey" class="grey&#45;&#45;text caption primary-key">(Primary Key : {{ ch[primaryKey] }})</span>
-                <v-spacer />
-                <v-chip v-if="hm && ch[`${hm._rtn}Read`] && ch[`${hm._rtn}Read`][hmParentPrimaryValCol]" x-small>
-                  {{ ch[`${hm._rtn}Read`][hmParentPrimaryValCol] }}
-                </v-chip>
-              </v-card-text>
-            </v-card>
-          </template>
-
-          <div v-else-if="data" class="text-center py-15 textLight&#45;&#45;text">
-            &lt;!&ndash; No items found &ndash;&gt;
-            {{ $t('placeholder.noItemsFound') }}
-          </div>
-        </div>
-      </v-card-text>
-      <v-card-actions class="justify-center py-2 flex-column">
-        <Pagination
-          v-if="data && data.list && data.list.length"
-          v-model="page"
-          :size="size"
-          :count="data && data.pageInfo && data.pageInfo.totalRows"
-          class="mb-3"
-          @input="loadData"
-        />
-      </v-card-actions>
-    </v-card>
-  </v-dialog> -->
 </template>
 
-<style scoped lang="scss">
-/*.child-list-modal {
-  position: relative;
-
-  .remove-child-icon {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    bottom: 10px;
-    opacity: 0;
-  }
-
-  &:hover .remove-child-icon {
-    opacity: 1;
-  }
-}
-
-.child-card {
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 0 0.2em var(--v-textColor-lighten5);
-  }
-}
-
-.primary-value {
-  .primary-key {
-    display: none;
-    margin-left: 0.5em;
-  }
-
-  &:hover .primary-key {
-    display: inline;
-  }
-}
-
-.items-container {
-  overflow-x: visible;
-  max-height: min(500px, 60vh);
-  overflow-y: auto;
-}
-
-::v-deep {
-  .dialog {
-    position: relative;
-
-    .close-icon {
-      width: auto;
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      z-index: 9;
-    }
-  }
-}*/
-
+<style scoped>
 :deep(.ant-pagination-item a) {
   line-height: 21px !important;
 }
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 0cee4a43fe..c6969c64da 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -4,13 +4,14 @@ import { useMetas } from './useMetas'
 import { useInjectionState } from '#imports'
 import { useProject } from '~/composables/useProject'
 import { NOCO } from '~/lib'
+import type { Row } from '~/composables'
 
 interface DataApiResponse {
   list: Record<string, any>
   pageInfo: PaginatedType
 }
 
-const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<ColumnType>, row?: Record<string, any>) => {
+const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<ColumnType>, row?: Ref<Row>) => {
   // state
   const { metas, getMeta } = useMetas()
   const { project } = useProject()
@@ -39,7 +40,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
   const rowId = computed(() =>
     meta.value.columns
       .filter((c: Required<ColumnType>) => c.pk)
-      .map((c: Required<ColumnType>) => row?.[c.title])
+      .map((c: Required<ColumnType>) => row?.value?.row?.[c.title])
       .join('___'),
   )
 
@@ -188,6 +189,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
     link,
     loadChildrenExcludedList,
     loadChildrenList,
+    row,
   }
 }, 'ltar-store')
 
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index b32961942d..c459452198 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -2,11 +2,12 @@ import type { ColumnType, FormType, GalleryType, GridType, KanbanType, TableType
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
 import type { useViewData } from '#imports'
+import type { Row } from '~/composables'
 import type { TabItem } from '~/composables/useTabs'
 
 export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled')
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
-export const RowInj: InjectionKey<Ref<Record<string, any>>> = Symbol('row')
+export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')

From 66b8eaedbc52ce46f271ae4e0fcc1f8cd1df8357 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 21:49:41 +0530
Subject: [PATCH 12/25] fix(gui-v2): reload data after linking/unlinking

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue  | 4 +++-
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue    | 4 +++-
 packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue | 4 +++-
 packages/nc-gui-v2/composables/useLTARStore.ts            | 5 ++++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 6e42ada4bd..9b5fb2ba04 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -2,11 +2,12 @@
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
-import { ColumnInj, ValueInj, RowInj } from '~/context'
 import { useProvideLTARStore } from '#imports'
+import { ColumnInj, ReloadViewDataHookInj, RowInj, ValueInj } from '~/context'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 
 const column = inject(ColumnInj)
+const reloadTrigger = inject(ReloadViewDataHookInj)
 const value = inject(ValueInj)
 const row = inject(RowInj)
 const active = false
@@ -16,6 +17,7 @@ const listItemsDlg = ref(false)
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Required<ColumnType>,
   row,
+  () => reloadTrigger?.trigger()
 )
 await loadRelatedTableMeta()
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 2d8e72fbce..81a3349252 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -4,13 +4,14 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { useProvideLTARStore } from '~/composables'
-import { ColumnInj, RowInj, ValueInj } from '~/context'
+import { ColumnInj, ReloadViewDataHookInj, RowInj, ValueInj } from '~/context'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 import MdiPlusIcon from '~icons/mdi/plus'
 
 const column = inject(ColumnInj)
 const value = inject(ValueInj)
 const row = inject(RowInj)
+const reloadTrigger = inject(ReloadViewDataHookInj)
 
 const listItemsDlg = ref(false)
 const childListDlg = ref(false)
@@ -18,6 +19,7 @@ const childListDlg = ref(false)
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Required<ColumnType>,
   row,
+  () => reloadTrigger?.trigger()
 )
 await loadRelatedTableMeta()
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index f18249d76a..b3707d4f32 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -4,13 +4,14 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { useProvideLTARStore } from '~/composables'
-import { ColumnInj, RowInj, ValueInj } from '~/context'
+import { ColumnInj, ReloadViewDataHookInj, RowInj, ValueInj } from '~/context'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 import MdiPlusIcon from '~icons/mdi/plus'
 
 const column = inject(ColumnInj)
 const row = inject(RowInj)
 const value = inject(ValueInj)
+const reloadTrigger = inject(ReloadViewDataHookInj)
 
 const listItemsDlg = ref(false)
 const childListDlg = ref(false)
@@ -18,6 +19,7 @@ const childListDlg = ref(false)
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Required<ColumnType>,
   row,
+  () => reloadTrigger?.trigger()
 )
 
 await loadRelatedTableMeta()
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index c6969c64da..3fc9b46878 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -11,7 +11,7 @@ interface DataApiResponse {
   pageInfo: PaginatedType
 }
 
-const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<ColumnType>, row?: Ref<Row>) => {
+const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<ColumnType>, row?: Ref<Row>, reloadData = () => {}) => {
   // state
   const { metas, getMeta } = useMetas()
   const { project } = useProject()
@@ -124,6 +124,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
       getRelatedTableRowId(row) as string,
     )
 
+    reloadData?.()
     // todo: reload table data and children list
     // this.$emit('loadTableData');
     // if (this.isForm && this.$refs.childList) {
@@ -164,6 +165,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<
     // if (this.isForm && this.$refs.childList) {
     //   this.$refs.childList.loadData();
     // }
+
+    reloadData?.()
   }
 
   // watchers

From 2a99584a33edb0929424f3e8dcdcf7ad9a5fc60a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 22:05:37 +0530
Subject: [PATCH 13/25] fix(gui-v2): show icons on cell hover

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/VirtualCell.vue     | 22 +------------------
 .../components/virtual-cell/BelongsTo.vue     | 12 ++++++++--
 .../components/virtual-cell/HasMany.vue       | 14 +++++++++---
 .../components/virtual-cell/ManyToMany.vue    | 18 ++++++++++-----
 packages/nc-gui-v2/context/index.ts           |  2 +-
 5 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 6ab9fc31a2..77546d9933 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -22,7 +22,7 @@ provide(ColumnInj, column)
 provide(ValueInj, value)
 provide(ActiveCellInj, active)
 provide(RowInj, row)
-provide(ValueInj, value)
+provide(ValueInj, toRef(props, 'modelValue'))
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
@@ -42,23 +42,3 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
     <VirtualCellLookup v-else-if="isLookup" />
   </div>
 </template>
-
-<style scoped>
-.nc-hint {
-  font-size: 0.61rem;
-  color: grey;
-}
-
-.nc-virtual-cell {
-  position: relative;
-}
-
-.nc-locked-overlay {
-  position: absolute;
-  z-index: 2;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-}
-</style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 9b5fb2ba04..16b3975800 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -23,14 +23,22 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="flex w-full chips-wrapper align-center group" :class="{ active }">
+  <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="value || localState">
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value || localState)" />
       </template>
     </div>
     <div class="flex-1" />
-    <MdiExpandIcon class="hidden group-hover:inline text-md text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <MdiExpandIcon class="nc-action-icon text-md text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     <ListItems v-model="listItemsDlg" />
   </div>
 </template>
+<style scoped>
+.nc-action-icon{
+  @apply hidden
+}
+.chips-wrapper:hover .nc-action-icon {
+  @apply inline-block
+}
+</style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 81a3349252..b093bf0ea7 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -25,7 +25,7 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="flex align-center gap-1 w-full chips-wrapper group">
+  <div class="flex align-center gap-1 w-full chips-wrapper">
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="value">
         <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
@@ -33,9 +33,17 @@ await loadRelatedTableMeta()
       </template>
     </div>
 
-    <MdiExpandIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
-    <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <MdiExpandIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+    <MdiPlusIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" />
   </div>
 </template>
+<style scoped>
+.nc-action-icon{
+  @apply hidden
+}
+.chips-wrapper:hover .nc-action-icon {
+  @apply inline-block
+}
+</style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index b3707d4f32..dfad9d76fd 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -26,8 +26,7 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="d-flex d-100 chips-wrapper">
-    <div class="flex align-center gap-1 w-full chips-wrapper group">
+    <div class="flex align-center gap-1 w-full h-full chips-wrapper">
       <!--    <template v-if="!isForm"> -->
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="value">
@@ -43,14 +42,21 @@ await loadRelatedTableMeta()
           <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
       </div>
-
+<div class="flex-1"/>
       <MdiExpandIcon
-        class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500"
+        class="nc-action-icon text-gray-500/50 hover:text-gray-500"
         @click="childListDlg = true"
       />
-      <MdiPlusIcon class="hidden group-hover:inline w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      <MdiPlusIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
       <ListItems v-model="listItemsDlg" />
       <ListChildItems v-model="childListDlg" />
     </div>
-  </div>
 </template>
+<style scoped>
+.nc-action-icon{
+  @apply hidden
+}
+.chips-wrapper:hover .nc-action-icon {
+  @apply inline-block
+}
+</style>
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index c459452198..6a3b562efe 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -17,7 +17,7 @@ export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changeP
 export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const IsLockedInj: InjectionKey<boolean> = Symbol('is-locked-injection')
-export const ValueInj: InjectionKey<any> = Symbol('value-injection')
+export const ValueInj: InjectionKey<Ref<any>> = Symbol('value-injection')
 export const ActiveViewInj: InjectionKey<Ref<GridType | FormType | KanbanType | GalleryType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')

From e751a7aeae6cd06795d7d02e411dce1981f8507d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 22:10:15 +0530
Subject: [PATCH 14/25] chore(gui-v2): remove unused files

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/BelongsTo.vue     |   9 +-
 .../components/virtual-cell/HasMany.vue       |   9 +-
 .../components/virtual-cell/ManyToMany.vue    |  40 +-
 .../composables/columns/useLTARColumn.ts      |  62 ---
 packages/nc-gui-v2/composables/index.ts       |   3 -
 .../nc-gui-v2/composables/useBelongsTo.ts     |  19 -
 packages/nc-gui-v2/composables/useHasMany.ts  |  19 -
 .../nc-gui-v2/composables/useLTARStore.ts     | 371 +++++++++---------
 .../nc-gui-v2/composables/useManyToMany.ts    |  19 -
 9 files changed, 215 insertions(+), 336 deletions(-)
 delete mode 100644 packages/nc-gui-v2/composables/columns/useLTARColumn.ts
 delete mode 100644 packages/nc-gui-v2/composables/useBelongsTo.ts
 delete mode 100644 packages/nc-gui-v2/composables/useHasMany.ts
 delete mode 100644 packages/nc-gui-v2/composables/useManyToMany.ts

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 16b3975800..e18252bc26 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -17,7 +17,7 @@ const listItemsDlg = ref(false)
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Required<ColumnType>,
   row,
-  () => reloadTrigger?.trigger()
+  () => reloadTrigger?.trigger(),
 )
 await loadRelatedTableMeta()
 </script>
@@ -34,11 +34,12 @@ await loadRelatedTableMeta()
     <ListItems v-model="listItemsDlg" />
   </div>
 </template>
+
 <style scoped>
-.nc-action-icon{
-  @apply hidden
+.nc-action-icon {
+  @apply hidden;
 }
 .chips-wrapper:hover .nc-action-icon {
-  @apply inline-block
+  @apply inline-block;
 }
 </style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index b093bf0ea7..c352bef99a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -19,7 +19,7 @@ const childListDlg = ref(false)
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Required<ColumnType>,
   row,
-  () => reloadTrigger?.trigger()
+  () => reloadTrigger?.trigger(),
 )
 await loadRelatedTableMeta()
 </script>
@@ -39,11 +39,12 @@ await loadRelatedTableMeta()
     <ListChildItems v-model="childListDlg" />
   </div>
 </template>
+
 <style scoped>
-.nc-action-icon{
-  @apply hidden
+.nc-action-icon {
+  @apply hidden;
 }
 .chips-wrapper:hover .nc-action-icon {
-  @apply inline-block
+  @apply inline-block;
 }
 </style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index dfad9d76fd..5f65e4a2f1 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -19,44 +19,42 @@ const childListDlg = ref(false)
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Required<ColumnType>,
   row,
-  () => reloadTrigger?.trigger()
+  () => reloadTrigger?.trigger(),
 )
 
 await loadRelatedTableMeta()
 </script>
 
 <template>
-    <div class="flex align-center gap-1 w-full h-full chips-wrapper">
-      <!--    <template v-if="!isForm"> -->
-      <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-        <template v-if="value">
-          <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
+  <div class="flex align-center gap-1 w-full h-full chips-wrapper">
+    <!--    <template v-if="!isForm"> -->
+    <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+      <template v-if="value">
+        <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
 
-          <!--
+        <!--
                       :active="active"     :item="ch"
                       :value="getCellValue(ch)"
                       :readonly="isLocked || isPublic"
                       @edit="editChild"
                       @unlink="unlinkChild "        -->
 
-          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
-        </template>
-      </div>
-<div class="flex-1"/>
-      <MdiExpandIcon
-        class="nc-action-icon text-gray-500/50 hover:text-gray-500"
-        @click="childListDlg = true"
-      />
-      <MdiPlusIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
-      <ListItems v-model="listItemsDlg" />
-      <ListChildItems v-model="childListDlg" />
+        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
+      </template>
     </div>
+    <div class="flex-1" />
+    <MdiExpandIcon class="nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+    <MdiPlusIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <ListItems v-model="listItemsDlg" />
+    <ListChildItems v-model="childListDlg" />
+  </div>
 </template>
+
 <style scoped>
-.nc-action-icon{
-  @apply hidden
+.nc-action-icon {
+  @apply hidden;
 }
 .chips-wrapper:hover .nc-action-icon {
-  @apply inline-block
+  @apply inline-block;
 }
 </style>
diff --git a/packages/nc-gui-v2/composables/columns/useLTARColumn.ts b/packages/nc-gui-v2/composables/columns/useLTARColumn.ts
deleted file mode 100644
index 26e62e4503..0000000000
--- a/packages/nc-gui-v2/composables/columns/useLTARColumn.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
-
-export default (column: Ref<ColumnType>) => {
-  const { $api } = useNuxtApp()
-  const { metas, getMeta } = useMetas()
-
-  const colOptions = computed<LinkToAnotherRecordType>(() => column.value.colOptions as LinkToAnotherRecordType)
-  const relatedTableMeta = computed<TableType>(
-    () => colOptions?.value && metas.value?.[colOptions.value?.fk_related_model_id as string],
-  )
-
-  const removeChild = () => {
-    // todo: audit
-    // await this.$api.dbTableRow.nestedRemove(
-    //   'noco',
-    //   this.projectName,
-    //   this.meta.title,
-    //   id,
-    //   'bt',
-    //   this.column.title,
-    //   parent[this.parentPrimaryKey]
-    // );
-  }
-
-  const addChild = () => {
-    // await this.$api.dbTableRow.nestedAdd('noco', this.projectName, this.meta.title, id, 'bt', this.column.title, pid);
-  }
-
-  const loadRelatedTableMeta = async () => {
-    return getMeta(colOptions.value?.fk_related_model_id as string)
-  }
-
-  // this.data = await this.$api.dbTableRow.nestedChildrenExcludedList(
-  //   'noco',
-  //   this.projectName,
-  //   this.parentMeta.title,
-  //   this.rowId,
-  //   this.column.colOptions.type,
-  //   this.column.title,
-  //   {
-  //     limit: this.size,
-  //     offset: this.size * (this.page - 1),
-  //     where: this.query && `(${this.primaryCol},like,${this.query})`,
-  //   }
-  // );
-
-  //   this.data = await this.$api.dbTableRow.nestedList(
-  //           'noco',
-  //           this.projectName,
-  //           this.parentMeta.title,
-  //           this.rowId,
-  //           this.column.colOptions.type,
-  //           this.column.title,
-  //           {
-  //             limit: this.size,
-  //             offset: this.size * (this.page - 1),
-  //           }
-  //         );
-
-  return { addChild, removeChild, loadRelatedTableMeta, relatedTableMeta }
-}
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index bc73072247..5dc112f605 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -3,12 +3,9 @@ export * from './useGlobal'
 export * from './useInjectionState'
 export * from './useUIPermission'
 export * from './useAttachment'
-export * from './useBelongsTo'
 export * from './useColors'
 export * from './useColumn'
 export * from './useGridViewColumnWidth'
-export * from './useHasMany'
-export * from './useManyToMany'
 export * from './useMetas'
 export * from './useProject'
 export * from './useTable'
diff --git a/packages/nc-gui-v2/composables/useBelongsTo.ts b/packages/nc-gui-v2/composables/useBelongsTo.ts
deleted file mode 100644
index 52ba9add3e..0000000000
--- a/packages/nc-gui-v2/composables/useBelongsTo.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ColumnType, TableType } from 'nocodb-sdk'
-import { useMetas } from './useMetas'
-
-export function useBelongsTo(column: ColumnType) {
-  const { metas, getMeta } = useMetas()
-  const parentMeta = computed<TableType>(() => {
-    return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
-  })
-
-  const loadParentMeta = async () => {
-    await getMeta((column.colOptions as any)?.fk_related_model_id as string)
-  }
-
-  const primaryValueProp = computed(() => {
-    return (parentMeta?.value?.columns?.find((c) => c.pv) || parentMeta?.value?.columns?.[0])?.title
-  })
-
-  return { parentMeta, loadParentMeta, primaryValueProp }
-}
diff --git a/packages/nc-gui-v2/composables/useHasMany.ts b/packages/nc-gui-v2/composables/useHasMany.ts
deleted file mode 100644
index 8fe98c82de..0000000000
--- a/packages/nc-gui-v2/composables/useHasMany.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ColumnType, TableType } from 'nocodb-sdk'
-import { useMetas } from './useMetas'
-
-export function useHasMany(column: ColumnType) {
-  const { metas, getMeta } = useMetas()
-  const childMeta = computed<TableType>(() => {
-    return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
-  })
-
-  const loadChildMeta = async () => {
-    await getMeta((column.colOptions as any)?.fk_related_model_id as string)
-  }
-
-  const primaryValueProp = computed(() => {
-    return (childMeta?.value?.columns?.find((c) => c.pv) || childMeta?.value?.columns?.[0])?.title
-  })
-
-  return { childMeta, loadChildMeta, primaryValueProp }
-}
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 3fc9b46878..f011ea0457 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,8 +1,6 @@
 import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useMetas } from './useMetas'
-import { useInjectionState } from '#imports'
-import { useProject } from '~/composables/useProject'
+import { useInjectionState, useMetas, useProject } from '#imports'
 import { NOCO } from '~/lib'
 import type { Row } from '~/composables'
 
@@ -11,190 +9,193 @@ interface DataApiResponse {
   pageInfo: PaginatedType
 }
 
-const [useProvideLTARStore, useLTARStore] = useInjectionState((column: Required<ColumnType>, row?: Ref<Row>, reloadData = () => {}) => {
-  // state
-  const { metas, getMeta } = useMetas()
-  const { project } = useProject()
-  const { $api } = useNuxtApp()
-  const childrenExcludedList: Ref<DataApiResponse | undefined> = ref()
-  const childrenList: Ref<DataApiResponse | undefined> = ref()
-  const childrenExcludedListPagination = reactive({
-    page: 1,
-    query: '',
-    size: 10,
-  })
-  const childrenListPagination = reactive({
-    page: 1,
-    query: '',
-    size: 10,
-  })
-
-  const colOptions = column.colOptions as LinkToAnotherRecordType
-
-  // getters
-  const meta = computed(() => metas?.value?.[column.fk_model_id as string])
-  const relatedTableMeta = computed<TableType>(() => {
-    return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
-  })
-
-  const rowId = computed(() =>
-    meta.value.columns
-      .filter((c: Required<ColumnType>) => c.pk)
-      .map((c: Required<ColumnType>) => row?.value?.row?.[c.title])
-      .join('___'),
-  )
-
-  // actions
-  const getRelatedTableRowId = (row: Record<string, any>) => {
-    return relatedTableMeta.value?.columns
-      ?.filter((c) => c.pk)
-      .map((c) => row?.[c.title as string])
-      .join('___')
-  }
-
-  const loadRelatedTableMeta = async () => {
-    await getMeta(colOptions?.fk_related_model_id as string)
-  }
-
-  const relatedTablePrimaryValueProp = computed(() => {
-    return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
-  })
-  const primaryValueProp = computed(() => {
-    return (meta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
-  })
-
-  const loadChildrenExcludedList = async () => {
-    childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
-      NOCO,
-      project.value.id as string,
-      meta.value.id,
-      rowId.value,
-      (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
-      column.title,
-      // todo: swagger type correction
-      {
-        limit: childrenExcludedListPagination.size,
-        offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
-        where:
-          childrenExcludedListPagination.query &&
-          `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
-      } as any,
-    )
-  }
-
-  const loadChildrenList = async () => {
-    childrenList.value = await $api.dbTableRow.nestedList(
-      NOCO,
-      project.value.id as string,
-      meta.value.id,
-      rowId.value,
-      colOptions.type as 'mm' | 'hm',
-      column.title,
-      // todo: swagger type correction
-      {
-        limit: childrenListPagination.size,
-        offset: childrenListPagination.size * (childrenListPagination.page - 1),
-        where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
-      } as any,
-    )
-  }
-  const unlink = async (row: Record<string, any>) => {
-    // const column = meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id);
-    // todo: handle if new record
-    // if (this.isNew) {
-    //   this.$emit('updateCol', this.row, _cn, null);
-    //   this.localState = null;
-    //   this.$emit('update:localState', this.localState);
-    //   return;
-    // }
-    // todo: handle bt column if required
-    // if (column.rqd) {
-    //   this.$toast.info('Unlink is not possible, instead map to another parent.').goAway(3000);
-    //   return;
-    // }
-
-    // todo: audit
-    await $api.dbTableRow.nestedRemove(
-      NOCO,
-      project.value.title as string,
-      meta.value.title,
-      rowId.value,
-      colOptions.type as 'mm' | 'hm',
-      column.title,
-      getRelatedTableRowId(row) as string,
-    )
-
-    reloadData?.()
-    // todo: reload table data and children list
-    // this.$emit('loadTableData');
-    // if (this.isForm && this.$refs.childList) {
-    //   this.$refs.childList.loadData();
-    // }
-  }
-
-  const link = async (row: Record<string, any>) => {
-    // todo: handle new record
-    //   const pid = this._extractRowId(parent, this.parentMeta);
-    // const id = this._extractRowId(this.row, this.meta);
-    // const _cn = this.meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id).title;
-    //
-    // if (this.isNew) {
-    //   const _rcn = this.parentMeta.columns.find(c => c.id === this.column.colOptions.fk_parent_column_id).title;
-    //   this.localState = parent;
-    //   this.$emit('update:localState', this.localState);
-    //   this.$emit('updateCol', this.row, _cn, parent[_rcn]);
-    //   this.newRecordModal = false;
-    //   return;
-    // }
-    await $api.dbTableRow.nestedAdd(
-      NOCO,
-      project.value.title as string,
-      meta.value.title as string,
-      rowId.value,
-      colOptions.type as 'mm' | 'hm',
-      column.title,
-      getRelatedTableRowId(row) as string,
+const [useProvideLTARStore, useLTARStore] = useInjectionState(
+  (column: Required<ColumnType>, row?: Ref<Row>, reloadData = () => {}) => {
+    // state
+    const { metas, getMeta } = useMetas()
+    const { project } = useProject()
+    const { $api } = useNuxtApp()
+    const childrenExcludedList: Ref<DataApiResponse | undefined> = ref()
+    const childrenList: Ref<DataApiResponse | undefined> = ref()
+    const childrenExcludedListPagination = reactive({
+      page: 1,
+      query: '',
+      size: 10,
+    })
+    const childrenListPagination = reactive({
+      page: 1,
+      query: '',
+      size: 10,
+    })
+
+    const colOptions = column.colOptions as LinkToAnotherRecordType
+
+    // getters
+    const meta = computed(() => metas?.value?.[column.fk_model_id as string])
+    const relatedTableMeta = computed<TableType>(() => {
+      return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
+    })
+
+    const rowId = computed(() =>
+      meta.value.columns
+        .filter((c: Required<ColumnType>) => c.pk)
+        .map((c: Required<ColumnType>) => row?.value?.row?.[c.title])
+        .join('___'),
     )
 
-    // todo: reload table data and child list
-    // this.pid = pid;
-    //
-    // this.newRecordModal = false;
-    //
-    // this.$emit('loadTableData');
-    // if (this.isForm && this.$refs.childList) {
-    //   this.$refs.childList.loadData();
-    // }
-
-    reloadData?.()
-  }
-
-  // watchers
-  watch(childrenExcludedListPagination, async () => {
-    await loadChildrenExcludedList()
-  })
-  watch(childrenListPagination, async () => {
-    await loadChildrenList()
-  })
-
-  return {
-    relatedTableMeta,
-    loadRelatedTableMeta,
-    relatedTablePrimaryValueProp,
-    childrenExcludedList,
-    childrenList,
-    rowId,
-    childrenExcludedListPagination,
-    childrenListPagination,
-    primaryValueProp,
-    meta,
-    unlink,
-    link,
-    loadChildrenExcludedList,
-    loadChildrenList,
-    row,
-  }
-}, 'ltar-store')
+    // actions
+    const getRelatedTableRowId = (row: Record<string, any>) => {
+      return relatedTableMeta.value?.columns
+        ?.filter((c) => c.pk)
+        .map((c) => row?.[c.title as string])
+        .join('___')
+    }
+
+    const loadRelatedTableMeta = async () => {
+      await getMeta(colOptions?.fk_related_model_id as string)
+    }
+
+    const relatedTablePrimaryValueProp = computed(() => {
+      return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+    })
+    const primaryValueProp = computed(() => {
+      return (meta?.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+    })
+
+    const loadChildrenExcludedList = async () => {
+      childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
+        NOCO,
+        project.value.id as string,
+        meta.value.id,
+        rowId.value,
+        (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
+        column.title,
+        // todo: swagger type correction
+        {
+          limit: childrenExcludedListPagination.size,
+          offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+          where:
+            childrenExcludedListPagination.query &&
+            `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+        } as any,
+      )
+    }
+
+    const loadChildrenList = async () => {
+      childrenList.value = await $api.dbTableRow.nestedList(
+        NOCO,
+        project.value.id as string,
+        meta.value.id,
+        rowId.value,
+        colOptions.type as 'mm' | 'hm',
+        column.title,
+        // todo: swagger type correction
+        {
+          limit: childrenListPagination.size,
+          offset: childrenListPagination.size * (childrenListPagination.page - 1),
+          where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
+        } as any,
+      )
+    }
+    const unlink = async (row: Record<string, any>) => {
+      // const column = meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id);
+      // todo: handle if new record
+      // if (this.isNew) {
+      //   this.$emit('updateCol', this.row, _cn, null);
+      //   this.localState = null;
+      //   this.$emit('update:localState', this.localState);
+      //   return;
+      // }
+      // todo: handle bt column if required
+      // if (column.rqd) {
+      //   this.$toast.info('Unlink is not possible, instead map to another parent.').goAway(3000);
+      //   return;
+      // }
+
+      // todo: audit
+      await $api.dbTableRow.nestedRemove(
+        NOCO,
+        project.value.title as string,
+        meta.value.title,
+        rowId.value,
+        colOptions.type as 'mm' | 'hm',
+        column.title,
+        getRelatedTableRowId(row) as string,
+      )
+
+      reloadData?.()
+      // todo: reload table data and children list
+      // this.$emit('loadTableData');
+      // if (this.isForm && this.$refs.childList) {
+      //   this.$refs.childList.loadData();
+      // }
+    }
+
+    const link = async (row: Record<string, any>) => {
+      // todo: handle new record
+      //   const pid = this._extractRowId(parent, this.parentMeta);
+      // const id = this._extractRowId(this.row, this.meta);
+      // const _cn = this.meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id).title;
+      //
+      // if (this.isNew) {
+      //   const _rcn = this.parentMeta.columns.find(c => c.id === this.column.colOptions.fk_parent_column_id).title;
+      //   this.localState = parent;
+      //   this.$emit('update:localState', this.localState);
+      //   this.$emit('updateCol', this.row, _cn, parent[_rcn]);
+      //   this.newRecordModal = false;
+      //   return;
+      // }
+      await $api.dbTableRow.nestedAdd(
+        NOCO,
+        project.value.title as string,
+        meta.value.title as string,
+        rowId.value,
+        colOptions.type as 'mm' | 'hm',
+        column.title,
+        getRelatedTableRowId(row) as string,
+      )
+
+      // todo: reload table data and child list
+      // this.pid = pid;
+      //
+      // this.newRecordModal = false;
+      //
+      // this.$emit('loadTableData');
+      // if (this.isForm && this.$refs.childList) {
+      //   this.$refs.childList.loadData();
+      // }
+
+      reloadData?.()
+    }
+
+    // watchers
+    watch(childrenExcludedListPagination, async () => {
+      await loadChildrenExcludedList()
+    })
+    watch(childrenListPagination, async () => {
+      await loadChildrenList()
+    })
+
+    return {
+      relatedTableMeta,
+      loadRelatedTableMeta,
+      relatedTablePrimaryValueProp,
+      childrenExcludedList,
+      childrenList,
+      rowId,
+      childrenExcludedListPagination,
+      childrenListPagination,
+      primaryValueProp,
+      meta,
+      unlink,
+      link,
+      loadChildrenExcludedList,
+      loadChildrenList,
+      row,
+    }
+  },
+  'ltar-store',
+)
 
 export { useProvideLTARStore }
 
diff --git a/packages/nc-gui-v2/composables/useManyToMany.ts b/packages/nc-gui-v2/composables/useManyToMany.ts
deleted file mode 100644
index 8e759e74d3..0000000000
--- a/packages/nc-gui-v2/composables/useManyToMany.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ColumnType, TableType } from 'nocodb-sdk'
-import { useMetas } from './useMetas'
-
-export function useManyToMany(column: ColumnType) {
-  const { metas, getMeta } = useMetas()
-  const childMeta = computed<TableType>(() => {
-    return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
-  })
-
-  const loadChildMeta = async () => {
-    await getMeta((column.colOptions as any)?.fk_related_model_id as string)
-  }
-
-  const primaryValueProp = computed(() => {
-    return (childMeta?.value?.columns?.find((c) => c.pv) || childMeta?.value?.columns?.[0])?.title
-  })
-
-  return { childMeta, loadChildMeta, primaryValueProp }
-}

From 39c10ef386ad92c13b505c60fd39d83b7805a9ef Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 22:33:37 +0530
Subject: [PATCH 15/25] feat(gui-v2): reload modal items on link/unlink

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/ManyToMany.vue    |   7 -
 .../components/ListChildItems.vue             |  10 +-
 .../components/ListChildItemsModal.vue        | 126 ------------------
 .../virtual-cell/components/ListItems.vue     |   9 +-
 4 files changed, 14 insertions(+), 138 deletions(-)
 delete mode 100644 packages/nc-gui-v2/components/virtual-cell/components/ListChildItemsModal.vue

diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 5f65e4a2f1..01ac2d059e 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -32,13 +32,6 @@ await loadRelatedTableMeta()
       <template v-if="value">
         <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
 
-        <!--
-                      :active="active"     :item="ch"
-                      :value="getCellValue(ch)"
-                      :readonly="isLocked || isPublic"
-                      @edit="editChild"
-                      @unlink="unlinkChild "        -->
-
         <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index a6e03d46a7..ef4b5907b3 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { watchEffect } from '@vue/runtime-core'
 import { useVModel } from '@vueuse/core'
 import { useLTARStoreOrThrow } from '~/composables'
 
@@ -8,20 +7,25 @@ const emit = defineEmits(['update:modelValue'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const { childrenList, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, link } = useLTARStoreOrThrow()
+const { childrenList, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, unlink } = useLTARStoreOrThrow()
 
 watch(vModel, () => {
   if (vModel.value) {
     loadChildrenList()
   }
 })
+
+const unlinkRow = async (row: Record<string, any>) => {
+  await unlink(row)
+  await loadChildrenList()
+}
 </script>
 
 <template>
   <a-modal v-model:visible="vModel" :footer="null" title="Child list">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
       <div class="flex-1 overflow-auto min-h-0">
-        <a-card v-for="row in childrenList?.list ?? []" class="my-1 cursor-pointer" @click="link(row)">
+        <a-card v-for="(row, i) of childrenList?.list ?? []" :key="i" class="my-1 cursor-pointer" @click="unlinkRow(row)">
           {{ row[relatedTablePrimaryValueProp] }}
         </a-card>
       </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItemsModal.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItemsModal.vue
deleted file mode 100644
index 6ed17a4d79..0000000000
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItemsModal.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script>
-import ListChildItems from './ListChildItems.vue'
-
-export default {
-  name: 'ListChildItemsModal',
-  components: { ListChildItems },
-  props: {
-    type: String,
-    readOnly: Boolean,
-    localState: Array,
-    isNew: Boolean,
-    password: String,
-    value: Boolean,
-    title: {
-      type: String,
-      default: 'Link Record',
-    },
-    queryParams: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    primaryKey: String,
-    primaryCol: String,
-    meta: Object,
-    parentMeta: Object,
-    size: Number,
-    api: [Object, Function],
-    mm: [Object, Boolean],
-    isPublic: Boolean,
-    rowId: [String, Number],
-    column: Object,
-  },
-  emits: ['input'],
-  data: () => ({
-    data: null,
-    page: 1,
-  }),
-  computed: {
-    show: {
-      set(v) {
-        this.$emit('input', v)
-      },
-      get() {
-        return this.value
-      },
-    },
-  },
-  mounted() {},
-  methods: {
-    async loadData() {
-      if (this.$refs && this.$refs.child) {
-        await this.$refs.child.loadData()
-      }
-    },
-  },
-}
-</script>
-
-<template>
-  <v-dialog v-model="show" width="600" content-class="dialog">
-    <v-icon small class="close-icon" @click="$emit('input', false)"> mdi-close </v-icon>
-    <ListChildItems
-      v-if="show"
-      ref="child"
-      :type="type"
-      :row-id="rowId"
-      :local-state="localState"
-      :is-new="isNew"
-      :size="10"
-      :meta="meta"
-      :password="password"
-      :parent-meta="parentMeta"
-      :primary-col="primaryCol"
-      :primary-key="primaryKey"
-      :api="api"
-      :query-params="queryParams"
-      v-bind="$attrs"
-      :read-only="readOnly"
-      :is-public="isPublic"
-      :column="column"
-    />
-  </v-dialog>
-</template>
-
-<style scoped lang="scss">
-::v-deep {
-  .dialog {
-    position: relative;
-
-    .close-icon {
-      width: auto;
-      position: absolute;
-      right: 10px;
-      top: 10px;
-      z-index: 9;
-    }
-  }
-}
-</style>
-
-<!--
-/**
- * @copyright Copyright (c) 2021, Xgene Cloud Ltd
- *
- * @author Naveen MR <oof1lab@gmail.com>
- * @author Pranav C Balan <pranavxc@gmail.com>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
- */
--->
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 3edff22475..81f10bd56c 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -17,6 +17,11 @@ watch(vModel, () => {
     loadChildrenExcludedList()
   }
 })
+
+const linkRow = async (row: Record<string, any>) => {
+  await link(row)
+  await loadChildrenExcludedList()
+}
 </script>
 
 <template>
@@ -29,12 +34,12 @@ watch(vModel, () => {
         <a-button type="primary" size="small" @click="$emit('addNewRecord')">Add new record</a-button>
       </div>
       <div class="flex-1 overflow-auto min-h-0">
-        <a-card v-for="row in childrenExcludedList?.list ?? []" class="my-1 cursor-pointer" @click="link(row)">
+        <a-card v-for="(row, i) in childrenExcludedList?.list ?? []" :key="i" class="my-1 cursor-pointer" @click="linkRow(row)">
           {{ row[relatedTablePrimaryValueProp] }}
         </a-card>
       </div>
       <a-pagination
-        v-if="childrenList?.pageInfo"
+        v-if="childrenExcludedList?.pageInfo"
         v-model:current="childrenExcludedListPagination.page"
         v-model:page-size="childrenExcludedListPagination.size"
         class="mt-2 mx-auto !text-xs"

From 05c10b78e8b6a276bc8f91485cf79b743cc96a90 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 00:09:14 +0530
Subject: [PATCH 16/25] feat(gui-v2): children list modal functionalities

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../components/virtual-cell/BelongsTo.vue     | 11 +++-
 .../components/virtual-cell/HasMany.vue       | 17 +++--
 .../components/virtual-cell/ManyToMany.vue    | 15 +++--
 .../components/ListChildItems.vue             | 65 ++++++++++++++-----
 .../virtual-cell/components/ListItems.vue     | 43 +++++++-----
 .../nc-gui-v2/composables/useLTARStore.ts     | 21 ++++++
 7 files changed, 126 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 616a5615f8..41b227464c 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -20,6 +20,7 @@ declare module '@vue/runtime-core' {
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index e18252bc26..4e2e99f5bb 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -29,16 +29,21 @@ await loadRelatedTableMeta()
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value || localState)" />
       </template>
     </div>
-    <div class="flex-1" />
-    <MdiExpandIcon class="nc-action-icon text-md text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <div class="flex-1 flex justify-end gap-1">
+      <MdiExpandIcon
+        class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none transform group-hover:(text-pink-500 scale-120)"
+        @click="listItemsDlg = true"
+      />
+    </div>
     <ListItems v-model="listItemsDlg" />
   </div>
 </template>
 
 <style scoped>
 .nc-action-icon {
-  @apply hidden;
+  @apply hidden cursor-pointer;
 }
+
 .chips-wrapper:hover .nc-action-icon {
   @apply inline-block;
 }
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index c352bef99a..573bf6cd24 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -32,19 +32,24 @@ await loadRelatedTableMeta()
         <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
-
-    <MdiExpandIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
-    <MdiPlusIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <div class="flex-1 flex justify-end gap-1">
+      <MdiExpandIcon
+        class="select-none transform group-hover:(text-pink-500 scale-120) text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+        @click="childListDlg = true"
+      />
+      <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    </div>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" />
+    <ListChildItems @attachRecord="childListDlg=false,listItemsDlg=true" v-model="childListDlg" />
   </div>
 </template>
 
 <style scoped>
 .nc-action-icon {
-  @apply hidden;
+  @apply hidden cursor-pointer;
 }
+
 .chips-wrapper:hover .nc-action-icon {
-  @apply inline-block;
+  @apply flex;
 }
 </style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 01ac2d059e..0117aa220c 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -32,21 +32,24 @@ await loadRelatedTableMeta()
       <template v-if="value">
         <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
 
-        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
+        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text"
+              @click="childListDlg = true">more... </span>
       </template>
     </div>
-    <div class="flex-1" />
-    <MdiExpandIcon class="nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
-    <MdiPlusIcon class="nc-action-icon w-[20px] text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    <div class="flex-1 flex justify-end gap-1">
+      <MdiExpandIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+      <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+    </div>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" />
+    <ListChildItems @attachRecord="childListDlg=false,listItemsDlg=true" v-model="childListDlg" />
   </div>
 </template>
 
 <style scoped>
 .nc-action-icon {
-  @apply hidden;
+  @apply hidden cursor-pointer;
 }
+
 .chips-wrapper:hover .nc-action-icon {
   @apply inline-block;
 }
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index ef4b5907b3..eb5b943225 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,13 +1,25 @@
 <script lang="ts" setup>
 import { useVModel } from '@vueuse/core'
 import { useLTARStoreOrThrow } from '~/composables'
+import MdiReloadIcon from '~icons/mdi/reload'
+import MdiDeleteIcon from '~icons/mdi/delete-outline'
+import MdiUnlinkIcon from '~icons/mdi/link-variant-remove'
 
 const props = defineProps<{ modelValue?: boolean }>()
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const { childrenList, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, unlink } = useLTARStoreOrThrow()
+const {
+  childrenList,
+  meta,
+  deleteRelatedRow,
+  loadChildrenList,
+  childrenListPagination,
+  relatedTablePrimaryValueProp,
+  unlink,
+} =
+  useLTARStoreOrThrow()
 
 watch(vModel, () => {
   if (vModel.value) {
@@ -24,20 +36,43 @@ const unlinkRow = async (row: Record<string, any>) => {
 <template>
   <a-modal v-model:visible="vModel" :footer="null" title="Child list">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
-      <div class="flex-1 overflow-auto min-h-0">
-        <a-card v-for="(row, i) of childrenList?.list ?? []" :key="i" class="my-1 cursor-pointer" @click="unlinkRow(row)">
-          {{ row[relatedTablePrimaryValueProp] }}
-        </a-card>
+      <div class="flex mb-4 align-center gap-2">
+        <!-- <a-input v-model:value="childrenListPagination.query" class="max-w-[200px]" size="small"></a-input> -->
+        <div class="flex-1" />
+        <MdiReloadIcon class="cursor-pointer text-gray-500" @click="loadChildrenList" />
+        <a-button type="primary" size="small" @click="emit('attachRecord')">
+          <div class="flex align-center gap-1">
+            <MdiUnlinkIcon class="text-xs text-white" @click="unlinkRow(row)" />
+            Link to '{{ meta.title }}'
+          </div>
+        </a-button>
       </div>
-      <a-pagination
-        v-if="childrenList?.pageInfo"
-        v-model:current="childrenListPagination.page"
-        v-model:page-size="childrenListPagination.size"
-        class="mt-2 mx-auto"
-        size="small"
-        :total="childrenList.pageInfo.totalRows"
-        show-less-items
-      />
+      <template v-if="childrenList?.pageInfo?.totalRows">
+        <div class="flex-1 overflow-auto min-h-0">
+          <a-card v-for="(row, i) of childrenList?.list ?? []" :key="i" class="ma-2 hover:(!bg-gray-200/50 shadow-md)">
+            <div class="flex align-center">
+              <div class="flex-grow overflow-hidden min-w-0">
+                {{ row[relatedTablePrimaryValueProp] }}
+              </div>
+              <div class="flex gap-2">
+                <MdiUnlinkIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
+                <MdiDeleteIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                               @click="deleteRelatedRow(row)" />
+              </div>
+            </div>
+          </a-card>
+        </div>
+        <a-pagination
+          v-if="childrenList?.pageInfo"
+          v-model:current="childrenListPagination.page"
+          v-model:page-size="childrenListPagination.size"
+          class="mt-2 mx-auto"
+          size="small"
+          :total="childrenList.pageInfo.totalRows"
+          show-less-items
+        />
+      </template>
+      <a-empty class="my-10" v-else />
     </div>
   </a-modal>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 81f10bd56c..f992a86cd9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -20,7 +20,8 @@ watch(vModel, () => {
 
 const linkRow = async (row: Record<string, any>) => {
   await link(row)
-  await loadChildrenExcludedList()
+  vModel.value= false
+  // await loadChildrenExcludedList()
 }
 </script>
 
@@ -28,25 +29,33 @@ const linkRow = async (row: Record<string, any>) => {
   <a-modal v-model:visible="vModel" :footer="null" title="Related table rows">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
       <div class="flex mb-4 align-center gap-2">
-        <a-input v-model:value="childrenExcludedListPagination.query" class="max-w-[200px]" size="small"></a-input>
+        <a-input v-model:value="childrenExcludedListPagination.query" placeholder="Filter query" class="max-w-[200px]" size="small"></a-input>
         <div class="flex-1" />
         <MdiReloadIcon class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
-        <a-button type="primary" size="small" @click="$emit('addNewRecord')">Add new record</a-button>
+        <a-button type="primary" size="small" @click="emit('addNewRecord')">Add new record</a-button>
       </div>
-      <div class="flex-1 overflow-auto min-h-0">
-        <a-card v-for="(row, i) in childrenExcludedList?.list ?? []" :key="i" class="my-1 cursor-pointer" @click="linkRow(row)">
-          {{ row[relatedTablePrimaryValueProp] }}
-        </a-card>
-      </div>
-      <a-pagination
-        v-if="childrenExcludedList?.pageInfo"
-        v-model:current="childrenExcludedListPagination.page"
-        v-model:page-size="childrenExcludedListPagination.size"
-        class="mt-2 mx-auto !text-xs"
-        size="small"
-        :total="childrenExcludedList.pageInfo.totalRows"
-        show-less-items
-      />
+      <template v-if="childrenExcludedList?.pageInfo?.totalRows">
+        <div class="flex-1 overflow-auto min-h-0">
+          <a-card
+            v-for="(row, i) in childrenExcludedList?.list ?? []"
+            :key="i"
+            class="ma-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md)"
+            @click="linkRow(row)"
+          >
+            {{ row[relatedTablePrimaryValueProp] }}
+          </a-card>
+        </div>
+        <a-pagination
+          v-if="childrenExcludedList?.pageInfo"
+          v-model:current="childrenExcludedListPagination.page"
+          v-model:page-size="childrenExcludedListPagination.size"
+          class="mt-2 mx-auto !text-xs"
+          size="small"
+          :total="childrenExcludedList.pageInfo.totalRows"
+          show-less-items
+        />
+      </template>
+      <a-empty class="my-10" v-else />
     </div>
   </a-modal>
 </template>
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index f011ea0457..a9c9d3c4b8 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,8 +1,10 @@
 import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import { Modal, notification } from 'ant-design-vue'
 import { useInjectionState, useMetas, useProject } from '#imports'
 import { NOCO } from '~/lib'
 import type { Row } from '~/composables'
+import { extractSdkResponseErrorMsg } from '~/utils'
 
 interface DataApiResponse {
   list: Record<string, any>
@@ -97,6 +99,24 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         } as any,
       )
     }
+
+    const deleteRelatedRow = async (row: Record<string, any>) => {
+      Modal.confirm({
+        title: 'Do you want to delete the record?',
+        type: 'warning',
+        onOk: async () => {
+          const id = getRelatedTableRowId(row)
+          try {
+            $api.dbTableRow.delete(NOCO, project.value.id as string, relatedTableMeta.value.id as string, id as string)
+            reloadData?.()
+            await loadChildrenList()
+          } catch (e) {
+            notification.error(await extractSdkResponseErrorMsg(e))
+          }
+        },
+      })
+    }
+
     const unlink = async (row: Record<string, any>) => {
       // const column = meta.columns.find(c => c.id === this.column.colOptions.fk_child_column_id);
       // todo: handle if new record
@@ -192,6 +212,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       loadChildrenExcludedList,
       loadChildrenList,
       row,
+      deleteRelatedRow,
     }
   },
   'ltar-store',

From 7f818d059990aa4d1a24945c173e9adce6d7adf8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 00:12:46 +0530
Subject: [PATCH 17/25] refactor(gui-v2): label correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/virtual-cell/HasMany.vue |  2 +-
 .../components/virtual-cell/ManyToMany.vue        |  5 ++---
 .../virtual-cell/components/ListChildItems.vue    | 15 +++------------
 .../virtual-cell/components/ListItems.vue         | 13 +++++++++----
 packages/nc-gui-v2/composables/useLTARStore.ts    |  2 +-
 5 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 573bf6cd24..f8f21c4424 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -40,7 +40,7 @@ await loadRelatedTableMeta()
       <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems @attachRecord="childListDlg=false,listItemsDlg=true" v-model="childListDlg" />
+    <ListChildItems v-model="childListDlg" @attachRecord=";(childListDlg = false), (listItemsDlg = true)" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 0117aa220c..1fa74d90e3 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -32,8 +32,7 @@ await loadRelatedTableMeta()
       <template v-if="value">
         <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
 
-        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text"
-              @click="childListDlg = true">more... </span>
+        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1">
@@ -41,7 +40,7 @@ await loadRelatedTableMeta()
       <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems @attachRecord="childListDlg=false,listItemsDlg=true" v-model="childListDlg" />
+    <ListChildItems v-model="childListDlg" @attachRecord=";(childListDlg = false), (listItemsDlg = true)" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index eb5b943225..8cc5d65701 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -10,15 +10,7 @@ const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const {
-  childrenList,
-  meta,
-  deleteRelatedRow,
-  loadChildrenList,
-  childrenListPagination,
-  relatedTablePrimaryValueProp,
-  unlink,
-} =
+const { childrenList, meta, deleteRelatedRow, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, unlink } =
   useLTARStoreOrThrow()
 
 watch(vModel, () => {
@@ -56,8 +48,7 @@ const unlinkRow = async (row: Record<string, any>) => {
               </div>
               <div class="flex gap-2">
                 <MdiUnlinkIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
-                <MdiDeleteIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
-                               @click="deleteRelatedRow(row)" />
+                <MdiDeleteIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="deleteRelatedRow(row)" />
               </div>
             </div>
           </a-card>
@@ -72,7 +63,7 @@ const unlinkRow = async (row: Record<string, any>) => {
           show-less-items
         />
       </template>
-      <a-empty class="my-10" v-else />
+      <a-empty v-else class="my-10" />
     </div>
   </a-modal>
 </template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index f992a86cd9..5eee128ca7 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -20,16 +20,21 @@ watch(vModel, () => {
 
 const linkRow = async (row: Record<string, any>) => {
   await link(row)
-  vModel.value= false
+  vModel.value = false
   // await loadChildrenExcludedList()
 }
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" title="Related table rows">
+  <a-modal v-model:visible="vModel" :footer="null" title="Link Record">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
       <div class="flex mb-4 align-center gap-2">
-        <a-input v-model:value="childrenExcludedListPagination.query" placeholder="Filter query" class="max-w-[200px]" size="small"></a-input>
+        <a-input
+          v-model:value="childrenExcludedListPagination.query"
+          placeholder="Filter query"
+          class="max-w-[200px]"
+          size="small"
+        ></a-input>
         <div class="flex-1" />
         <MdiReloadIcon class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
         <a-button type="primary" size="small" @click="emit('addNewRecord')">Add new record</a-button>
@@ -55,7 +60,7 @@ const linkRow = async (row: Record<string, any>) => {
           show-less-items
         />
       </template>
-      <a-empty class="my-10" v-else />
+      <a-empty v-else class="my-10" />
     </div>
   </a-modal>
 </template>
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index a9c9d3c4b8..a197be18e1 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -110,7 +110,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             $api.dbTableRow.delete(NOCO, project.value.id as string, relatedTableMeta.value.id as string, id as string)
             reloadData?.()
             await loadChildrenList()
-          } catch (e) {
+          } catch (e: any) {
             notification.error(await extractSdkResponseErrorMsg(e))
           }
         },

From 99d1ebda2376e94bb10487e453da3c62622fb423 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 21:47:43 +0530
Subject: [PATCH 18/25] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue         | 2 +-
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue    | 2 +-
 packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index febc2570d6..41e09240b0 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -280,9 +280,9 @@ const onNavigate = (dir: NavigateDir) => {
                     v-if="isVirtualCol(columnObj)"
                     v-model="row.row[columnObj.title]"
                     :column="columnObj"
-                    @navigate="onNavigate"
                     :active="selected.col === colIndex && selected.row === rowIndex"
                     :row="row"
+                    @navigate="onNavigate"
                   />
 
                   <SmartsheetCell
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index f8f21c4424..2c16d2b0d2 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -40,7 +40,7 @@ await loadRelatedTableMeta()
       <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" @attachRecord=";(childListDlg = false), (listItemsDlg = true)" />
+    <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 1fa74d90e3..2b52bb4439 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -40,7 +40,7 @@ await loadRelatedTableMeta()
       <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" @attachRecord=";(childListDlg = false), (listItemsDlg = true)" />
+    <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
   </div>
 </template>
 

From 4f8e7aa617e73c1682cef25848866c39b7cbd18f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 21:53:16 +0530
Subject: [PATCH 19/25] fix(gui-v2): replace with computed

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/virtual-cell/Lookup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index 66f45f10e4..b67a905ff8 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
@@ -11,7 +11,7 @@ provide(ReadonlyInj, true)
 const column = inject(ColumnInj) as ColumnType & { colOptions: LookupType }
 const meta = inject(MetaInj)
 const value = inject(ValueInj)
-const arrValue = Array.isArray(value) ? value : [value]
+const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]))
 
 const relationColumn = meta?.value.columns?.find((c) => c.id === column.colOptions.fk_relation_column_id) as ColumnType & {
   colOptions: LinkToAnotherRecordType

From 7a45513ace9d994ecd7a37fb7d695acc54669a20 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 22:10:27 +0530
Subject: [PATCH 20/25] fix(gui-v2): show notification on error

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/VirtualCell.vue     |  2 +-
 .../components/virtual-cell/HasMany.vue       |  8 +--
 .../components/ListChildItems.vue             | 16 ++++-
 .../virtual-cell/components/ListItems.vue     | 17 ++++--
 .../nc-gui-v2/composables/useLTARStore.ts     | 60 ++++++++++++-------
 5 files changed, 69 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 77546d9933..499cee5bbe 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -29,7 +29,7 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
 
 <template>
   <div
-    class="nc-virtual-cell"
+    class="nc-virtual-cell w-full"
     @keydown.stop.enter.exact="emit('navigate', NavigateDir.NEXT)"
     @keydown.stop.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
   >
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 2c16d2b0d2..f3f3d9d99e 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -25,19 +25,19 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="flex align-center gap-1 w-full chips-wrapper">
+  <div class="flex align-center gap-1 w-full min-full chips-wrapper">
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="value">
         <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
         <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
-    <div class="flex-1 flex justify-end gap-1">
+    <div class="flex-grow flex justify-end gap-1">
       <MdiExpandIcon
-        class="select-none transform group-hover:(text-pink-500 scale-120) text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+        class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
         @click="childListDlg = true"
       />
-      <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      <MdiPlusIcon class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 8cc5d65701..b97cec5bcf 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -10,8 +10,16 @@ const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const { childrenList, meta, deleteRelatedRow, loadChildrenList, childrenListPagination, relatedTablePrimaryValueProp, unlink } =
-  useLTARStoreOrThrow()
+const {
+  childrenList,
+  meta,
+  deleteRelatedRow,
+  loadChildrenList,
+  childrenListPagination,
+  relatedTablePrimaryValueProp,
+  unlink,
+  getRelatedTableRowId,
+} = useLTARStoreOrThrow()
 
 watch(vModel, () => {
   if (vModel.value) {
@@ -44,8 +52,10 @@ const unlinkRow = async (row: Record<string, any>) => {
           <a-card v-for="(row, i) of childrenList?.list ?? []" :key="i" class="ma-2 hover:(!bg-gray-200/50 shadow-md)">
             <div class="flex align-center">
               <div class="flex-grow overflow-hidden min-w-0">
-                {{ row[relatedTablePrimaryValueProp] }}
+                {{ row[relatedTablePrimaryValueProp]
+                }}<span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
               </div>
+              <div class="flex-1"></div>
               <div class="flex gap-2">
                 <MdiUnlinkIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
                 <MdiDeleteIcon class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="deleteRelatedRow(row)" />
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 5eee128ca7..de9c393d9c 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -9,8 +9,14 @@ const emit = defineEmits(['update:modelValue'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
-const { childrenExcludedList, loadChildrenExcludedList, childrenExcludedListPagination, relatedTablePrimaryValueProp, link } =
-  useLTARStoreOrThrow()
+const {
+  childrenExcludedList,
+  loadChildrenExcludedList,
+  childrenExcludedListPagination,
+  relatedTablePrimaryValueProp,
+  link,
+  getRelatedTableRowId,
+} = useLTARStoreOrThrow()
 
 watch(vModel, () => {
   if (vModel.value) {
@@ -44,10 +50,13 @@ const linkRow = async (row: Record<string, any>) => {
           <a-card
             v-for="(row, i) in childrenExcludedList?.list ?? []"
             :key="i"
-            class="ma-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md)"
+            class="ma-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
             @click="linkRow(row)"
           >
-            {{ row[relatedTablePrimaryValueProp] }}
+            {{ row[relatedTablePrimaryValueProp]
+            }}<span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1"
+              >(Primary key : {{ getRelatedTableRowId(row) }})</span
+            >
           </a-card>
         </div>
         <a-pagination
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index a197be18e1..774243165b 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -111,7 +111,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             reloadData?.()
             await loadChildrenList()
           } catch (e: any) {
-            notification.error(await extractSdkResponseErrorMsg(e))
+            notification.error({
+              message: 'Delete failed',
+              description: await extractSdkResponseErrorMsg(e),
+            })
           }
         },
       })
@@ -131,18 +134,23 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       //   this.$toast.info('Unlink is not possible, instead map to another parent.').goAway(3000);
       //   return;
       // }
-
-      // todo: audit
-      await $api.dbTableRow.nestedRemove(
-        NOCO,
-        project.value.title as string,
-        meta.value.title,
-        rowId.value,
-        colOptions.type as 'mm' | 'hm',
-        column.title,
-        getRelatedTableRowId(row) as string,
-      )
-
+      try {
+        // todo: audit
+        await $api.dbTableRow.nestedRemove(
+          NOCO,
+          project.value.title as string,
+          meta.value.title,
+          rowId.value,
+          colOptions.type as 'mm' | 'hm',
+          column.title,
+          getRelatedTableRowId(row) as string,
+        )
+      } catch (e) {
+        notification.error({
+          message: 'Unlink failed',
+          description: await extractSdkResponseErrorMsg(e),
+        })
+      }
       reloadData?.()
       // todo: reload table data and children list
       // this.$emit('loadTableData');
@@ -165,15 +173,22 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       //   this.newRecordModal = false;
       //   return;
       // }
-      await $api.dbTableRow.nestedAdd(
-        NOCO,
-        project.value.title as string,
-        meta.value.title as string,
-        rowId.value,
-        colOptions.type as 'mm' | 'hm',
-        column.title,
-        getRelatedTableRowId(row) as string,
-      )
+      try {
+        await $api.dbTableRow.nestedAdd(
+          NOCO,
+          project.value.title as string,
+          meta.value.title as string,
+          rowId.value,
+          colOptions.type as 'mm' | 'hm',
+          column.title,
+          getRelatedTableRowId(row) as string,
+        )
+      } catch (e) {
+        notification.error({
+          message: 'Linking failed',
+          description: await extractSdkResponseErrorMsg(e),
+        })
+      }
 
       // todo: reload table data and child list
       // this.pid = pid;
@@ -213,6 +228,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       loadChildrenList,
       row,
       deleteRelatedRow,
+      getRelatedTableRowId,
     }
   },
   'ltar-store',

From 948a0a05add7f741ee8499be0cd898588bdc0ed9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 22:13:15 +0530
Subject: [PATCH 21/25] refactor(gui-v2): import from `#imports`

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/components/ListChildItems.vue      | 2 +-
 .../nc-gui-v2/components/virtual-cell/components/ListItems.vue | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index b97cec5bcf..21c7433cb1 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
+import { useVModel } from '#imports'
 import { useLTARStoreOrThrow } from '~/composables'
 import MdiReloadIcon from '~icons/mdi/reload'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index de9c393d9c..13d6c90480 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { watchEffect } from '@vue/runtime-core'
-import { useVModel } from '@vueuse/core'
+import { useVModel } from '#imports'
 import { useLTARStoreOrThrow } from '~/composables'
 import MdiReloadIcon from '~icons/mdi/reload'
 

From e81fefd3958e18c684974e1fca866fc33da409f3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 16:14:56 +0530
Subject: [PATCH 22/25] fix(gui-v2): add try catch to list apis

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/composables/useLTARStore.ts     | 74 +++++++++++--------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 774243165b..3c5b988df1 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -65,39 +65,53 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     })
 
     const loadChildrenExcludedList = async () => {
-      childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
-        NOCO,
-        project.value.id as string,
-        meta.value.id,
-        rowId.value,
-        (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
-        column.title,
-        // todo: swagger type correction
-        {
-          limit: childrenExcludedListPagination.size,
-          offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
-          where:
-            childrenExcludedListPagination.query &&
-            `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
-        } as any,
-      )
+      try {
+        childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
+          NOCO,
+          project.value.id as string,
+          meta.value.id,
+          rowId.value,
+          (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
+          column.title,
+          // todo: swagger type correction
+          {
+            limit: childrenExcludedListPagination.size,
+            offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+            where:
+              childrenExcludedListPagination.query &&
+              `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+          } as any,
+        )
+      } catch (e: any) {
+        notification.error({
+          message: 'Failed to load list',
+          description: await extractSdkResponseErrorMsg(e),
+        })
+      }
     }
 
     const loadChildrenList = async () => {
-      childrenList.value = await $api.dbTableRow.nestedList(
-        NOCO,
-        project.value.id as string,
-        meta.value.id,
-        rowId.value,
-        colOptions.type as 'mm' | 'hm',
-        column.title,
-        // todo: swagger type correction
-        {
-          limit: childrenListPagination.size,
-          offset: childrenListPagination.size * (childrenListPagination.page - 1),
-          where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
-        } as any,
-      )
+      try {
+        childrenList.value = await $api.dbTableRow.nestedList(
+          NOCO,
+          project.value.id as string,
+          meta.value.id,
+          rowId.value,
+          colOptions.type as 'mm' | 'hm',
+          column.title,
+          // todo: swagger type correction
+          {
+            limit: childrenListPagination.size,
+            offset: childrenListPagination.size * (childrenListPagination.page - 1),
+            where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
+          } as any,
+        )
+      } catch (e: any) {
+        notification.error({
+          message: 'Failed to load children list',
+          description: await extractSdkResponseErrorMsg(e),
+        })
+      }
     }
 
     const deleteRelatedRow = async (row: Record<string, any>) => {

From eff8631a02f36c26f26fd546248624cea0cfff2f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 16:29:03 +0530
Subject: [PATCH 23/25] refactor(gui-v2): combine imports and remove unused
 imports

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue              | 3 +--
 .../components/virtual-cell/components/ListChildItems.vue      | 3 +--
 packages/nc-gui-v2/composables/useLTARStore.ts                 | 1 +
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 41e09240b0..ca531d1c26 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { ColumnType, isVirtualCol } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
 import {
-  Row,
   inject,
   onKeyStroke,
   onMounted,
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 21c7433cb1..df612cc0ae 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { useVModel } from '#imports'
-import { useLTARStoreOrThrow } from '~/composables'
+import { useLTARStoreOrThrow, useVModel } from '#imports'
 import MdiReloadIcon from '~icons/mdi/reload'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 import MdiUnlinkIcon from '~icons/mdi/link-variant-remove'
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 3c5b988df1..d4a7b18c4b 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -11,6 +11,7 @@ interface DataApiResponse {
   pageInfo: PaginatedType
 }
 
+/** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
   (column: Required<ColumnType>, row?: Ref<Row>, reloadData = () => {}) => {
     // state

From ad19f4deb01265d740bb6c68a8aa402f387cd3f6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 16:35:04 +0530
Subject: [PATCH 24/25] refactor(gui-v2): update injection key name

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/VirtualCell.vue  |  6 +++---
 .../nc-gui-v2/components/virtual-cell/BelongsTo.vue  | 10 +++++-----
 .../nc-gui-v2/components/virtual-cell/Formula.vue    |  4 ++--
 .../nc-gui-v2/components/virtual-cell/HasMany.vue    | 12 ++++++------
 .../nc-gui-v2/components/virtual-cell/Lookup.vue     |  4 ++--
 .../nc-gui-v2/components/virtual-cell/ManyToMany.vue | 12 ++++++------
 .../nc-gui-v2/components/virtual-cell/Rollup.vue     |  4 ++--
 .../components/virtual-cell/components/ItemChip.vue  |  1 -
 .../components/virtual-cell/components/ListItems.vue |  3 +--
 packages/nc-gui-v2/context/index.ts                  |  2 +-
 10 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 499cee5bbe..b385f6aca8 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -2,7 +2,7 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, toRef, useVirtualCell } from '#imports'
 import type { Row } from '~/composables'
-import { ActiveCellInj, ColumnInj, RowInj, ValueInj } from '~/context'
+import { ActiveCellInj, CellValueInj, ColumnInj, RowInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
@@ -19,10 +19,10 @@ const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
 
 provide(ColumnInj, column)
-provide(ValueInj, value)
+provide(CellValueInj, value)
 provide(ActiveCellInj, active)
 provide(RowInj, row)
-provide(ValueInj, toRef(props, 'modelValue'))
+provide(CellValueInj, toRef(props, 'modelValue'))
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 4e2e99f5bb..1e417e3caf 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -3,12 +3,12 @@ import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { useProvideLTARStore } from '#imports'
-import { ColumnInj, ReloadViewDataHookInj, RowInj, ValueInj } from '~/context'
+import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 
 const column = inject(ColumnInj)
 const reloadTrigger = inject(ReloadViewDataHookInj)
-const value = inject(ValueInj)
+const cellValue = inject(CellValueInj)
 const row = inject(RowInj)
 const active = false
 const localState = null
@@ -25,13 +25,13 @@ await loadRelatedTableMeta()
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
-      <template v-if="value || localState">
-        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value || localState)" />
+      <template v-if="cellValue || localState">
+        <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue || localState)" />
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1">
       <MdiExpandIcon
-        class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none transform group-hover:(text-pink-500 scale-120)"
+        class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
         @click="listItemsDlg = true"
       />
     </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index 5dcad187ac..bcdf61776d 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, useProject } from '#imports'
-import { ColumnInj, ValueInj } from '~/context'
+import { CellValueInj, ColumnInj } from '~/context'
 import { handleTZ } from '~/utils/dateTimeUtils'
 import { replaceUrlsWithLink } from '~/utils/urlUtils'
 
 const column = inject(ColumnInj)
 
-const value = inject(ValueInj)
+const value = inject(CellValueInj)
 
 const { isPg } = useProject()
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index f3f3d9d99e..95f4cf2172 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -3,13 +3,13 @@ import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { useProvideLTARStore } from '~/composables'
-import { ColumnInj, ReloadViewDataHookInj, RowInj, ValueInj } from '~/context'
+import { useProvideLTARStore } from '#imports'
+import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 import MdiPlusIcon from '~icons/mdi/plus'
 
 const column = inject(ColumnInj)
-const value = inject(ValueInj)
+const cellValue = inject(CellValueInj)
 const row = inject(RowInj)
 const reloadTrigger = inject(ReloadViewDataHookInj)
 
@@ -27,9 +27,9 @@ await loadRelatedTableMeta()
 <template>
   <div class="flex align-center gap-1 w-full min-full chips-wrapper">
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-      <template v-if="value">
-        <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
-        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
+      <template v-if="cellValue">
+        <ItemChip v-for="(ch, i) in cellValue" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
+        <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
     <div class="flex-grow flex justify-end gap-1">
diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index b67a905ff8..1807f0a773 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
@@ -2,7 +2,7 @@
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useColumn } from '~/composables'
-import { ColumnInj, MetaInj, ReadonlyInj, ValueInj } from '~/context'
+import { CellValueInj, ColumnInj, MetaInj, ReadonlyInj } from '~/context'
 
 const { metas, getMeta } = useMetas()
 
@@ -10,7 +10,7 @@ provide(ReadonlyInj, true)
 
 const column = inject(ColumnInj) as ColumnType & { colOptions: LookupType }
 const meta = inject(MetaInj)
-const value = inject(ValueInj)
+const value = inject(CellValueInj)
 const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]))
 
 const relationColumn = meta?.value.columns?.find((c) => c.id === column.colOptions.fk_relation_column_id) as ColumnType & {
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 2b52bb4439..c1fc3abf1e 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -3,14 +3,14 @@ import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { useProvideLTARStore } from '~/composables'
-import { ColumnInj, ReloadViewDataHookInj, RowInj, ValueInj } from '~/context'
+import { useProvideLTARStore } from '#imports'
+import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import MdiExpandIcon from '~icons/mdi/arrow-expand'
 import MdiPlusIcon from '~icons/mdi/plus'
 
 const column = inject(ColumnInj)
 const row = inject(RowInj)
-const value = inject(ValueInj)
+const cellValue = inject(CellValueInj)
 const reloadTrigger = inject(ReloadViewDataHookInj)
 
 const listItemsDlg = ref(false)
@@ -29,10 +29,10 @@ await loadRelatedTableMeta()
   <div class="flex align-center gap-1 w-full h-full chips-wrapper">
     <!--    <template v-if="!isForm"> -->
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-      <template v-if="value">
-        <ItemChip v-for="(ch, i) in value" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
+      <template v-if="cellValue">
+        <ItemChip v-for="(ch, i) in cellValue" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
 
-        <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
+        <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1">
diff --git a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
index 47be865b72..a08cb64234 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ValueInj } from '~/context'
+import { CellValueInj } from '~/context'
 
-const value = inject(ValueInj)
+const value = inject(CellValueInj)
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index bea4454b29..5307d7be70 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useLTARStoreOrThrow } from '~/composables'
 import { ActiveCellInj, ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 13d6c90480..c4d92762bf 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { useVModel } from '#imports'
-import { useLTARStoreOrThrow } from '~/composables'
+import { useLTARStoreOrThrow, useVModel } from '#imports'
 import MdiReloadIcon from '~icons/mdi/reload'
 
 const props = defineProps<{ modelValue: boolean }>()
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index 6a3b562efe..c5c5aa9cdd 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -17,7 +17,7 @@ export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changeP
 export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const IsLockedInj: InjectionKey<boolean> = Symbol('is-locked-injection')
-export const ValueInj: InjectionKey<Ref<any>> = Symbol('value-injection')
+export const CellValueInj: InjectionKey<Ref<any>> = Symbol('cell-value-injection')
 export const ActiveViewInj: InjectionKey<Ref<GridType | FormType | KanbanType | GalleryType>> = Symbol('active-view-injection')
 export const ReadonlyInj: InjectionKey<any> = Symbol('readonly-injection')
 export const ReloadViewDataHookInj: InjectionKey<EventHook<void>> = Symbol('reload-view-data-injection')

From 88ba7c80bf738db1e33b57e7d5a5bbe9cf1b5cdd Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sat, 6 Aug 2022 07:27:17 +0530
Subject: [PATCH 25/25] [chore] i18n corrections to fr.json

https://github.com/nocodb/nocodb/issues/3028
---
 packages/nc-gui/lang/fr.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/lang/fr.json b/packages/nc-gui/lang/fr.json
index d319b68822..c7138c1e21 100644
--- a/packages/nc-gui/lang/fr.json
+++ b/packages/nc-gui/lang/fr.json
@@ -229,7 +229,7 @@
       "bookDemo": "Planifier une démonstration gratuite",
       "getAnswered": "Obtenir des réponses à vos questions",
       "joinDiscord": "Rejoindre le serveur Discord",
-      "joinCommunity": "Join NocoDB Community",
+      "joinCommunity": "Rejoindre la communauté NocoDB",
       "joinReddit": "Rejoindre /r/NocoDB",
       "followNocodb": "Suivre NocoDB"
     },