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,22 +23,24 @@ export class ModalForm extends ModalButton {
         if (!formPromise) {
             return Promise.reject(t`Form didn't return a promise for submitting`);
         }
-        return formPromise.then(() => {
-            if (this.closeAfterSuccessfulSubmit) {
-                this.open = false;
-                form?.resetForm();
-            }
-            this.loading = false;
-            this.dispatchEvent(
-                new CustomEvent(EVENT_REFRESH, {
-                    bubbles: true,
-                    composed: true,
-                }),
-            );
-        }).catch((exc) => {
-            this.loading = false;
-            throw exc;
-        });
+        return formPromise
+            .then(() => {
+                if (this.closeAfterSuccessfulSubmit) {
+                    this.open = false;
+                    form?.resetForm();
+                }
+                this.loading = false;
+                this.dispatchEvent(
+                    new CustomEvent(EVENT_REFRESH, {
+                        bubbles: true,
+                        composed: true,
+                    }),
+                );
+            })
+            .catch((exc) => {
+                this.loading = false;
+                throw exc;
+            });
     }
 
     renderModalInner(): TemplateResult {