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

@@ -162,11 +162,7 @@ export class Form<T> extends LitElement {
         </div>`;
     }
 
-    render(): TemplateResult {
+    renderVisible(): TemplateResult {
-        const rect = this.getBoundingClientRect();
-        if (rect.x + rect.y + rect.width + rect.height === 0) {
-            return html``;
-        }
         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();
+    }
+
 }

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}`;
+    }
+
+}