static: add refresh button, ensure forms in modal work correctly
closes #262
This commit is contained in:
Jens Langhammer
parent
aa6eacaf6b
commit
277f960113
|
|
@ -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 %}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export class FlowShellCard extends LitElement {
|
|||
flowBodyUrl: string = "";
|
||||
|
||||
@property()
|
||||
flowBody?: string = undefined;
|
||||
flowBody?: string;
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
// 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.setContent(t);
|
||||
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">
|
||||
|
|
|
|||
Reference in New Issue