Add busy indicator during report and data imports

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Fixed
 - php 8.5 compatibility fix
+- Prevent double submissions by showing busy indicators during report and data imports
 - Nullpointer in DataloadController::importFile() #560 #555
 - Extend filter variable replacement tests with multiple filter cases
 - Update filter option handling for BETWEEN case #559 @[joleaf](https://github.com/joleaf)

js/navigation.js

@@ -813,18 +813,25 @@ OCA.Analytics.Navigation = {
 
     handleImportButton: function () {
         const fileInput = document.getElementById('importFile');
+        const importButton = document.getElementById('importDatasetButton');
         fileInput.click();
         fileInput.addEventListener('change', async () => {
             const file = fileInput.files[0];
             if (!file) {
                 return;
             }
+            OCA.Analytics.Sidebar.Backend.setButtonBusy(importButton, true);
             const reader = new FileReader();
             reader.readAsText(file);
             reader.onload = async () => {
-                OCA.Analytics.Sidebar.Report.import(null, reader.result);
+                OCA.Analytics.Sidebar.Report.import(null, reader.result, importButton);
+                fileInput.value = '';
             };
-        })
+            reader.onerror = () => {
+                OCA.Analytics.Notification.notification('error', t('analytics', 'Import failed'));
+                OCA.Analytics.Sidebar.Backend.setButtonBusy(importButton, false);
+            };
+        }, {once: true});
     },
 
     handleSettingsButton: function () {
@@ -1212,4 +1219,4 @@ document.addEventListener('DOMContentLoaded', function () {
 
     document.getElementById('wizardStart').addEventListener('click', OCA.Analytics.Wizard.showFirstStart);
     document.getElementById('importDatasetButton').addEventListener('click', OCA.Analytics.Navigation.handleImportButton);
-});
+});

js/sidebar.js

@@ -738,15 +738,17 @@ OCA.Analytics.Sidebar.Report = {
         window.open(OC.generateUrl('apps/analytics/report/export/') + reportId, '_blank')
     },
 
-    import: function (path, raw) {
+    import: function (path, raw, button = null) {
         if (typeof raw === 'number') raw = null; // file picker is returning some INT which is not helpful in the service
         let requestUrl = OC.generateUrl('apps/analytics/report/import/');
         let headers = new Headers();
         headers.append('requesttoken', OC.requestToken);
         headers.append('OCS-APIREQUEST', 'true');
         headers.append('Content-Type', 'application/json');
 
-        fetch(requestUrl, {
+        OCA.Analytics.Sidebar.Backend.setButtonBusy(button, true);
+
+        return fetch(requestUrl, {
             method: 'POST',
             headers: OCA.Analytics.headers(),
             body: JSON.stringify({
@@ -757,6 +759,12 @@ OCA.Analytics.Sidebar.Report = {
             .then(response => response.json())
             .then(data => {
                 OCA.Analytics.Navigation.init();
+            })
+            .catch(error => {
+                OCA.Analytics.Notification.notification('error', t('analytics', 'Import failed'));
+            })
+            .finally(() => {
+                OCA.Analytics.Sidebar.Backend.setButtonBusy(button, false);
             });
     },
 
@@ -919,6 +927,19 @@ OCA.Analytics.Sidebar.Data = {
 
 OCA.Analytics.Sidebar.Backend = {
 
+    setButtonBusy: function (button, isBusy) {
+        if (!button) {
+            return;
+        }
+        if (isBusy) {
+            button.classList.add('loading');
+            button.disabled = true;
+        } else {
+            button.classList.remove('loading');
+            button.disabled = false;
+        }
+    },
+
     updateData: function () {
         const reportId = parseInt(OCA.Analytics.currentDataset);
         const button = document.getElementById('updateDataButton');
@@ -1011,9 +1032,8 @@ OCA.Analytics.Sidebar.Backend = {
 
     importCsvData: function () {
         const reportId = parseInt(OCA.Analytics.currentDataset);
-        const button = document.getElementById('importDataClipboardButton');
-        button.classList.add('loading');
-        button.disabled = true;
+        const button = document.getElementById('importDataClipboardButtonGo');
+        OCA.Analytics.Sidebar.Backend.setButtonBusy(button, true);
 
         let requestUrl = OC.generateUrl('apps/analytics/data/importCSV');
         fetch(requestUrl, {
@@ -1027,8 +1047,6 @@ OCA.Analytics.Sidebar.Backend = {
         })
             .then(response => response.json())
             .then(data => {
-                button.classList.remove('loading');
-                button.disabled = false;
                 if (data.error === 0) {
                     OCA.Analytics.Notification.notification('success', data.insert + ' ' + t('analytics', 'records inserted') + ', ' + data.update + ' ' + t('analytics', 'records updated'));
                     if (!OCA.Analytics.isDataset) {
@@ -1041,16 +1059,16 @@ OCA.Analytics.Sidebar.Backend = {
             })
             .catch(error => {
                 OCA.Analytics.Notification.notification('error', t('analytics', 'Technical error. Please check the logs.'));
-                button.classList.remove('loading');
-                button.disabled = false;
+            })
+            .finally(() => {
+                OCA.Analytics.Sidebar.Backend.setButtonBusy(button, false);
             });
     },
 
     importFileData: function (path) {
         const reportId = parseInt(OCA.Analytics.currentDataset);
         const button = document.getElementById('importDataFileButton');
-        button.classList.add('loading');
-        button.disabled = true;
+        OCA.Analytics.Sidebar.Backend.setButtonBusy(button, true);
 
         let requestUrl = OC.generateUrl('apps/analytics/data/importFile');
         fetch(requestUrl, {
@@ -1064,8 +1082,6 @@ OCA.Analytics.Sidebar.Backend = {
         })
             .then(response => response.json())
             .then(data => {
-                button.classList.remove('loading');
-                button.disabled = false;
                 if (data.error === 0) {
                     OCA.Analytics.Notification.notification('success', data.insert + ' ' + t('analytics', 'records inserted') + ', ' + data.update + ' ' + t('analytics', 'records updated'));
                     if (!OCA.Analytics.isDataset) {
@@ -1078,8 +1094,9 @@ OCA.Analytics.Sidebar.Backend = {
             })
             .catch(error => {
                 OCA.Analytics.Notification.notification('error', t('analytics', 'Technical error. Please check the logs.'));
-                button.classList.remove('loading');
-                button.disabled = false;
+            })
+            .finally(() => {
+                OCA.Analytics.Sidebar.Backend.setButtonBusy(button, false);
             });
     },
 };