feat(gui-v2): lookup cell

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

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, useVirtualCell } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, ValueInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
@@ -14,7 +14,7 @@ const { column, modelValue: value } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'navigate'])
 
 provide(ColumnInj, column)
-provide('value', value)
+provide(ValueInj, value)
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
 </script>
@@ -31,6 +31,7 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
     <VirtualCellRollup v-else-if="isRollup" />
     <VirtualCellFormula v-else-if="isFormula" />
     <VirtualCellCount v-else-if="isCount" />
+    <VirtualCellLookup v-else-if="isLookup" />
   </div>
 </template>
 

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/context'
+import { ColumnInj, ValueInj } from '~/context'
 import { useBelongsTo } from '#imports'
 
 const column = inject(ColumnInj)
-const value = inject('value')
+const value = inject(ValueInj)
 const active = false
 const localState = null
 

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

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { computed, useProject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ColumnInj, ValueInj } from '~/context'
 import { handleTZ } from '~/utils/dateTimeUtils'
 import { replaceUrlsWithLink } from '~/utils/urlUtils'
 
 const column = inject(ColumnInj)
 
-const value = inject('value')
+const value = inject(ValueInj)
 
 const { isPg } = useProject()
 

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/context'
+import { ColumnInj, ValueInj } from '~/context'
 import { useHasMany } from '#imports'
 
 const column = inject(ColumnInj)
-const value = inject('value')
+const value = inject(ValueInj)
 const active = false
 
 const { childMeta, loadChildMeta, primaryValueProp } = useHasMany(column as ColumnType)

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

@@ -1,40 +1,59 @@
 <script lang="ts" setup>
-import { ColumnType, LinkToAnotherRecordType, LookupType, isVirtualCol } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
+import { RelationTypes, isVirtualCol, UITypes } from 'nocodb-sdk'
 import { useColumn } from '~/composables'
-import { ColumnInj, EditModeInj, MetaInj, ReadonlyInj, ValueInj } from '~/context'
+import { ColumnInj, MetaInj, ReadonlyInj, ValueInj } from '~/context'
 
+const { metas, getMeta } = useMetas()
 
-const {metas, getMeta} = useMetas();
+provide(ReadonlyInj, true)
 
-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 column = inject(ColumnInj) as ColumnType & { colOptions: LookupType };
-const meta = inject(MetaInj);
-const value = inject(ValueInj);
+const relationColumn = meta?.value.columns?.find((c) => c.id === column.colOptions.fk_relation_column_id) as ColumnType & {
+  colOptions: LinkToAnotherRecordType
+}
+await getMeta(relationColumn.colOptions.fk_related_model_id as string)
+const lookupTableMeta = metas?.value[relationColumn.colOptions.fk_related_model_id as string]
+const lookupColumn = lookupTableMeta?.columns?.find((c) => c.id === column.colOptions.fk_lookup_column_id) as ColumnType
 
-const relationColumn =  meta?.value.columns?.find(c => c.id === column.colOptions.fk_relation_column_id) as ColumnType & { colOptions: LinkToAnotherRecordType };
-await getMeta(relationColumn.colOptions.fk_related_model_id as string);
-const lookupTableMeta  = metas?.value[relationColumn.colOptions.fk_related_model_id as string];
-const lookupColumn  = lookupTableMeta?.columns?.find(c => c.id === column.colOptions.fk_lookup_column_id) as ColumnType;
-
-provide(MetaInj, ref(lookupTableMeta));
+provide(MetaInj, ref(lookupTableMeta))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
-
 </script>
 
 <template>
-  <div class="w-full h-full">
-    {{lookupColumnMetaProps}}
+  <div class="w-full h-full flex gap-1">
+    <template v-if="lookupColumn">
+      <!-- Render virtual cell -->
+      <div v-if="isVirtualCol(lookupColumn)">
+        <template
+          v-if="lookupColumn.uidt === UITypes.LinkToAnotherRecord && lookupColumn.colOptions.type === RelationTypes.BELONGS_TO"
+        >
           <SmartsheetVirtualCell
-      :edit-enabled="false" v-if="isVirtualCol(lookupColumn)" v-model="value"       :column="lookupColumn"
-    />
-
-    <SmartsheetCell
-      v-else
-      v-model="value"
-      :column="lookupColumn"
+            v-for="(v, i) of arrValue"
+            :key="i"
             :edit-enabled="false"
+            :model-value="v"
+            :column="lookupColumn"
           />
+        </template>
+
+        <SmartsheetVirtualCell v-else :edit-enabled="false" :model-value="arrValue" :column="lookupColumn" />
+      </div>
+
+      <!-- Render normal cell -->
+      <template v-else>
+        <!-- For attachment cell avoid adding chip style -->
+        <div v-for="(v, i) in arrValue" :key="i"
+             :class="{'bg-gray-100 px-2 rounded-full':!lookupColumnMetaProps.isAttachment}">
+          <SmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" />
+        </div>
+      </template>
+
+    </template>
   </div>
 </template>

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/context'
+import { ColumnInj, ValueInj } from '~/context'
 import { useManyToMany } from '#imports'
 
 const column = inject(ColumnInj)
-const value = inject('value')
+const value = inject(ValueInj)
 const active = false
 const isLocked = false
 

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const value = inject('value')
+import { ValueInj } from '~/context'
+
+const value = inject(ValueInj)
 </script>
 
 <template>