raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-27 01:43:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12050 from cyrillefr/Replace-toggle_button_disabled_controller-with-generic-toggle_control_controller

Browse Source 
Replace toggle_button_disable controller with generic toggle_control controller
This commit is contained in:
Konrad
2024-01-24 16:39:26 +01:00
committed by GitHub
parent ec4bbe6241 ca4aa645f7
commit 5377304190
5 changed files with 38 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/views/checkout/_voucher_section.html.haml
View File

@@ -1,7 +1,7 @@
%div#voucher-section
.checkout-title
= t("checkout.step2.voucher.apply_voucher")
.checkout-input{"data-controller": "toggle-button-disabled"}
.checkout-input{"data-controller": "toggle-control"}
= form_with url: voucher_adjustments_path, model: @order, method: :post, data: { remote: true } do |form|
- if voucher_adjustment.present?
.two-columns-inputs.voucher
@@ -18,8 +18,8 @@
- else
.two-columns-inputs
%div.checkout-input
= form.text_field :voucher_code, value: params.dig(:order, :voucher_code), data: { action: "input->toggle-button-disabled#inputIsChanged" }, placeholder: t("checkout.step2.voucher.placeholder"), class: "voucher"
= form.text_field :voucher_code, value: params.dig(:order, :voucher_code), data: { action: "input->toggle-control#enableIfPresent" }, placeholder: t("checkout.step2.voucher.placeholder"), class: "voucher"
= form.error_message_on :voucher_code
%div.checkout-input
= form.submit t("checkout.step2.voucher.apply"), disabled: true, class: "button cancel voucher-button", "data-disable-with": false, data: { "toggle-button-disabled-target": "button" }
= form.submit t("checkout.step2.voucher.apply"), disabled: true, class: "button cancel voucher-button", "data-disable-with": false, data: { "toggle-control-target": "control" }

24
app/webpacker/controllers/toggle_button_disabled_controller.js
View File

@@ -1,24 +0,0 @@
import { Controller } from "stimulus";
// Since Rails 7 it adds "data-disabled-with" property to submit, you'll need to add
// 'data-disable-with="false' for this to function as expected, ie:
//
// <input id="test-submit" type="submit" data-disable-with="false" data-toggle-button-disabled-target="button"/>
//
export default class extends Controller {
static targets = ["button"];
connect() {
if (this.hasButtonTarget) {
this.buttonTarget.disabled = true;
}
}
inputIsChanged(e) {
if (e.target.value !== "") {
this.buttonTarget.disabled = false;
} else {
this.buttonTarget.disabled = true;
}
}
}

9
app/webpacker/controllers/toggle_control_controller.js
View File

@@ -17,7 +17,14 @@ export default class extends Controller {
}
}
//todo: can a new method disableIfBlank replace ButtonDisabledController?
enableIfPresent(event) {
const input = event.currentTarget;
const enable = !!this.#inputValue(input);
this.controlTargets.forEach((target) => {
target.disabled = !enable;
});
}
//todo: can a new method toggleDisplay replace ToggleController?
//todo: can toggleDisplay with optional chevron-target replace RemoteToggleController?

81
spec/javascripts/stimulus/toggle_button_disabled_controller_test.js
View File

@@ -1,81 +0,0 @@
/**
* @jest-environment jsdom
*/
import { Application } from "stimulus"
import toggle_button_disabled_controller from "../../../app/webpacker/controllers/toggle_button_disabled_controller"
describe("ButtonEnableToggleController", () => {
beforeAll(() => {
const application = Application.start()
application.register("toggle-button-disabled", toggle_button_disabled_controller)
})
beforeEach(() => {
document.body.innerHTML = `
<form id="test-form" data-controller="toggle-button-disabled">
<input id="test-input" type="input" data-action="input->toggle-button-disabled#inputIsChanged" />
<input
id="test-submit"
type="submit"
data-disable-with="false"
data-toggle-button-disabled-target="button"
/>
</form>
`
})
describe("#connect", () => {
it("disables the target submit button", () => {
const submit = document.getElementById("test-submit")
expect(submit.disabled).toBe(true)
})
describe("when no button present", () => {
beforeEach(() => {
document.body.innerHTML = `
<form id="test-form" data-controller="toggle-button-disabled">
<input id="test-input" type="input" data-action="input->toggle-button-disabled#inputIsChanged" />
</form>
`
})
// I am not sure if it's possible to manually trigger the loading/connect of the controller to
// try catch the error, so leaving as this. It will break if the missing target isn't handled
// properly
it("doesn't break", () => {})
})
})
describe("#formIsChanged", () => {
let input
let submit
beforeEach(() => {
input = document.getElementById("test-input")
submit = document.getElementById("test-submit")
})
describe("when the input value is not empty", () => {
it("enables the target button", () => {
input.value = "test"
input.dispatchEvent(new Event("input"));
expect(submit.disabled).toBe(false)
})
})
describe("when the input value is empty", () => {
it("disables the target button", () => {
// setting up state where target button is enabled
input.value = "test"
input.dispatchEvent(new Event("input"));
input.value = ""
input.dispatchEvent(new Event("input"));
expect(submit.disabled).toBe(true)
})
})
})
})

27
spec/javascripts/stimulus/toggle_control_controller_test.js
View File

@@ -61,4 +61,31 @@ describe("ToggleControlController", () => {
});
});
});
describe("#enableIfPresent", () => {
describe("with input", () => {
beforeEach(() => {
document.body.innerHTML = `<div data-controller="toggle-control">
<input id="input" value="" data-action="input->toggle-control#enableIfPresent" />
<input id="control" data-toggle-control-target="control">
</div>`;
});
it("Enables when input is filled", () => {
input.value = "a"
input.dispatchEvent(new Event("input"));
expect(control.disabled).toBe(false);
});
it("Disables when input is emptied", () => {
input.value = "test"
input.dispatchEvent(new Event("input"));
input.value = ""
input.dispatchEvent(new Event("input"));
expect(control.disabled).toBe(true);
});
});
});
});