static: add refresh button, ensure forms in modal work correctly

closes #262

passbook/admin/templates/administration/application/list.html

@@ -20,7 +20,15 @@
             <div class="pf-c-toolbar__content">
                 {% include 'partials/toolbar_search.html' %}
                 <div class="pf-c-toolbar__bulk-select">
-                    <a href="{% url 'passbook_admin:application-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                    <pb-modal-button href="{% url 'passbook_admin:application-create' %}">
+                        <button slot="trigger" class="pf-c-button pf-m-primary">
+                            {% trans 'Create' %}
+                        </button>
+                        <div slot="modal"></div>
+                    </pb-modal-button>
+                    <button role="pb-refresh" class="pf-c-button pf-m-primary">
+                        {% trans 'Refresh' %}
+                    </button>
                 </div>
                 {% include 'partials/pagination.html' %}
             </div>
@@ -29,6 +37,7 @@
             <thead>
                 <tr role="row">
                     <th role="columnheader" scope="col">{% trans 'Name' %}</th>
+                    <th role="columnheader" scope="col">{% trans 'Slug' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Provider' %}</th>
                     <th role="columnheader" scope="col">{% trans 'Provider Type' %}</th>
                     <th role="cell"></th>
@@ -45,6 +54,9 @@
                             {% endif %}
                         </div>
                     </th>
+                    <td role="cell">
+                        <code>{{ application.slug }}</span>
+                    </td>
                     <td role="cell">
                         <span>
                             {{ application.get_provider }}
@@ -56,13 +68,13 @@
                         </span>
                     </td>
                     <td>
-                        <pb-modal-button href="{% url 'passbook_admin:application-update' pk=application.pk %}?back={{ request.get_full_path }}">
+                        <pb-modal-button href="{% url 'passbook_admin:application-update' pk=application.pk %}">
                             <button slot="trigger" class="pf-c-button pf-m-secondary">
                                 {% trans 'Edit' %}
                             </button>
                             <div slot="modal"></div>
                         </pb-modal-button>
-                        <pb-modal-button href="{% url 'passbook_admin:application-delete' pk=application.pk %}?back={{ request.get_full_path }}">
+                        <pb-modal-button href="{% url 'passbook_admin:application-delete' pk=application.pk %}">
                             <button slot="trigger" class="pf-c-button pf-m-danger">
                                 {% trans 'Delete' %}
                             </button>
@@ -95,7 +107,12 @@
                     {% trans 'Currently no applications exist. Click the button below to create one.' %}
                 {% endif %}
                 </div>
-                <a href="{% url 'passbook_admin:application-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
+                <pb-modal-button href="{% url 'passbook_admin:application-create' %}">
+                    <button slot="trigger" class="pf-c-button pf-m-primary">
+                        {% trans 'Create' %}
+                    </button>
+                    <div slot="modal"></div>
+                </pb-modal-button>
             </div>
         </div>
         {% endif %}

passbook/static/static/src/AdminSiteShell.ts

@@ -47,6 +47,7 @@ export class AdminSiteShell extends LitElement {
         fetch(url).then(r => r.text()).then((t) => {
             this.querySelector("[slot=body]")!.innerHTML = t;
         }).then(() => {
+            // Ensure anchors only change the hash
             this.querySelectorAll("a").forEach(a => {
                 if (a.href === "") {
                     return;
@@ -59,6 +60,12 @@ export class AdminSiteShell extends LitElement {
                     a.href = `#${a.href}`;
                 }
             });
+            // Create refresh buttons
+            this.querySelectorAll("[role=pb-refresh]").forEach(rt => {
+                rt.addEventListener("click", e => {
+                    this.loadContent();
+                });
+            });
             this.loading = false;
         });
     }

passbook/static/static/src/FlowShellCard.ts

@@ -19,7 +19,7 @@ export class FlowShellCard extends LitElement {
     flowBodyUrl: string = "";
 
     @property()
-    flowBody?: string = undefined;
+    flowBody?: string;
 
     createRenderRoot() {
         return this;

passbook/static/static/src/ModalButton.ts

@@ -5,6 +5,7 @@ import ModalBoxStyle from "@patternfly/patternfly/components/ModalBox/modal-box.
 import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
 // @ts-ignore
 import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css";
+import { updateMessages } from "./Messages";
 
 const PRIMARY_CLASS = "pf-m-primary";
 const SUCCESS_CLASS = "pf-m-success";
@@ -24,6 +25,41 @@ export class ModalButton extends LitElement {
         return [ModalBoxStyle, BullseyeStyle, BackdropStyle]
     }
 
+    setContent(content: string) {
+        this.querySelector("[slot=modal]")!.innerHTML = content;
+        // Ensure links close the modal
+        this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach(a => {
+            // Make click on a close the modal
+            a.addEventListener("click", e => {
+                e.preventDefault();
+                this.open = false;
+            });
+        });
+        // Ensure forms sends in AJAX
+        this.querySelectorAll<HTMLFormElement>("[slot=modal] form").forEach(form => {
+            form.addEventListener('submit', (e) => {
+                e.preventDefault();
+                let formData = new FormData(form);
+                fetch((form.action === window.location.toString()) ? this.href : form.action, {
+                    method: form.method,
+                    body: formData,
+                }).then((response) => {
+                    return response.text();
+                }).then(data => {
+                    if (data.indexOf("csrfmiddlewaretoken") !== -1) {
+                        this.setContent(data);
+                    } else {
+                        this.open = false;
+                        this.dispatchEvent(new CustomEvent('hashchange', { bubbles: true }));
+                        updateMessages();
+                    }
+                }).catch((e) => {
+                    console.error(e);
+                });
+            });
+        });
+    }
+
     onClick(e: MouseEvent) {
         const request = new Request(
             this.href,
@@ -31,27 +67,7 @@ export class ModalButton extends LitElement {
         fetch(request, {
             mode: 'same-origin',
         }).then(r => r.text()).then((t) => {
-            this.querySelector("[slot=modal]")!.innerHTML = t;
+            this.setContent(t);
-            // Ensure links close the modal
-            this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach(a => {
-                // Make click on a close the modal
-                a.addEventListener("click", e => {
-                    this.open = false;
-                });
-            });
-            // Ensure input type submit submits the form without reloading the page
-            this.querySelectorAll<HTMLInputElement>("[slot=modal] input[type=submit]").forEach(i => {
-                i.form?.addEventListener("submit", e => {
-                    e.preventDefault();
-                    return false;
-                });
-                i.addEventListener("click", e => {
-                    console.log("on submit");
-                    e.preventDefault();
-                    i.form?.submit();
-                    this.open = false;
-                });
-            });
             this.open = true;
         }).catch(e => {
             console.error(e);
@@ -62,7 +78,7 @@ export class ModalButton extends LitElement {
         return html`<div class="pf-c-backdrop">
             <div class="pf-l-bullseye">
                 <div class="pf-c-modal-box pf-m-md" role="dialog" aria-modal="true" aria-labelledby="modal-md-title" aria-describedby="modal-md-description">
-                    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
+                    <button @click=${() => this.open = false} class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
                         <i class="fas fa-times" aria-hidden="true"></i>
                     </button>
                     <slot name="modal">