Browse Source

refactor(nc-gui): avoid passing isMssql flag

pull/5659/head
Wing-Kam Wong 1 year ago
parent
commit
b3790bc43f
  1. 13
      packages/nc-gui/components/virtual-cell/Formula.vue
  2. 11
      packages/nc-gui/components/virtual-cell/components/ItemChip.vue
  3. 8
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  4. 8
      packages/nc-gui/components/virtual-cell/components/ListItems.vue
  5. 20
      packages/nc-gui/utils/cell.ts

13
packages/nc-gui/components/virtual-cell/Formula.vue

@ -1,21 +1,18 @@
<script lang="ts" setup>
import type { ColumnType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { CellValueInj, ColumnInj, computed, handleTZ, inject, renderCellValue, replaceUrlsWithrenderValuet } from '#imports'
import { CellValueInj, ColumnInj, computed, handleTZ, inject, renderValue, replaceUrlsWithLink, useProject } from '#imports'
// todo: column type doesn't have required property `error` - throws in typecheck
const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
const cellValue = inject(CellValueInj)
const { isPg, isMssql } = useProject()
const { isPg } = useProject()
const result = computed(() => {
const isMSSQL = isMssql(column.value.base_id)
return isPg(column.value.base_id)
? renderValue(isMSSQL, handleTZ(cellValue?.value))
: renderValue(isMSSQL, cellValue?.value)
})
const result = computed(() =>
isPg(column.value.base_id) ? renderValue(handleTZ(cellValue?.value)) : renderValue(cellValue?.value),
)
const urls = computed(() => replaceUrlsWithLink(result.value))

11
packages/nc-gui/components/virtual-cell/components/ItemChip.vue

@ -1,18 +1,15 @@
<script lang="ts" setup>
import {
ActiveCellInj,
ColumnInj,
IsFormInj,
IsLockedInj,
ReadonlyInj,
iconMap,
inject,
ref,
renderCellValue,
renderValue,
useExpandedFormDetached,
useLTARStoreOrThrow,
useProject,
renderValue,
} from '#imports'
interface Props {
@ -38,10 +35,6 @@ const isLocked = inject(IsLockedInj, ref(false))
const { open } = useExpandedFormDetached()
const { isMssql } = useProject()
const column = inject(ColumnInj)
function openExpandedForm() {
if (!readOnly && !isLocked.value) {
open({
@ -67,7 +60,7 @@ export default {
:class="{ active }"
@click="openExpandedForm"
>
<span class="name">{{ renderValue(isMssql(column.value.base_id), value) }}</span>
<span class="name">{{ renderValue(value) }}</span>
<div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
<component

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

@ -13,12 +13,10 @@ import {
iconMap,
inject,
ref,
renderCellValue,
renderValue,
useLTARStoreOrThrow,
useProject,
useSmartsheetRowStoreOrThrow,
useVModel,
renderValue
} from '#imports'
const props = defineProps<{ modelValue?: boolean; cellValue: any }>()
@ -27,8 +25,6 @@ const emit = defineEmits(['update:modelValue', 'attachRecord'])
const vModel = useVModel(props, 'modelValue', emit)
const { isMssql } = useProject()
const isForm = inject(IsFormInj, ref(false))
const isPublic = inject(IsPublicInj, ref(false))
@ -152,7 +148,7 @@ const onClick = (row: Row) => {
>
<div class="flex items-center">
<div class="flex-1 overflow-hidden min-w-0">
{{ renderValue(isMssql(column.value.base_id), row[relatedTableDisplayValueProp]) }}
{{ renderValue(row[relatedTableDisplayValueProp]) }}
<span class="text-gray-400 text-[11px] ml-1">(Primary key : {{ getRelatedTableRowId(row) }})</span>
</div>

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

@ -12,13 +12,11 @@ import {
inject,
isDrawerExist,
ref,
renderCellValue,
renderValue,
useLTARStoreOrThrow,
useProject,
useSelectedCellKeyupListener,
useSmartsheetRowStoreOrThrow,
useVModel,
renderValue
} from '#imports'
const props = defineProps<{ modelValue: boolean }>()
@ -27,8 +25,6 @@ const emit = defineEmits(['update:modelValue', 'addNewRecord'])
const vModel = useVModel(props, 'modelValue', emit)
const { isMssql } = useProject()
const column = inject(ColumnInj)
const filterQueryRef = ref()
@ -233,7 +229,7 @@ watch(vModel, (nextVal) => {
:class="{ 'nc-selected-row': selectedRowIndex === i }"
@click="linkRow(refRow)"
>
{{ renderValue(isMssql(column.value.base_id), refRow[relatedTableDisplayValueProp]) }}
{{ renderValue(refRow[relatedTableDisplayValueProp]) }}
<span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1">
({{ $t('labels.primaryKey') }} : {{ getRelatedTableRowId(refRow) }})
</span>

20
packages/nc-gui/utils/cell.ts

@ -56,22 +56,24 @@ export const isPrimary = (column: ColumnType) => !!column.pv
export const isPrimaryKey = (column: ColumnType) => !!column.pk
// used for LTAR and Formula
export const renderValue = (isMssql: boolean, result?: any) => {
export const renderValue = (result?: any) => {
if (!result || typeof result !== 'string') {
return result
}
if (isMssql) {
if (dayjs(result).isValid()) {
// convert to YYYY-MM-DD hh:mm:ssZ
// e.g. 2023-05-18T05:30:00.000Z -> 2023-05-18 11:00:00+05:30
result = dayjs(result).format('YYYY-MM-DD HH:mm:ssZ')
}
}
// cater MYSQL
result = result.replace('.000000', '')
// convert ISO string (e.g. in MSSQL) to YYYY-MM-DD hh:mm:ssZ
// e.g. 2023-05-18T05:30:00.000Z -> 2023-05-18 11:00:00+05:30
result = result.replace(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/, (d: string) => {
return dayjs(d).format('YYYY-MM-DD HH:mm:ssZ')
})
// convert all date time values to local time
// the datetime is either YYYY-MM-DD hh:mm:ss (xcdb)
// or YYYY-MM-DD hh:mm:ss+xx:yy (ext)
return result.replace('.000000', '').replace(/\b(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})(\+\d{2}:\d{2})?\b/g, (d: string) => {
return result.replace(/\b(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})(\+\d{2}:\d{2})?\b/g, (d: string) => {
// TODO(timezone): retrieve the format from the corresponding column meta
// assume hh:mm at this moment
return dayjs(d).utc(!result.includes('+')).local().format('YYYY-MM-DD HH:mm')

Loading…
Cancel
Save