web/admin: replace stage selections with ak-search-select
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
b429e24392
commit
90c89aec76
|
@ -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 -->
|
||||||
|
|
|
@ -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>`;
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue