Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
ArthurHoaro 2020-10-23 12:53:49 +02:00
parent c609944cb9
commit 6a71675887
3 changed files with 50 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/common/js/shaare-batch.js
View file

@ -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(() => {

23
assets/default/scss/shaarli.scss
View file

@ -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;

9
tpl/default/editlink.batch.html
View file

@ -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">