web/admin: add Radio control, search-select fixes (#4333)
* move search select to forms folder Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * add radio, migrate smaller lists Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * move dropdown when scrolling, hide when container out of frame Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens L
@ -2,8 +2,8 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
|
||||
import { MessageLevel } from "@goauthentik/common/messages";
|
||||
import { camelToSnake, convertToSlug } from "@goauthentik/common/utils";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { SearchSelect } from "@goauthentik/elements/SearchSelect";
|
||||
import { HorizontalFormElement } from "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { SearchSelect } from "@goauthentik/elements/forms/SearchSelect";
|
||||
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
|
||||
import "@polymer/iron-form/iron-form";
|
||||
import { IronFormElement } from "@polymer/iron-form/iron-form";
|
||||
|
||||
@ -90,6 +90,7 @@ export class HorizontalFormElement extends AKElement {
|
||||
case "ak-codemirror":
|
||||
case "ak-chip-group":
|
||||
case "ak-search-select":
|
||||
case "ak-radio":
|
||||
(input as HTMLInputElement).name = this.name;
|
||||
break;
|
||||
default:
|
||||
|
||||
@ -65,7 +65,16 @@ export class ModalForm extends ModalButton {
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-modal-box__body">
|
||||
<section
|
||||
class="pf-c-modal-box__body"
|
||||
@scroll=${() => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("scroll", {
|
||||
bubbles: true,
|
||||
}),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<slot name="form"></slot>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
|
||||
81
web/src/elements/forms/Radio.ts
Normal file
81
web/src/elements/forms/Radio.ts
Normal file
@ -0,0 +1,81 @@
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
|
||||
import { CSSResult, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||
import PFForm from "@patternfly/patternfly/components/Form/form.css";
|
||||
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
export interface RadioOption<T> {
|
||||
label: string;
|
||||
description?: TemplateResult;
|
||||
default: boolean;
|
||||
value: T;
|
||||
}
|
||||
|
||||
@customElement("ak-radio")
|
||||
export class Radio<T> extends AKElement {
|
||||
@property({ attribute: false })
|
||||
options: RadioOption<T>[] = [];
|
||||
|
||||
@property()
|
||||
name = "";
|
||||
|
||||
@property()
|
||||
value?: T;
|
||||
|
||||
@property({ attribute: false })
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
onChange: (value: T) => void = (value: T) => {
|
||||
return;
|
||||
};
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFBase,
|
||||
PFRadio,
|
||||
PFForm,
|
||||
AKGlobal,
|
||||
css`
|
||||
.pf-c-form__group-control {
|
||||
padding-top: calc(
|
||||
var(--pf-c-form--m-horizontal__group-label--md--PaddingTop) * 1.3
|
||||
);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.value) {
|
||||
const def = this.options.filter((opt) => opt.default);
|
||||
if (def.length > 0) {
|
||||
this.value = def[0].value;
|
||||
}
|
||||
}
|
||||
return html`<div class="pf-c-form__group-control pf-m-stack">
|
||||
${this.options.map((opt) => {
|
||||
const elId = `${this.name}-${opt.value}`;
|
||||
return html`<div class="pf-c-radio">
|
||||
<input
|
||||
class="pf-c-radio__input"
|
||||
type="radio"
|
||||
name="${this.name}"
|
||||
id=${elId}
|
||||
@change=${() => {
|
||||
this.value = opt.value;
|
||||
this.onChange(opt.value);
|
||||
}}
|
||||
.checked=${opt.value === this.value}
|
||||
/>
|
||||
<label class="pf-c-radio__label" for=${elId}>${opt.label}</label>
|
||||
${opt.description
|
||||
? html`<span class="pf-c-radio__description">${opt.description}</span>`
|
||||
: html``}
|
||||
</div>`;
|
||||
})}
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
275
web/src/elements/forms/SearchSelect.ts
Normal file
275
web/src/elements/forms/SearchSelect.ts
Normal file
@ -0,0 +1,275 @@
|
||||
import { EVENT_REFRESH } from "@goauthentik/common/constants";
|
||||
import { groupBy } from "@goauthentik/common/utils";
|
||||
import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { PreventFormSubmit } from "@goauthentik/elements/forms/Form";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { CSSResult, TemplateResult, html, render } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import AKGlobal from "@goauthentik/common/styles/authentik.css";
|
||||
import PFForm from "@patternfly/patternfly/components/Form/form.css";
|
||||
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
|
||||
import PFSelect from "@patternfly/patternfly/components/Select/select.css";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
|
||||
@customElement("ak-search-select")
|
||||
export class SearchSelect<T> extends AKElement {
|
||||
@property()
|
||||
query?: string;
|
||||
|
||||
@property({ attribute: false })
|
||||
objects?: T[];
|
||||
|
||||
@property({ attribute: false })
|
||||
selectedObject?: T;
|
||||
|
||||
@property()
|
||||
name?: string;
|
||||
|
||||
@property({ type: Boolean })
|
||||
open = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
blankable = false;
|
||||
|
||||
@property()
|
||||
placeholder: string = t`Select an object.`;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFForm, PFFormControl, PFSelect, AKGlobal];
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
fetchObjects!: (query?: string) => Promise<T[]>;
|
||||
|
||||
@property({ attribute: false })
|
||||
renderElement!: (element: T) => string;
|
||||
|
||||
@property({ attribute: false })
|
||||
renderDescription?: (element: T) => TemplateResult;
|
||||
|
||||
@property({ attribute: false })
|
||||
value!: (element: T | undefined) => unknown;
|
||||
|
||||
@property({ attribute: false })
|
||||
selected?: (element: T, elements: T[]) => boolean;
|
||||
|
||||
@property()
|
||||
emptyOption = "---------";
|
||||
|
||||
@property({ attribute: false })
|
||||
groupBy: (items: T[]) => [string, T[]][] = (items: T[]): [string, T[]][] => {
|
||||
return groupBy(items, () => {
|
||||
return "";
|
||||
});
|
||||
};
|
||||
|
||||
scrollHandler?: () => void;
|
||||
observer: IntersectionObserver;
|
||||
|
||||
dropdownContainer: HTMLDivElement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.dropdownContainer = document.createElement("div");
|
||||
this.observer = new IntersectionObserver(() => {
|
||||
this.open = false;
|
||||
this.shadowRoot
|
||||
?.querySelectorAll<HTMLInputElement>(
|
||||
".pf-c-form-control.pf-c-select__toggle-typeahead",
|
||||
)
|
||||
.forEach((input) => {
|
||||
input.blur();
|
||||
});
|
||||
});
|
||||
this.observer.observe(this);
|
||||
}
|
||||
|
||||
toForm(): unknown {
|
||||
if (!this.objects) {
|
||||
return new PreventFormSubmit(t`Loading options...`);
|
||||
}
|
||||
return this.value(this.selectedObject) || "";
|
||||
}
|
||||
|
||||
firstUpdated(): void {
|
||||
this.updateData();
|
||||
}
|
||||
|
||||
updateData(): void {
|
||||
this.fetchObjects(this.query).then((objects) => {
|
||||
this.objects = objects;
|
||||
this.objects.forEach((obj) => {
|
||||
if (this.selected && this.selected(obj, this.objects || [])) {
|
||||
this.selectedObject = obj;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
this.dropdownContainer = document.createElement("div");
|
||||
this.dropdownContainer.dataset["managedBy"] = "ak-search-select";
|
||||
document.body.append(this.dropdownContainer);
|
||||
this.updateData();
|
||||
this.addEventListener(EVENT_REFRESH, this.updateData);
|
||||
this.scrollHandler = () => {
|
||||
this.requestUpdate();
|
||||
};
|
||||
window.addEventListener("scroll", this.scrollHandler);
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
this.removeEventListener(EVENT_REFRESH, this.updateData);
|
||||
if (this.scrollHandler) {
|
||||
window.removeEventListener("scroll", this.scrollHandler);
|
||||
}
|
||||
this.dropdownContainer.remove();
|
||||
this.observer.disconnect();
|
||||
}
|
||||
|
||||
/*
|
||||
* This is a little bit hacky. Because we mainly want to use this field in modal-based forms,
|
||||
* rendering this menu inline makes the menu not overlay over top of the modal, and cause
|
||||
* the modal to scroll.
|
||||
* Hence, we render the menu into the document root, hide it when this menu isn't open
|
||||
* and remove it on disconnect
|
||||
* Also to move it to the correct position we're getting this elements's position and use that
|
||||
* to position the menu
|
||||
* The other downside this has is that, since we're rendering outside of a shadow root,
|
||||
* the pf-c-dropdown CSS needs to be loaded on the body.
|
||||
*/
|
||||
renderMenu(): void {
|
||||
if (!this.objects) {
|
||||
return;
|
||||
}
|
||||
const pos = this.getBoundingClientRect();
|
||||
let groupedItems = this.groupBy(this.objects);
|
||||
let shouldRenderGroups = true;
|
||||
if (groupedItems.length === 1) {
|
||||
if (groupedItems[0].length < 1 || groupedItems[0][0] === "") {
|
||||
shouldRenderGroups = false;
|
||||
}
|
||||
}
|
||||
if (groupedItems.length === 0) {
|
||||
shouldRenderGroups = false;
|
||||
groupedItems = [["", []]];
|
||||
}
|
||||
const renderGroup = (items: T[]): TemplateResult => {
|
||||
return html`${items.map((obj) => {
|
||||
let desc = undefined;
|
||||
if (this.renderDescription) {
|
||||
desc = this.renderDescription(obj);
|
||||
}
|
||||
return html`
|
||||
<li>
|
||||
<button
|
||||
class="pf-c-dropdown__menu-item ${desc === undefined
|
||||
? ""
|
||||
: "pf-m-description"}"
|
||||
role="option"
|
||||
@click=${() => {
|
||||
this.selectedObject = obj;
|
||||
this.open = false;
|
||||
}}
|
||||
>
|
||||
${desc === undefined
|
||||
? this.renderElement(obj)
|
||||
: html`
|
||||
<div class="pf-c-dropdown__menu-item-main">
|
||||
${this.renderElement(obj)}
|
||||
</div>
|
||||
<div class="pf-c-dropdown__menu-item-description">
|
||||
${desc}
|
||||
</div>
|
||||
`}
|
||||
</button>
|
||||
</li>
|
||||
`;
|
||||
})}`;
|
||||
};
|
||||
render(
|
||||
html`<div
|
||||
class="pf-c-dropdown pf-m-expanded"
|
||||
?hidden=${!this.open}
|
||||
style="position: fixed; inset: 0px auto auto 0px; z-index: 9999; transform: translate(${pos.x}px, ${pos.y +
|
||||
this.offsetHeight}px); width: ${pos.width}px;"
|
||||
>
|
||||
<ul
|
||||
class="pf-c-dropdown__menu pf-m-static"
|
||||
role="listbox"
|
||||
style="max-height:50vh;overflow-y:auto;"
|
||||
>
|
||||
${this.blankable
|
||||
? html`
|
||||
<li>
|
||||
<button
|
||||
class="pf-c-dropdown__menu-item"
|
||||
role="option"
|
||||
@click=${() => {
|
||||
this.selectedObject = undefined;
|
||||
this.open = false;
|
||||
}}
|
||||
>
|
||||
${this.emptyOption}
|
||||
</button>
|
||||
</li>
|
||||
`
|
||||
: html``}
|
||||
${shouldRenderGroups
|
||||
? html`${groupedItems.map(([group, items]) => {
|
||||
return html`
|
||||
<section class="pf-c-dropdown__group">
|
||||
<h1 class="pf-c-dropdown__group-title">${group}</h1>
|
||||
<ul>
|
||||
${renderGroup(items)}
|
||||
</ul>
|
||||
</section>
|
||||
`;
|
||||
})}`
|
||||
: html`${renderGroup(groupedItems[0][1])}`}
|
||||
</ul>
|
||||
</div>`,
|
||||
this.dropdownContainer,
|
||||
{ host: this },
|
||||
);
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
this.renderMenu();
|
||||
return html`<div class="pf-c-select">
|
||||
<div class="pf-c-select__toggle pf-m-typeahead">
|
||||
<div class="pf-c-select__toggle-wrapper">
|
||||
<input
|
||||
class="pf-c-form-control pf-c-select__toggle-typeahead"
|
||||
type="text"
|
||||
placeholder=${this.placeholder}
|
||||
@input=${(ev: InputEvent) => {
|
||||
this.query = (ev.target as HTMLInputElement).value;
|
||||
this.updateData();
|
||||
}}
|
||||
@focus=${() => {
|
||||
this.open = true;
|
||||
this.renderMenu();
|
||||
}}
|
||||
@blur=${() => {
|
||||
setTimeout(() => {
|
||||
this.open = false;
|
||||
this.renderMenu();
|
||||
}, 100);
|
||||
}}
|
||||
.value=${this.selectedObject
|
||||
? this.renderElement(this.selectedObject)
|
||||
: this.blankable
|
||||
? this.emptyOption
|
||||
: ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user