trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/elements: add TableModal for selecting objects in a modal

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-10 20:13:35 +02:00
parent c133f16371
commit c44aa2a204
2 changed files with 98 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
web/src/elements/buttons/ModalButton.ts
View file

@ -13,6 +13,23 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../../authentik.css";
import { PFSize } from "../Spinner";
export const MODAL_BUTTON_STYLES = css`
:host {
text-align: left;
font-size: var(--pf-global--FontSize--md);
}
.pf-c-modal-box.pf-m-lg {
overflow-y: auto;
}
.pf-c-modal-box > .pf-c-button + * {
margin-right: 0;
}
/* fix multiple selects height */
select[multiple] {
height: 15em;
}
`;
@customElement("ak-modal-button")
export class ModalButton extends LitElement {
@property()
@ -22,24 +39,7 @@ export class ModalButton extends LitElement {
open = false;
static get styles(): CSSResult[] {
return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal].concat(
css`
:host {
text-align: left;
font-size: var(--pf-global--FontSize--md);
}
.pf-c-modal-box.pf-m-lg {
overflow-y: auto;
}
.pf-c-modal-box > .pf-c-button + * {
margin-right: 0;
}
/* fix multiple selects height */
select[multiple] {
height: 15em;
}
`
);
return [PFBase, PFButton, PFModalBox, PFForm, PFFormControl, PFBullseye, PFBackdrop, PFPage, PFStack, PFCard, PFContent, AKGlobal, MODAL_BUTTON_STYLES];
}
constructor() {

80
web/src/elements/table/TableModal.ts Normal file
View file

@ -0,0 +1,80 @@
import { CSSResult, LitElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { Table } from "./Table";
import PFModalBox from "@patternfly/patternfly/components/ModalBox/modal-box.css";
import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";
import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css";
import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../../authentik.css";
import { PFSize } from "../Spinner";
import { MODAL_BUTTON_STYLES } from "../buttons/ModalButton";
export abstract class TableModal<T> extends Table<T> {
@property()
size: PFSize = PFSize.Large;
@property({ type: Boolean })
open = false;
static get styles(): CSSResult[] {
return super.styles.concat(PFModalBox, PFBullseye, PFContent, PFBackdrop, PFPage, PFStack, AKGlobal, MODAL_BUTTON_STYLES);
}
constructor() {
super();
window.addEventListener("keyup", (e) => {
if (e.code === "Escape") {
this.resetForms();
this.open = false;
}
});
}
resetForms(): void {
this.querySelectorAll<HTMLFormElement>("[slot=form]").forEach(form => {
form.reset();
});
}
onClick(): void {
this.open = true;
this.querySelectorAll("*").forEach(child => {
if ("requestUpdate" in child) {
(child as LitElement).requestUpdate();
}
});
}
renderModalInner(): TemplateResult {
return this.renderTable();
}
renderModal(): TemplateResult {
return html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye">
<div
class="pf-c-modal-box ${this.size}"
role="dialog"
aria-modal="true"
>
<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>
${this.renderModalInner()}
</div>
</div>
</div>`;
}
render(): TemplateResult {
return html` <slot name="trigger" @click=${() => this.onClick()}></slot>
${this.open ? this.renderModal() : ""}`;
}
}