From 07614e9a6ddb92316166ef748972eef9d90f080c Mon Sep 17 00:00:00 2001
From: mStar <me@mstar.dev>
Date: Fri, 25 Oct 2024 10:52:43 +0200
Subject: [PATCH] Add checkbox based multiselect util component

Takes an array of objects (name, checked, description) and turns it into
a list of checkboxes, one for each element
---
 .../app/components/util/multiselect.hbs       | 13 ++++++++++
 .../app/components/util/multiselect.ts        | 21 +++++++++++++++
 .../components/util/multiselect-test.ts       | 26 +++++++++++++++++++
 3 files changed, 60 insertions(+)
 create mode 100644 frontend-reactive/app/components/util/multiselect.hbs
 create mode 100644 frontend-reactive/app/components/util/multiselect.ts
 create mode 100644 frontend-reactive/tests/integration/components/util/multiselect-test.ts

diff --git a/frontend-reactive/app/components/util/multiselect.hbs b/frontend-reactive/app/components/util/multiselect.hbs
new file mode 100644
index 0000000..b8b9a16
--- /dev/null
+++ b/frontend-reactive/app/components/util/multiselect.hbs
@@ -0,0 +1,13 @@
+<div class={{@wrapper-class}}>
+  {{#each this.args.elements as |element|}}
+    <label class={{@label-class}}>
+      {{element.description}}
+      <Input
+        @type="checkbox"
+        name="{{element.name}}"
+        @checked={{element.checked}}
+        {{on "change" this.onChange}}
+      />
+    </label>
+  {{/each}}
+</div>
\ No newline at end of file
diff --git a/frontend-reactive/app/components/util/multiselect.ts b/frontend-reactive/app/components/util/multiselect.ts
new file mode 100644
index 0000000..99109a8
--- /dev/null
+++ b/frontend-reactive/app/components/util/multiselect.ts
@@ -0,0 +1,21 @@
+import { action } from '@ember/object'
+import Component from '@glimmer/component'
+
+export interface UtilMultiselectSignature {
+  // The arguments accepted by the component
+  Args: {
+    elements: Array<{ name: string; checked: boolean; description: string }>
+  }
+  // Any blocks yielded by the component
+  Blocks: {
+    default: []
+  }
+  // The element to which `...attributes` is applied in the component template
+  Element: null
+}
+
+export default class UtilMultiselect extends Component<UtilMultiselectSignature> {
+  @action onChange() {
+    console.log(this.args.elements)
+  }
+}
diff --git a/frontend-reactive/tests/integration/components/util/multiselect-test.ts b/frontend-reactive/tests/integration/components/util/multiselect-test.ts
new file mode 100644
index 0000000..d900837
--- /dev/null
+++ b/frontend-reactive/tests/integration/components/util/multiselect-test.ts
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | util/multiselect', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Util::Multiselect />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Util::Multiselect>
+        template block text
+      </Util::Multiselect>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});