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

author: ArthurHoaro <arthur@hoa.ro> 2020-10-23 12:53:49 +0200
committer: ArthurHoaro <arthur@hoa.ro> 2020-10-27 20:11:30 +0100
commit: 6a716758871885e5bd045d1981f890dbf3343b1d (patch)
tree: 12ded5d77998b3799fe2d35854de555141d9f814
parent: c609944cb906a2f5002cd86a808aa36d8deb2afd (diff)
download: Shaarli-6a716758871885e5bd045d1981f890dbf3343b1d.tar.gz
Shaarli-6a716758871885e5bd045d1981f890dbf3343b1d.tar.zst
Shaarli-6a716758871885e5bd045d1981f890dbf3343b1d.zip
3 files changed, 50 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) => {
+        forms.forEach((formElement) => {
-          promises.push(sendBookmarkForm(basePath, 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;
diff --git a/tpl/default/editlink.batch.html b/tpl/default/editlink.batch.html
index 71985c1a..b1f8e5bd 100644
--- a/tpl/default/editlink.batch.html
+++ b/tpl/default/editlink.batch.html
@@ -4,6 +4,15 @@
  {include="includes"}
 </head>
 <body>
+<div class="dark-layer">
+  <div class="screen-center">
+    <div><span class="progressbar-current"></span> / <span class="progressbar-max"></span></div>
+    <div class="progressbar">
+      <div></div>
+    </div>
+  </div>
+</div>
 {include="page.header"}
 <div class="center">
author	ArthurHoaro <arthur@hoa.ro>	2020-10-23 12:53:49 +0200
committer	ArthurHoaro <arthur@hoa.ro>	2020-10-27 20:11:30 +0100
commit	6a716758871885e5bd045d1981f890dbf3343b1d (patch)
tree	12ded5d77998b3799fe2d35854de555141d9f814
parent	c609944cb906a2f5002cd86a808aa36d8deb2afd (diff)
download	Shaarli-6a716758871885e5bd045d1981f890dbf3343b1d.tar.gz Shaarli-6a716758871885e5bd045d1981f890dbf3343b1d.tar.zst Shaarli-6a716758871885e5bd045d1981f890dbf3343b1d.zip

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) => {
15	alert(`An error occurred. Return code: ${xhr.status}`);	15	alert(`An error occurred. Return code: ${xhr.status}`);
16	reject();	16	reject();
17	} else {	17	} else {
18	formElement.remove();	18	formElement.closest('.edit-link-container').remove();
19	resolve();	19	resolve();
20	}	20	}
21	};	21	};
@@ -32,7 +32,7 @@ const sendBookmarkDelete = (buttonElement, formElement) => (
32	alert(`An error occurred. Return code: ${xhr.status}`);	32	alert(`An error occurred. Return code: ${xhr.status}`);
33	reject();	33	reject();
34	} else {	34	} else {
35	formElement.remove();	35	formElement.closest('.edit-link-container').remove();
36	resolve();	36	resolve();
37	}	37	}
38	};	38	};
@@ -80,9 +80,23 @@ const redirectIfEmptyBatch = (basePath, formElements, path) => {
80	saveAllButton.addEventListener('click', (e) => {	80	saveAllButton.addEventListener('click', (e) => {
81	e.preventDefault();	81	e.preventDefault();
82		82
		83	const forms = [...getForms()];
		84	const nbForm = forms.length;
		85	let current = 0;
		86	const progressBar = document.querySelector('.progressbar > div');
		87	const progressBarCurrent = document.querySelector('.progressbar-current');
		88
		89	document.querySelector('.dark-layer').style.display = 'block';
		90	document.querySelector('.progressbar-max').innerHTML = nbForm;
		91	progressBarCurrent.innerHTML = current;
		92
83	const promises = [];	93	const promises = [];
84	[...getForms()].forEach((formElement) => {	94	forms.forEach((formElement) => {
85	promises.push(sendBookmarkForm(basePath, formElement));	95	promises.push(sendBookmarkForm(basePath, formElement).then(() => {
		96	current += 1;
		97	progressBar.style.width = `${(current * 100) / nbForm}%`;
		98	progressBarCurrent.innerHTML = current;
		99	}));
86	});	100	});
87		101
88	Promise.all(promises).then(() => {	102	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'] {
1793	}	1793	}
1794	}	1794	}
1795		1795
		1796	.dark-layer {
		1797	display: none;
		1798	position: fixed;
		1799	height: 100%;
		1800	width: 100%;
		1801	z-index: 998;
		1802	background-color: rgba(0, 0, 0, .75);
		1803	color: #fff;
		1804
		1805	.screen-center {
		1806	display: flex;
		1807	flex-direction: column;
		1808	justify-content: center;
		1809	align-items: center;
		1810	text-align: center;
		1811	min-height: 100vh;
		1812	}
		1813
		1814	.progressbar {
		1815	width: 33%;
		1816	}
		1817	}
		1818
1796	.addlink-batch-form-block {	1819	.addlink-batch-form-block {
1797	.pure-alert {	1820	.pure-alert {
1798	margin: 25px 0 0 0;	1821	margin: 25px 0 0 0;


diff --git a/tpl/default/editlink.batch.html b/tpl/default/editlink.batch.html index 71985c1a..b1f8e5bd 100644 --- a/tpl/default/editlink.batch.html +++ b/tpl/default/editlink.batch.html
@@ -4,6 +4,15 @@
4	{include="includes"}	4	{include="includes"}
5	</head>	5	</head>
6	<body>	6	<body>
		7	<div class="dark-layer">
		8	<div class="screen-center">
		9	<div><span class="progressbar-current"></span> / <span class="progressbar-max"></span></div>
		10	<div class="progressbar">
		11	<div></div>
		12	</div>
		13	</div>
		14	</div>
		15
7	{include="page.header"}	16	{include="page.header"}
8		17
9	<div class="center">	18	<div class="center">