habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

69
web/src/pages/outposts/ServiceConnectionListPage.ts
View File

@ -35,6 +35,8 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
return true;
}
checkbox = true;
apiEndpoint(page: number): Promise<AKResponse<ServiceConnection>> {
return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllList({
ordering: this.order,
@ -50,7 +52,7 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
new TableColumn(t`Type`),
new TableColumn(t`Local`, "local"),
new TableColumn(t`State`),
new TableColumn("Actions"),
new TableColumn(t`Actions`),
];
}
@ -82,41 +84,46 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
html`<ak-spinner></ak-spinner>`,
)}`,
html` <ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update ${item.verboseName}`} </span>
<ak-proxy-form
slot="form"
.args=${{
instancePk: item.pk,
}}
type=${ifDefined(item.component)}
>
</ak-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
</ak-forms-modal>
<ak-forms-delete
.obj=${item}
objectLabel=${t`Outpost integration`}
.usedBy=${() => {
return new OutpostsApi(
DEFAULT_CONFIG,
).outpostsServiceConnectionsAllUsedByList({
uuid: item.pk,
});
}}
.delete=${() => {
return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllDestroy(
{
uuid: item.pk,
},
);
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update ${item.verboseName}`} </span>
<ak-proxy-form
slot="form"
.args=${{
instancePk: item.pk,
}}
type=${ifDefined(item.component)}
>
<button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
</ak-forms-delete>`,
</ak-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-plain">
<i class="fas fa-edit"></i>
</button>
</ak-forms-modal>`,
];
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length !== 1;
const item = this.selectedElements[0];
return html`<ak-forms-delete
.obj=${item}
objectLabel=${t`Outpost integration`}
.usedBy=${() => {
return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllUsedByList({
uuid: item.pk,
});
}}
.delete=${() => {
return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllDestroy({
uuid: item.pk,
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete`}
</button>
</ak-forms-delete>`;
}
renderToolbar(): TemplateResult {
return html` <ak-dropdown class="pf-c-dropdown">
<button class="pf-m-primary pf-c-dropdown__toggle" type="button">