More utility components

One for a "map" of sorts and one for selecting one element of a list

frontend-reactive/app/components/util/map-edit.hbs

@@ -0,0 +1,27 @@
+<div class="{{@wrapper-classes}}">
+  <ul>
+    {{#each this.args.list as |element index|}}
+      <li>
+        <div class="string-array-element-wrapper">
+          <Input @type="text" @value={{element.key}} />
+          <Input @type="text" @value={{element.value}} />
+          <div
+            class="{{@remove-element-classes}}"
+            type="button"
+            {{on "click" (fn this.removeElement index)}}
+          >
+            X
+          </div>
+        </div>
+      </li>
+    {{/each}}
+
+  </ul>
+  <div
+    class="{{@add-element-classes}}"
+    type="button"
+    {{on "click" this.addElement}}
+  >
+    Add element
+  </div>
+</div>

frontend-reactive/app/components/util/map-edit.ts

@@ -0,0 +1,36 @@
+import MutableArray from '@ember/array/mutable';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export interface UtilMapEditSignature {
+  // The arguments accepted by the component
+  Args: {
+    list: MutableArray<{ key: string; value: string }>;
+    prefix: string;
+    onNewElement: (index: number) => void;
+    onDeleteElement: (index: number) => void;
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class UtilMapEdit extends Component<UtilMapEditSignature> {
+  @action addElement() {
+    MutableArray.apply(this.args.list);
+    this.args.list.pushObject({ key: '', value: '' });
+    if (this.args.onNewElement)
+      this.args.onNewElement(this.args.list.length - 1);
+  }
+
+  @action removeElement(index: number) {
+    MutableArray.apply(this.args.list);
+    //let index = this.args.list.find((elem) => elem == content)
+    //let index = this.listCopy.findIndex((d) => d == content)
+    this.args.list.removeAt(index);
+    if (this.args.onDeleteElement) this.args.onDeleteElement(index);
+  }
+}

frontend-reactive/app/components/util/one-of-array.hbs

@@ -0,0 +1,12 @@
+<div class="{{@wrapper-class}}">
+  {{#each @elements as |element|}}
+    <RadioButton
+      @value="{{element}}"
+      @groupValue={{@selected}}
+      @name={{@name}}
+      @required={{@required}}
+    >
+      {{element}}
+    </RadioButton>
+  {{/each}}
+</div>

frontend-reactive/tests/integration/components/util/map-edit-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/map-edit', 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::MapEdit />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Util::MapEdit>
+        template block text
+      </Util::MapEdit>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});

frontend-reactive/tests/integration/components/util/one-of-array-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/one-of-array', 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::OneOfArray />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Util::OneOfArray>
+        template block text
+      </Util::OneOfArray>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});