web: re-format with prettier
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -16,10 +16,9 @@ import { ModelForm } from "../../elements/forms/ModelForm";
|
||||
|
||||
@customElement("ak-group-form")
|
||||
export class GroupForm extends ModelForm<Group, string> {
|
||||
|
||||
loadInstance(pk: string): Promise<Group> {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreGroupsRetrieve({
|
||||
groupUuid: pk
|
||||
groupUuid: pk,
|
||||
});
|
||||
}
|
||||
|
||||
@ -35,101 +34,129 @@ export class GroupForm extends ModelForm<Group, string> {
|
||||
if (this.instance?.pk) {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreGroupsUpdate({
|
||||
groupUuid: this.instance.pk || "",
|
||||
groupRequest: data
|
||||
groupRequest: data,
|
||||
});
|
||||
} else {
|
||||
data.users = Array.from(this.instance?.users || []);
|
||||
return new CoreApi(DEFAULT_CONFIG).coreGroupsCreate({
|
||||
groupRequest: data
|
||||
groupRequest: data,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Name`}
|
||||
?required=${true}
|
||||
name="name">
|
||||
<input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="isSuperuser">
|
||||
<div class="pf-c-check">
|
||||
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.isSuperuser, false)}>
|
||||
<label class="pf-c-check__label">
|
||||
${t`Is superuser`}
|
||||
</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="pf-c-check__input"
|
||||
?checked=${first(this.instance?.isSuperuser, false)}
|
||||
/>
|
||||
<label class="pf-c-check__label"> ${t`Is superuser`} </label>
|
||||
</div>
|
||||
<p class="pf-c-form__helper-text">${t`Users added to this group will be superusers.`}</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Users added to this group will be superusers.`}
|
||||
</p>
|
||||
</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">
|
||||
<option value="" ?selected=${this.instance?.parent === undefined}>---------</option>
|
||||
${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => {
|
||||
return groups.results.map(group => {
|
||||
return html`<option value=${ifDefined(group.pk)} ?selected=${this.instance?.parent === group.pk}>${group.name}</option>`;
|
||||
});
|
||||
}), html`<option>${t`Loading...`}</option>`)}
|
||||
<option value="" ?selected=${this.instance?.parent === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then((groups) => {
|
||||
return groups.results.map((group) => {
|
||||
return html`<option
|
||||
value=${ifDefined(group.pk)}
|
||||
?selected=${this.instance?.parent === group.pk}
|
||||
>
|
||||
${group.name}
|
||||
</option>`;
|
||||
});
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
</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">
|
||||
<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);
|
||||
const ids = items.map((u) => u.pk || 0);
|
||||
if (!this.instance) this.instance = {} as Group;
|
||||
this.instance.users = Array.from(this.instance?.users || []).concat(ids);
|
||||
this.instance.users = Array.from(this.instance?.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.instance?.users || []).some(su => {
|
||||
return su == user.pk;
|
||||
});
|
||||
if (!selected) return;
|
||||
return html`<ak-chip
|
||||
.removable=${true}
|
||||
value=${ifDefined(user.pk)}
|
||||
@remove=${() => {
|
||||
if (!this.instance) return;
|
||||
const users = Array.from(this.instance?.users || []);
|
||||
const idx = users.indexOf(user.pk || 0);
|
||||
users.splice(idx, 1);
|
||||
this.instance.users = users;
|
||||
this.requestUpdate();
|
||||
}}>
|
||||
${user.username}
|
||||
</ak-chip>`;
|
||||
});
|
||||
}), html`<option>${t`Loading...`}</option>`)}
|
||||
${until(
|
||||
new CoreApi(DEFAULT_CONFIG)
|
||||
.coreUsersList({
|
||||
ordering: "username",
|
||||
})
|
||||
.then((users) => {
|
||||
return users.results.map((user) => {
|
||||
const selected = Array.from(
|
||||
this.instance?.users || [],
|
||||
).some((su) => {
|
||||
return su == user.pk;
|
||||
});
|
||||
if (!selected) return;
|
||||
return html`<ak-chip
|
||||
.removable=${true}
|
||||
value=${ifDefined(user.pk)}
|
||||
@remove=${() => {
|
||||
if (!this.instance) return;
|
||||
const users = Array.from(
|
||||
this.instance?.users || [],
|
||||
);
|
||||
const idx = users.indexOf(user.pk || 0);
|
||||
users.splice(idx, 1);
|
||||
this.instance.users = 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>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Hold control/command to select multiple items.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Attributes`}
|
||||
?required=${true}
|
||||
name="attributes">
|
||||
<ak-codemirror mode="yaml" value="${YAML.stringify(first(this.instance?.attributes, {}))}">
|
||||
<ak-form-element-horizontal label=${t`Attributes`} ?required=${true} name="attributes">
|
||||
<ak-codemirror
|
||||
mode="yaml"
|
||||
value="${YAML.stringify(first(this.instance?.attributes, {}))}"
|
||||
>
|
||||
</ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">${t`Set custom attributes using YAML or JSON.`}</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Set custom attributes using YAML or JSON.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -55,56 +55,40 @@ export class GroupListPage extends TablePage<Group> {
|
||||
html`${item.parent || "-"}`,
|
||||
html`${Array.from(item.users || []).length}`,
|
||||
html`${item.isSuperuser ? t`Yes` : t`No`}`,
|
||||
html`
|
||||
<ak-forms-modal>
|
||||
<span slot="submit">
|
||||
${t`Update`}
|
||||
</span>
|
||||
<span slot="header">
|
||||
${t`Update Group`}
|
||||
</span>
|
||||
<ak-group-form slot="form" .instancePk=${item.pk}>
|
||||
</ak-group-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-secondary">
|
||||
${t`Edit`}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
<ak-forms-delete
|
||||
.obj=${item}
|
||||
objectLabel=${t`Group`}
|
||||
.usedBy=${() => {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreGroupsUsedByList({
|
||||
groupUuid: item.pk
|
||||
});
|
||||
}}
|
||||
.delete=${() => {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreGroupsDestroy({
|
||||
groupUuid: item.pk
|
||||
});
|
||||
}}>
|
||||
<button slot="trigger" class="pf-c-button pf-m-danger">
|
||||
${t`Delete`}
|
||||
</button>
|
||||
</ak-forms-delete>`,
|
||||
html` <ak-forms-modal>
|
||||
<span slot="submit"> ${t`Update`} </span>
|
||||
<span slot="header"> ${t`Update Group`} </span>
|
||||
<ak-group-form slot="form" .instancePk=${item.pk}> </ak-group-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
|
||||
</ak-forms-modal>
|
||||
<ak-forms-delete
|
||||
.obj=${item}
|
||||
objectLabel=${t`Group`}
|
||||
.usedBy=${() => {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreGroupsUsedByList({
|
||||
groupUuid: item.pk,
|
||||
});
|
||||
}}
|
||||
.delete=${() => {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreGroupsDestroy({
|
||||
groupUuid: item.pk,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
|
||||
</ak-forms-delete>`,
|
||||
];
|
||||
}
|
||||
|
||||
renderToolbar(): TemplateResult {
|
||||
return html`
|
||||
<ak-forms-modal>
|
||||
<span slot="submit">
|
||||
${t`Create`}
|
||||
</span>
|
||||
<span slot="header">
|
||||
${t`Create Group`}
|
||||
</span>
|
||||
<ak-group-form slot="form">
|
||||
</ak-group-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-primary">
|
||||
${t`Create`}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
${super.renderToolbar()}
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${t`Create`} </span>
|
||||
<span slot="header"> ${t`Create Group`} </span>
|
||||
<ak-group-form slot="form"> </ak-group-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
|
||||
</ak-forms-modal>
|
||||
${super.renderToolbar()}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ export class MemberSelectTable extends TableModal<User> {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreUsersList({
|
||||
ordering: this.order,
|
||||
page: page,
|
||||
pageSize: PAGE_SIZE /2,
|
||||
pageSize: PAGE_SIZE / 2,
|
||||
search: this.search || "",
|
||||
});
|
||||
}
|
||||
@ -57,33 +57,30 @@ export class MemberSelectTable extends TableModal<User> {
|
||||
|
||||
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(() => {
|
||||
<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-primary">
|
||||
${t`Add`}
|
||||
</ak-spinner-button>
|
||||
<ak-spinner-button
|
||||
.callAction=${async () => {
|
||||
this.open = false;
|
||||
}}
|
||||
class="pf-m-secondary">
|
||||
${t`Cancel`}
|
||||
</ak-spinner-button>
|
||||
</footer>`;
|
||||
}}
|
||||
class="pf-m-secondary"
|
||||
>
|
||||
${t`Cancel`}
|
||||
</ak-spinner-button>
|
||||
</footer>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user