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

51
web/src/pages/applications/ApplicationListPage.ts
View File

@ -28,6 +28,8 @@ export class ApplicationListPage extends TablePage<Application> {
return "pf-icon pf-icon-applications";
}
checkbox = true;
@property()
order = "name";
@ -62,10 +64,33 @@ export class ApplicationListPage extends TablePage<Application> {
new TableColumn(t`Slug`, "slug"),
new TableColumn(t`Provider`),
new TableColumn(t`Provider Type`),
new TableColumn("Actions"),
new TableColumn(t`Actions`),
];
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length !== 1;
const item = this.selectedElements[0];
return html`<ak-forms-delete
.obj=${item}
objectLabel=${t`Application`}
.usedBy=${() => {
return new CoreApi(DEFAULT_CONFIG).coreApplicationsUsedByList({
slug: item.slug,
});
}}
.delete=${() => {
return new CoreApi(DEFAULT_CONFIG).coreApplicationsDestroy({
slug: item.slug,
});
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete`}
</button>
</ak-forms-delete>`;
}
row(item: Application): TemplateResult[] {
return [
item.metaIcon
@ -91,7 +116,9 @@ export class ApplicationListPage extends TablePage<Application> {
<span slot="header"> ${t`Update Application`} </span>
<ak-application-form slot="form" .instancePk=${item.slug}>
</ak-application-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
<button slot="trigger" class="pf-c-button pf-m-plain">
<i class="fas fa-edit"></i>
</button>
</ak-forms-modal>
${item.launchUrl
? html`<a
@ -99,25 +126,9 @@ export class ApplicationListPage extends TablePage<Application> {
target="_blank"
class="pf-c-button pf-m-secondary"
>
${t`Open application`}
<i class="fas fas fa-share-square"></i>
</a>`
: html``}
<ak-forms-delete
.obj=${item}
objectLabel=${t`Application`}
.usedBy=${() => {
return new CoreApi(DEFAULT_CONFIG).coreApplicationsUsedByList({
slug: item.slug,
});
}}
.delete=${() => {
return new CoreApi(DEFAULT_CONFIG).coreApplicationsDestroy({
slug: item.slug,
});
}}
>
<button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
</ak-forms-delete>`,
: html``}`,
];
}