Merge pull request #8428 from tchak/refactor-more-autosave
refactor(js): more forms to use autosubmit controller
This commit is contained in:
commit
ab9f269c06
3 changed files with 37 additions and 17 deletions
|
@ -1,4 +1,5 @@
|
||||||
import { show, hide } from '@utils';
|
import { show, hide } from '@utils';
|
||||||
|
import { session as TurboSession } from '@hotwired/turbo';
|
||||||
|
|
||||||
import { ApplicationController } from './application_controller';
|
import { ApplicationController } from './application_controller';
|
||||||
|
|
||||||
|
@ -8,16 +9,34 @@ export class TurboController extends ApplicationController {
|
||||||
declare readonly spinnerTarget: HTMLElement;
|
declare readonly spinnerTarget: HTMLElement;
|
||||||
declare readonly hasSpinnerTarget: boolean;
|
declare readonly hasSpinnerTarget: boolean;
|
||||||
|
|
||||||
|
#submitting = true;
|
||||||
|
|
||||||
connect() {
|
connect() {
|
||||||
this.onGlobal('turbo:submit-start', () => {
|
this.onGlobal('turbo:submit-start', () => this.startSpinner());
|
||||||
if (this.hasSpinnerTarget) {
|
this.onGlobal('turbo:submit-end', () => this.stopSpinner());
|
||||||
show(this.spinnerTarget);
|
this.onGlobal('turbo:fetch-request-error', () => this.stopSpinner());
|
||||||
}
|
|
||||||
});
|
// prevent scroll on turbo form submits
|
||||||
this.onGlobal('turbo:submit-end', () => {
|
this.onGlobal('turbo:render', () => this.preventScrollIfNeeded());
|
||||||
if (this.hasSpinnerTarget) {
|
}
|
||||||
hide(this.spinnerTarget);
|
|
||||||
}
|
startSpinner() {
|
||||||
});
|
this.#submitting = true;
|
||||||
|
if (this.hasSpinnerTarget) {
|
||||||
|
show(this.spinnerTarget);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stopSpinner() {
|
||||||
|
this.#submitting = false;
|
||||||
|
if (this.hasSpinnerTarget) {
|
||||||
|
hide(this.spinnerTarget);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
preventScrollIfNeeded() {
|
||||||
|
if (this.#submitting && TurboSession.navigator.currentVisit) {
|
||||||
|
TurboSession.navigator.currentVisit.scrolled = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,8 +15,8 @@
|
||||||
method: :put,
|
method: :put,
|
||||||
url: allow_expert_review_admin_procedure_path(@procedure),
|
url: allow_expert_review_admin_procedure_path(@procedure),
|
||||||
html: { class: 'form procedure-form__column--form no-background' } do |f|
|
html: { class: 'form procedure-form__column--form no-background' } do |f|
|
||||||
%label.toggle-switch
|
%label.toggle-switch{ data: { controller: 'autosubmit' } }
|
||||||
= f.check_box :allow_expert_review, class: 'toggle-switch-checkbox', onchange: 'this.form.requestSubmit()'
|
= f.check_box :allow_expert_review, class: 'toggle-switch-checkbox'
|
||||||
%span.toggle-switch-control.round
|
%span.toggle-switch-control.round
|
||||||
%span.toggle-switch-label.on
|
%span.toggle-switch-label.on
|
||||||
%span.toggle-switch-label.off
|
%span.toggle-switch-label.off
|
||||||
|
@ -29,8 +29,8 @@
|
||||||
method: :put,
|
method: :put,
|
||||||
url: experts_require_administrateur_invitation_admin_procedure_path(@procedure),
|
url: experts_require_administrateur_invitation_admin_procedure_path(@procedure),
|
||||||
html: { class: 'form procedure-form__column--form no-background' } do |f|
|
html: { class: 'form procedure-form__column--form no-background' } do |f|
|
||||||
%label.toggle-switch
|
%label.toggle-switch{ data: { controller: 'autosubmit' } }
|
||||||
= f.check_box :experts_require_administrateur_invitation, class: 'toggle-switch-checkbox', onchange: 'this.form.requestSubmit()'
|
= f.check_box :experts_require_administrateur_invitation, class: 'toggle-switch-checkbox'
|
||||||
%span.toggle-switch-control.round
|
%span.toggle-switch-control.round
|
||||||
%span.toggle-switch-label.on
|
%span.toggle-switch-label.on
|
||||||
%span.toggle-switch-label.off
|
%span.toggle-switch-label.off
|
||||||
|
@ -79,8 +79,8 @@
|
||||||
method: :put,
|
method: :put,
|
||||||
data: { turbo: true },
|
data: { turbo: true },
|
||||||
html: { class: 'form procedure-form__column--form no-background' } do |f|
|
html: { class: 'form procedure-form__column--form no-background' } do |f|
|
||||||
%label.toggle-switch
|
%label.toggle-switch{ data: { controller: 'autosubmit' } }
|
||||||
= f.check_box :allow_decision_access, class: 'toggle-switch-checkbox', onchange: 'this.form.requestSubmit()'
|
= f.check_box :allow_decision_access, class: 'toggle-switch-checkbox'
|
||||||
%span.toggle-switch-control.round
|
%span.toggle-switch-control.round
|
||||||
%span.toggle-switch-label.on
|
%span.toggle-switch-label.on
|
||||||
%span.toggle-switch-label.off
|
%span.toggle-switch-label.off
|
||||||
|
|
|
@ -5,9 +5,10 @@
|
||||||
= form_for procedure,
|
= form_for procedure,
|
||||||
method: :patch,
|
method: :patch,
|
||||||
url: update_instructeurs_self_management_enabled_admin_procedure_groupe_instructeurs_path(procedure),
|
url: update_instructeurs_self_management_enabled_admin_procedure_groupe_instructeurs_path(procedure),
|
||||||
|
data: { controller: 'autosubmit', turbo: 'true' },
|
||||||
html: { class: 'form procedure-form__column--form no-background' } do |f|
|
html: { class: 'form procedure-form__column--form no-background' } do |f|
|
||||||
%label.toggle-switch
|
%label.toggle-switch
|
||||||
= f.check_box :instructeurs_self_management_enabled, class: 'toggle-switch-checkbox', onchange: 'this.form.submit()'
|
= f.check_box :instructeurs_self_management_enabled, class: 'toggle-switch-checkbox'
|
||||||
%span.toggle-switch-control.round
|
%span.toggle-switch-control.round
|
||||||
%span.toggle-switch-label.on
|
%span.toggle-switch-label.on
|
||||||
%span.toggle-switch-label.off
|
%span.toggle-switch-label.off
|
||||||
|
|
Loading…
Add table
Reference in a new issue