raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-04-05 07:19:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

UnsavedChangesController, automatically add onChange event handler to form elements

Browse Source
This commit is contained in:
Gaetan Craig-Riou
2023-02-15 10:30:52 +11:00
parent fd278e0086
commit 75ed68c9cb
3 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/views/admin/order_cycles/checkout_options.html.haml
View File

@@ -4,7 +4,6 @@
= t :edit_order_cycle
= form_for [main_app, :admin, @order_cycle], html: { class: "order_cycle" , data: { controller: 'unsaved-changes', action: 'unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage', 'unsaved-changes-changed': "false" } } do |f|
= render 'wizard_progress'
%fieldset.no-border-bottom
@@ -26,7 +25,7 @@
%td.text-center
- if distributor_shipping_methods.many?
%label
= check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll change->unsaved-changes#formIsChanged", "data-select-all-target": "all" }
= check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll", "data-select-all-target": "all" }
= t(".select_all")
%td
%em= distributor.name
@@ -37,7 +36,7 @@
distributor_shipping_method.id,
@order_cycle.distributor_shipping_methods.include?(distributor_shipping_method),
id: "order_cycle_selected_distributor_shipping_method_ids_#{distributor_shipping_method.id}",
data: ({ "action" => "change->select-all#toggleCheckbox change->unsaved-changes#formIsChanged", "select-all-target" => "checkbox" } if distributor_shipping_method.shipping_method.frontend?)
data: ({ "action" => "change->select-all#toggleCheckbox", "select-all-target" => "checkbox" } if distributor_shipping_method.shipping_method.frontend?)
= distributor_shipping_method.shipping_method.name
- distributor.shipping_methods.backend.each do |shipping_method|
%label.disabled
@@ -57,7 +56,7 @@
%td.text-center
- if distributor_payment_methods.many?
%label
= check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll change->unsaved-changes#formIsChanged", "data-select-all-target": "all" }
= check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll", "data-select-all-target": "all" }
= t(".select_all")
%td
%em= distributor.name
@@ -68,7 +67,7 @@
distributor_payment_method.id,
@order_cycle.distributor_payment_methods.include?(distributor_payment_method),
id: "order_cycle_selected_distributor_payment_method_ids_#{distributor_payment_method.id}",
data: ({ "action" => "change->select-all#toggleCheckbox change->unsaved-changes#formIsChanged", "select-all-target" => "checkbox" } if distributor_payment_method.payment_method.frontend?)
data: ({ "action" => "change->select-all#toggleCheckbox", "select-all-target" => "checkbox" } if distributor_payment_method.payment_method.frontend?)
= distributor_payment_method.payment_method.name
- distributor.payment_methods.inactive_or_backend.each do |payment_method|
%label.disabled

15
app/webpacker/controllers/unsaved_changes_controller.js
View File

@@ -21,20 +21,25 @@ import { Controller } from "stimulus";
// <input data-action="change->unsaved-changes#formIsChanged" />
// </form>
//
// You can also combine the two event trigger ie :
// You can also combine the two event trigger ie :
// <form
// data-controller="unsaved-changes"
// data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage"
// data-unsaved-changes-changed="true"
// >
// You then need to add 'data-action="change->unsaved-changes#formIsChanged"' on all the form element
// that can be interacted with
//
// Optional, you can add 'data-unsaved-changes-changed="true"' if you want to disable all
// submit buttons when the form hasn't been interacted with
//
export default class extends Controller {
connect() {
// add onChange event to all form element
this.element
.querySelectorAll("input, select, textarea")
.forEach((input) => {
input.addEventListener("change", this.formIsChanged.bind(this));
});
// disable submit button when first loading the page
if (!this.isFormChanged() && this.isSubmitButtonDisabled()) {
this.disableButtons();
@@ -77,8 +82,8 @@ export default class extends Controller {
}
submit(event) {
// if we are submitting the form, we don't want to trigger a warning so set changed to false
this.setChanged("false")
// if we are submitting the form, we don't want to trigger a warning so set changed to false
this.setChanged("false");
}
setChanged(changed) {

6
spec/javascripts/stimulus/unsaved_changes_controller_test.js
View File

@@ -19,7 +19,7 @@ describe("UnsavedChangesController", () => {
data-action="unsaved-changes#submit beforeunload@window->unsaved-changes#leavingPage turbolinks:before-visit@window->unsaved-changes#leavingPage"
data-unsaved-changes-changed="false"
>
<input id="test-checkbox" type="checkbox" data-action="change->unsaved-changes#formIsChanged"/>
<input id="test-checkbox" type="checkbox" />
<input id="test-submit" type="submit"/>
</form>
`
@@ -36,7 +36,7 @@ describe("UnsavedChangesController", () => {
data-unsaved-changes-changed="false"
data-unsaved-changes-disable-submit-button="true"
>
<input id="test-checkbox" type="checkbox" data-action="change->unsaved-changes#formIsChanged"/>
<input id="test-checkbox" type="checkbox" />
<input id="test-submit" type="submit"/>
</form>
`
@@ -59,7 +59,7 @@ describe("UnsavedChangesController", () => {
data-unsaved-changes-changed="false"
data-unsaved-changes-disable-submit-button="false"
>
<input id="test-checkbox" type="checkbox" data-action="change->unsaved-changes#formIsChanged"/>
<input id="test-checkbox" type="checkbox" />
<input id="test-submit" type="submit"/>
</form>
`