web/admin: replace stage selections with ak-search-select

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2022-12-29 11:13:33 +01:00
parent b429e24392
commit 90c89aec76
No known key found for this signature in database
2 changed files with 59 additions and 44 deletions

View File

@ -1,5 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first, groupBy } from "@goauthentik/common/utils"; import { first, groupBy } from "@goauthentik/common/utils";
import "@goauthentik/elements/SearchSelect";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -16,6 +17,7 @@ import {
InvalidResponseActionEnum, InvalidResponseActionEnum,
PolicyEngineMode, PolicyEngineMode,
Stage, Stage,
StagesAllListRequest,
StagesApi, StagesApi,
} from "@goauthentik/api"; } from "@goauthentik/api";
@ -51,22 +53,6 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
} }
}; };
groupStages(stages: Stage[]): TemplateResult {
return html`
<option value="">---------</option>
${groupBy<Stage>(stages, (s) => s.verboseName || "").map(([group, stages]) => {
return html`<optgroup label=${group}>
${stages.map((stage) => {
const selected = this.instance?.stage === stage.pk;
return html`<option ?selected=${selected} value=${ifDefined(stage.pk)}>
${stage.name}
</option>`;
})}
</optgroup>`;
})}
`;
}
async getOrder(): Promise<number> { async getOrder(): Promise<number> {
if (this.instance?.pk) { if (this.instance?.pk) {
return this.instance.order; return this.instance.order;
@ -117,18 +103,31 @@ export class StageBindingForm extends ModelForm<FlowStageBinding, string> {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
${this.renderTarget()} ${this.renderTarget()}
<ak-form-element-horizontal label=${t`Stage`} ?required=${true} name="stage"> <ak-form-element-horizontal label=${t`Stage`} ?required=${true} name="stage">
<select class="pf-c-form-control"> <ak-search-select
${until( .fetchObjects=${async (query?: string): Promise<Stage[]> => {
new StagesApi(DEFAULT_CONFIG) const args: StagesAllListRequest = {
.stagesAllList({ ordering: "name",
ordering: "name", };
}) if (query !== undefined) {
.then((stages) => { args.search = query;
return this.groupStages(stages.results); }
}), const stages = await new StagesApi(DEFAULT_CONFIG).stagesAllList(args);
html`<option>${t`Loading...`}</option>`, return stages.results;
)} }}
</select> .groupBy=${(items: Stage[]) => {
return groupBy(items, (stage) => stage.verboseNamePlural);
}}
.renderElement=${(stage: Stage): string => {
return stage.name;
}}
.value=${(stage: Stage | undefined): string | undefined => {
return stage?.pk;
}}
.selected=${(stage: Stage): boolean => {
return stage.pk === this.instance?.stage;
}}
>
</ak-search-select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Order`} ?required=${true} name="order"> <ak-form-element-horizontal label=${t`Order`} ?required=${true} name="order">
<!-- @ts-ignore --> <!-- @ts-ignore -->

View File

@ -1,4 +1,6 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { groupBy } from "@goauthentik/common/utils";
import "@goauthentik/elements/SearchSelect";
import { Form } from "@goauthentik/elements/forms/Form"; import { Form } from "@goauthentik/elements/forms/Form";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
@ -6,9 +8,15 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import { until } from "lit/directives/until.js";
import { CoreApi, CoreUsersRecoveryEmailRetrieveRequest, StagesApi, User } from "@goauthentik/api"; import {
CoreApi,
CoreUsersRecoveryEmailRetrieveRequest,
Stage,
StagesAllListRequest,
StagesApi,
User,
} from "@goauthentik/api";
@customElement("ak-user-reset-email-form") @customElement("ak-user-reset-email-form")
export class UserResetEmailForm extends Form<CoreUsersRecoveryEmailRetrieveRequest> { export class UserResetEmailForm extends Form<CoreUsersRecoveryEmailRetrieveRequest> {
@ -27,20 +35,28 @@ export class UserResetEmailForm extends Form<CoreUsersRecoveryEmailRetrieveReque
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${t`Email stage`} ?required=${true} name="emailStage"> <ak-form-element-horizontal label=${t`Email stage`} ?required=${true} name="emailStage">
<select class="pf-c-form-control"> <ak-search-select
${until( .fetchObjects=${async (query?: string): Promise<Stage[]> => {
new StagesApi(DEFAULT_CONFIG) const args: StagesAllListRequest = {
.stagesEmailList({ ordering: "name",
ordering: "name", };
}) if (query !== undefined) {
.then((stages) => { args.search = query;
return stages.results.map((stage) => { }
return html`<option value=${stage.pk}>${stage.name}</option>`; const stages = await new StagesApi(DEFAULT_CONFIG).stagesEmailList(args);
}); return stages.results;
}), }}
html`<option>${t`Loading...`}</option>`, .groupBy=${(items: Stage[]) => {
)} return groupBy(items, (stage) => stage.verboseNamePlural);
</select> }}
.renderElement=${(stage: Stage): string => {
return stage.name;
}}
.value=${(stage: Stage | undefined): string | undefined => {
return stage?.pk;
}}
>
</ak-search-select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }