village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix OpenTable performances

This commit is contained in:
Julien Nahum 2024-01-28 19:53:49 +01:00
parent 6aec718ef6
commit 28e55574e6
5 changed files with 121 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/.env.docker
View File

@ -1,13 +1,13 @@
NUXT_LOG_LEVEL=
NUXT_PUBLIC_APP_URL=http://localhost/
NUXT_PUBLIC_API_BASE=http://localhost/api
NUXT_PUBLIC_AI_ENABLED=
NUXT_PUBLIC_AI_ENABLED=false
NUXT_PUBLIC_AMPLITUDE_CODE=
NUXT_PUBLIC_CRISP_WEBSITE_ID=
NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED=
NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED=false
NUXT_PUBLIC_ENV=local
NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE=
NUXT_PUBLIC_H_CAPTCHA_SITE_KEY=
NUXT_PUBLIC_PAID_PLANS_ENABLED=
NUXT_PUBLIC_S3_ENABLED=
NUXT_PUBLIC_PAID_PLANS_ENABLED=false
NUXT_PUBLIC_S3_ENABLED=false
NUXT_API_SECRET=

189
client/components/open/tables/OpenTable.vue
View File

@ -13,14 +13,12 @@
class="n-table-cell p-0 relative"
@resize-width="resizeCol(col, $event)"
>
<p
:class="{'border-r': index < columns.length - 1 || hasActions}"
class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
<p class="bg-gray-50 border-r dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
>
{{ col.name }}
</p>
</resizable-th>
<th v-if="hasActions" class="n-table-cell p-0 relative" style="width: 100px">
<th class="n-table-cell p-0 relative" style="width: 100px">
<p
class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
>
@ -37,10 +35,10 @@
style="will-change: transform; transform: translate3d(0px, 32px, 0px)"
>
<td :colspan="columns.length" class="p-1">
<slot name="actions" />
<slot name="actions"/>
</td>
</tr>
<tr v-for="row, index in data" :key="index" class="n-table-row" :class="{'first':index===0}">
<tr v-for="row, index in data" :key="row.id" class="n-table-row" :class="{'first':index===0}">
<td v-for="col, colIndex in columns"
:key="col.id"
:style="{width: col.cell_width + 'px'}"
@ -55,19 +53,19 @@
<td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
style="width: 100px"
>
<record-operations :form="form" :structure="columns" :rowid="row.id" @deleted="$emit('deleted')" />
<record-operations :form="form" :structure="columns" :rowid="row.id" @deleted="$emit('deleted')"/>
</td>
</tr>
<tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900">
<td :colspan="columns.length" class="p-8 w-full">
<Loader class="w-4 h-4 mx-auto" />
<Loader class="w-4 h-4 mx-auto"/>
</td>
</tr>
</tbody>
<tbody v-else key="body-content" class="n-table-body">
<tr class="n-table-row loader w-full">
<td :colspan="columns.length" class="n-table-cell w-full p-8">
<Loader v-if="loading" class="w-4 h-4 mx-auto" />
<Loader v-if="loading" class="w-4 h-4 mx-auto"/>
<p v-else class="text-gray-500 text-center">
No data found.
</p>
@ -90,7 +88,7 @@ import clonedeep from 'clone-deep'
import {hash} from "~/lib/utils.js";
export default {
components: { ResizableTh, RecordOperations },
components: {ResizableTh, RecordOperations},
props: {
columns: {
type: Array,
@ -111,77 +109,64 @@ export default {
}
},
setup () {
setup() {
const workingFormStore = useWorkingFormStore()
return {
workingFormStore
workingFormStore,
form: storeToRefs(workingFormStore).content,
}
},
data () {
data() {
return {
tableHash: null,
skip: false
}
},
computed: {
form: {
get () {
return this.workingFormStore.content
},
/* We add a setter */
set (value) {
this.workingFormStore.set(value)
}
},
hasActions () {
// In future if want to hide based on condition
return true
},
fieldComponents () {
return {
text: OpenText,
number: OpenText,
select: OpenSelect,
multi_select: OpenSelect,
date: OpenDate,
files: OpenFile,
checkbox: OpenCheckbox,
url: OpenUrl,
email: OpenText,
phone_number: OpenText,
signature: OpenFile
skip: false,
hasActions: true,
internalColumns: [],
fieldComponents: {
text: shallowRef(OpenText),
number: shallowRef(OpenText),
select: shallowRef(OpenSelect),
multi_select: shallowRef(OpenSelect),
date: shallowRef(OpenDate),
files: shallowRef(OpenFile),
checkbox: shallowRef(OpenCheckbox),
url: shallowRef(OpenUrl),
email: shallowRef(OpenText),
phone_number: shallowRef(OpenText),
signature: shallowRef(OpenFile)
}
}
},
watch: {
'columns': {
handler () {
handler() {
this.internalColumns = clonedeep(this.columns)
this.onStructureChange()
},
deep: true
},
data () {
data() {
this.$nextTick(() => {
this.handleScroll()
})
}
},
mounted () {
mounted() {
this.internalColumns = clonedeep(this.columns)
const parent = document.getElementById('table-page')
this.tableHash = hash(JSON.stringify(this.form.properties))
if (parent) {
parent.addEventListener('scroll', this.handleScroll, { passive: true })
parent.addEventListener('scroll', this.handleScroll, {passive: true})
}
window.addEventListener('resize', this.handleScroll)
this.onStructureChange()
this.handleScroll()
},
beforeUnmount () {
beforeUnmount() {
const parent = document.getElementById('table-page')
if (parent) {
parent.removeEventListener('scroll', this.handleScroll)
@ -190,7 +175,7 @@ export default {
},
methods: {
colClasses (col) {
colClasses(col) {
let colAlign, colColor, colFontWeight, colWrap
// Column align
@ -215,12 +200,12 @@ export default {
return [colAlign, colColor, colWrap, colFontWeight]
},
onStructureChange () {
if (this.columns) {
onStructureChange() {
if (this.internalColumns) {
this.$nextTick(() => {
this.columns.forEach(col => {
this.internalColumns.forEach(col => {
if (!col.hasOwnProperty('cell_width')) {
if (this.allowResize && this.columns.length && document.getElementById('table-head-cell-' + col.id)) {
if (this.allowResize && this.internalColumns.length && document.getElementById('table-head-cell-' + col.id)) {
// Within editor
this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
}
@ -229,17 +214,16 @@ export default {
})
}
},
resizeCol (col, width) {
resizeCol(col, width) {
if (!this.form) return
const columns = clonedeep(this.columns)
const index = this.columns.findIndex(c => c.id === col.id)
columns[index].cell_width = width
this.setColumns(columns)
const index = this.internalColumns.findIndex(c => c.id === col.id)
this.internalColumns[index].cell_width = width
this.setColumns(this.internalColumns)
this.$nextTick(() => {
this.$emit('resize')
})
},
handleScroll () {
handleScroll() {
const parent = document.getElementById('table-page')
const posTop = parent.getBoundingClientRect().top
const tablePosition = Math.max(0, posTop - this.$refs.table.getBoundingClientRect().top)
@ -269,7 +253,7 @@ export default {
}
},
setColumns(val) {
this.$emit('update-columns',val)
this.$emit('update-columns', val)
}
}
}
@ -299,87 +283,4 @@ export default {
min-width: 80px;
}
}
.notion-table {
td {
&.text-gray {
color: #787774;
}
&.text-brown {
color: #9f6b53;
}
&.text-orange {
color: #d9730d;
}
&.text-yellow {
color: #cb912f;
}
&.text-green {
color: #448361;
}
&.text-blue {
color: #337ea9;
}
&.text-purple {
color: #9065b0;
}
&.text-pink {
color: #c14c8a;
}
&.text-red {
color: #d44c47;
}
}
}
.dark {
.notion-table {
td {
&.text-gray {
color: #9b9b9b;
}
&.text-brown {
color: #ba856f;
}
&.text-orange {
color: #c77d48;
}
&.text-yellow {
color: #ca9849;
}
&.text-green {
color: #529e72;
}
&.text-blue {
color: #5e87c9;
}
&.text-purple {
color: #9d68d3;
}
&.text-pink {
color: #d15796;
}
&.text-red {
color: #df5452;
}
}
}
}
</style>

8
client/components/open/tables/components/OpenSelect.vue
View File

@ -13,10 +13,7 @@ import OpenTag from './OpenTag.vue'
export default {
components: { OpenTag },
props: {
value: {
type: Object
}
value: {}
},
data () {
@ -31,8 +28,5 @@ export default {
return false
}
},
mounted () {
},
methods: {}
}
</script>

85
client/components/open/tables/components/OpenText.vue
View File

@ -1,41 +1,7 @@
<template>
<span v-if="!valueIsObject">
<span>
{{ value }}
</span>
<span v-else>
<span
v-for="(item, i) in value.responseData"
:key="i"
:class="{
'font-semibold': item.annotations.bold && !item.annotations.code,
italic: item.annotations.italic,
'line-through': item.annotations.strikethrough,
underline: item.annotations.underline,
'bg-pink-100 py-1 px-2 rounded-lg text-pink-500': item.annotations.code,
'font-serif': item.type == 'equation',
}"
:style="{
color:
item.annotations.color != 'default'
? getColor(item.annotations.color)
: null,
'background-color':
item.annotations.color != 'default' &&
item.annotations.color.split('_')[1]
? getBgColor(item.annotations.color.split('_')[0])
: 'none',
}"
>
<a
v-if="item.href"
:href="item.href"
rel="noopener noreferrer"
target="_blank"
class="text-blue-600 underline"
>{{ item.plain_text }}</a>
<span v-else-if="!item.href">{{ item.plain_text }}</span>
</span>
</span>
</template>
<script>
@ -45,55 +11,6 @@ export default {
value: {
required: true
}
},
data () {
return {}
},
computed: {
valueIsObject () {
if (
typeof this.value === 'object' &&
!Array.isArray(this.value) &&
this.value !== null
) {
return true
}
return false
}
},
mounted () {
},
methods: {
getColor (color) {
return {
red: '#e03e3e',
gray: '#9b9a97',
brown: '#64473a',
orange: '#d9730d',
yellow: '#dfab01',
teal: '#0f7b6c',
blue: '#0b6e99',
purple: '#6940a5',
pink: '#ad1a72'
}[color]
},
getBgColor (color) {
return {
red: '#fbe4e4',
gray: '#ebeced',
brown: '#e9e5e3',
orange: '#faebdd',
yellow: '#fbf3db',
teal: '#ddedea',
blue: '#ddebf1',
purple: '#eae4f2',
pink: '#f4dfeb'
}[color]
}
}
}
</script>

35
client/components/open/tables/components/ResizableTh.vue
View File

@ -1,6 +1,6 @@
<template>
<th ref="th" :style="{width: width}">
<slot />
<slot/>
<div v-if="allowResize" class="absolute right-0 top-0 w-0 z-10">
<div class="resize-handler bg-transparent cursor-move hover:bg-blue-500 opacity-80 transition-colors"
@mousedown="mouseDownHandler"
@ -21,20 +21,18 @@ export default {
}
},
data () {
data() {
return {
x: 0,
w: 0
w: 0,
lastEmit: Date.now(),
throttlePeriod: 50 // milliseconds
}
},
computed: {
},
mounted () {
},
methods: {
mouseDownHandler (e) {
mouseDownHandler(e) {
if (process.server) return
// Get the current mouse position
this.x = e.clientX
@ -43,25 +41,22 @@ export default {
this.w = parseInt(styles.width, 10)
// Attach the listeners to `document`
if (process.client) {
document.addEventListener('mousemove', this.mouseMoveHandler)
document.addEventListener('mouseup', this.mouseUpHandler)
},
mouseMoveHandler(e) {
const now = Date.now()
if (now - this.lastEmit > this.throttlePeriod) {
const dx = e.clientX - this.x
this.$emit('resize-width', this.w + dx)
this.lastEmit = now
}
},
mouseMoveHandler (e) {
// How far the mouse has been moved
const dx = e.clientX - this.x
// Adjust the dimension of element
this.$emit('resize-width', this.w + dx)
},
mouseUpHandler () {
mouseUpHandler() {
// Remove the handlers of `mousemove` and `mouseup`
if (process.client) {
document.removeEventListener('mousemove', this.mouseMoveHandler)
document.removeEventListener('mouseup', this.mouseUpHandler)
}
}
}
}
</script>