Getting work done. Registration form taking shape

Still needs styling and some more elements, but mostly usable now

frontend-reactive/app/components/util/multiselect.ts

@@ -1,21 +1,21 @@
-import { action } from '@ember/object'
-import Component from '@glimmer/component'
+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 }>
-  }
+    elements: Array<{ name: string; checked: boolean; description: string }>;
+  };
   // Any blocks yielded by the component
   Blocks: {
-    default: []
-  }
+    default: [];
+  };
   // The element to which `...attributes` is applied in the component template
-  Element: null
+  Element: null;
 }
 
 export default class UtilMultiselect extends Component<UtilMultiselectSignature> {
   @action onChange() {
-    console.log(this.args.elements)
+    console.log(this.args.elements);
   }
 }

frontend-reactive/app/components/util/string-array.hbs

@@ -10,8 +10,7 @@
           <div
             class="{{@remove-element-classes}}"
             type="button"
-            id="{{this.args.prefix}}-{{index}}"
-            {{on "click" this.removeElement}}
+            {{on "click" (fn this.removeElement index)}}
           >
             X
           </div>

frontend-reactive/app/components/util/string-array.ts

@@ -1,57 +1,56 @@
-import MutableArray from '@ember/array/mutable'
-import { action } from '@ember/object'
-import Component from '@glimmer/component'
-import { tracked } from '@glimmer/tracking'
+import MutableArray from '@ember/array/mutable';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 
 export interface UtilStringArraySignature {
   // The arguments accepted by the component
   Args: {
-    list: MutableArray<{ value: string }>
-    prefix: string
-  }
+    list: MutableArray<{ value: string }>;
+    prefix: string;
+    onNewElement: (index: number) => void;
+    onDeleteElement: (index: number) => void;
+  };
   // Any blocks yielded by the component
   Blocks: {
-    default: []
-  }
+    default: [];
+  };
   // The element to which `...attributes` is applied in the component template
-  Element: null
+  Element: null;
 }
 
 export default class UtilStringArray extends Component<UtilStringArraySignature> {
   @action addElement() {
-    MutableArray.apply(this.args.list)
-    this.args.list.pushObject({ value: '' })
+    MutableArray.apply(this.args.list);
+    this.args.list.pushObject({ value: '' });
+    if (this.args.onNewElement)
+      this.args.onNewElement(this.args.list.length - 1);
   }
 
-  @action removeElement(event: MouseEvent) {
-    MutableArray.apply(this.args.list)
-    const target = event.target as HTMLDivElement
-    const splits = target.id.split('-', 2)
-    if (splits.length != 2) return
-    const indexStr = splits[1]
-    //console.log('Content: ', indexStr)
-    if (!indexStr) return
+  @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(Number(indexStr))
+    this.args.list.removeAt(index);
+    if (this.args.onDeleteElement) this.args.onDeleteElement(index);
   }
 
   transformArrayIntoUsable(arr: Array<string>): { [key: number]: string } {
-    const out: { [key: number]: string } = {}
+    const out: { [key: number]: string } = {};
     const tmp = arr.map((elem: string, index: number) => {
-      out[index] = elem
-      return elem
-    })
-    return out
+      out[index] = elem;
+      return elem;
+    });
+    return out;
   }
 
   countElemsInObj(obj: any): number {
-    let count = 0
+    let count = 0;
 
-    for (var prop in obj) {
-      if (obj.hasOwnProperty(prop)) ++count
+    for (const prop in obj) {
+      if (obj.hasOwnProperty(prop)) ++count;
     }
 
-    return count
+    return count;
   }
 }