web/admin: replace group selections with ak-search-select
closes #4157 Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
3073b7d7e3
commit
b429e24392
|
@ -1,4 +1,5 @@
|
||||||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||||
|
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";
|
||||||
|
|
||||||
|
@ -9,7 +10,14 @@ import { customElement } from "lit/decorators.js";
|
||||||
import { ifDefined } from "lit/directives/if-defined.js";
|
import { ifDefined } from "lit/directives/if-defined.js";
|
||||||
import { until } from "lit/directives/until.js";
|
import { until } from "lit/directives/until.js";
|
||||||
|
|
||||||
import { CoreApi, EventsApi, NotificationRule, SeverityEnum } from "@goauthentik/api";
|
import {
|
||||||
|
CoreApi,
|
||||||
|
CoreGroupsListRequest,
|
||||||
|
EventsApi,
|
||||||
|
Group,
|
||||||
|
NotificationRule,
|
||||||
|
SeverityEnum,
|
||||||
|
} from "@goauthentik/api";
|
||||||
|
|
||||||
@customElement("ak-event-rule-form")
|
@customElement("ak-event-rule-form")
|
||||||
export class RuleForm extends ModelForm<NotificationRule, string> {
|
export class RuleForm extends ModelForm<NotificationRule, string> {
|
||||||
|
@ -74,24 +82,29 @@ export class RuleForm extends ModelForm<NotificationRule, string> {
|
||||||
/>
|
/>
|
||||||
</ak-form-element-horizontal>
|
</ak-form-element-horizontal>
|
||||||
<ak-form-element-horizontal label=${t`Group`} name="group">
|
<ak-form-element-horizontal label=${t`Group`} name="group">
|
||||||
<select class="pf-c-form-control">
|
<ak-search-select
|
||||||
<option value="" ?selected=${this.instance?.group === undefined}>
|
.fetchObjects=${async (query?: string): Promise<Group[]> => {
|
||||||
---------
|
const args: CoreGroupsListRequest = {
|
||||||
</option>
|
ordering: "name",
|
||||||
${until(
|
};
|
||||||
new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => {
|
if (query !== undefined) {
|
||||||
return groups.results.map((group) => {
|
args.search = query;
|
||||||
return html`<option
|
}
|
||||||
value=${ifDefined(group.pk)}
|
const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
|
||||||
?selected=${this.instance?.group === group.pk}
|
return groups.results;
|
||||||
>
|
}}
|
||||||
${group.name}
|
.renderElement=${(group: Group): string => {
|
||||||
</option>`;
|
return group.name;
|
||||||
});
|
}}
|
||||||
}),
|
.value=${(group: Group | undefined): string | undefined => {
|
||||||
html`<option>${t`Loading...`}</option>`,
|
return group?.pk;
|
||||||
)}
|
}}
|
||||||
</select>
|
.selected=${(group: Group): boolean => {
|
||||||
|
return group.pk === this.instance?.group;
|
||||||
|
}}
|
||||||
|
?blankable=${true}
|
||||||
|
>
|
||||||
|
</ak-search-select>
|
||||||
</ak-form-element-horizontal>
|
</ak-form-element-horizontal>
|
||||||
<ak-form-element-horizontal label=${t`Transports`} ?required=${true} name="transports">
|
<ak-form-element-horizontal label=${t`Transports`} ?required=${true} name="transports">
|
||||||
<select name="users" class="pf-c-form-control" multiple>
|
<select name="users" class="pf-c-form-control" multiple>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import "@goauthentik/admin/groups/MemberSelectModal";
|
||||||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||||
import { first } from "@goauthentik/common/utils";
|
import { first } from "@goauthentik/common/utils";
|
||||||
import "@goauthentik/elements/CodeMirror";
|
import "@goauthentik/elements/CodeMirror";
|
||||||
|
import "@goauthentik/elements/SearchSelect";
|
||||||
import "@goauthentik/elements/chips/Chip";
|
import "@goauthentik/elements/chips/Chip";
|
||||||
import "@goauthentik/elements/chips/ChipGroup";
|
import "@goauthentik/elements/chips/ChipGroup";
|
||||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||||
|
@ -16,7 +17,7 @@ import { customElement } from "lit/decorators.js";
|
||||||
import { ifDefined } from "lit/directives/if-defined.js";
|
import { ifDefined } from "lit/directives/if-defined.js";
|
||||||
import { until } from "lit/directives/until.js";
|
import { until } from "lit/directives/until.js";
|
||||||
|
|
||||||
import { CoreApi, Group, User } from "@goauthentik/api";
|
import { CoreApi, CoreGroupsListRequest, Group, User } from "@goauthentik/api";
|
||||||
|
|
||||||
@customElement("ak-group-form")
|
@customElement("ak-group-form")
|
||||||
export class GroupForm extends ModelForm<Group, string> {
|
export class GroupForm extends ModelForm<Group, string> {
|
||||||
|
@ -83,24 +84,29 @@ export class GroupForm extends ModelForm<Group, string> {
|
||||||
</p>
|
</p>
|
||||||
</ak-form-element-horizontal>
|
</ak-form-element-horizontal>
|
||||||
<ak-form-element-horizontal label=${t`Parent`} name="parent">
|
<ak-form-element-horizontal label=${t`Parent`} name="parent">
|
||||||
<select class="pf-c-form-control">
|
<ak-search-select
|
||||||
<option value="" ?selected=${this.instance?.parent === undefined}>
|
.fetchObjects=${async (query?: string): Promise<Group[]> => {
|
||||||
---------
|
const args: CoreGroupsListRequest = {
|
||||||
</option>
|
ordering: "name",
|
||||||
${until(
|
};
|
||||||
new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => {
|
if (query !== undefined) {
|
||||||
return groups.results.map((group) => {
|
args.search = query;
|
||||||
return html`<option
|
}
|
||||||
value=${ifDefined(group.pk)}
|
const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
|
||||||
?selected=${this.instance?.parent === group.pk}
|
return groups.results;
|
||||||
>
|
}}
|
||||||
${group.name}
|
.renderElement=${(group: Group): string => {
|
||||||
</option>`;
|
return group.name;
|
||||||
});
|
}}
|
||||||
}),
|
.value=${(group: Group | undefined): string | undefined => {
|
||||||
html`<option>${t`Loading...`}</option>`,
|
return group?.pk;
|
||||||
)}
|
}}
|
||||||
</select>
|
.selected=${(group: Group): boolean => {
|
||||||
|
return group.pk === this.instance?.parent;
|
||||||
|
}}
|
||||||
|
?blankable=${true}
|
||||||
|
>
|
||||||
|
</ak-search-select>
|
||||||
</ak-form-element-horizontal>
|
</ak-form-element-horizontal>
|
||||||
<ak-form-element-horizontal label=${t`Members`} name="users">
|
<ak-form-element-horizontal label=${t`Members`} name="users">
|
||||||
<div class="pf-c-input-group">
|
<div class="pf-c-input-group">
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config";
|
import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config";
|
||||||
import { first } from "@goauthentik/common/utils";
|
import { first } from "@goauthentik/common/utils";
|
||||||
|
import "@goauthentik/elements/SearchSelect";
|
||||||
import "@goauthentik/elements/forms/FormGroup";
|
import "@goauthentik/elements/forms/FormGroup";
|
||||||
import "@goauthentik/elements/forms/HorizontalFormElement";
|
import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||||
|
@ -13,9 +14,11 @@ import { until } from "lit/directives/until.js";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CoreApi,
|
CoreApi,
|
||||||
|
CoreGroupsListRequest,
|
||||||
CryptoApi,
|
CryptoApi,
|
||||||
FlowsApi,
|
FlowsApi,
|
||||||
FlowsInstancesListDesignationEnum,
|
FlowsInstancesListDesignationEnum,
|
||||||
|
Group,
|
||||||
LDAPAPIAccessMode,
|
LDAPAPIAccessMode,
|
||||||
LDAPProvider,
|
LDAPProvider,
|
||||||
ProvidersApi,
|
ProvidersApi,
|
||||||
|
@ -97,24 +100,29 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
|
||||||
</p>
|
</p>
|
||||||
</ak-form-element-horizontal>
|
</ak-form-element-horizontal>
|
||||||
<ak-form-element-horizontal label=${t`Search group`} name="searchGroup">
|
<ak-form-element-horizontal label=${t`Search group`} name="searchGroup">
|
||||||
<select class="pf-c-form-control">
|
<ak-search-select
|
||||||
<option value="" ?selected=${this.instance?.searchGroup === undefined}>
|
.fetchObjects=${async (query?: string): Promise<Group[]> => {
|
||||||
---------
|
const args: CoreGroupsListRequest = {
|
||||||
</option>
|
ordering: "name",
|
||||||
${until(
|
};
|
||||||
new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => {
|
if (query !== undefined) {
|
||||||
return groups.results.map((group) => {
|
args.search = query;
|
||||||
return html`<option
|
}
|
||||||
value=${ifDefined(group.pk)}
|
const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(args);
|
||||||
?selected=${this.instance?.searchGroup === group.pk}
|
return groups.results;
|
||||||
>
|
}}
|
||||||
${group.name}
|
.renderElement=${(group: Group): string => {
|
||||||
</option>`;
|
return group.name;
|
||||||
});
|
}}
|
||||||
}),
|
.value=${(group: Group | undefined): string | undefined => {
|
||||||
html`<option>${t`Loading...`}</option>`,
|
return group?.pk;
|
||||||
)}
|
}}
|
||||||
</select>
|
.selected=${(group: Group): boolean => {
|
||||||
|
return group.pk === this.instance?.searchGroup;
|
||||||
|
}}
|
||||||
|
?blankable=${true}
|
||||||
|
>
|
||||||
|
</ak-search-select>
|
||||||
<p class="pf-c-form__helper-text">
|
<p class="pf-c-form__helper-text">
|
||||||
${t`Users in the selected group can do search queries. If no group is selected, no LDAP Searches are allowed.`}
|
${t`Users in the selected group can do search queries. If no group is selected, no LDAP Searches are allowed.`}
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -310,7 +310,6 @@ export class LDAPSourceForm extends ModelForm<LDAPSource, string> {
|
||||||
<span slot="header"> ${t`Additional settings`} </span>
|
<span slot="header"> ${t`Additional settings`} </span>
|
||||||
<div slot="body" class="pf-c-form">
|
<div slot="body" class="pf-c-form">
|
||||||
<ak-form-element-horizontal label=${t`Group`} name="syncParentGroup">
|
<ak-form-element-horizontal label=${t`Group`} name="syncParentGroup">
|
||||||
<!-- @ts-ignore -->
|
|
||||||
<ak-search-select
|
<ak-search-select
|
||||||
.fetchObjects=${async (query?: string): Promise<Group[]> => {
|
.fetchObjects=${async (query?: string): Promise<Group[]> => {
|
||||||
const args: CoreGroupsListRequest = {
|
const args: CoreGroupsListRequest = {
|
||||||
|
|
Reference in New Issue