Better submission table

client/components/open/forms/components/FormSubmissions.vue

@@ -1,7 +1,8 @@
 <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">
         Form Submissions
       </h3>
@@ -28,7 +29,8 @@
               Form Fields
             </h4>
             <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}">
                 <p class="flex-grow truncate">
                   {{ field.name }}
@@ -76,9 +78,12 @@
           </div>
         </div>
 
+      </div>
+    </div>
+    <div class="px-4 pb-4">
       <scroll-shadow
         ref="shadows"
-        class="border max-h-full h-full notion-database-renderer"
+        class="border h-full notion-database-renderer"
         :shadow-top-offset="0"
         :hide-scrollbar="true"
       >
@@ -88,6 +93,7 @@
           :columns="properties"
           :data="filteredData"
           :loading="isLoading"
+          :scroll-parent="parentPage"
           @resize="dataChanged()"
           @deleted="onDeleteRecord"
           @updated="(submission)=>onUpdateRecord(submission)"
@@ -116,7 +122,7 @@ export default {
       workingFormStore,
       recordStore,
       form: storeToRefs(workingFormStore).content,
-      tableData:storeToRefs(recordStore).getAll,
+      tableData: storeToRefs(recordStore).getAll,
       runtimeConfig: useRuntimeConfig(),
       slug: useRoute().params.slug
     }
@@ -132,17 +138,28 @@ export default {
       displayColumns: {},
       searchForm: useForm({
         search: ''
-      })
+      }),
     }
   },
   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() {
       if (!this.form) {
         return ''
       }
       return this.runtimeConfig.public.apiBase + '/open/forms/' + this.form.id + '/submissions/export'
     },
-    isLoading(){
+    isLoading() {
       return this.recordStore.loading
     },
     filteredData() {
@@ -183,7 +200,7 @@ export default {
     },
     initFormStructure() {
       // 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 (property.id === 'created_at') {
           return true
@@ -245,7 +262,7 @@ export default {
         return this.displayColumns[field.id] === true
       })
     },
-    onUpdateRecord(submission){
+    onUpdateRecord(submission) {
       this.recordStore.save(submission);
       this.dataChanged()
     },

client/components/open/tables/OpenTable.vue

@@ -91,7 +91,7 @@ import {hash} from "~/lib/utils.js";
 
 export default {
   components: {ResizableTh, RecordOperations},
-  emits: ["updated",  "deleted", "resize"],
+  emits: ["updated",  "deleted", "resize", "update-columns"],
   props: {
     columns: {
       type: Array,
@@ -109,7 +109,8 @@ export default {
       required: false,
       default: true,
       type: Boolean
-    }
+    },
+    scrollParent: {},
   },
 
   setup() {
@@ -126,6 +127,7 @@ export default {
       skip: false,
       hasActions: true,
       internalColumns: [],
+      rafId: null,
       fieldComponents: {
         text: shallowRef(OpenText),
         number: shallowRef(OpenText),
@@ -159,10 +161,10 @@ export default {
 
   mounted() {
     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))
     if (parent) {
-      parent.addEventListener('scroll', this.handleScroll, {passive: true})
+      parent.addEventListener('scroll', this.handleScroll, {passive: false})
     }
     window.addEventListener('resize', this.handleScroll)
     this.onStructureChange()
@@ -170,7 +172,7 @@ export default {
   },
 
   beforeUnmount() {
-    const parent = document.getElementById('table-page')
+    const parent = this.scrollParent ?? document.getElementById('table-page')
     if (parent) {
       parent.removeEventListener('scroll', this.handleScroll)
     }
@@ -227,33 +229,44 @@ export default {
       })
     },
     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) {
-        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 (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) {
       this.$emit('update-columns', val)

client/pages/forms/[slug]/show.vue

@@ -124,13 +124,9 @@
           </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"/>
       </div>
-        </div>
-      </div>
     </template>
     <div v-else-if="loading" class="text-center w-full p-5">
       <Loader class="h-6 w-6 mx-auto"/>

client/pages/forms/[slug]/show/share.vue

@@ -1,4 +1,5 @@
 <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-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"/>
 
     </div>
+  </div>
 </template>
 
 <script setup>

client/pages/forms/[slug]/show/stats.vue

@@ -1,5 +1,5 @@
 <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">
       Form Analytics (last 30 days)
     </h3>

client/pages/forms/[slug]/show/submissions.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="table-page">
   <form-submissions/>
-  </div>
 </template>
 
 <script setup>
@@ -18,7 +16,7 @@ useOpnSeoMeta({
   title: (props.form) ? 'Form Submissions - ' + props.form.title : 'Form Submissions'
 })
 
-onBeforeRouteLeave(()=>{
+onBeforeRouteLeave(() => {
   console.log('Clearing  store state')
   useRecordsStore().resetState()
 })