web/elements: trigger search select data update on connected callback
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
042cd0b2cb
commit
9564894eda
|
@ -154,6 +154,24 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
|
|||
${t`When enabled, user fields are matched regardless of their casing.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="showMatchedUser">
|
||||
<div class="pf-c-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="pf-c-check__input"
|
||||
?checked=${first(this.instance?.showMatchedUser, true)}
|
||||
/>
|
||||
<label class="pf-c-check__label"> ${t`Show matched user`} </label>
|
||||
</div>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`When a valid username/email has been entered, and this option is enabled, the user's username and avatar will be shown. Otherwise, the text that the user entered will be shown.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
</div>
|
||||
</ak-form-group>
|
||||
<ak-form-group>
|
||||
<span slot="header"> ${t`Source settings`} </span>
|
||||
<div slot="body" class="pf-c-form">
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Sources`}
|
||||
?required=${true}
|
||||
|
@ -210,19 +228,6 @@ export class IdentificationStageForm extends ModelForm<IdentificationStage, stri
|
|||
${t`By default, only icons are shown for sources. Enable this to show their full names.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="showMatchedUser">
|
||||
<div class="pf-c-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="pf-c-check__input"
|
||||
?checked=${first(this.instance?.showMatchedUser, true)}
|
||||
/>
|
||||
<label class="pf-c-check__label"> ${t`Show matched user`} </label>
|
||||
</div>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`When a valid username/email has been entered, and this option is enabled, the user's username and avatar will be shown. Otherwise, the text that the user entered will be shown.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
</div>
|
||||
</ak-form-group>
|
||||
<ak-form-group>
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
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";
|
||||
|
||||
|
@ -18,7 +20,7 @@ export class SearchSelect<T> extends AKElement {
|
|||
query?: string;
|
||||
|
||||
@property({ attribute: false })
|
||||
objects: T[] = [];
|
||||
objects?: T[];
|
||||
|
||||
@property({ attribute: false })
|
||||
selectedObject?: T;
|
||||
|
@ -54,17 +56,6 @@ export class SearchSelect<T> extends AKElement {
|
|||
@property({ attribute: false })
|
||||
selected?: (element: T, elements: T[]) => boolean;
|
||||
|
||||
firstUpdated(): 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;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@property()
|
||||
emptyOption = "---------";
|
||||
|
||||
|
@ -82,15 +73,40 @@ export class SearchSelect<T> extends AKElement {
|
|||
this.dropdownContainer = document.createElement("div");
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
this.removeEventListener(EVENT_REFRESH, this.updateData);
|
||||
this.dropdownContainer.remove();
|
||||
}
|
||||
|
||||
|
@ -106,6 +122,9 @@ export class SearchSelect<T> extends AKElement {
|
|||
* 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;
|
||||
|
@ -209,7 +228,7 @@ export class SearchSelect<T> extends AKElement {
|
|||
placeholder=${this.placeholder}
|
||||
@input=${(ev: InputEvent) => {
|
||||
this.query = (ev.target as HTMLInputElement).value;
|
||||
this.firstUpdated();
|
||||
this.updateData();
|
||||
}}
|
||||
@focus=${() => {
|
||||
this.open = true;
|
||||
|
|
|
@ -78,18 +78,6 @@ export abstract class AKChart<T> extends AKElement {
|
|||
|
||||
constructor() {
|
||||
super();
|
||||
window.addEventListener("resize", () => {
|
||||
if (this.chart) {
|
||||
this.chart.resize();
|
||||
}
|
||||
});
|
||||
window.addEventListener(EVENT_REFRESH, () => {
|
||||
this.apiRequest().then((r: T) => {
|
||||
if (!this.chart) return;
|
||||
this.chart.data = this.getChartData(r);
|
||||
this.chart.update();
|
||||
});
|
||||
});
|
||||
const matcher = window.matchMedia("(prefers-color-scheme: light)");
|
||||
const handler = (ev?: MediaQueryListEvent) => {
|
||||
if (ev?.matches || matcher.matches) {
|
||||
|
@ -103,6 +91,33 @@ export abstract class AKChart<T> extends AKElement {
|
|||
handler();
|
||||
}
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
window.addEventListener("resize", this.resizeHandler);
|
||||
this.addEventListener(EVENT_REFRESH, this.refreshHandler);
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
window.removeEventListener("resize", this.resizeHandler);
|
||||
this.removeEventListener(EVENT_REFRESH, this.refreshHandler);
|
||||
}
|
||||
|
||||
refreshHandler(): void {
|
||||
this.apiRequest().then((r: T) => {
|
||||
if (!this.chart) return;
|
||||
this.chart.data = this.getChartData(r);
|
||||
this.chart.update();
|
||||
});
|
||||
}
|
||||
|
||||
resizeHandler(): void {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.resize();
|
||||
}
|
||||
|
||||
firstUpdated(): void {
|
||||
this.apiRequest().then((r) => {
|
||||
const canvas = this.shadowRoot?.querySelector<HTMLCanvasElement>("canvas");
|
||||
|
|
|
@ -23,6 +23,11 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
|||
|
||||
import { ResponseError, ValidationError } from "@goauthentik/api";
|
||||
|
||||
export class PreventFormSubmit {
|
||||
// Stub class which can be returned by form elements to prevent the form from submitting
|
||||
constructor(public message: string) {}
|
||||
}
|
||||
|
||||
export class APIError extends Error {
|
||||
constructor(public response: ValidationError) {
|
||||
super();
|
||||
|
@ -162,11 +167,17 @@ export class Form<T> extends AKElement {
|
|||
json[element.name] = element.checked;
|
||||
} else if (element.tagName.toLowerCase() === "ak-search-select") {
|
||||
const select = element as unknown as SearchSelect<unknown>;
|
||||
let value: unknown;
|
||||
try {
|
||||
json[element.name] = select.value(select.selectedObject) || "";
|
||||
value = select.toForm();
|
||||
} catch {
|
||||
console.debug("authentik/form: SearchSelect.value error");
|
||||
return;
|
||||
}
|
||||
if (value instanceof PreventFormSubmit) {
|
||||
throw new Error(value.message);
|
||||
}
|
||||
json[element.name] = value;
|
||||
} else {
|
||||
for (let v = 0; v < values.length; v++) {
|
||||
this.serializeFieldRecursive(element, values[v], json);
|
||||
|
|
Reference in New Issue