web: use single delete button with checkbox and icon-based action buttons

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-08-05 12:30:43 +02:00
parent ddd5047cc3
commit 1a17ce24f9
33 changed files with 911 additions and 631 deletions

View File

@ -22,6 +22,7 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
});
}
checkbox = true;
order = "-expires";
columns(): TableColumn[] {
@ -30,32 +31,38 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
new TableColumn(t`Browser`, "user_agent"),
new TableColumn(t`Device`, "user_agent"),
new TableColumn(t`Expires`, "expires"),
new TableColumn("Actions"),
];
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length !== 1;
const item = this.selectedElements[0];
return html`<ak-forms-delete
.obj=${item}
objectLabel=${t`Session`}
.usedBy=${() => {
return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsUsedByList({
uuid: item.uuid || "",
});
}}
.delete=${() => {
return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsDestroy({
uuid: item.uuid || "",
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete Session`}
</button>
</ak-forms-delete>`;
}
row(item: AuthenticatedSession): TemplateResult[] {
return [
html`${item.lastIp}`,
html`${item.userAgent.userAgent?.family}`,
html`${item.userAgent.os?.family}`,
html`${item.expires?.toLocaleString()}`,
html` <ak-forms-delete
.obj=${item}
objectLabel=${t`Session`}
.usedBy=${() => {
return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsUsedByList({
uuid: item.uuid || "",
});
}}
.delete=${() => {
return new CoreApi(DEFAULT_CONFIG).coreAuthenticatedSessionsDestroy({
uuid: item.uuid || "",
});
}}
>
<button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete Session`}</button>
</ak-forms-delete>`,
];
}
}

View File

@ -22,36 +22,40 @@ export class UserConsentList extends Table<UserConsent> {
});
}
checkbox = true;
order = "-expires";
columns(): TableColumn[] {
return [
new TableColumn(t`Application`, "application"),
new TableColumn(t`Expires`, "expires"),
new TableColumn("Actions"),
];
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length !== 1;
const item = this.selectedElements[0];
return html`<ak-forms-delete
.obj=${item}
objectLabel=${t`Consent`}
.usedBy=${() => {
return new CoreApi(DEFAULT_CONFIG).coreUserConsentUsedByList({
id: item.pk,
});
}}
.delete=${() => {
return new CoreApi(DEFAULT_CONFIG).coreUserConsentDestroy({
id: item.pk,
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete Consent`}
</button>
</ak-forms-delete>`;
}
row(item: UserConsent): TemplateResult[] {
return [
html`${item.application.name}`,
html`${item.expires?.toLocaleString()}`,
html` <ak-forms-delete
.obj=${item}
objectLabel=${t`Consent`}
.usedBy=${() => {
return new CoreApi(DEFAULT_CONFIG).coreUserConsentUsedByList({
id: item.pk,
});
}}
.delete=${() => {
return new CoreApi(DEFAULT_CONFIG).coreUserConsentDestroy({
id: item.pk,
});
}}
>
<button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete Consent`}</button>
</ak-forms-delete>`,
];
return [html`${item.application.name}`, html`${item.expires?.toLocaleString()}`];
}
}