From 112f42d8055c5e79ec6c20309c43e430ad86b750 Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Thu, 4 Jan 2024 11:07:53 +0000 Subject: [PATCH] fix: add links modal displayValue in header is not like cell format --- .../components/ListChildItems.vue | 8 ++-- .../virtual-cell/components/ListItem.vue | 10 ++--- .../virtual-cell/components/ListItems.vue | 8 ++-- packages/nc-gui/composables/useLTARStore.ts | 41 +++++++++++++------ 4 files changed, 42 insertions(+), 25 deletions(-) diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue index 4c40b7a9d5..3a35ef42b0 100644 --- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue +++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue @@ -49,7 +49,7 @@ const { loadChildrenList, childrenListPagination, relatedTableDisplayValueProp, - relatedTableDisplayValueTypeAndFormatProp, + displayValueTypeAndFormatProp, unlink, isChildrenListLoading, isChildrenListLinked, @@ -58,7 +58,7 @@ const { row, link, meta, - displayValueProp, + headerDisplayValue } = useLTARStoreOrThrow() const { isNew, state, removeLTARRef, addLTARRef } = useSmartsheetRowStoreOrThrow() @@ -196,7 +196,7 @@ const linkOrUnLink = (rowRef: Record, id: string) => { :table-title="meta?.title" :header="$t('activity.linkedRecords')" :related-table-title="relatedTableMeta?.title" - :display-value="row.row[displayValueProp]" + :display-value="headerDisplayValue" />
, id: string) => { data-testid="nc-child-list-item" :attachment="attachmentCol" :related-table-display-value-prop="relatedTableDisplayValueProp" - :related-table-display-value-type-and-format-prop="relatedTableDisplayValueTypeAndFormatProp" + :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)" diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue index cb62e6a9cb..69f9d7364e 100644 --- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue +++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue @@ -22,7 +22,7 @@ const props = defineProps<{ fields: any[] attachment: any relatedTableDisplayValueProp: string - relatedTableDisplayValueTypeAndFormatProp: { type: string; format: string } + displayValueTypeAndFormatProp: { type: string; format: string } isLoading: boolean isLinked: boolean }>() @@ -73,13 +73,13 @@ const attachments: ComputedRef = computed(() => { const displayValue = computed(() => { if ( row.value[props.relatedTableDisplayValueProp] && - props.relatedTableDisplayValueTypeAndFormatProp.type && - props.relatedTableDisplayValueTypeAndFormatProp.format + props.displayValueTypeAndFormatProp.type && + props.displayValueTypeAndFormatProp.format ) { return parseStringDateTime( row.value[props.relatedTableDisplayValueProp], - props.relatedTableDisplayValueTypeAndFormatProp.format, - !(props.relatedTableDisplayValueTypeAndFormatProp.format === UITypes.Time), + props.displayValueTypeAndFormatProp.format, + !(props.displayValueTypeAndFormatProp.format === UITypes.Time), ) } return row.value[props.relatedTableDisplayValueProp] diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue index 0969cc8786..ee5059f3b6 100644 --- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue +++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue @@ -37,19 +37,19 @@ const { childrenExcludedList, isChildrenExcludedListLinked, isChildrenExcludedListLoading, - displayValueProp, isChildrenExcludedLoading, childrenListCount, loadChildrenExcludedList, loadChildrenList, childrenExcludedListPagination, relatedTableDisplayValueProp, - relatedTableDisplayValueTypeAndFormatProp, + displayValueTypeAndFormatProp, link, relatedTableMeta, meta, unlink, row, + headerDisplayValue } = useLTARStoreOrThrow() const { addLTARRef, isNew, removeLTARRef, state: rowState } = useSmartsheetRowStoreOrThrow() @@ -236,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')" />
@@ -316,7 +316,7 @@ const onCreatedRecord = (record: any) => { :fields="fields" :attachment="attachmentCol" :related-table-display-value-prop="relatedTableDisplayValueProp" - :related-table-display-value-type-and-format-prop="relatedTableDisplayValueTypeAndFormatProp" + :display-value-type-and-format-prop="displayValueTypeAndFormatProp" :is-loading="isChildrenExcludedListLoading[Number.parseInt(id)]" :is-linked="isChildrenExcludedListLinked[Number.parseInt(id)]" @expand=" diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts index 9ed4c013e6..623dd8008a 100644 --- a/packages/nc-gui/composables/useLTARStore.ts +++ b/packages/nc-gui/composables/useLTARStore.ts @@ -7,6 +7,7 @@ import { type TableType, dateFormats, timeFormats, + parseStringDateTime, } from 'nocodb-sdk' import type { ComputedRef, Ref } from 'vue' import { @@ -131,8 +132,16 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState( return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title || '' }) - const relatedTableDisplayValueTypeAndFormatProp = computed(() => { - let dateOrDateTimeFieldTypeAndFormat = { + 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) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title + }) + + const displayValueTypeAndFormatProp = computed(() => { + let displayValueTypeAndFormat = { type: '', format: '', } @@ -140,7 +149,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState( if (currentColumn) { if (currentColumn?.uidt === UITypes.DateTime) { - dateOrDateTimeFieldTypeAndFormat = { + displayValueTypeAndFormat = { type: currentColumn?.uidt, format: `${parseProp(currentColumn?.meta)?.date_format ?? dateFormats[0]} ${ parseProp(currentColumn?.meta)?.time_format ?? timeFormats[0] @@ -148,21 +157,28 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState( } } if (currentColumn?.uidt === UITypes.Time) { - dateOrDateTimeFieldTypeAndFormat = { + displayValueTypeAndFormat = { type: currentColumn?.uidt, format: `${timeFormats[0]}`, } } } - return dateOrDateTimeFieldTypeAndFormat + return displayValueTypeAndFormat }) - 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) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title + 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) => { @@ -507,7 +523,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState( relatedTableMeta, loadRelatedTableMeta, relatedTableDisplayValueProp, - relatedTableDisplayValueTypeAndFormatProp, + displayValueTypeAndFormatProp, childrenExcludedList, childrenList, childrenListCount, @@ -529,6 +545,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState( isChildrenExcludedLoading, deleteRelatedRow, getRelatedTableRowId, + headerDisplayValue } }, 'ltar-store',