aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2020-10-23 12:53:49 +0200
committerArthurHoaro <arthur@hoa.ro>2020-10-27 20:11:30 +0100
commit6a716758871885e5bd045d1981f890dbf3343b1d (patch)
tree12ded5d77998b3799fe2d35854de555141d9f814
parentc609944cb906a2f5002cd86a808aa36d8deb2afd (diff)
downloadShaarli-6a716758871885e5bd045d1981f890dbf3343b1d.tar.gz
Shaarli-6a716758871885e5bd045d1981f890dbf3343b1d.tar.zst
Shaarli-6a716758871885e5bd045d1981f890dbf3343b1d.zip
Bulk creation: displays a progress bar when saving all displayed forms
-rw-r--r--assets/common/js/shaare-batch.js22
-rw-r--r--assets/default/scss/shaarli.scss23
-rw-r--r--tpl/default/editlink.batch.html9
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) => {
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">