From f814f7792cf990dd4a89dbe24aff5ef36af6741a Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 31 Mar 2021 22:27:59 +0200
Subject: [PATCH] web/elements: add ProxyForm to instantiate forms based on
 string type

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/forms/Form.ts      | 14 ++++++----
 web/src/elements/forms/ProxyForm.ts | 41 +++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 web/src/elements/forms/ProxyForm.ts

diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index f7b77ea29..2e4b3cf5a 100644
--- a/web/src/elements/forms/Form.ts
+++ b/web/src/elements/forms/Form.ts
@@ -162,11 +162,7 @@ export class Form<T> extends LitElement {
         </div>`;
     }
 
-    render(): TemplateResult {
-        const rect = this.getBoundingClientRect();
-        if (rect.x + rect.y + rect.width + rect.height === 0) {
-            return html``;
-        }
+    renderVisible(): TemplateResult {
         return html`<iron-form
             @iron-form-presubmit=${(ev: Event) => { this.submit(ev); }}>
             ${this.renderNonFieldErrors()}
@@ -174,4 +170,12 @@ export class Form<T> extends LitElement {
         </iron-form>`;
     }
 
+    render(): TemplateResult {
+        const rect = this.getBoundingClientRect();
+        if (rect.x + rect.y + rect.width + rect.height === 0) {
+            return html``;
+        }
+        return this.renderVisible();
+    }
+
 }
diff --git a/web/src/elements/forms/ProxyForm.ts b/web/src/elements/forms/ProxyForm.ts
new file mode 100644
index 000000000..f571b7637
--- /dev/null
+++ b/web/src/elements/forms/ProxyForm.ts
@@ -0,0 +1,41 @@
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { Form } from "./Form";
+
+@customElement("ak-proxy-form")
+export class ProxyForm extends Form<unknown> {
+
+    @property()
+    type!: string;
+
+    @property({attribute: false})
+    args: Record<string, unknown> = {};
+
+    @property({attribute: false})
+    typeMap: Record<string, string> = {};
+
+    submit(ev: Event): Promise<unknown> | undefined {
+        return (this.shadowRoot?.firstElementChild as Form<unknown>).submit(ev);
+    }
+
+    reset(): void {
+        (this.shadowRoot?.firstElementChild as Form<unknown>).reset();
+    }
+
+    getSuccessMessage(): string {
+        return (this.shadowRoot?.firstElementChild as Form<unknown>).getSuccessMessage();
+    }
+
+    renderVisible(): TemplateResult {
+        let elementName = this.type;
+        if (this.type in this.typeMap) {
+            elementName = this.typeMap[this.type];
+        }
+        const el = document.createElement(elementName);
+        for (const k in this.args) {
+            el.setAttribute(k, this.args[k] as string);
+            (el as unknown as Record<string, unknown>)[k] = this.args[k];
+        }
+        return html`${el}`;
+    }
+
+}