web/admin: migrate GroupForm to use TableModal instead of select multiple
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -1,4 +1,4 @@
|
||||
import { CoreApi, Group } from "authentik-api";
|
||||
import { CoreApi, Group, User } from "authentik-api";
|
||||
import { t } from "@lingui/macro";
|
||||
import { customElement, property } from "lit-element";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
@ -8,6 +8,9 @@ import { until } from "lit-html/directives/until";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import "../../elements/forms/HorizontalFormElement";
|
||||
import "../../elements/CodeMirror";
|
||||
import "../../elements/chips/ChipGroup";
|
||||
import "../../elements/chips/Chip";
|
||||
import "./MemberSelectModal";
|
||||
import YAML from "yaml";
|
||||
import { first } from "../../utils";
|
||||
|
||||
@ -72,18 +75,48 @@ export class GroupForm extends Form<Group> {
|
||||
label=${t`Members`}
|
||||
?required=${true}
|
||||
name="users">
|
||||
<select class="pf-c-form-control" multiple>
|
||||
${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({
|
||||
ordering: "username",
|
||||
}).then(users => {
|
||||
return users.results.map(user => {
|
||||
const selected = Array.from(this.group?.users || []).some(su => {
|
||||
return su == user.pk;
|
||||
});
|
||||
return html`<option value=${ifDefined(user.pk)} ?selected=${selected}>${user.username} (${user.name})</option>`;
|
||||
});
|
||||
}), html`<option>${t`Loading...`}</option>`)}
|
||||
</select>
|
||||
<div class="pf-c-input-group">
|
||||
<ak-group-member-select-table
|
||||
.confirm=${(items: User[]) => {
|
||||
// Because the model only has the IDs, map the user list to IDs
|
||||
const ids = items.map(u => u.pk || 0);
|
||||
if (!this.group) return Promise.reject();
|
||||
this.group.users = new Set(Array.from(this.group?.users || []).concat(ids));
|
||||
this.requestUpdate();
|
||||
return Promise.resolve();
|
||||
}}>
|
||||
<button slot="trigger" class="pf-c-button pf-m-control" type="button">
|
||||
<i class="fas fa-plus" aria-hidden="true"></i>
|
||||
</button>
|
||||
</ak-group-member-select-table>
|
||||
<div class="pf-c-form-control">
|
||||
<ak-chip-group>
|
||||
${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({
|
||||
ordering: "username",
|
||||
}).then(users => {
|
||||
return users.results.map(user => {
|
||||
const selected = Array.from(this.group?.users || []).some(su => {
|
||||
return su == user.pk;
|
||||
});
|
||||
if (!selected) return;
|
||||
return html`<ak-chip
|
||||
.removable=${true}
|
||||
value=${ifDefined(user.pk)}
|
||||
@remove=${() => {
|
||||
if (!this.group) return;
|
||||
const users = Array.from(this.group?.users || []);
|
||||
const idx = users.indexOf(user.pk || 0);
|
||||
users.splice(idx, 1);
|
||||
this.group.users = new Set(users);
|
||||
this.requestUpdate();
|
||||
}}>
|
||||
${user.username}
|
||||
</ak-chip>`;
|
||||
});
|
||||
}), html`<option>${t`Loading...`}</option>`)}
|
||||
</ak-chip-group>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
|
||||
87
web/src/pages/groups/MemberSelectModal.ts
Normal file
87
web/src/pages/groups/MemberSelectModal.ts
Normal file
@ -0,0 +1,87 @@
|
||||
import { t } from "@lingui/macro";
|
||||
import { CoreApi, User } from "authentik-api";
|
||||
import { customElement, property } from "lit-element";
|
||||
import { TemplateResult, html } from "lit-html";
|
||||
import { AKResponse } from "../../api/Client";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { PAGE_SIZE } from "../../constants";
|
||||
import { TableColumn } from "../../elements/table/Table";
|
||||
import { TableModal } from "../../elements/table/TableModal";
|
||||
import "../../elements/buttons/SpinnerButton";
|
||||
import { first } from "../../utils";
|
||||
|
||||
@customElement("ak-group-member-select-table")
|
||||
export class MemberSelectTable extends TableModal<User> {
|
||||
checkbox = true;
|
||||
|
||||
searchEnabled(): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
@property()
|
||||
confirm!: (selectedItems: User[]) => Promise<unknown>;
|
||||
|
||||
apiEndpoint(page: number): Promise<AKResponse<User>> {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreUsersList({
|
||||
ordering: this.order,
|
||||
page: page,
|
||||
pageSize: PAGE_SIZE /2,
|
||||
search: this.search || "",
|
||||
});
|
||||
}
|
||||
|
||||
columns(): TableColumn[] {
|
||||
return [
|
||||
new TableColumn(t`Name`, "username"),
|
||||
new TableColumn(t`Active`, "active"),
|
||||
new TableColumn(t`Last login`, "last_login"),
|
||||
];
|
||||
}
|
||||
|
||||
row(item: User): TemplateResult[] {
|
||||
return [
|
||||
html`<a href="#/identity/users/${item.pk}">
|
||||
<div>${item.username}</div>
|
||||
<small>${item.name}</small>
|
||||
</a>`,
|
||||
html`${item.isActive ? t`Yes` : t`No`}`,
|
||||
html`${first(item.lastLogin?.toLocaleString(), "-")}`,
|
||||
];
|
||||
}
|
||||
|
||||
renderSelectedChip(item: User): TemplateResult {
|
||||
return html`${item.username}`;
|
||||
}
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`<section class="pf-c-page__main-section pf-m-light">
|
||||
<div class="pf-c-content">
|
||||
<h1 class="pf-c-title pf-m-2xl">
|
||||
${t`Select users to add`}
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pf-c-page__main-section pf-m-light">
|
||||
${this.renderTable()}
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
return this.confirm(this.selectedElements).then(() => {
|
||||
this.open = false;
|
||||
});
|
||||
}}
|
||||
class="pf-m-primary">
|
||||
${t`Add`}
|
||||
</ak-spinner-button>
|
||||
<ak-spinner-button
|
||||
.callAction=${async () => {
|
||||
this.open = false;
|
||||
}}
|
||||
class="pf-m-secondary">
|
||||
${t`Cancel`}
|
||||
</ak-spinner-button>
|
||||
</footer>`;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user