web: add TablePage
This commit is contained in:
parent
8e25970c01
commit
a312ad2ad1
|
@ -4,7 +4,7 @@
|
||||||
<pb-sidebar class="pf-c-page__sidebar">
|
<pb-sidebar class="pf-c-page__sidebar">
|
||||||
</pb-sidebar>
|
</pb-sidebar>
|
||||||
<main class="pf-c-page__main">
|
<main class="pf-c-page__main">
|
||||||
<pb-router-outlet role="main" class="pf-c-page__main" tabindex="-1" id="main-content" defaultUrl="/-/overview/">
|
<pb-router-outlet role="main" class="pf-c-page__main" tabindex="-1" id="main-content" defaultUrl="/library/">
|
||||||
</pb-router-outlet>
|
</pb-router-outlet>
|
||||||
</main>
|
</main>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -17,7 +17,7 @@ export class Application {
|
||||||
return DefaultClient.fetch<Application>(["core", "applications", slug]);
|
return DefaultClient.fetch<Application>(["core", "applications", slug]);
|
||||||
}
|
}
|
||||||
|
|
||||||
static list(filter?: { [key: string]: string }): Promise<PBResponse<Application>> {
|
static list(filter?: { [key: string]: any }): Promise<PBResponse<Application>> {
|
||||||
return DefaultClient.fetch<PBResponse<Application>>(["core", "applications"], filter);
|
return DefaultClient.fetch<PBResponse<Application>>(["core", "applications"], filter);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { COMMON_STYLES } from "../../common/styles";
|
||||||
export abstract class Table<T> extends LitElement {
|
export abstract class Table<T> extends LitElement {
|
||||||
abstract apiEndpoint(page: number): Promise<PBResponse<T>>;
|
abstract apiEndpoint(page: number): Promise<PBResponse<T>>;
|
||||||
abstract columns(): Array<string>;
|
abstract columns(): Array<string>;
|
||||||
abstract row(item: any): Array<string>;
|
abstract row(item: T): Array<string>;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
data?: PBResponse<T>;
|
data?: PBResponse<T>;
|
||||||
|
@ -61,7 +61,7 @@ export abstract class Table<T> extends LitElement {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
renderTable() {
|
||||||
if (!this.data) {
|
if (!this.data) {
|
||||||
this.fetch();
|
this.fetch();
|
||||||
}
|
}
|
||||||
|
@ -103,4 +103,8 @@ export abstract class Table<T> extends LitElement {
|
||||||
></pb-table-pagination>
|
></pb-table-pagination>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return this.renderTable();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { html } from "lit-html";
|
||||||
|
import { Table } from "./Table";
|
||||||
|
|
||||||
|
export abstract class TablePage<T> extends Table<T> {
|
||||||
|
abstract pageTitle(): string;
|
||||||
|
abstract pageDescription(): string;
|
||||||
|
abstract pageIcon(): string;
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`<section class="pf-c-page__main-section pf-m-light">
|
||||||
|
<div class="pf-c-content">
|
||||||
|
<h1>
|
||||||
|
<i class="${this.pageIcon()}"></i>
|
||||||
|
${this.pageTitle()}
|
||||||
|
</h1>
|
||||||
|
<p>${this.pageDescription()}</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
|
||||||
|
<div class="pf-c-card">${this.renderTable()}</div>
|
||||||
|
</section>`;
|
||||||
|
}
|
||||||
|
}
|
|
@ -50,7 +50,7 @@
|
||||||
class="pf-c-page__main"
|
class="pf-c-page__main"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
id="main-content"
|
id="main-content"
|
||||||
defaultUrl="/-/overview/"
|
defaultUrl="/library/"
|
||||||
>
|
>
|
||||||
</pb-router-outlet>
|
</pb-router-outlet>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,7 +15,8 @@ import "./elements/sidebar/SidebarUser";
|
||||||
import "./elements/Tabs";
|
import "./elements/Tabs";
|
||||||
import "./elements/table/TablePagination";
|
import "./elements/table/TablePagination";
|
||||||
import "./pages/applications/ApplicationViewPage";
|
import "./pages/applications/ApplicationViewPage";
|
||||||
import "./pages/applications/LibraryPage";
|
import "./pages/applications/ApplicationListPage";
|
||||||
|
import "./pages/LibraryPage";
|
||||||
import "./pages/FlowShellCard";
|
import "./pages/FlowShellCard";
|
||||||
import "./pages/RouterOutlet";
|
import "./pages/RouterOutlet";
|
||||||
import "./pages/SiteShell";
|
import "./pages/SiteShell";
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||||
import { Application } from "../../api/application";
|
import { Application } from "../api/application";
|
||||||
import { DefaultClient, PBResponse } from "../../api/client";
|
import { DefaultClient, PBResponse } from "../api/client";
|
||||||
import { COMMON_STYLES } from "../../common/styles";
|
import { COMMON_STYLES } from "../common/styles";
|
||||||
import { truncate } from "../../utils";
|
import { truncate } from "../utils";
|
||||||
|
|
||||||
@customElement("pb-library")
|
@customElement("pb-library")
|
||||||
export class ApplicationViewPage extends LitElement {
|
export class ApplicationViewPage extends LitElement {
|
|
@ -52,7 +52,7 @@ export const ROUTES: Route[] = [
|
||||||
new Route(new RegExp(`^/$`)).redirect("/library/"),
|
new Route(new RegExp(`^/$`)).redirect("/library/"),
|
||||||
new Route(new RegExp(`^#.*`)).redirect("/library/"),
|
new Route(new RegExp(`^#.*`)).redirect("/library/"),
|
||||||
new Route(new RegExp(`^/library/$`), html`<pb-library></pb-library>`),
|
new Route(new RegExp(`^/library/$`), html`<pb-library></pb-library>`),
|
||||||
new Route(new RegExp(`^/applications/$`), html`<h1>test</h1>`),
|
new Route(new RegExp(`^/applications/$`), html`<pb-application-list></pb-application-list>`),
|
||||||
new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
|
new Route(new RegExp(`^/applications/(?<slug>${SLUG_REGEX})/$`)).then((args) => {
|
||||||
return html`<pb-application-view .args=${args}></pb-application-view>`;
|
return html`<pb-application-view .args=${args}></pb-application-view>`;
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -0,0 +1,51 @@
|
||||||
|
import { customElement } from "lit-element";
|
||||||
|
import { Application } from "../../api/application";
|
||||||
|
import { PBResponse } from "../../api/client";
|
||||||
|
import { TablePage } from "../../elements/table/TablePage";
|
||||||
|
|
||||||
|
@customElement("pb-application-list")
|
||||||
|
export class ApplicationList extends TablePage<Application> {
|
||||||
|
pageTitle(): string {
|
||||||
|
return "Applications";
|
||||||
|
}
|
||||||
|
pageDescription(): string {
|
||||||
|
return "External Applications which use passbook as Identity-Provider, utilizing protocols like OAuth2 and SAML.";
|
||||||
|
}
|
||||||
|
pageIcon(): string {
|
||||||
|
return "pf-icon pf-icon-applications";
|
||||||
|
}
|
||||||
|
|
||||||
|
apiEndpoint(page: number): Promise<PBResponse<Application>> {
|
||||||
|
return Application.list({
|
||||||
|
ordering: "order",
|
||||||
|
page: page,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
columns(): string[] {
|
||||||
|
return ["Name", "Slug", "Provider", "Provider Type", ""];
|
||||||
|
}
|
||||||
|
|
||||||
|
row(item: Application): string[] {
|
||||||
|
return [
|
||||||
|
item.name!,
|
||||||
|
item.slug!,
|
||||||
|
item.provider!.toString(),
|
||||||
|
item.provider!.toString(),
|
||||||
|
`
|
||||||
|
<pb-modal-button href="administration/policies/bindings/${item.pk}/update/">
|
||||||
|
<pb-spinner-button slot="trigger" class="pf-m-secondary">
|
||||||
|
Edit
|
||||||
|
</pb-spinner-button>
|
||||||
|
<div slot="modal"></div>
|
||||||
|
</pb-modal-button>
|
||||||
|
<pb-modal-button href="administration/policies/bindings/${item.pk}/delete/">
|
||||||
|
<pb-spinner-button slot="trigger" class="pf-m-danger">
|
||||||
|
Delete
|
||||||
|
</pb-spinner-button>
|
||||||
|
<div slot="modal"></div>
|
||||||
|
</pb-modal-button>
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue