Submission table pagination & migrate chart to vue3 (#254)

* Submission table Pagination in background

* migrate chart to vue3

* Form submissions pagination

* Form submissions

* Fix form starts

* Fix openSelect key issue

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>
Co-authored-by: Julien Nahum <julien@nahum.net>

resources/js/components/common/ScrollShadow.vue

@@ -50,7 +50,9 @@ export default {
         bottom: false,
         left: false
       },
-      debounceTimeout: null
+      debounceTimeout: null,
+      scrollContainerObserver: null,
+      wrapObserver: null
     }
   },
   mounted () {
@@ -60,20 +62,19 @@ export default {
     const scrollContainerObserver = newResizeObserver(this.toggleShadow)
     if (scrollContainerObserver) {
       scrollContainerObserver.observe(this.$refs.scrollContainer)
-      // Cleanup when the component is unmounted.
-      this.$once('hook:unmounted', () => scrollContainerObserver.disconnect())
     }
 
     // Recalculate the container dimensions when the wrapper is resized.
-    const wrapObserver = newResizeObserver(this.calcDimensions)
-    if (wrapObserver) {
-      wrapObserver.observe(this.$el)
-      // Cleanup when the component is unmounted.
-      this.$once('hook:unmounted', () => wrapObserver.disconnect())
+    this.wrapObserver = newResizeObserver(this.calcDimensions)
+    if (this.wrapObserver) {
+      this.wrapObserver.observe(this.$el)
     }
   },
   unmounted () {
     window.removeEventListener('resize', this.calcDimensions)
+    // Cleanup when the component is unmounted.
+    this.wrapObserver.disconnect()
+    this.scrollContainerObserver.disconnect()
   },
   methods: {
     async calcDimensions () {

resources/js/components/open/forms/components/FormStats.vue

@@ -20,15 +20,15 @@
     </div>
     <loader v-else-if="isLoading" class="h-6 w-6 text-nt-blue mx-auto" />
     <LineChart v-else
-               :chart-options="chartOptions"
-               :chart-data="chartData"
+               :options="chartOptions"
+               :data="chartData"
     />
   </div>
 </template>
 
 <script>
 import axios from 'axios'
-import { Line as LineChart } from 'vue-chartjs/legacy'
+import { Line as LineChart } from 'vue-chartjs'
 import {
   Chart as ChartJS,
   Title,
@@ -93,7 +93,7 @@ export default {
           }
         },
         responsive: true,
-        maintainAspectRatio: false
+        maintainAspectRatio: true
       }
     }
   },

resources/js/components/open/forms/components/FormSubmissions.vue

@@ -40,19 +40,19 @@
       </div>
     </modal>
 
-    <loader v-if="!form || isLoading" class="h-6 w-6 text-nt-blue mx-auto" />
+    <loader v-if="!form || !formInitDone" class="h-6 w-6 text-nt-blue mx-auto" />
     <div v-else>
-      <div class="flex flex-wrap items-end">
+      <div v-if="form && tableData.length > 0" class="flex flex-wrap items-end">
         <div class="flex-grow">
           <text-input class="w-64" :form="searchForm" name="search" placeholder="Search..." />
         </div>
         <div class="font-semibold flex gap-4">
-          <p v-if="form && !isLoading && formInitDone" class="float-right text-xs uppercase mb-2">
+          <p class="float-right text-xs uppercase mb-2">
             <a
               href="javascript:void(0);" class="text-gray-500" @click="showColumnsModal=true"
             >Display columns</a>
           </p>
-          <p v-if="form && !isLoading && tableData.length > 0" class="text-right text-xs uppercase">
+          <p class="text-right text-xs uppercase">
             <a
               :href="exportUrl" target="_blank"
             >Export as CSV</a>
@@ -101,7 +101,6 @@ export default {
     }
   },
 
-
   data () {
     return {
       formInitDone: false,
@@ -153,7 +152,7 @@ export default {
     }
   },
   watch: {
-    form () {
+    'form.id' () {
       if (this.form === null) {
         return
       }
@@ -167,7 +166,7 @@ export default {
   },
   methods: {
     initFormStructure () {
-      if (!this.form || this.formInitDone) {
+      if (!this.form || !this.form.properties || this.formInitDone) {
         return
       }
 
@@ -215,6 +214,7 @@ export default {
         const resData = response.data
 
         this.tableData = this.tableData.concat(resData.data.map((record) => record.data))
+        this.dataChanged()
 
         if (this.currentPage < resData.meta.last_page) {
           this.currentPage += 1

resources/js/components/open/tables/OpenTable.vue

@@ -182,7 +182,9 @@ export default {
   mounted () {
     const parent = document.getElementById('table-page')
     this.tableHash = cyrb53(JSON.stringify(this.form.properties))
-    parent.addEventListener('scroll', this.handleScroll, { passive: true })
+    if (parent) {
+      parent.addEventListener('scroll', this.handleScroll, { passive: true })
+    }
     window.addEventListener('resize', this.handleScroll)
     this.onStructureChange()
     this.handleScroll()

resources/js/components/open/tables/components/OpenSelect.vue

@@ -1,7 +1,7 @@
 <template>
-  <span class="-mb-2" v-if="value">
+  <span v-if="value" class="-mb-2">
     <template v-if="valueIsObject">
-      <open-tag v-for="val,index in value" :key="index" :opt="val" />
+      <open-tag v-for="(val,index) in value" :key="index+val" :opt="val" />
     </template>
     <open-tag v-else :opt="value" />
   </span>

resources/js/pages/forms/show/index.vue

@@ -59,7 +59,9 @@
               </span>
               <span>- Edited {{ form.last_edited_human }}</span>
             </p>
-            <div v-if="['draft','closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)" class="mt-2 flex items-center flex-wrap gap-3">
+            <div v-if="['draft','closed'].includes(form.visibility) || (form.tags && form.tags.length > 0)"
+                 class="mt-2 flex items-center flex-wrap gap-3"
+            >
               <span v-if="form.visibility=='draft'"
                     class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-gray-500/10 dark:text-white dark:bg-gray-700"
               >
@@ -110,13 +112,11 @@
       <div class="flex 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">
-            <transition name="fade" mode="out-in">
-              <router-view v-slot="{ Component }">
-                <transition name="page" mode="out-in">
-                  <component :is="Component" :form="form" />
-                </transition>
-              </router-view>
-            </transition>
+            <router-view v-slot="{ Component }">
+              <transition name="page" mode="out-in">
+                <component :is="Component" :form="form" />
+              </transition>
+            </router-view>
           </div>
         </div>
       </div>
@@ -210,7 +210,7 @@ export default {
 
   computed: {
     workingForm: {
-      get  () {
+      get () {
         return this.workingFormStore.content
       },
       /* We add a setter */