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

web: Table parity (#427)

Browse Source 
* core: fix application API always being sorted by name

* web: add sorting to tables

* web: add search to TablePage

* core: add search to applications API

* core: add MetaNameSerializer

* *: fix signature for non-modal serializers

* providers/*: implement MetaNameSerializer

* web: implement full app list page, use as default in sidebar

* web: fix linting errors

* admin: remove old application list

* web: fix default sorting for application list

* web: fix spacing for search element in toolbar
This commit is contained in:
Jens L
2020-12-24 09:56:05 +01:00
committed by GitHub
parent c3e9168b46
commit 79da2bf698
26 changed files with 355 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,18 @@
import { gettext } from "django";
import { customElement, html, TemplateResult } from "lit-element";
import { customElement, html, property, TemplateResult } from "lit-element";
import { Application } from "../../api/Applications";
import { PBResponse } from "../../api/Client";
import { TablePage } from "../../elements/table/TablePage";
import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton";
import { TableColumn } from "../../elements/table/Table";
@customElement("ak-application-list")
export class ApplicationList extends TablePage<Application> {
searchEnabled(): boolean {
return true;
}
pageTitle(): string {
return gettext("Applications");
}
@ -19,31 +23,51 @@ export class ApplicationList extends TablePage<Application> {
return gettext("pf-icon pf-icon-applications");
}
@property()
order = "name";
apiEndpoint(page: number): Promise<PBResponse<Application>> {
return Application.list({
ordering: "order",
ordering: this.order,
page: page,
search: this.search || "",
});
}
columns(): string[] {
return ["Name", "Slug", "Provider", "Provider Type", ""];
columns(): TableColumn[] {
return [
new TableColumn(""),
new TableColumn("Name", "name"),
new TableColumn("Slug", "slug"),
new TableColumn("Provider"),
new TableColumn("Provider Type"),
new TableColumn(""),
];
}
row(item: Application): TemplateResult[] {
return [
html`${item.name}`,
html`${item.slug}`,
html`${item.provider}`,
html`${item.provider}`,
html`
<ak-modal-button href="administration/policies/bindings/${item.pk}/update/">
${item.meta_icon ?
html`<img class="app-icon pf-c-avatar" src="${item.meta_icon}" alt="${gettext("Application Icon")}">` :
html`<i class="pf-icon pf-icon-arrow"></i>`}`,
html`<a href="#/applications/${item.slug}/">
<div>
${item.name}
</div>
${item.meta_publisher ? html`<small>${item.meta_publisher}</small>` : html``}
</a>`,
html`<code>${item.slug}</code>`,
html`${item.provider.name}`,
html`${item.provider.verbose_name}`,
html`
<ak-modal-button href="${Application.adminUrl(`${item.pk}/update/`)}">
<ak-spinner-button slot="trigger" class="pf-m-secondary">
Edit
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
<ak-modal-button href="administration/policies/bindings/${item.pk}/delete/">
<ak-modal-button href="${Application.adminUrl(`${item.pk}/delete/`)}">
<ak-spinner-button slot="trigger" class="pf-m-danger">
Delete
</ak-spinner-button>
@ -52,4 +76,16 @@ export class ApplicationList extends TablePage<Application> {
`,
];
}
renderToolbar(): TemplateResult {
return html`
<ak-modal-button href=${Application.adminUrl("create/")}>
<ak-spinner-button slot="trigger" class="pf-m-primary">
${gettext("Create")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
${super.renderToolbar()}
`;
}
}