diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml index 4ead12827c4..de11e81e89f 100644 --- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml +++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml @@ -1,4 +1,4 @@ -.autosave.autosave-state-idle{ data: { controller: 'autosave-status' } } +.autosave.autosave-state-idle{ 'tabindex': '-1', data: { controller: 'autosave-status' } } %p.autosave-explanation.fr-text--sm.fr-mb-0 %span.autosave-explanation-text - if annotation? diff --git a/app/javascript/controllers/autosave_status_controller.ts b/app/javascript/controllers/autosave_status_controller.ts index 2e9289949d4..d51f69a0ef2 100644 --- a/app/javascript/controllers/autosave_status_controller.ts +++ b/app/javascript/controllers/autosave_status_controller.ts @@ -27,6 +27,7 @@ export class AutosaveStatusController extends ApplicationController { connect(): void { this.onGlobal('autosave:enqueue', () => this.didEnqueue()); this.onGlobal('autosave:end', () => this.didSucceed()); + this.onGlobal('autosave:retry', () => this.didRetry()); this.onGlobal('autosave:error', (event) => this.didFail(event) ); @@ -55,6 +56,14 @@ export class AutosaveStatusController extends ApplicationController { disable(this.retryButtonTarget); } + private didRetry() { + const autosave = this.element as HTMLDivElement; + // We move focus to the success (or error) message of automatic saving + setTimeout(() => { + autosave.focus(); + }, 2000); + } + private didSucceed() { enable(this.retryButtonTarget); this.setState('succeeded'); @@ -74,6 +83,12 @@ export class AutosaveStatusController extends ApplicationController { enable(this.retryButtonTarget); this.setState('failed'); + const autosave = this.element as HTMLDivElement; + // We move focus to the error message of automatic saving + setTimeout(() => { + autosave.focus(); + }, 2000); + const shouldLogError = !error.response || error.response.status != 0; // ignore timeout errors if (shouldLogError) { this.logError(error); diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml index b186a775d91..cbaa5aab74c 100644 --- a/app/views/shared/dossiers/_edit.html.haml +++ b/app/views/shared/dossiers/_edit.html.haml @@ -15,7 +15,11 @@ %strong = t('utils.asterisk_html') - if dossier.brouillon? + %br = t('views.shared.dossiers.edit.autosave') + - if dossier.en_construction? + %br + = t('views.shared.dossiers.edit.autosave_submit') = render Procedure::NoticeComponent.new(procedure: dossier.procedure) diff --git a/config/locales/en.yml b/config/locales/en.yml index df49f2e10d4..a48d76fca47 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -383,6 +383,7 @@ en: closed_at: "Closed on %{datetime}" edit: autosave: Your file is automatically saved after each modification. You can close the window at any time and pick up where you left off later. + autosave_submit: Your file is automatically saved. Submit it when you are finished. messages: form: send_message: "Send message" diff --git a/config/locales/fr.yml b/config/locales/fr.yml index e342ed6c47e..2390bab1304 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -388,6 +388,7 @@ fr: download_attestation: "Télécharger l’attestation" edit: autosave: Votre dossier est enregistré automatiquement après chaque modification. Vous pouvez à tout moment fermer la fenêtre et reprendre plus tard là où vous en étiez. + autosave_submit: Vos modifications sont automatiquement enregistrées. Déposez-les quand vous aurez terminé. messages: form: send_message: "Envoyer le message"