web/elements: add support for dot-notation in input names

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/forms/Form.ts

@@ -140,13 +140,33 @@ export class Form<T> extends LitElement {
                 json[element.name] = element.checked;
             } else {
                 for (let v = 0; v < values.length; v++) {
-                    form._addSerializedElement(json, element.name, values[v]);
+                    this.serializeFieldRecursive(element, values[v], json);
                 }
             }
         });
         return json as unknown as T;
     }
 
+    private serializeFieldRecursive(
+        element: HTMLInputElement,
+        value: unknown,
+        json: { [key: string]: unknown },
+    ): void {
+        let parent = json;
+        if (!element.name.includes(".")) {
+            parent[element.name] = value;
+            return;
+        }
+        const nameElements = element.name.split(".");
+        for (let index = 0; index < nameElements.length - 1; index++) {
+            const nameEl = nameElements[index];
+            // Ensure all nested structures exist
+            if (!(nameEl in parent)) parent[nameEl] = {};
+            parent = parent[nameEl] as { [key: string]: unknown };
+        }
+        parent[nameElements[nameElements.length - 1]] = value;
+    }
+
     submit(ev: Event): Promise<unknown> | undefined {
         ev.preventDefault();
         const ironForm = this.shadowRoot?.querySelector("iron-form");

web/src/elements/forms/ModalForm.ts

@@ -23,7 +23,8 @@ export class ModalForm extends ModalButton {
         if (!formPromise) {
             return Promise.reject(t`Form didn't return a promise for submitting`);
         }
-        return formPromise.then(() => {
+        return formPromise
+            .then(() => {
                 if (this.closeAfterSuccessfulSubmit) {
                     this.open = false;
                     form?.resetForm();
@@ -35,7 +36,8 @@ export class ModalForm extends ModalButton {
                         composed: true,
                     }),
                 );
-        }).catch((exc) => {
+            })
+            .catch((exc) => {
                 this.loading = false;
                 throw exc;
             });