raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-31 21:37:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Don't build inputs, but directly use input checkbox for each option

Browse Source 
way simpler this way.
This commit is contained in:
Jean-Baptiste Bellet
2022-10-04 13:47:57 +02:00
parent e655d5b188
commit 41e696282c
2 changed files with 5 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/multiple_checked_select_component/multiple_checked_select_component.html.haml
View File

@@ -1,4 +1,4 @@
.ofn-drop-down.ofn-drop-down-v2{ data: { controller: "multiple-checked-select", "multiple-checked-select-input-name-value": @name } }
.ofn-drop-down.ofn-drop-down-v2{ data: { controller: "multiple-checked-select" } }
%div.ofn-drop-down-label{ "data-multiple-checked-select-target": "button" }
%span{class: "label"}= t('admin.columns')
%span{ class: "icon-caret-down", "data-multiple-checked-select-target": "caret" }
@@ -8,9 +8,6 @@
%hr
%div.menu_items
- @options.each do |option|
- classes = @selected.include?(option[1]) ? "selected" : ""
%div.menu_item{ class: classes, "data-multiple-checked-select-target": "option", "data-value": option[1], "data-label": option[0] }
%span.check
%span.name
= option[0]
%div{style: "display: none;", "data-multiple-checked-select-target": "inputs"}
%div.menu_item{ "data-multiple-checked-select-target": "option", "data-value": option[1], "data-label": option[0] }
%input{ type: "checkbox", checked: @selected.include?(option[1]), name: "#{@name}[]", value: option[1] }
%label= option[0]

29
app/webpacker/controllers/multiple_checked_select_controller.js
View File

@@ -1,17 +1,10 @@
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["button", "caret", "options", "option", "inputs", "filter"];
static values = { inputName: String };
static targets = ["button", "caret", "options", "option", "filter"];
connect() {
this.buttonTarget.addEventListener("click", this.toggleOptions);
this.optionTargets.forEach((option) => {
option.addEventListener("click", (e) =>
this.selectOption(e, option.dataset.value)
);
});
this.buildInputs();
document.addEventListener("click", this.closeOptions);
this.filterTarget.addEventListener("input", this.filterOptions);
}
@@ -46,24 +39,4 @@ export default class extends Controller {
this.caretTarget.classList.add("icon-caret-down");
}
};
selectOption = (event, value) => {
this.optionTargets
.find((option) => option.dataset.value === value)
.classList.toggle("selected");
this.buildInputs();
};
buildInputs = () => {
this.inputsTarget.innerHTML = "";
this.optionTargets
.filter((option) => option.classList.contains("selected"))
.forEach((option) => {
const input = document.createElement("input");
input.type = "hidden";
input.name = this.inputNameValue + "[]";
input.value = option.dataset.value;
this.inputsTarget.appendChild(input);
});
};
}