From 24276f0b9588f849c42a2e7f466be136bd8c9fbc Mon Sep 17 00:00:00 2001 From: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com> Date: Thu, 7 Dec 2023 19:01:56 +0530 Subject: [PATCH] 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 Co-authored-by: Julien Nahum --- app/Http/Kernel.php | 2 +- package-lock.json | 31 +++++++++++++------ package.json | 4 +-- .../js/components/common/ScrollShadow.vue | 17 +++++----- .../open/forms/components/FormStats.vue | 8 ++--- .../open/forms/components/FormSubmissions.vue | 14 ++++----- .../js/components/open/tables/OpenTable.vue | 4 ++- .../open/tables/components/OpenSelect.vue | 4 +-- resources/js/pages/forms/show/index.vue | 18 +++++------ 9 files changed, 58 insertions(+), 44 deletions(-) diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php index 54c54ddb7..4d09ef9f1 100644 --- a/app/Http/Kernel.php +++ b/app/Http/Kernel.php @@ -53,7 +53,7 @@ class Kernel extends HttpKernel ], 'api' => [ - 'throttle:60,1', + 'throttle:100,1', \Illuminate\Routing\Middleware\SubstituteBindings::class, \App\Http\Middleware\EncryptCookies::class, \Illuminate\Session\Middleware\StartSession::class, diff --git a/package-lock.json b/package-lock.json index 5eb9ef6c0..09636ca47 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@vueuse/components": "^10.5.0", "@vueuse/core": "^10.5.0", "axios": "^0.21.1", - "chart.js": "^3.7.1", + "chart.js": "^4.4.0", "clone-deep": "^4.0.1", "date-fns": "^2.28.0", "debounce": "^1.2.1", @@ -28,7 +28,7 @@ "tinymotion": "^0.2.0", "vform": "^2.1.1", "vue": "^3.2.13", - "vue-chartjs": "^4.1.0", + "vue-chartjs": "^5.2.0", "vue-codemirror": "^4.0.6", "vue-confetti": "^2.3.0", "vue-country-flag-next": "^2.3.2", @@ -2263,6 +2263,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -4686,9 +4691,15 @@ } }, "node_modules/chart.js": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", - "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==" + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz", + "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=7" + } }, "node_modules/chokidar": { "version": "3.5.3", @@ -13398,12 +13409,12 @@ } }, "node_modules/vue-chartjs": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.2.tgz", - "integrity": "sha512-QSggYjeFv/L4jFSBQpX8NzrAvX0B+Ha6nDgxkTG8tEXxYOOTwKI4phRLe+B4f+REnkmg7hgPY24R0cixZJyXBg==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.2.0.tgz", + "integrity": "sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==", "peerDependencies": { - "chart.js": "^3.7.0", - "vue": "^3.0.0-0 || ^2.6.0" + "chart.js": "^4.1.1", + "vue": "^3.0.0-0 || ^2.7.0" } }, "node_modules/vue-codemirror": { diff --git a/package.json b/package.json index 4fd6e62ce..9985b1f30 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "@vueuse/components": "^10.5.0", "@vueuse/core": "^10.5.0", "axios": "^0.21.1", - "chart.js": "^3.7.1", + "chart.js": "^4.4.0", "clone-deep": "^4.0.1", "date-fns": "^2.28.0", "debounce": "^1.2.1", @@ -29,7 +29,7 @@ "tinymotion": "^0.2.0", "vform": "^2.1.1", "vue": "^3.2.13", - "vue-chartjs": "^4.1.0", + "vue-chartjs": "^5.2.0", "vue-codemirror": "^4.0.6", "vue-confetti": "^2.3.0", "vue-country-flag-next": "^2.3.2", diff --git a/resources/js/components/common/ScrollShadow.vue b/resources/js/components/common/ScrollShadow.vue index 937d28148..bbf823488 100644 --- a/resources/js/components/common/ScrollShadow.vue +++ b/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 () { diff --git a/resources/js/components/open/forms/components/FormStats.vue b/resources/js/components/open/forms/components/FormStats.vue index 4f069755e..0b167ee86 100644 --- a/resources/js/components/open/forms/components/FormStats.vue +++ b/resources/js/components/open/forms/components/FormStats.vue @@ -20,15 +20,15 @@