Better submission table

This commit is contained in:
Julien Nahum 2024-02-22 16:56:35 +01:00
parent 062223fab2
commit e64d0d5da2
6 changed files with 154 additions and 128 deletions

View File

@ -1,7 +1,8 @@
<template> <template>
<div <div id="table-page"
class="my-4 w-full mx-auto" class="w-full flex flex-col"
> >
<div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4 pt-4">
<h3 class="font-semibold mb-4 text-xl"> <h3 class="font-semibold mb-4 text-xl">
Form Submissions Form Submissions
</h3> </h3>
@ -28,7 +29,8 @@
Form Fields Form Fields
</h4> </h4>
<div class="border border-gray-300 rounded-md"> <div class="border border-gray-300 rounded-md">
<div v-for="(field,index) in form.properties" :key="field.id" class="p-2 border-gray-300 flex items-center" <div v-for="(field,index) in candidatesProperties" :key="field.id"
class="p-2 border-gray-300 flex items-center"
:class="{'border-t':index!=0}"> :class="{'border-t':index!=0}">
<p class="flex-grow truncate"> <p class="flex-grow truncate">
{{ field.name }} {{ field.name }}
@ -76,9 +78,12 @@
</div> </div>
</div> </div>
</div>
</div>
<div class="px-4 pb-4">
<scroll-shadow <scroll-shadow
ref="shadows" ref="shadows"
class="border max-h-full h-full notion-database-renderer" class="border h-full notion-database-renderer"
:shadow-top-offset="0" :shadow-top-offset="0"
:hide-scrollbar="true" :hide-scrollbar="true"
> >
@ -88,6 +93,7 @@
:columns="properties" :columns="properties"
:data="filteredData" :data="filteredData"
:loading="isLoading" :loading="isLoading"
:scroll-parent="parentPage"
@resize="dataChanged()" @resize="dataChanged()"
@deleted="onDeleteRecord" @deleted="onDeleteRecord"
@updated="(submission)=>onUpdateRecord(submission)" @updated="(submission)=>onUpdateRecord(submission)"
@ -132,10 +138,21 @@ export default {
displayColumns: {}, displayColumns: {},
searchForm: useForm({ searchForm: useForm({
search: '' search: ''
}) }),
} }
}, },
computed: { computed: {
parentPage() {
if (process.server) {
return null
}
return window
},
candidatesProperties() {
return clonedeep(this.form.properties).filter((field) => {
return !['nf-text', 'nf-code', 'nf-page-break', 'nf-divider', 'nf-image'].includes(field.type)
})
},
exportUrl() { exportUrl() {
if (!this.form) { if (!this.form) {
return '' return ''
@ -183,7 +200,7 @@ export default {
}, },
initFormStructure() { initFormStructure() {
// check if form properties already has a created_at column // check if form properties already has a created_at column
this.properties = clonedeep(this.form.properties) this.properties = this.candidatesProperties
if (!this.properties.find((property) => { if (!this.properties.find((property) => {
if (property.id === 'created_at') { if (property.id === 'created_at') {
return true return true

View File

@ -91,7 +91,7 @@ import {hash} from "~/lib/utils.js";
export default { export default {
components: {ResizableTh, RecordOperations}, components: {ResizableTh, RecordOperations},
emits: ["updated", "deleted", "resize"], emits: ["updated", "deleted", "resize", "update-columns"],
props: { props: {
columns: { columns: {
type: Array, type: Array,
@ -109,7 +109,8 @@ export default {
required: false, required: false,
default: true, default: true,
type: Boolean type: Boolean
} },
scrollParent: {},
}, },
setup() { setup() {
@ -126,6 +127,7 @@ export default {
skip: false, skip: false,
hasActions: true, hasActions: true,
internalColumns: [], internalColumns: [],
rafId: null,
fieldComponents: { fieldComponents: {
text: shallowRef(OpenText), text: shallowRef(OpenText),
number: shallowRef(OpenText), number: shallowRef(OpenText),
@ -159,10 +161,10 @@ export default {
mounted() { mounted() {
this.internalColumns = clonedeep(this.columns) this.internalColumns = clonedeep(this.columns)
const parent = document.getElementById('table-page') const parent = this.scrollParent ?? document.getElementById('table-page')
this.tableHash = hash(JSON.stringify(this.form.properties)) this.tableHash = hash(JSON.stringify(this.form.properties))
if (parent) { if (parent) {
parent.addEventListener('scroll', this.handleScroll, {passive: true}) parent.addEventListener('scroll', this.handleScroll, {passive: false})
} }
window.addEventListener('resize', this.handleScroll) window.addEventListener('resize', this.handleScroll)
this.onStructureChange() this.onStructureChange()
@ -170,7 +172,7 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
const parent = document.getElementById('table-page') const parent = this.scrollParent ?? document.getElementById('table-page')
if (parent) { if (parent) {
parent.removeEventListener('scroll', this.handleScroll) parent.removeEventListener('scroll', this.handleScroll)
} }
@ -227,33 +229,44 @@ export default {
}) })
}, },
handleScroll() { handleScroll() {
const parent = document.getElementById('table-page')
const posTop = parent.getBoundingClientRect().top
const tablePosition = Math.max(0, posTop - this.$refs.table.getBoundingClientRect().top)
const tableHeader = document.getElementById('table-header-' + this.tableHash)
// Set position of table header if (this.rafId) {
cancelAnimationFrame(this.rafId);
}
this.rafId = requestAnimationFrame(() => {
const table = this.$refs.table;
const tableHeader = document.getElementById('table-header-' + this.tableHash);
const tableActionsRow = document.getElementById('table-actions-' + this.tableHash);
if (!table || !tableHeader) return;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const tableRect = table.getBoundingClientRect();
// The starting point of the table relative to the viewport
const tableStart = tableRect.top + scrollTop;
// The end point of the table relative to the viewport
const tableEnd = tableStart + tableRect.height;
let headerY = scrollTop - tableStart;
let actionsY = scrollTop + window.innerHeight - tableEnd;
if (headerY < 0) headerY = 0;
if (scrollTop + window.innerHeight > tableEnd) {
actionsY = tableRect.height - (scrollTop + window.innerHeight - tableEnd);
} else {
actionsY = tableRect.height;
}
if (tableHeader) { if (tableHeader) {
tableHeader.style.transform = `translate3d(0px, ${tablePosition}px, 0px)` tableHeader.style.transform = `translate3d(0px, ${headerY}px, 0px)`;
if (tablePosition > 0) {
tableHeader.classList.add('border-t')
} else {
tableHeader.classList.remove('border-t')
}
} }
// Set position of actions row
if (this.$slots.hasOwnProperty('actions')) {
const tableActionsRow = document.getElementById('table-actions-' + this.tableHash)
if (tableActionsRow) { if (tableActionsRow) {
if (tablePosition > 100) { tableActionsRow.style.transform = `translate3d(0px, ${actionsY}px, 0px)`;
tableActionsRow.style.transform = `translate3d(0px, ${tablePosition + 33}px, 0px)`
} else {
const parentContainer = document.getElementById('table-page')
tableActionsRow.style.transform = `translate3d(0px, ${parentContainer.offsetHeight + (posTop - this.$refs.table.getBoundingClientRect().top) - 35}px, 0px)`
}
}
} }
});
}, },
setColumns(val) { setColumns(val) {
this.$emit('update-columns', val) this.$emit('update-columns', val)

View File

@ -124,13 +124,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex bg-white"> <div class="flex flex-col bg-white">
<div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
<div class="py-4">
<NuxtPage :form="form"/> <NuxtPage :form="form"/>
</div> </div>
</div>
</div>
</template> </template>
<div v-else-if="loading" class="text-center w-full p-5"> <div v-else-if="loading" class="text-center w-full p-5">
<Loader class="h-6 w-6 mx-auto"/> <Loader class="h-6 w-6 mx-auto"/>

View File

@ -1,4 +1,5 @@
<template> <template>
<div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl p-4">
<div class="mb-20"> <div class="mb-20">
<div class="mb-6 pb-6 border-b w-full flex flex-col sm:flex-row gap-2"> <div class="mb-6 pb-6 border-b w-full flex flex-col sm:flex-row gap-2">
@ -18,6 +19,7 @@
<advanced-form-url-settings :form="props.form" v-model="shareFormConfig"/> <advanced-form-url-settings :form="props.form" v-model="shareFormConfig"/>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>

View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl p-4">
<h3 class="font-semibold mt-4 text-xl"> <h3 class="font-semibold mt-4 text-xl">
Form Analytics (last 30 days) Form Analytics (last 30 days)
</h3> </h3>

View File

@ -1,7 +1,5 @@
<template> <template>
<div id="table-page">
<form-submissions/> <form-submissions/>
</div>
</template> </template>
<script setup> <script setup>