From 748fa5136966fe36f05c5ff76e3dea35564fb453 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 17 Sep 2022 12:32:35 +0800
Subject: [PATCH] feat(nc-gui): not render field with no value on kanban card

---
 .../nc-gui/components/smartsheet/Kanban.vue   | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 8b3a00b475..86e0f4f978 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -275,32 +275,30 @@ openNewRecordFormHook?.on(async (stackTitle) => {
                                 :key="`record-${record.row.id}-${col.id}`"
                                 class="flex flex-col rounded-lg w-full"
                               >
-                                <div class="flex flex-row w-full justify-start pt-2">
+                                <div v-if="!isRowEmpty(record, col)" class="flex flex-row w-full justify-start pt-2">
                                   <div class="w-full text-gray-600">
                                     <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
                                     <SmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
                                   </div>
                                 </div>
                                 <div
+                                  v-if="!isRowEmpty(record, col)"
                                   class="flex flex-row w-full items-center justify-start"
                                   :class="{ 'pt-2 pl-2': col.uidt !== UITypes.SingleSelect }"
                                 >
-                                  <div v-if="isRowEmpty(record, col)" class="h-4 bg-gray-200 px-5 ml-3 mt-2 rounded-lg"></div>
-                                  <template v-else>
-                                    <SmartsheetVirtualCell
-                                      v-if="isVirtualCol(col)"
-                                      v-model="record.row[col.title]"
-                                      :column="col"
-                                      :row="record"
-                                    />
-                                    <SmartsheetCell
-                                      v-else
-                                      v-model="record.row[col.title]"
-                                      :column="col"
-                                      :edit-enabled="false"
-                                      :read-only="true"
-                                    />
-                                  </template>
+                                  <SmartsheetVirtualCell
+                                    v-if="isVirtualCol(col)"
+                                    v-model="record.row[col.title]"
+                                    :column="col"
+                                    :row="record"
+                                  />
+                                  <SmartsheetCell
+                                    v-else
+                                    v-model="record.row[col.title]"
+                                    :column="col"
+                                    :edit-enabled="false"
+                                    :read-only="true"
+                                  />
                                 </div>
                               </div>
                             </a-card>