refactor(dossier): move dossier submit action in to a new form

This commit is contained in:
Paul Chavard 2022-10-11 11:33:09 +02:00
parent dd38fa4458
commit 78a1323fc2
3 changed files with 85 additions and 15 deletions

View file

@ -0,0 +1,61 @@
import { isButtonElement } from '@utils';
import { ApplicationController } from './application_controller';
export class AutosaveSubmitController extends ApplicationController {
#isSaving = false;
#shouldSubmit = true;
#buttonText?: string;
connect(): void {
this.onGlobal('autosave:enqueue', () => this.didEnqueue());
this.onGlobal('autosave:end', () => this.didSucceed());
this.onGlobal('autosave:error', () => this.didFail());
this.on('click', (event) => this.onClick(event));
}
// Intercept form submit if autosave is still in progress
private onClick(event: Event) {
if (this.#isSaving) {
this.#shouldSubmit = true;
this.disableButton();
event.preventDefault();
}
}
private didEnqueue() {
this.#isSaving = true;
this.#shouldSubmit = false;
}
// If submit was previously requested, send it, now that autosave have finished
private didSucceed() {
if (this.#shouldSubmit && isButtonElement(this.element)) {
this.element.form?.requestSubmit(this.element);
}
this.#isSaving = false;
this.#shouldSubmit = false;
this.enableButton();
}
private didFail() {
this.#isSaving = false;
this.#shouldSubmit = false;
this.enableButton();
}
private disableButton() {
if (isButtonElement(this.element)) {
this.#buttonText = this.element.value;
this.element.value = this.element.dataset.disableWith ?? '';
this.element.disabled = true;
}
}
private enableButton() {
if (isButtonElement(this.element) && this.#buttonText) {
this.element.value = this.#buttonText;
this.element.disabled = false;
}
}
}

View file

@ -277,6 +277,16 @@ export function isNumeric(s: string) {
return !isNaN(n) && isFinite(n);
}
export function isButtonElement(
element: Element
): element is HTMLButtonElement {
return (
element.tagName == 'BUTTON' ||
(element.tagName == 'INPUT' &&
(element as HTMLInputElement).type == 'submit')
);
}
export function isSelectElement(
element: HTMLElement
): element is HTMLSelectElement {

View file

@ -47,21 +47,20 @@
= fields_for champ.input_name, champ do |form|
= render EditableChamp::EditableChampComponent.new form: form, champ: champ
- if !dossier.for_procedure_preview?
.dossier-edit-sticky-footer
.send-dossier-actions-bar
= render partial: 'shared/dossiers/autosave', locals: { dossier: dossier }
- if !dossier.for_procedure_preview?
.dossier-edit-sticky-footer
.send-dossier-actions-bar
= render partial: 'shared/dossiers/autosave', locals: { dossier: dossier }
- if dossier.can_transition_to_en_construction?
= f.button t('views.shared.dossiers.edit.submit_dossier'),
name: :submit_draft,
value: true,
class: 'fr-btn fr-btn--sm',
disabled: !current_user.owns?(dossier),
data: { 'disable-with': "Envoi en cours…" }
- if dossier.can_transition_to_en_construction?
= button_to t('views.shared.dossiers.edit.submit_dossier'), brouillon_dossier_url(dossier),
class: 'fr-btn fr-btn--sm',
disabled: !current_user.owns?(dossier),
method: :post,
data: { 'disable-with': "Envoi en cours…", controller: 'autosave-submit' }
- if dossier.brouillon? && !current_user.owns?(dossier)
.send-notice.invite-cannot-submit
En tant quinvité, vous pouvez remplir ce formulaire mais le titulaire du dossier doit le déposer lui-même.
- if dossier.brouillon? && !current_user.owns?(dossier)
.send-notice.invite-cannot-submit
En tant quinvité, vous pouvez remplir ce formulaire mais le titulaire du dossier doit le déposer lui-même.
= render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier }
= render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier }