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

Handle when input is already checked

Browse Source 
ie. user hasn't click on anything
This commit is contained in:
Jean-Baptiste Bellet
2021-12-16 12:25:28 +01:00
parent 6ef7256295
commit 7b6aa99de2
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/views/split_checkout/_payment.html.haml
View File

@@ -11,7 +11,8 @@
name: "order[payments_attributes][][payment_method_id]",
checked: (payment_method.id == selected_payment_method),
"data-action": "paymentmethod#selectPaymentMethod",
"data-paymentmethod-id": "paymentmethod#{payment_method.id}"
"data-paymentmethod-id": "paymentmethod#{payment_method.id}",
"data-paymentmethod-target": "input"
= f.label :payment_method_id, "#{payment_method.name} (#{payment_or_shipping_price(payment_method, @order)})", for: "payment_method_#{payment_method.id}"
= f.error_message_on :payment_method, standalone: true

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

@@ -1,9 +1,20 @@
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["paymentMethod"];
static targets = ["input"];
connect() {
this.inputTargets.forEach((i) => {
if (i.checked) {
this.doSelectPaymentMethod(i.dataset.paymentmethodId);
}
});
}
selectPaymentMethod(event) {
const paymentMethodContainerId = event.target.dataset.paymentmethodId;
this.doSelectPaymentMethod(event.target.dataset.paymentmethodId);
}
doSelectPaymentMethod(paymentMethodContainerId) {
Array.from(
document.getElementsByClassName("paymentmethod-container")
).forEach((e) => {

12
spec/javascripts/stimulus/paymentmethod_controller_test.js
View File

@@ -9,23 +9,23 @@ describe("PaymentmethodController", () => {
describe("#selectPaymentMethod", () => {
beforeEach(() => {
document.body.innerHTML = `<div data-controller="paymentmethod">
<span id="paymentmethod_1" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod1" />
<span id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" />
<span id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" />
<input id="paymentmethod_1" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod1" data-paymentmethod-target="input" />
<input id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" data-paymentmethod-target="input" checked="checked" />
<input id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" data-paymentmethod-target="input"/>
<div class="paymentmethod-container" style="display: none;" id="paymentmethod1">
<div class="paymentmethod-container" id="paymentmethod1">
<input type="number" required id="input1" />
<select id="select1" >
<option value="1">1</option>
</select>
</div>
<div class="paymentmethod-container" style="display: block;" id="paymentmethod2">
<div class="paymentmethod-container" id="paymentmethod2">
<input type="number" required="true" id="input2" />
<select id="select2" >
<option value="1">1</option>
</select>
</div>
<div class="paymentmethod-container" style="display: none;" id="paymentmethod3">
<div class="paymentmethod-container" id="paymentmethod3">
<input type="number" id="input3" />
<select id="select3" >
<option value="1">1</option>