From 12bfa404c847b9dbf24675af6f04e46800eb2b17 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 29 Mar 2021 11:57:53 +0200
Subject: [PATCH] web: rudimentary lazy loading for modals

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/buttons/ModalButton.ts         | 5 +++++
 web/src/elements/forms/Form.ts                  | 4 ++++
 web/src/elements/forms/HorizontalFormElement.ts | 8 +-------
 web/src/pages/groups/GroupForm.ts               | 2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts
index 34061b451..a9e6703b2 100644
--- a/web/src/elements/buttons/ModalButton.ts
+++ b/web/src/elements/buttons/ModalButton.ts
@@ -136,6 +136,11 @@ export class ModalButton extends LitElement {
         if (!this.href) {
             this.updateHandlers();
             this.open = true;
+            this.querySelectorAll("*").forEach(child => {
+                if ("requestUpdate" in child) {
+                    (child as LitElement).requestUpdate();
+                }
+            });
         } else {
             const request = new Request(this.href);
             fetch(request, {
diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index 5028579f9..bb7689e7e 100644
--- a/web/src/elements/forms/Form.ts
+++ b/web/src/elements/forms/Form.ts
@@ -100,6 +100,10 @@ export class Form<T> extends LitElement {
     }
 
     render(): 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.renderForm()}
diff --git a/web/src/elements/forms/HorizontalFormElement.ts b/web/src/elements/forms/HorizontalFormElement.ts
index 20c03a174..a38e4e3f5 100644
--- a/web/src/elements/forms/HorizontalFormElement.ts
+++ b/web/src/elements/forms/HorizontalFormElement.ts
@@ -8,12 +8,6 @@ export class HorizontalFormElement extends LitElement {
 
     static get styles(): CSSResult[] {
         return [PFForm, PFFormControl, css`
-            slot {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: space-around;
-            }
             .pf-c-form__group {
                 display: grid;
                 grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
@@ -51,8 +45,8 @@ export class HorizontalFormElement extends LitElement {
                 </label>
             </div>
             <div class="pf-c-form__group-control">
+                <slot class="pf-c-form__horizontal-group"></slot>
                 <div class="pf-c-form__horizontal-group">
-                    <slot></slot>
                     ${this.invalid ? html`<p class="pf-c-form__helper-text pf-m-error" aria-live="polite">${this.errorMessage}</p>` : html``}
                 </div>
             </div>
diff --git a/web/src/pages/groups/GroupForm.ts b/web/src/pages/groups/GroupForm.ts
index 0770351c8..69f87619f 100644
--- a/web/src/pages/groups/GroupForm.ts
+++ b/web/src/pages/groups/GroupForm.ts
@@ -34,7 +34,7 @@ export class GroupForm extends Form<Group> {
             <ak-form-element-horizontal label=${gettext("Name")} ?required=${true}>
                 <input type="text" name="name" value="${ifDefined(this.group?.name)}" class="pf-c-form-control" required="">
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal ?required=${true}>
+            <ak-form-element-horizontal>
                 <div class="pf-c-check">
                     <input type="checkbox" name="is_superuser" class="pf-c-check__input" ?checked=${this.group?.isSuperuser || false}>
                     <label class="pf-c-check__label">