feat(migration): add row option in list modal

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -20,7 +20,7 @@ interface Props {
   meta: TableType
   loadRow?: boolean
 
-  useMetaFields ?:boolean
+  useMetaFields?: boolean
 }
 
 const props = defineProps<Props>()
@@ -39,6 +39,8 @@ const fields = computed(() => {
 
 provide(MetaInj, meta)
 
+const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
+
 const { $api } = useNuxtApp()
 if (props.loadRow) {
   const { project } = useProject()
@@ -59,8 +61,6 @@ provide(IsFormInj, true)
 // accept as a prop
 // const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
 
-const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
-
 watch(
   state,
   () => {

packages/nc-gui-v2/components/virtual-cell/HasMany.vue

@@ -68,6 +68,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
 <template>
   <div class="flex align-center items-center gap-1 w-full chips-wrapper">
+    {{isNew}}
     <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="cells">

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -29,7 +29,7 @@ const expandedFormDlg = ref(false)
   >
     <span class="name">{{ value }}</span>
     <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
-      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
+      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
     <SmartsheetExpandedForm

packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@@ -24,12 +24,14 @@ const {
   relatedTablePrimaryValueProp,
   unlink,
   getRelatedTableRowId,
+  relatedTableMeta,
 } = useLTARStoreOrThrow()
 
 const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 watch([vModel, isForm], (nextVal) => {
   if (nextVal[0] || nextVal[1]) {
+    debugger
     loadChildrenList()
   }
 })
@@ -50,6 +52,9 @@ const container = computed(() =>
       })
     : Modal,
 )
+
+const expandedFormDlg = ref(false)
+const expandedFormRow = ref()
 </script>
 
 <template>
@@ -73,6 +78,12 @@ const container = computed(() =>
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
             class="ma-2 hover:(!bg-gray-200/50 shadow-md)"
+            @click="
+              () => {
+                expandedFormRow = row
+                expandedFormDlg = true
+              }
+            "
           >
             <div class="flex align-center">
               <div class="flex-grow overflow-hidden min-w-0">
@@ -81,8 +92,11 @@ const container = computed(() =>
               </div>
               <div class="flex-1"></div>
               <div class="flex gap-2">
-                <MdiLinkVariantRemove class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
-                <MdiDeleteOutline class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="deleteRelatedRow(row)" />
+                <MdiLinkVariantRemove class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click.stop="unlinkRow(row)" />
+                <MdiDeleteOutline
+                  class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                  @click.stop="deleteRelatedRow(row)"
+                />
               </div>
             </div>
           </a-card>
@@ -99,6 +113,15 @@ const container = computed(() =>
       </template>
       <a-empty v-else class="my-10" />
     </div>
+
+    <SmartsheetExpandedForm
+      v-if="expandedFormDlg && expandedFormRow"
+      v-model="expandedFormDlg"
+      :row="{ row: expandedFormRow }"
+      :meta="relatedTableMeta"
+      load-row
+      use-meta-fields
+    />
   </component>
 </template>
 

packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import type { ColumnType } from 'nocodb-sdk'
+import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import { computed } from 'vue'
 import { useLTARStoreOrThrow, useVModel } from '#imports'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { ColumnInj } from '~/context'
@@ -19,6 +21,9 @@ const {
   relatedTablePrimaryValueProp,
   link,
   getRelatedTableRowId,
+  relatedTableMeta,
+  meta,
+  row,
 } = useLTARStoreOrThrow()
 
 const { addLTARRef, isNew } = useSmartsheetRowStoreOrThrow()
@@ -37,6 +42,42 @@ watch(vModel, () => {
     loadChildrenExcludedList()
   }
 })
+
+const expandedFormDlg = ref(false)
+
+/** populate initial state for a new row which is parent/child of current record */
+const newRowState = computed(() => {
+  const colOpt = (column?.value as ColumnType)?.colOptions as LinkToAnotherRecordType
+  const colInRelatedTable: ColumnType = relatedTableMeta.value?.columns?.find((col) => {
+    if (col.uidt !== UITypes.LinkToAnotherRecord) return false
+    if (col?.colOptions?.fk_related_model_id !== meta.value.id) return false
+
+    if (colOpt.type === RelationTypes.MANY_TO_MANY && col?.colOptions?.type === RelationTypes.MANY_TO_MANY) {
+      return (
+        colOpt.fk_parent_column_id === col.colOptions.fk_child_column_id &&
+        colOpt.fk_child_column_id === col.colOptions.fk_parent_column_id
+      )
+    } else {
+      return (
+        colOpt.fk_parent_column_id === col.colOptions.fk_parent_column_id &&
+        colOpt.fk_child_column_id === col.colOptions.fk_child_column_id
+      )
+    }
+    return false
+  })
+  const relatedTableColOpt = colInRelatedTable?.colOptions as LinkToAnotherRecordType
+  if (!relatedTableColOpt) return {}
+
+  if (relatedTableColOpt.type === RelationTypes.BELONGS_TO) {
+    return {
+      [colInRelatedTable.title as string]: row,
+    }
+  } else {
+    return {
+      [colInRelatedTable.title as string]: [row],
+    }
+  }
+})
 </script>
 
 <template>
@@ -51,7 +92,7 @@ watch(vModel, () => {
         ></a-input>
         <div class="flex-1" />
         <MdiReload 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="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0">
@@ -78,6 +119,16 @@ watch(vModel, () => {
         />
       </template>
       <a-empty v-else class="my-10" />
+
+      <SmartsheetExpandedForm
+        v-if="expandedFormDlg"
+        v-model="expandedFormDlg"
+        :meta="relatedTableMeta"
+        :row="{ row: {}, oldRow: {}, rowMeta: {new:true} }"
+        :state="newRowState"
+        load-row
+        use-meta-fields
+      />
     </div>
   </a-modal>
 </template>