Merge pull request #7361 from nocodb/nc-fix/ui-bug-fixes

UI bug fixes ( Sync EE to OSS )

packages/nc-gui/components/cell/DatePicker.vue

@@ -243,7 +243,7 @@ const clickHandler = () => {
     :picker="picker"
     :tabindex="0"
     :bordered="false"
-    class="!w-full !py-1 !border-none"
+    class="!w-full !py-1 !border-none !text-current"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :format="dateFormat"
     :placeholder="placeholder"
@@ -260,7 +260,7 @@ const clickHandler = () => {
 </template>
 
 <style scoped>
-:deep(.ant-picker-input > input[disabled]) {
+:deep(.ant-picker-input > input) {
   @apply !text-current;
 }
 </style>

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -296,7 +296,7 @@ const isColDisabled = computed(() => {
     :disabled="isColDisabled"
     :show-time="true"
     :bordered="false"
-    class="!w-full !py-1 !border-none"
+    class="!w-full !py-1 !border-none !text-current"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :format="dateTimeFormat"
     :placeholder="placeholder"
@@ -313,7 +313,7 @@ const isColDisabled = computed(() => {
 </template>
 
 <style scoped>
-:deep(.ant-picker-input > input[disabled]) {
+:deep(.ant-picker-input > input) {
   @apply !text-current;
 }
 </style>

packages/nc-gui/components/cell/TimePicker.vue

@@ -133,7 +133,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :bordered="false"
     use12-hours
     format="HH:mm"
-    class="!w-full !py-1 !border-none"
+    class="!w-full !py-1 !border-none !text-current"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
@@ -148,7 +148,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 </template>
 
 <style scoped>
-:deep(.ant-picker-input > input[disabled]) {
+:deep(.ant-picker-input > input) {
   @apply !text-current;
 }
 </style>

packages/nc-gui/components/cell/YearPicker.vue

@@ -119,7 +119,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :tabindex="0"
     picker="year"
     :bordered="false"
-    class="!w-full !py-1 !border-none"
+    class="!w-full !py-1 !border-none !text-current"
     :class="{ 'nc-null': modelValue === null && showNull, '!px-2': isExpandedFormOpen, '!px-0': !isExpandedFormOpen }"
     :placeholder="placeholder"
     :allow-clear="(!readOnly && !localState && !isPk) || isEditColumn"
@@ -136,7 +136,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
 </template>
 
 <style scoped>
-:deep(.ant-picker-input > input[disabled]) {
+:deep(.ant-picker-input > input) {
   @apply !text-current;
 }
 </style>

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -295,7 +295,7 @@ watch(
                 <LazySmartsheetVirtualCell
                   v-if="isVirtualCol(displayField)"
                   v-model="record.row[displayField.title]"
-                  class="!text-gray-600"
+                  class="!text-brand-500"
                   :column="displayField"
                   :row="record"
                 />
@@ -303,7 +303,7 @@ watch(
                 <LazySmartsheetCell
                   v-else
                   v-model="record.row[displayField.title]"
-                  class="!text-gray-600"
+                  class="!text-brand-500"
                   :column="displayField"
                   :edit-enabled="false"
                   :read-only="true"

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -593,7 +593,7 @@ const getRowId = (row: RowType) => {
                                   <LazySmartsheetVirtualCell
                                     v-if="isVirtualCol(displayField)"
                                     v-model="record.row[displayField.title]"
-                                    class="!text-gray-600"
+                                    class="!text-brand-500"
                                     :column="displayField"
                                     :row="record"
                                   />
@@ -601,7 +601,7 @@ const getRowId = (row: RowType) => {
                                   <LazySmartsheetCell
                                     v-else
                                     v-model="record.row[displayField.title]"
-                                    class="!text-gray-600"
+                                    class="!text-brand-500"
                                     :column="displayField"
                                     :edit-enabled="false"
                                     :read-only="true"

packages/nc-gui/components/smartsheet/VirtualCell.vue

@@ -23,6 +23,7 @@ import {
   isRollup,
   provide,
   toRef,
+  isPrimary,
 } from '#imports'
 import type { Row } from '#imports'
 
@@ -99,6 +100,7 @@ onUnmounted(() => {
     class="nc-virtual-cell w-full flex items-center"
     :class="{
       'text-right justify-end': isGrid && !isForm && isRollup(column) && !isExpandedForm,
+      'text-brand-500': isPrimary(column) && !isForm,
     }"
     @keydown.enter.exact="onNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="onNavigate(NavigateDir.PREV, $event)"

packages/nc-gui/components/smartsheet/grid/GroupBy.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-import dayjs from 'dayjs'
+import { UITypes, dateFormats, parseStringDateTime, timeFormats } from 'nocodb-sdk'
-import { UITypes, dateFormats, timeFormats } from 'nocodb-sdk'
 import Table from './Table.vue'
 import GroupBy from './GroupBy.vue'
 import GroupByTable from './GroupByTable.vue'
@@ -154,18 +153,20 @@ const parseKey = (group: Group) => {
   }
 
   // show the groupBy dateTime field title format as like cell format
-  if (key && group.column?.uidt === UITypes.DateTime && dayjs(key).isValid()) {
+  if (key && group.column?.uidt === UITypes.DateTime) {
-    const dateFormat = parseProp(group.column?.meta)?.date_format ?? dateFormats[0]
+    return [
-    const timeFormat = parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
+      parseStringDateTime(
-
+        key,
-    const dateTimeFormat = `${dateFormat} ${timeFormat}`
+        `${parseProp(group.column?.meta)?.date_format ?? dateFormats[0]} ${
-
+          parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
-    return [dayjs(key).utc().local().format(dateTimeFormat)]
+        }`,
+      ),
+    ]
   }
 
   // show the groupBy time field title format as like cell format
-  if (key && group.column?.uidt === UITypes.Time && dayjs(key).isValid()) {
+  if (key && group.column?.uidt === UITypes.Time) {
-    return [dayjs(key).format(timeFormats[0])]
+    return [parseStringDateTime(key, timeFormats[0], false)]
   }
 
   if (key && group.column?.uidt === UITypes.User) {

packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
+import { ReadonlyInj, IsGroupByLabelInj } from '#imports'
 
 defineProps<{
   column: ColumnType
   modelValue: any
 }>()
 
-provide(ReadonlyInj, true)
+provide(ReadonlyInj, ref(true))
+provide(IsGroupByLabelInj, ref(true))
 </script>
 
 <template>
   <div class="pointer-events-none">
     <LazySmartsheetRow :row="{ row: { [column.title]: modelValue }, rowMeta: {} }">
-      <LazySmartsheetVirtualCell v-if="isVirtualCol(column)" :model-value="modelValue" class="!text-gray-600" :column="column" />
+      <LazySmartsheetVirtualCell
+        v-if="isVirtualCol(column)"
+        :model-value="modelValue"
+        class="!text-gray-600"
+        :column="column"
+        :read-only="true"
+      />
 
       <LazySmartsheetCell
         v-else

packages/nc-gui/components/virtual-cell/Lookup.vue

@@ -25,6 +25,8 @@ const meta = inject(MetaInj, ref())
 
 const cellValue = inject(CellValueInj, ref())
 
+const isGroupByLabel = inject(IsGroupByLabelInj, ref(false))
+
 // Change the row height of the child cell under lookup
 // Other wise things like text will can take multi line tag
 const providedHeightRef = ref(1) as any
@@ -100,7 +102,7 @@ const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activ
   <div
     class="h-full w-full nc-lookup-cell"
     tabindex="-1"
-    :style="{ height: rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
+    :style="{ height: isGroupByLabel ? undefined : rowHeight && rowHeight !== 1 ? `${rowHeight * 2}rem` : `2.85rem` }"
     @dblclick="activateShowEditNonEditableFieldWarning"
   >
     <div

packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@@ -49,6 +49,7 @@ const {
   loadChildrenList,
   childrenListPagination,
   relatedTableDisplayValueProp,
+  displayValueTypeAndFormatProp,
   unlink,
   isChildrenListLoading,
   isChildrenListLinked,
@@ -57,7 +58,7 @@ const {
   row,
   link,
   meta,
-  displayValueProp,
+  headerDisplayValue
 } = useLTARStoreOrThrow()
 
 const { isNew, state, removeLTARRef, addLTARRef } = useSmartsheetRowStoreOrThrow()
@@ -195,7 +196,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
       :table-title="meta?.title"
       :header="$t('activity.linkedRecords')"
       :related-table-title="relatedTableMeta?.title"
-      :display-value="row.row[displayValueProp]"
+      :display-value="headerDisplayValue"
     />
     <div v-if="!isForm" class="flex mt-2 mb-2 items-center gap-2">
       <div
@@ -260,6 +261,7 @@ const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
               data-testid="nc-child-list-item"
               :attachment="attachmentCol"
               :related-table-display-value-prop="relatedTableDisplayValueProp"
+              :display-value-type-and-format-prop="displayValueTypeAndFormatProp"
               :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
               :is-loading="isChildrenListLoading[Number.parseInt(id)]"
               @expand="onClick(refRow)"

packages/nc-gui/components/virtual-cell/components/ListItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { isVirtualCol } from 'nocodb-sdk'
+import { UITypes, isVirtualCol, parseStringDateTime } from 'nocodb-sdk'
 import {
   type ComputedRef,
   IsExpandedFormOpenInj,
@@ -22,6 +22,7 @@ const props = defineProps<{
   fields: any[]
   attachment: any
   relatedTableDisplayValueProp: string
+  displayValueTypeAndFormatProp: { type: string; format: string }
   isLoading: boolean
   isLinked: boolean
 }>()
@@ -68,6 +69,21 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
     return []
   }
 })
+
+const displayValue = computed(() => {
+  if (
+    row.value[props.relatedTableDisplayValueProp] &&
+    props.displayValueTypeAndFormatProp.type &&
+    props.displayValueTypeAndFormatProp.format
+  ) {
+    return parseStringDateTime(
+      row.value[props.relatedTableDisplayValueProp],
+      props.displayValueTypeAndFormatProp.format,
+      !(props.displayValueTypeAndFormatProp.format === UITypes.Time),
+    )
+  }
+  return row.value[props.relatedTableDisplayValueProp]
+})
 </script>
 
 <template>
@@ -103,8 +119,8 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
 
       <div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center overflow-hidden">
         <div class="flex justify-between xs:gap-x-2">
-          <span class="font-semibold text-gray-800 nc-display-value xs:(truncate)">
+          <span class="font-semibold text-brand-500 nc-display-value xs:(truncate)">
-            {{ row[relatedTableDisplayValueProp] }}
+            {{ displayValue }}
           </span>
           <div
             v-if="isLinked && !isLoading"

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -37,18 +37,19 @@ const {
   childrenExcludedList,
   isChildrenExcludedListLinked,
   isChildrenExcludedListLoading,
-  displayValueProp,
   isChildrenExcludedLoading,
   childrenListCount,
   loadChildrenExcludedList,
   loadChildrenList,
   childrenExcludedListPagination,
   relatedTableDisplayValueProp,
+  displayValueTypeAndFormatProp,
   link,
   relatedTableMeta,
   meta,
   unlink,
   row,
+  headerDisplayValue
 } = useLTARStoreOrThrow()
 
 const { addLTARRef, isNew, removeLTARRef, state: rowState } = useSmartsheetRowStoreOrThrow()
@@ -235,7 +236,7 @@ const onCreatedRecord = (record: any) => {
       :relation="relation"
       :table-title="meta?.title"
       :related-table-title="relatedTableMeta?.title"
-      :display-value="row.row[displayValueProp]"
+      :display-value="headerDisplayValue"
       :header="$t('activity.addNewLink')"
     />
     <div class="flex mt-2 mb-2 items-center gap-2">
@@ -315,6 +316,7 @@ const onCreatedRecord = (record: any) => {
             :fields="fields"
             :attachment="attachmentCol"
             :related-table-display-value-prop="relatedTableDisplayValueProp"
+            :display-value-type-and-format-prop="displayValueTypeAndFormatProp"
             :is-loading="isChildrenExcludedListLoading[Number.parseInt(id)]"
             :is-linked="isChildrenExcludedListLinked[Number.parseInt(id)]"
             @expand="

packages/nc-gui/composables/useLTARStore.ts

@@ -1,4 +1,14 @@
-import type { ColumnType, LinkToAnotherRecordType, PaginatedType, RequestParams, TableType } from 'nocodb-sdk'
+import {
+  UITypes,
+  type ColumnType,
+  type LinkToAnotherRecordType,
+  type PaginatedType,
+  type RequestParams,
+  type TableType,
+  dateFormats,
+  timeFormats,
+  parseStringDateTime,
+} from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
   IsPublicInj,
@@ -20,6 +30,7 @@ import {
   useRouter,
   useSharedView,
   watch,
+  parseProp,
 } from '#imports'
 import type { Row } from '#imports'
 
@@ -124,10 +135,52 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     const relatedTablePrimaryKeyProps = computed(() => {
       return relatedTableMeta.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
     })
+
     const displayValueProp = computed(() => {
       return (meta.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
+    const displayValueTypeAndFormatProp = computed(() => {
+      let displayValueTypeAndFormat = {
+        type: '',
+        format: '',
+      }
+      let currentColumn = relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0]
+
+      if (currentColumn) {
+        if (currentColumn?.uidt === UITypes.DateTime) {
+          displayValueTypeAndFormat = {
+            type: currentColumn?.uidt,
+            format: `${parseProp(currentColumn?.meta)?.date_format ?? dateFormats[0]} ${
+              parseProp(currentColumn?.meta)?.time_format ?? timeFormats[0]
+            }`,
+          }
+        }
+        if (currentColumn?.uidt === UITypes.Time) {
+          displayValueTypeAndFormat = {
+            type: currentColumn?.uidt,
+            format: `${timeFormats[0]}`,
+          }
+        }
+      }
+      return displayValueTypeAndFormat
+    })
+
+    const headerDisplayValue = computed(() => {
+      if (
+        row.value.row[displayValueProp.value] &&
+        displayValueTypeAndFormatProp.value.type &&
+        displayValueTypeAndFormatProp.value.format
+      ) {
+        return parseStringDateTime(
+          row.value.row[displayValueProp.value],
+          displayValueTypeAndFormatProp.value.format,
+          !(displayValueTypeAndFormatProp.value.format === UITypes.Time),
+        )
+      }
+      return row.value.row[displayValueProp.value]
+    })
+
     const loadChildrenExcludedList = async (activeState?: any) => {
       if (activeState) newRowState.state = activeState
       try {
@@ -470,6 +523,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       relatedTableMeta,
       loadRelatedTableMeta,
       relatedTableDisplayValueProp,
+      displayValueTypeAndFormatProp,
       childrenExcludedList,
       childrenList,
       childrenListCount,
@@ -491,6 +545,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       isChildrenExcludedLoading,
       deleteRelatedRow,
       getRelatedTableRowId,
+      headerDisplayValue
     }
   },
   'ltar-store',

packages/nc-gui/context/index.ts

@@ -13,6 +13,7 @@ export const IsFormInj: InjectionKey<Ref<boolean>> = Symbol('is-form-injection')
 export const IsSurveyFormInj: InjectionKey<Ref<boolean>> = Symbol('is-survey-form-injection')
 export const IsGridInj: InjectionKey<Ref<boolean>> = Symbol('is-grid-injection')
 export const IsGroupByInj: InjectionKey<Ref<boolean>> = Symbol('is-group-by-injection')
+export const IsGroupByLabelInj: InjectionKey<Ref<boolean>> = Symbol('is-group-by-label-injection')
 export const IsGalleryInj: InjectionKey<Ref<boolean>> = Symbol('is-gallery-injection')
 export const IsKanbanInj: InjectionKey<Ref<boolean>> = Symbol('is-kanban-injection')
 export const IsLockedInj: InjectionKey<Ref<boolean>> = Symbol('is-locked-injection')

packages/nocodb-sdk/src/lib/dateTimeHelper.ts

@@ -79,14 +79,17 @@ export function parseStringDate(v: string, dateFormat: string) {
 
 export function parseStringDateTime(
   v: string,
-  dateTimeFormat: string = `${dateFormats[0]} ${timeFormats[0]}`
+  dateTimeFormat: string = `${dateFormats[0]} ${timeFormats[0]}`,
+  toLocal: boolean = true
 ) {
-  const dayjsObj = dayjs(v).local();
+  const dayjsObj = toLocal ? dayjs(v).local() : dayjs(v);
 
   if (dayjsObj.isValid()) {
     v = dayjsObj.format(dateTimeFormat);
   } else {
-    v = dayjs(v, dateTimeFormat).local().format(dateTimeFormat);
+    v = toLocal
+      ? dayjs(v, dateTimeFormat).local().format(dateTimeFormat)
+      : dayjs(v, dateTimeFormat).format(dateTimeFormat);
   }
 
   return v;