fix: Expanded Record Fields (#8250)

* fix: expanded record display field is messed up

* fix: delete modal

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;

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"

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"

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"

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>

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"

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"

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>