From 24d838ee887c51dfa444288a95e80ccfc44776fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?=
 <wingkwong.code@gmail.com>
Date: Wed, 29 Nov 2023 18:51:07 +0800
Subject: [PATCH] feat(nc-gui): rollup display

---
 .../nc-gui/components/virtual-cell/Rollup.vue | 40 ++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index fee8f73b2a..5b76ee2d20 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -1,18 +1,48 @@
 <script setup lang="ts">
-import { CellValueInj, inject, useShowNotEditableWarning } from '#imports'
+import type { ColumnType, LinkToAnotherRecordType, RollupType } from 'nocodb-sdk'
+import { CellValueInj, ColumnInj, MetaInj, computed, inject, isRollup, ref, useMetas, useShowNotEditableWarning } from '#imports'
+
+const { metas } = useMetas()
 
 const value = inject(CellValueInj)
 
+const column = inject(ColumnInj)!
+
+const meta = inject(MetaInj, ref())
+
 const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activateShowEditNonEditableFieldWarning } =
   useShowNotEditableWarning()
+
+const relationColumnOptions = computed<LinkToAnotherRecordType | null>(() => {
+  if ((column?.value?.colOptions as RollupType)?.fk_relation_column_id) {
+    return meta?.value?.columns?.find((c) => c.id === (column?.value?.colOptions as RollupType)?.fk_relation_column_id)
+      ?.colOptions as LinkToAnotherRecordType
+  }
+  return null
+})
+
+const relatedTableMeta = computed(
+  () =>
+    relationColumnOptions.value?.fk_related_model_id && metas.value?.[relationColumnOptions.value?.fk_related_model_id as string],
+)
+
+const colOptions = computed(() => column.value?.colOptions)
+
+const childColumn = computed(() => {
+  if (relatedTableMeta.value?.columns) {
+    if (isRollup(column.value)) {
+      return relatedTableMeta.value?.columns.find(
+        (c: ColumnType) => c.id === (colOptions.value as RollupType).fk_rollup_column_id,
+      )
+    }
+  }
+  return ''
+})
 </script>
 
 <template>
   <div @dblclick="activateShowEditNonEditableFieldWarning">
-    <span class="text-center pl-3">
-      {{ value }}
-    </span>
-
+    <LazySmartsheetCell v-model="value" :column="childColumn" :edit-enabled="false" :read-only="true" />
     <div>
       <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
         {{ $t('msg.info.computedFieldEditWarning') }}