Bulk creation: displays a progress bar when saving all displayed forms

2 files changed, 41 insertions, 4 deletions

diff --git a/assets/common/js/shaare-batch.js b/assets/common/js/shaare-batch.js
index 9f612993..557325ee 100644
--- a/assets/common/js/shaare-batch.js
+++ b/assets/common/js/shaare-batch.js
@@ -15,7 +15,7 @@ const sendBookmarkForm = (basePath, formElement) => {
         alert(`An error occurred. Return code: ${xhr.status}`);
         reject();
       } else {
-        formElement.remove();
+        formElement.closest('.edit-link-container').remove();
         resolve();
       }
     };
@@ -32,7 +32,7 @@ const sendBookmarkDelete = (buttonElement, formElement) => (
         alert(`An error occurred. Return code: ${xhr.status}`);
         reject();
       } else {
-        formElement.remove();
+        formElement.closest('.edit-link-container').remove();
         resolve();
       }
     };
@@ -80,9 +80,23 @@ const redirectIfEmptyBatch = (basePath, formElements, path) => {
       saveAllButton.addEventListener('click', (e) => {
         e.preventDefault();
 
+        const forms = [...getForms()];
+        const nbForm = forms.length;
+        let current = 0;
+        const progressBar = document.querySelector('.progressbar > div');
+        const progressBarCurrent = document.querySelector('.progressbar-current');
+
+        document.querySelector('.dark-layer').style.display = 'block';
+        document.querySelector('.progressbar-max').innerHTML = nbForm;
+        progressBarCurrent.innerHTML = current;
+
         const promises = [];
-        [...getForms()].forEach((formElement) => {
-          promises.push(sendBookmarkForm(basePath, formElement));
+        forms.forEach((formElement) => {
+          promises.push(sendBookmarkForm(basePath, formElement).then(() => {
+            current += 1;
+            progressBar.style.width = `${(current * 100) / nbForm}%`;
+            progressBarCurrent.innerHTML = current;
+          }));
         });
 
         Promise.all(promises).then(() => {
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 7c85dee8..a7f091e9 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -1793,6 +1793,29 @@ input[name='save_edit_batch'] {
   }
 }
 
+.dark-layer {
+  display: none;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 998;
+  background-color: rgba(0, 0, 0, .75);
+  color: #fff;
+
+  .screen-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+  }
+
+  .progressbar {
+    width: 33%;
+  }
+}
+
 .addlink-batch-form-block {
   .pure-alert {
     margin: 25px 0 0 0;