autosave: trigger an autosave after removing a row

This commit is contained in:
Pierre de La Morinerie 2020-08-25 10:10:42 +00:00
parent 96037069ff
commit ecc4f01c20
2 changed files with 20 additions and 5 deletions

View file

@ -1,4 +1,4 @@
import { delegate } from '@utils';
import { delegate, fire } from '@utils';
const CHAMP_SELECTOR = '.editable-champ';
const BUTTON_SELECTOR = '.button.remove-row';
@ -22,4 +22,12 @@ delegate('click', BUTTON_SELECTOR, (evt) => {
evt.target.remove();
row.classList.remove('row');
// We could debounce the autosave request, so that row removal would be batched
// with the next changes.
// However *adding* a new repetition row isn't debounced (changes are immediately
// effective server-side).
// So, to avoid ordering issues, enqueue an autosave request as soon as the row
// is removed.
fire(row, 'autosave:trigger');
});

View file

@ -29,6 +29,17 @@ const FORM_SELECTOR = 'form#dossier-edit-form.autosave-enabled';
const INPUTS_SELECTOR = `${FORM_SELECTOR} input:not([type=file]), ${FORM_SELECTOR} select, ${FORM_SELECTOR} textarea`;
const RETRY_BUTTON_SELECTOR = '.autosave-retry';
// When an autosave is requested programatically, auto-save the form immediately
addEventListener('autosave:trigger', (event) => {
const form = event.target.closest('form');
if (form && form.classList.contains('autosave-enabled')) {
enqueueAutosaveRequest();
}
});
// When the "Retry" button is clicked, auto-save the form immediately
delegate('click', RETRY_BUTTON_SELECTOR, enqueueAutosaveRequest);
// When an input changes, batches changes for N seconds, then auto-save the form
delegate(
'change',
@ -36,10 +47,6 @@ delegate(
debounce(enqueueAutosaveRequest, AUTOSAVE_DEBOUNCE_DELAY)
);
// When the "Retry" button is clicked, auto-save the form immediately
delegate('click', RETRY_BUTTON_SELECTOR, enqueueAutosaveRequest);
//
// Display some UI during the autosave
//