feat(migration): show expanded form on clicking chips

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

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

@@ -436,6 +436,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
       v-model="expandedFormDlg"
       :row="expandedFormRow"
       :state="expandedFormRowState"
+      :meta="meta"
     />
   </div>
 </template>

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

@@ -5,13 +5,12 @@ import { useExpandedFormStoreOrThrow } from '~/composables/useExpandedFormStore'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
 
+const emit = defineEmits(['cancel'])
 const { meta } = useSmartsheetStoreOrThrow()
 const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
 const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 const { isUIAllowed } = useUIPermission()
 
-const emit = defineEmits(['cancel'])
-
 const save = async () => {
   if (isNew.value) {
     const data = await _save()
@@ -41,8 +40,8 @@ const iconColor = '#1890ff'
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
     <div class="flex-grow" />
-    <mdi-reload />
-    <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
+    <mdi-reload class="cursor-pointer select-none" />
+    <component :is="drawerToggleIcon" class="cursor-pointer select-none" @click="commentsDrawer = !commentsDrawer" />
     <a-button size="small" class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}

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

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
 import { useVModel } from '@vueuse/core'
-import { Ref, computed, provide, toRef, watch } from 'vue'
+import { computed, provide, toRef, watch } from 'vue'
 import Comments from './Comments.vue'
 import Header from './Header.vue'
-import { useSmartsheetStoreOrThrow } from '~/composables'
+import { NOCO } from '~/lib'
+import { extractPkFromRow } from '~/utils'
+import { useNuxtApp } from '#app'
+import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables'
 import type { Row } from '~/composables'
 import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
@@ -13,15 +17,42 @@ interface Props {
   modelValue: string | null
   row: Row
   state?: Record<string, any> | null
+  meta: TableType
+  loadRow?: boolean
+
+  useMetaFields ?:boolean
 }
 
 const props = defineProps<Props>()
 const emits = defineEmits(['update:modelValue'])
-const fields = inject(FieldsInj, ref([]))
+const _fields = inject(FieldsInj, ref([]))
 const row = toRef(props, 'row')
 const state = toRef(props, 'state')
+const meta = toRef(props, 'meta')
+
+const fields = computed(() => {
+  if (props.useMetaFields) {
+    return meta.value.columns ?? []
+  }
+  return _fields.value
+})
+
+provide(MetaInj, meta)
+
+const { $api } = useNuxtApp()
+if (props.loadRow) {
+  const { project } = useProject()
+  row.value.row = await $api.dbTableRow.read(
+    NOCO,
+    project.value.id as string,
+    meta.value.title,
+    extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]),
+  )
+  row.value.oldRow = { ...row.value.row }
+  row.value.rowMeta = {}
+}
 
-const { meta } = useSmartsheetStoreOrThrow()
+useProvideSmartsheetStore(ref({}) as any, meta)
 
 provide(IsFormInj, true)
 
@@ -47,7 +78,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
 
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
-    <Header  @cancel="isExpanded = false" />
+    <Header @cancel="isExpanded = false" />
     <a-card class="!bg-gray-100">
       <div class="flex">
         <div class="flex-grow">

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

@@ -71,8 +71,12 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <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">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
-
+          <ItemChip
+            v-for="(cell, i) of cells"
+            :key="i"
+            :item="ch"
+            :value="cell.value"
+            @unlink="unlinkRef(cell.item)" />
           <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
             >more...
           </span>

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

@@ -71,7 +71,13 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <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">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
+          <ItemChip
+            v-for="(cell, i) of cells"
+            :key="i"
+            :item="ch"
+            :value="cell.value"
+            @unlink="unlinkRef(cell.item)"
+          />
 
           <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useLTARStoreOrThrow } from '~/composables'
 import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
@@ -8,18 +9,37 @@ interface Props {
 }
 
 const { value, item } = defineProps<Props>()
+
 const emit = defineEmits(['unlink'])
+
+const { relatedTableMeta } = useLTARStoreOrThrow()
+
 const readonly = inject(ReadonlyInj, false)
 const active = inject(ActiveCellInj, ref(false))
 const isForm = inject(IsFormInj)
+
+const expandedFormDlg = ref(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 }"
+    @click="expandedFormDlg = true"
+  >
     <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')" />
     </div>
+
+    <SmartsheetExpandedForm
+      v-if="expandedFormDlg"
+      v-model="expandedFormDlg"
+      :row="{ row: item }"
+      :meta="relatedTableMeta"
+      load-row
+      use-meta-fields
+    />
   </div>
 </template>
 

packages/nc-gui-v2/composables/useExpandedFormStore.ts

@@ -101,7 +101,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   }
 
   const save = async () => {
-    let data;
+    let data
     try {
       // todo:
       // if (this.presetValues) {
@@ -117,7 +117,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       }, {} as Record<string, any>)
 
       if (row.value.rowMeta.new) {
-         data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
+        data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
 
         /* todo:
            // save hasmany and manytomany relations from local state

packages/nc-gui-v2/composables/useSmartsheetRowStore.ts

@@ -75,12 +75,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
       if (isHm || isMm) {
         const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
         for (const relatedRow of relatedRows) {
-          await linkRecord(
-            id,
-            extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
-            column,
-            colOptions.type,
-          )
+          await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type)
         }
       } else if (isBt && state.value?.[column.title!]) {
         await linkRecord(