demarches-normaliennes/app/javascript/new_design/dossiers/auto-save.js

113 lines
3.2 KiB
JavaScript
Raw Normal View History

import AutoSaveController from './auto-save-controller.js';
2019-11-19 17:55:30 +01:00
import {
debounce,
delegate,
fire,
enable,
disable,
hasClass,
addClass,
removeClass
} from '@utils';
2019-11-19 14:40:28 +01:00
const AUTOSAVE_DEBOUNCE_DELAY = gon.autosave.debounce_delay;
const AUTOSAVE_STATUS_VISIBLE_DURATION = gon.autosave.status_visible_duration;
2019-11-19 17:55:30 +01:00
2019-11-19 14:40:28 +01:00
// Create a controller responsible for queuing autosave operations.
const autoSaveController = new AutoSaveController();
2019-11-19 17:55:30 +01:00
function enqueueAutosaveRequest() {
const form = document.querySelector(FORM_SELECTOR);
autoSaveController.enqueueAutosaveRequest(form);
}
//
2019-11-19 17:55:30 +01:00
// Whenever a 'change' event is triggered on one of the form inputs, try to autosave.
//
2019-11-19 17:55:30 +01:00
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';
2019-11-19 17:55:30 +01:00
// When an autosave is requested programmatically, 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
2019-11-19 17:55:30 +01:00
delegate(
'change',
INPUTS_SELECTOR,
debounce(enqueueAutosaveRequest, AUTOSAVE_DEBOUNCE_DELAY)
2019-11-19 17:55:30 +01:00
);
//
2019-11-19 17:55:30 +01:00
// Display some UI during the autosave
//
2019-11-19 17:55:30 +01:00
addEventListener('autosave:enqueue', () => {
disable(document.querySelector('button.autosave-retry'));
});
addEventListener('autosave:end', () => {
enable(document.querySelector('button.autosave-retry'));
setState('succeeded');
hideSucceededStatusAfterDelay();
});
2020-04-30 15:42:29 +02:00
addEventListener('autosave:error', (event) => {
let error = event.detail;
if (error.xhr && error.xhr.status == 401) {
// If we are unauthenticated, reload the page using a GET request.
// This will allow Devise to properly redirect us to sign-in, and then back to this page.
document.location.reload();
return;
}
2019-11-19 17:55:30 +01:00
enable(document.querySelector('button.autosave-retry'));
setState('failed');
const shouldLogError = !error.xhr || error.xhr.status != 0; // ignore timeout errors
if (shouldLogError) {
logError(error);
}
2019-11-19 17:55:30 +01:00
});
function setState(state) {
const autosave = document.querySelector('.autosave');
if (autosave) {
// Re-apply the state even if already present, to get a nice animation
removeClass(autosave, 'autosave-state-idle');
removeClass(autosave, 'autosave-state-succeeded');
removeClass(autosave, 'autosave-state-failed');
autosave.offsetHeight; // flush animations
addClass(autosave, `autosave-state-${state}`);
}
}
function hideSucceededStatus() {
const autosave = document.querySelector('.autosave');
if (hasClass(autosave, 'autosave-state-succeeded')) {
setState('idle');
}
}
const hideSucceededStatusAfterDelay = debounce(
hideSucceededStatus,
AUTOSAVE_STATUS_VISIBLE_DURATION
);
function logError(error) {
if (error && error.message) {
error.message = `[Autosave] ${error.message}`;
console.error(error);
fire(document, 'sentry:capture-exception', error);
}
}