From 4a099b65ba16208cad772e1388632061d83fde69 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 13:17:59 +0530
Subject: [PATCH] feat(gui-v2): lookup cell

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/VirtualCell.vue     |  5 +-
 .../components/virtual-cell/BelongsTo.vue     |  4 +-
 .../components/virtual-cell/Formula.vue       |  4 +-
 .../components/virtual-cell/HasMany.vue       |  4 +-
 .../components/virtual-cell/Lookup.vue        | 71 ++++++++++++-------
 .../components/virtual-cell/ManyToMany.vue    |  4 +-
 .../components/virtual-cell/Rollup.vue        |  4 +-
 7 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 8cb234b3c4..24e8967347 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/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>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index d6ed4a43a7..7ccd995023 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/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
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index ae5e223e24..5dcad187ac 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 } 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()
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 874f66fa38..19c291bea1 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/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)
diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index a3a0ccc59d..59ac0dd3cb 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/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}}
-    <SmartsheetVirtualCell
-      :edit-enabled="false" v-if="isVirtualCol(lookupColumn)" v-model="value"       :column="lookupColumn"
-    />
-
-    <SmartsheetCell
-      v-else
-      v-model="value"
-      :column="lookupColumn"
-      :edit-enabled="false"
-    />
+  <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
+            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>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index e7ea737029..909fb880bd 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/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
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
index 4ffe9ae5b9..47be865b72 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
+++ b/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>