From ecc4f01c20068dd0df83f7884963624517544b52 Mon Sep 17 00:00:00 2001 From: Pierre de La Morinerie Date: Tue, 25 Aug 2020 10:10:42 +0000 Subject: [PATCH] autosave: trigger an autosave after removing a row --- app/javascript/new_design/champs/repetition.js | 10 +++++++++- app/javascript/new_design/dossiers/auto-save.js | 15 +++++++++++---- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/app/javascript/new_design/champs/repetition.js b/app/javascript/new_design/champs/repetition.js index 1fd0a1840..3fb740666 100644 --- a/app/javascript/new_design/champs/repetition.js +++ b/app/javascript/new_design/champs/repetition.js @@ -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'); }); diff --git a/app/javascript/new_design/dossiers/auto-save.js b/app/javascript/new_design/dossiers/auto-save.js index 1d33b323f..1b4b9185c 100644 --- a/app/javascript/new_design/dossiers/auto-save.js +++ b/app/javascript/new_design/dossiers/auto-save.js @@ -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 //