Better submission table
This commit is contained in:
parent
062223fab2
commit
e64d0d5da2
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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"/>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="table-page">
|
|
||||||
<form-submissions/>
|
<form-submissions/>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
Loading…
Reference in New Issue