DEV: Create wizard-field-checkboxes component (#9333)
diff --git a/app/assets/javascripts/wizard/components/wizard-field-checkboxes.js b/app/assets/javascripts/wizard/components/wizard-field-checkboxes.js
new file mode 100644
index 0000000..8c814f5
--- /dev/null
+++ b/app/assets/javascripts/wizard/components/wizard-field-checkboxes.js
@@ -0,0 +1,33 @@
+import Component from "@ember/component";
+import { set } from "@ember/object";
+
+export default Component.extend({
+ init(...args) {
+ this._super(...args);
+ this.set("field.value", this.field.value || []);
+
+ for (let choice of this.field.choices) {
+ if (this.field.value.includes(choice.id)) {
+ set(choice, "checked", true);
+ }
+ }
+ },
+ actions: {
+ changed(checkbox) {
+ let newFieldValue = this.field.value;
+ const checkboxValue = checkbox.parentElement
+ .getAttribute("value")
+ .toLowerCase();
+
+ if (checkbox.checked) {
+ newFieldValue.push(checkboxValue);
+ } else {
+ const index = newFieldValue.indexOf(checkboxValue);
+ if (index > -1) {
+ newFieldValue.splice(index, 1);
+ }
+ }
+ this.set("field.value", newFieldValue);
+ }
+ }
+});
diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field-checkboxes.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field-checkboxes.hbs
new file mode 100644
index 0000000..25aeadb
--- /dev/null
+++ b/app/assets/javascripts/wizard/templates/components/wizard-field-checkboxes.hbs
@@ -0,0 +1,11 @@
+{{#each field.choices as |c|}}
+ <div class="checkbox-field-choice {{fieldClass}}">
+ <label id={{c.id}} value={{c.label}}>
+ {{input type="checkbox"
+ class="wizard-checkbox"
+ click=(action "changed" value="target")
+ checked=c.checked}}
+ {{c.label}}
+ </label>
+ </div>
+{{/each}}
GitHub sha: 65d9a9c1