From c39b30d311a1d6a0c8ef74221d2321800403524b Mon Sep 17 00:00:00 2001
From: Anbarasu <anbarasun123@gmail.com>
Date: Thu, 11 Apr 2024 22:12:32 +0530
Subject: [PATCH] fix: Expanded Record Fields (#8250)

* fix: expanded record display field is messed up

* fix: delete modal
---
 .../{calendar/Cell.vue => PlainCell.vue}           |  6 +++---
 .../smartsheet/calendar/DayView/DateField.vue      |  3 ++-
 .../smartsheet/calendar/DayView/DateTimeField.vue  |  3 ++-
 .../components/smartsheet/calendar/MonthView.vue   |  3 ++-
 .../components/smartsheet/calendar/SideMenu.vue    |  2 +-
 .../smartsheet/calendar/WeekView/DateField.vue     |  3 ++-
 .../smartsheet/calendar/WeekView/DateTimeField.vue |  3 ++-
 .../components/smartsheet/expanded-form/index.vue  | 14 ++++++++------
 .../nc-gui/composables/useSharedFormViewStore.ts   |  2 +-
 9 files changed, 23 insertions(+), 16 deletions(-)
 rename packages/nc-gui/components/smartsheet/{calendar/Cell.vue => PlainCell.vue} (99%)

diff --git a/packages/nc-gui/components/smartsheet/calendar/Cell.vue b/packages/nc-gui/components/smartsheet/PlainCell.vue
similarity index 99%
rename from packages/nc-gui/components/smartsheet/calendar/Cell.vue
rename to packages/nc-gui/components/smartsheet/PlainCell.vue
index 797124951b..87cc7be7ce 100644
--- a/packages/nc-gui/components/smartsheet/calendar/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/PlainCell.vue
@@ -356,20 +356,20 @@ const parseValue = (value: any, col: ColumnType): string => {
 
 <template>
   <span
-    class="calendar-cell text-xs before:px-1"
+    class="plain-cell before:px-1"
     :class="{
       'font-bold': bold,
       'italic': italic,
       'underline': underline,
     }"
-    data-testid="nc-calendar-cell"
+    data-testid="nc-plain-cell"
   >
     {{ parseValue(modelValue, column) }}
   </span>
 </template>
 
 <style lang="scss" scoped>
-.calendar-cell {
+.plain-cell {
   &::before {
     content: '•';
     padding: 0 4px;
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index 6225aff791..3dd1691ea0 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -221,9 +221,10 @@ const newRecord = () => {
           @click="emit('expandRecord', record)"
         >
           <template v-for="(field, id) in fields" :key="id">
-            <LazySmartsheetCalendarCell
+            <LazySmartsheetPlainCell
               v-if="!isRowEmpty(record, field!)"
               v-model="record.row[field!.title!]"
+              class="text-xs"
               :bold="getFieldStyle(field).bold"
               :column="field"
               :italic="getFieldStyle(field).italic"
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index ef01c0a05e..ffc2ba376c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -941,9 +941,10 @@ watch(
                 @resize-start="onResizeStart"
               >
                 <template v-for="(field, id) in fields" :key="id">
-                  <LazySmartsheetCalendarCell
+                  <LazySmartsheetPlainCell
                     v-if="!isRowEmpty(record, field!)"
                     v-model="record.row[field!.title!]"
+                    class="text-xs"
                     :bold="getFieldStyle(field).bold"
                     :column="field"
                     :italic="getFieldStyle(field).italic"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 0a6efc7f40..13034d6684 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -796,9 +796,10 @@ const addRecord = (date: dayjs.Dayjs) => {
               @dblclick.stop="emit('expandRecord', record)"
             >
               <template v-for="(field, id) in fields" :key="id">
-                <LazySmartsheetCalendarCell
+                <LazySmartsheetPlainCell
                   v-if="!isRowEmpty(record, field!)"
                   v-model="record.row[field!.title!]"
+                  class="text-xs"
                   :bold="getFieldStyle(field).bold"
                   :column="field"
                   :italic="getFieldStyle(field).italic"
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 8cd1a47a5f..e32506d803 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -433,7 +433,7 @@ onUnmounted(() => {
                 @dragover.prevent
               >
                 <template v-if="!isRowEmpty(record, displayField)">
-                  <LazySmartsheetCalendarCell v-model="record.row[displayField!.title!]" :column="displayField" />
+                  <LazySmartsheetPlainCell v-model="record.row[displayField!.title!]" :column="displayField" />
                 </template>
               </LazySmartsheetCalendarSideRecordCard>
             </LazySmartsheetRow>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 200bd4d9c6..b11d9c6938 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -588,9 +588,10 @@ const addRecord = (date: dayjs.Dayjs) => {
               @resize-start="onResizeStart"
             >
               <template v-for="(field, index) in fields" :key="index">
-                <LazySmartsheetCalendarCell
+                <LazySmartsheetPlainCell
                   v-if="!isRowEmpty(record, field!)"
                   v-model="record.row[field!.title!]"
+                  class="text-xs"
                   :bold="getFieldStyle(field).bold"
                   :column="field"
                   :italic="getFieldStyle(field).italic"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index ec90e8b33f..134b168612 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -822,9 +822,10 @@ watch(
                 @resize-start="onResizeStart"
               >
                 <template v-for="(field, id) in fields" :key="id">
-                  <LazySmartsheetCalendarCell
+                  <LazySmartsheetPlainCell
                     v-if="!isRowEmpty(record, field!)"
                     v-model="record.row[field!.title!]"
+                    class="text-xs"
                     :bold="getFieldStyle(field).bold"
                     :column="field"
                     :italic="getFieldStyle(field).italic"
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index fc407af21d..5cb2586efc 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -19,6 +19,7 @@ import {
   IsPublicInj,
   MetaInj,
   ReloadRowDataHookInj,
+  computed,
   computedInject,
   createEventHook,
   iconMap,
@@ -117,6 +118,8 @@ const fields = computedInject(FieldsInj, (_fields) => {
   return _fields?.value ?? []
 })
 
+const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null)
+
 const hiddenFields = computed(() => {
   // todo: figure out when meta.value is undefined
   return (meta.value?.columns ?? []).filter((col) => !fields.value?.includes(col)).filter((col) => !isSystemColumn(col))
@@ -493,8 +496,7 @@ watch([expandedFormScrollWrapper, isLoading], () => {
   const expandedFormScrollWrapperEl = expandedFormScrollWrapper.value
 
   if (expandedFormScrollWrapperEl && !isLoading.value) {
-    const height = expandedFormScrollWrapperEl.scrollHeight
-    expandedFormScrollWrapperEl.scrollTop = height
+    expandedFormScrollWrapperEl.scrollTop = expandedFormScrollWrapperEl.scrollHeight
 
     setTimeout(() => {
       expandedFormScrollWrapperEl.scrollTop = 0
@@ -555,8 +557,8 @@ export default {
               {{ props.newRecordHeader ?? $t('activity.newRecord') }}
             </div>
             <div v-else-if="displayValue && !row.rowMeta?.new" class="flex items-center font-bold text-gray-800 text-xl w-64">
-              <span class="truncate">
-                {{ displayValue }}
+              <span class="truncate !text-xl">
+                <LazySmartsheetPlainCell v-model="displayValue" :column="displayField" />
               </span>
             </div>
           </div>
@@ -891,8 +893,8 @@ export default {
     <template #entity-preview>
       <span>
         <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">
-          <div class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75 break-keep whitespace-nowrap">
-            {{ displayValue }}
+          <div class="text-ellipsis overflow-hidden select-none w-full pl-1.75 break-keep whitespace-nowrap">
+            <LazySmartsheetPlainCell v-model="displayValue" :column="displayField" />
           </div>
         </div>
       </span>
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 9910eb124b..93a70c2abd 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -148,7 +148,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
             !/^\w+\(\)|CURRENT_TIMESTAMP$/.test(c.cdf)
           ) {
             const defaultValue = typeof c.cdf === 'string' ? c.cdf.replace(/^'|'$/g, '') : c.cdf
-            
+
             formState.value[c.title] = defaultValue
             preFilledDefaultValueformState.value[c.title] = defaultValue
           }