Browse Source

refactor(nc-gui): avoid passing isMssql flag

pull/5659/head
Wing-Kam Wong 2 years 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> <script lang="ts" setup>
import type { ColumnType } from 'nocodb-sdk' import type { ColumnType } from 'nocodb-sdk'
import type { Ref } from 'vue' 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 // todo: column type doesn't have required property `error` - throws in typecheck
const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }> const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
const cellValue = inject(CellValueInj) const cellValue = inject(CellValueInj)
const { isPg, isMssql } = useProject() const { isPg } = useProject()
const result = computed(() => { const result = computed(() =>
const isMSSQL = isMssql(column.value.base_id) isPg(column.value.base_id) ? renderValue(handleTZ(cellValue?.value)) : renderValue(cellValue?.value),
return isPg(column.value.base_id) )
? renderValue(isMSSQL, handleTZ(cellValue?.value))
: renderValue(isMSSQL, cellValue?.value)
})
const urls = computed(() => replaceUrlsWithLink(result.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> <script lang="ts" setup>
import { import {
ActiveCellInj, ActiveCellInj,
ColumnInj,
IsFormInj, IsFormInj,
IsLockedInj, IsLockedInj,
ReadonlyInj, ReadonlyInj,
iconMap, iconMap,
inject, inject,
ref, ref,
renderCellValue, renderValue,
useExpandedFormDetached, useExpandedFormDetached,
useLTARStoreOrThrow, useLTARStoreOrThrow,
useProject,
renderValue,
} from '#imports' } from '#imports'
interface Props { interface Props {
@ -38,10 +35,6 @@ const isLocked = inject(IsLockedInj, ref(false))
const { open } = useExpandedFormDetached() const { open } = useExpandedFormDetached()
const { isMssql } = useProject()
const column = inject(ColumnInj)
function openExpandedForm() { function openExpandedForm() {
if (!readOnly && !isLocked.value) { if (!readOnly && !isLocked.value) {
open({ open({
@ -67,7 +60,7 @@ export default {
:class="{ active }" :class="{ active }"
@click="openExpandedForm" @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"> <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
<component <component

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

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

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

@ -12,13 +12,11 @@ import {
inject, inject,
isDrawerExist, isDrawerExist,
ref, ref,
renderCellValue, renderValue,
useLTARStoreOrThrow, useLTARStoreOrThrow,
useProject,
useSelectedCellKeyupListener, useSelectedCellKeyupListener,
useSmartsheetRowStoreOrThrow, useSmartsheetRowStoreOrThrow,
useVModel, useVModel,
renderValue
} from '#imports' } from '#imports'
const props = defineProps<{ modelValue: boolean }>() const props = defineProps<{ modelValue: boolean }>()
@ -27,8 +25,6 @@ const emit = defineEmits(['update:modelValue', 'addNewRecord'])
const vModel = useVModel(props, 'modelValue', emit) const vModel = useVModel(props, 'modelValue', emit)
const { isMssql } = useProject()
const column = inject(ColumnInj) const column = inject(ColumnInj)
const filterQueryRef = ref() const filterQueryRef = ref()
@ -233,7 +229,7 @@ watch(vModel, (nextVal) => {
:class="{ 'nc-selected-row': selectedRowIndex === i }" :class="{ 'nc-selected-row': selectedRowIndex === i }"
@click="linkRow(refRow)" @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"> <span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1">
({{ $t('labels.primaryKey') }} : {{ getRelatedTableRowId(refRow) }}) ({{ $t('labels.primaryKey') }} : {{ getRelatedTableRowId(refRow) }})
</span> </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 export const isPrimaryKey = (column: ColumnType) => !!column.pk
// used for LTAR and Formula // used for LTAR and Formula
export const renderValue = (isMssql: boolean, result?: any) => { export const renderValue = (result?: any) => {
if (!result || typeof result !== 'string') { if (!result || typeof result !== 'string') {
return result return result
} }
if (isMssql) { // cater MYSQL
if (dayjs(result).isValid()) { result = result.replace('.000000', '')
// convert to YYYY-MM-DD hh:mm:ssZ
// e.g. 2023-05-18T05:30:00.000Z -> 2023-05-18 11:00:00+05:30 // convert ISO string (e.g. in MSSQL) to YYYY-MM-DD hh:mm:ssZ
result = dayjs(result).format('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 // convert all date time values to local time
// the datetime is either YYYY-MM-DD hh:mm:ss (xcdb) // the datetime is either YYYY-MM-DD hh:mm:ss (xcdb)
// or YYYY-MM-DD hh:mm:ss+xx:yy (ext) // 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 // TODO(timezone): retrieve the format from the corresponding column meta
// assume hh:mm at this moment // assume hh:mm at this moment
return dayjs(d).utc(!result.includes('+')).local().format('YYYY-MM-DD HH:mm') return dayjs(d).utc(!result.includes('+')).local().format('YYYY-MM-DD HH:mm')

Loading…
Cancel
Save