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/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>