Browse Source

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

UI bug fixes ( Sync EE to OSS )
pull/7370/head
Raju Udava 8 months ago committed by GitHub
parent
commit
9b53ea7d58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      packages/nc-gui/components/cell/DatePicker.vue
  2. 4
      packages/nc-gui/components/cell/DateTimePicker.vue
  3. 4
      packages/nc-gui/components/cell/TimePicker.vue
  4. 4
      packages/nc-gui/components/cell/YearPicker.vue
  5. 4
      packages/nc-gui/components/smartsheet/Gallery.vue
  6. 4
      packages/nc-gui/components/smartsheet/Kanban.vue
  7. 2
      packages/nc-gui/components/smartsheet/VirtualCell.vue
  8. 23
      packages/nc-gui/components/smartsheet/grid/GroupBy.vue
  9. 12
      packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
  10. 4
      packages/nc-gui/components/virtual-cell/Lookup.vue
  11. 6
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  12. 22
      packages/nc-gui/components/virtual-cell/components/ListItem.vue
  13. 6
      packages/nc-gui/components/virtual-cell/components/ListItems.vue
  14. 57
      packages/nc-gui/composables/useLTARStore.ts
  15. 1
      packages/nc-gui/context/index.ts
  16. 9
      packages/nocodb-sdk/src/lib/dateTimeHelper.ts

4
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>

4
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>

4
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>

4
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>

4
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"

4
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"

2
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)"

23
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, timeFormats } from 'nocodb-sdk'
import { UITypes, dateFormats, parseStringDateTime, 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()) {
const dateFormat = parseProp(group.column?.meta)?.date_format ?? dateFormats[0]
const timeFormat = parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
const dateTimeFormat = `${dateFormat} ${timeFormat}`
return [dayjs(key).utc().local().format(dateTimeFormat)]
if (key && group.column?.uidt === UITypes.DateTime) {
return [
parseStringDateTime(
key,
`${parseProp(group.column?.meta)?.date_format ?? dateFormats[0]} ${
parseProp(group.column?.meta)?.time_format ?? timeFormats[0]
}`,
),
]
}
// show the groupBy time field title format as like cell format
if (key && group.column?.uidt === UITypes.Time && dayjs(key).isValid()) {
return [dayjs(key).format(timeFormats[0])]
if (key && group.column?.uidt === UITypes.Time) {
return [parseStringDateTime(key, timeFormats[0], false)]
}
if (key && group.column?.uidt === UITypes.User) {

12
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

4
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

6
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)"

22
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)">
{{ row[relatedTableDisplayValueProp] }}
<span class="font-semibold text-brand-500 nc-display-value xs:(truncate)">
{{ displayValue }}
</span>
<div
v-if="isLinked && !isLoading"

6
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="

57
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',

1
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')

9
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;

Loading…
Cancel
Save