mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
11 changed files with 160 additions and 162 deletions
@ -0,0 +1,64 @@
|
||||
<script lang="ts" setup> |
||||
import type { ColumnType } from 'nocodb-sdk' |
||||
import { computed } from 'vue' |
||||
import { handleTZ } from '~/utils/dateTimeUtils' |
||||
import { replaceUrlsWithLink } from '~/utils/urlUtils' |
||||
|
||||
const column = inject<ColumnType>('column') |
||||
const value = inject('value') |
||||
|
||||
const { isPg } = useProject() |
||||
|
||||
const showEditFormulaWarning = ref(false) |
||||
|
||||
const showEditFormulaWarningMessage = () => { |
||||
showEditFormulaWarning.value = true |
||||
setTimeout(() => { |
||||
showEditFormulaWarning.value = false |
||||
}, 3000) |
||||
} |
||||
|
||||
const result = computed(() => { |
||||
if (isPg) { |
||||
return handleTZ(value) |
||||
} |
||||
return value |
||||
}) |
||||
|
||||
const urls = computed(() => { |
||||
return replaceUrlsWithLink(result.value) |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<v-tooltip v-if="column && column.colOptions && column.colOptions.error" bottom color="error"> |
||||
<template #activator="{ on }"> |
||||
<span class="caption" v-on="on">ERR<span class="error--text">!</span></span> |
||||
</template> |
||||
<span class="font-weight-bold">{{ column.colOptions.error }}</span> |
||||
</v-tooltip> |
||||
<div class="formula-cell-wrapper" @dblclick="showEditFormulaWarningMessage"> |
||||
<div v-if="urls" v-html="urls" /> |
||||
<div v-else> |
||||
{{ result }} |
||||
</div> |
||||
<div v-if="showEditFormulaWarning" class="edit-warning"> |
||||
<!-- TODO: i18n --> |
||||
Warning: Formula fields should be configured in the field menu dropdown. |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.formula-cell-wrapper { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.edit-warning { |
||||
text-align: left; |
||||
margin-top: 10px; |
||||
color: #e65100; |
||||
} |
||||
</style> |
||||
@ -1,93 +0,0 @@
|
||||
<script> |
||||
import dayjs from 'dayjs' |
||||
|
||||
export default { |
||||
name: 'FormulaCell', |
||||
props: { column: Object, row: Object, client: String }, |
||||
data: () => ({ |
||||
showEditFormulaWarning: false, |
||||
}), |
||||
computed: { |
||||
result() { |
||||
if (this.client === 'pg') { |
||||
return this.handleTZ(this.row[this.column.title]) |
||||
} |
||||
return this.row[this.column.title] |
||||
}, |
||||
urls() { |
||||
if (!this.row[this.column.title]) { |
||||
return |
||||
} |
||||
|
||||
const rawText = this.result.toString() |
||||
let found = false |
||||
const out = rawText.replace(/URI::\((.*?)\)/g, (_, url) => { |
||||
found = true |
||||
const a = document.createElement('a') |
||||
a.textContent = url |
||||
a.setAttribute('href', url) |
||||
a.setAttribute('target', '_blank') |
||||
return a.outerHTML |
||||
}) |
||||
|
||||
return found && out |
||||
}, |
||||
}, |
||||
methods: { |
||||
// handle date returned from PostgreSQL |
||||
handleTZ(val) { |
||||
if (!val) { |
||||
return |
||||
} |
||||
if (typeof val !== 'string') { |
||||
return val |
||||
} |
||||
return val.replace( |
||||
/((?:-?(?:[1-9][0-9]*)?[0-9]{4})-(?:1[0-2]|0[1-9])-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9])(?:\.[0-9]+)?(?:Z|[+-](?:2[0-3]|[01][0-9]):[0-5][0-9]))/g, |
||||
(i, v) => { |
||||
return dayjs(v).format('YYYY-MM-DD HH:mm') |
||||
}, |
||||
) |
||||
}, |
||||
showEditFormulaWarningMessage() { |
||||
this.showEditFormulaWarning = true |
||||
setTimeout(() => { |
||||
this.showEditFormulaWarning = false |
||||
}, 3000) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<v-tooltip v-if="column && column.colOptions && column.colOptions.error" bottom color="error"> |
||||
<template #activator="{ on }"> |
||||
<span class="caption" v-on="on">ERR<span class="error--text">!</span></span> |
||||
</template> |
||||
<span class="font-weight-bold">{{ column.colOptions.error }}</span> |
||||
</v-tooltip> |
||||
<div class="formula-cell-wrapper" @dblclick="showEditFormulaWarningMessage"> |
||||
<div v-if="urls" v-html="urls" /> |
||||
<div v-else> |
||||
{{ result }} |
||||
</div> |
||||
<div v-if="showEditFormulaWarning == true" class="edit-warning"> |
||||
<!-- TODO: i18n --> |
||||
Warning: Formula fields should be configured in the field menu dropdown. |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.formula-cell-wrapper { |
||||
padding: 10px; |
||||
} |
||||
|
||||
.edit-warning { |
||||
text-align: left; |
||||
margin-top: 10px; |
||||
color: #e65100; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,16 @@
|
||||
import dayjs from 'dayjs' |
||||
|
||||
export const handleTZ = (val: any) => { |
||||
if (!val) { |
||||
return |
||||
} |
||||
if (typeof val !== 'string') { |
||||
return val |
||||
} |
||||
return val.replace( |
||||
/((?:-?(?:[1-9][0-9]*)?[0-9]{4})-(?:1[0-2]|0[1-9])-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9])(?:\.[0-9]+)?(?:Z|[+-](?:2[0-3]|[01][0-9]):[0-5][0-9]))/g, |
||||
(i, v) => { |
||||
return dayjs(v).format('YYYY-MM-DD HH:mm') |
||||
}, |
||||
) |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
export const replaceUrlsWithLink = (text: string): boolean | string => { |
||||
if (!text) { |
||||
return false |
||||
} |
||||
|
||||
const rawText = text.toString() |
||||
let found = false |
||||
const out = rawText.replace(/URI::\((.*?)\)/g, (_, url) => { |
||||
found = true |
||||
const a = document.createElement('a') |
||||
a.textContent = url |
||||
a.setAttribute('href', url) |
||||
a.setAttribute('target', '_blank') |
||||
return a.outerHTML |
||||
}) |
||||
|
||||
return found && out |
||||
} |
||||
Loading…
Reference in new issue