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 UserOAuthCodeList extends Table<ExpiringBaseGrantModel> {
});
}
checkbox = true;
order = "-expires";
columns(): TableColumn[] {
@ -29,33 +30,37 @@ export class UserOAuthCodeList extends Table<ExpiringBaseGrantModel> {
new TableColumn(t`Provider`, "provider"),
new TableColumn(t`Expires`, "expires"),
new TableColumn(t`Scopes`, "scope"),
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`Authorization Code`}
.usedBy=${() => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesUsedByList({
id: item.pk,
});
}}
.delete=${() => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesDestroy({
id: item.pk,
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete`}
</button>
</ak-forms-delete>`;
}
row(item: ExpiringBaseGrantModel): TemplateResult[] {
return [
html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
html`${item.expires?.toLocaleString()}`,
html`${item.scope.join(", ")}`,
html` <ak-forms-delete
.obj=${item}
objectLabel=${t`Authorization Code`}
.usedBy=${() => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesUsedByList({
id: item.pk,
});
}}
.delete=${() => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2AuthorizationCodesDestroy({
id: item.pk,
});
}}
>
<button slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete Authorization Code`}
</button>
</ak-forms-delete>`,
];
}
}

View File

@ -29,6 +29,7 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
});
}
checkbox = true;
order = "-expires";
columns(): TableColumn[] {
@ -37,7 +38,6 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
new TableColumn(t`Revoked?`, "revoked"),
new TableColumn(t`Expires`, "expires"),
new TableColumn(t`Scopes`, "scope"),
new TableColumn("Actions"),
];
}
@ -53,34 +53,38 @@ export class UserOAuthRefreshList extends Table<RefreshTokenModel> {
</div>
</td>
<td></td>
<td></td>
<td></td>`;
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length !== 1;
const item = this.selectedElements[0];
return html`<ak-forms-delete
.obj=${item}
objectLabel=${t`Refresh Code`}
.usedBy=${() => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensUsedByList({
id: item.pk,
});
}}
.delete=${() => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensDestroy({
id: item.pk,
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete`}
</button>
</ak-forms-delete>`;
}
row(item: RefreshTokenModel): TemplateResult[] {
return [
html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
html`${item.revoked ? t`Yes` : t`No`}`,
html`${item.expires?.toLocaleString()}`,
html`${item.scope.join(", ")}`,
html` <ak-forms-delete
.obj=${item}
objectLabel=${t`Refresh Code`}
.usedBy=${() => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensUsedByList({
id: item.pk,
});
}}
.delete=${() => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensDestroy({
id: item.pk,
});
}}
>
<button slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete Refresh Code`}
</button>
</ak-forms-delete>`,
];
}
}