web: migrate remaining list views to web

web/src/api/Invitations.ts

@@ -0,0 +1,27 @@
+import { DefaultClient, QueryArguments, AKResponse } from "./Client";
+import { EventContext } from "./Events";
+import { User } from "./Users";
+
+export class Invitation {
+
+    pk: string;
+    expires: number;
+    fixed_date: EventContext;
+    created_by: User;
+
+    constructor() {
+        throw Error();
+    }
+
+    static get(pk: string): Promise<Invitation> {
+        return DefaultClient.fetch<Invitation>(["stages", "invitation", "invitations", pk]);
+    }
+
+    static list(filter?: QueryArguments): Promise<AKResponse<Invitation>> {
+        return DefaultClient.fetch<AKResponse<Invitation>>(["stages", "invitation", "invitations"], filter);
+    }
+
+    static adminUrl(rest: string): string {
+        return `/administration/stages/invitations/${rest}`;
+    }
+}

web/src/api/Prompts.ts

@@ -0,0 +1,30 @@
+import { DefaultClient, QueryArguments, AKResponse } from "./Client";
+import { Stage } from "./Flows";
+
+export class Prompt {
+
+    pk: string;
+    field_key: string;
+    label: string;
+    type: string;
+    required: boolean;
+    placeholder: string;
+    order: number;
+    promptstage_set: Stage[];
+
+    constructor() {
+        throw Error();
+    }
+
+    static get(pk: string): Promise<Prompt> {
+        return DefaultClient.fetch<Prompt>(["stages", "prompt", "prompts", pk]);
+    }
+
+    static list(filter?: QueryArguments): Promise<AKResponse<Prompt>> {
+        return DefaultClient.fetch<AKResponse<Prompt>>(["stages", "prompt", "prompts"], filter);
+    }
+
+    static adminUrl(rest: string): string {
+        return `/administration/stages/prompts/${rest}`;
+    }
+}

web/src/elements/sidebar/Sidebar.ts

@@ -29,7 +29,7 @@ export class SidebarItem {
         this.condition = async () => true;
         this.activeMatchers = [];
         if (this.path) {
-            this.activeMatchers.push(new RegExp(`^${this.path}`));
+            this.activeMatchers.push(new RegExp(`^${this.path}$`));
         }
     }
 

web/src/interfaces/AdminInterface.ts

@@ -41,8 +41,8 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
     new SidebarItem("Flows").children(
         new SidebarItem("Flows", "/flow/flows").activeWhen(`^/flow/flows/(?<slug>${SLUG_REGEX})$`),
         new SidebarItem("Stages", "/flow/stages"),
-        new SidebarItem("Prompts", "/administration/stages_prompts/"),
-        new SidebarItem("Invitations", "/administration/stages/invitations/"),
+        new SidebarItem("Prompts", "/flow/stages/prompts"),
+        new SidebarItem("Invitations", "/flow/stages/invitations"),
     ).when((): Promise<boolean> => {
         return User.me().then(u => u.is_superuser);
     }),

web/src/pages/stages/InvitationListPage.ts

@@ -0,0 +1,72 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { AKResponse } from "../../api/Client";
+import { TablePage } from "../../elements/table/TablePage";
+
+import "../../elements/buttons/ModalButton";
+import "../../elements/buttons/SpinnerButton";
+import { TableColumn } from "../../elements/table/Table";
+import { Invitation } from "../../api/Invitations";
+
+@customElement("ak-stage-invitation-list")
+export class InvitationListPage extends TablePage<Invitation> {
+    searchEnabled(): boolean {
+        return true;
+    }
+    pageTitle(): string {
+        return gettext("Invitations");
+    }
+    pageDescription(): string {
+        return gettext("Create Invitation Links to enroll Users, and optionally force specific attributes of their account.");
+    }
+    pageIcon(): string {
+        return gettext("pf-icon pf-icon-migration");
+    }
+
+    @property()
+    order = "expires";
+
+    apiEndpoint(page: number): Promise<AKResponse<Invitation>> {
+        return Invitation.list({
+            ordering: this.order,
+            page: page,
+            search: this.search || "",
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("ID", "pk"),
+            new TableColumn("Created by", "created_by"),
+            new TableColumn("Expiry"),
+            new TableColumn(""),
+        ];
+    }
+
+    row(item: Invitation): TemplateResult[] {
+        return [
+            html`${item.pk}`,
+            html`${item.created_by.username}`,
+            html`${new Date(item.expires * 1000).toLocaleString()}`,
+            html`
+            <ak-modal-button href="${Invitation.adminUrl(`${item.pk}/delete/`)}">
+                <ak-spinner-button slot="trigger" class="pf-m-danger">
+                    ${gettext("Delete")}
+                </ak-spinner-button>
+                <div slot="modal"></div>
+            </ak-modal-button>`,
+        ];
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`
+        <ak-modal-button href=${Invitation.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()}
+        `;
+    }
+}

web/src/pages/stages/PromptListPage.ts

@@ -0,0 +1,84 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { AKResponse } from "../../api/Client";
+import { TablePage } from "../../elements/table/TablePage";
+
+import "../../elements/buttons/ModalButton";
+import "../../elements/buttons/SpinnerButton";
+import { TableColumn } from "../../elements/table/Table";
+import { Prompt } from "../../api/Prompts";
+
+@customElement("ak-stage-prompt-list")
+export class PromptListPage extends TablePage<Prompt> {
+    searchEnabled(): boolean {
+        return true;
+    }
+    pageTitle(): string {
+        return gettext("Prompts");
+    }
+    pageDescription(): string {
+        return gettext("Single Prompts that can be used for Prompt Stages.");
+    }
+    pageIcon(): string {
+        return gettext("pf-icon pf-icon-plugged");
+    }
+
+    @property()
+    order = "order";
+
+    apiEndpoint(page: number): Promise<AKResponse<Prompt>> {
+        return Prompt.list({
+            ordering: this.order,
+            page: page,
+            search: this.search || "",
+        });
+    }
+
+    columns(): TableColumn[] {
+        return [
+            new TableColumn("Field", "field_key"),
+            new TableColumn("Label", "label"),
+            new TableColumn("Type", "type"),
+            new TableColumn("Order", "order"),
+            new TableColumn("Stages"),
+            new TableColumn(""),
+        ];
+    }
+
+    row(item: Prompt): TemplateResult[] {
+        return [
+            html`${item.field_key}`,
+            html`${item.label}`,
+            html`${item.type}`,
+            html`${item.order}`,
+            html`${item.promptstage_set.map((stage) => {
+                return html`<li>${stage.name}</li>`;
+            })}`,
+            html`
+            <ak-modal-button href="${Prompt.adminUrl(`${item.pk}/update/`)}">
+                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+                    ${gettext("Edit")}
+                </ak-spinner-button>
+                <div slot="modal"></div>
+            </ak-modal-button>
+            <ak-modal-button href="${Prompt.adminUrl(`${item.pk}/delete/`)}">
+                <ak-spinner-button slot="trigger" class="pf-m-danger">
+                    ${gettext("Delete")}
+                </ak-spinner-button>
+                <div slot="modal"></div>
+            </ak-modal-button>`,
+        ];
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`
+        <ak-modal-button href=${Prompt.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()}
+        `;
+    }
+}

web/src/routes.ts

@@ -22,6 +22,8 @@ import "./pages/providers/ProviderViewPage";
 import "./pages/sources/SourcesListPage";
 import "./pages/sources/SourceViewPage";
 import "./pages/stages/StageListPage";
+import "./pages/stages/InvitationListPage";
+import "./pages/stages/PromptListPage";
 import "./pages/system-tasks/SystemTaskListPage";
 import "./pages/tokens/TokenListPage";
 import "./pages/users/UserListPage";
@@ -49,6 +51,8 @@ export const ROUTES: Route[] = [
     new Route(new RegExp("^/identity/groups$"), html`<ak-group-list></ak-group-list>`),
     new Route(new RegExp("^/identity/users$"), html`<ak-user-list></ak-user-list>`),
     new Route(new RegExp("^/core/tokens$"), html`<ak-token-list></ak-token-list>`),
+    new Route(new RegExp("^/flow/stages/invitations$"), html`<ak-stage-invitation-list></ak-stage-invitation-list>`),
+    new Route(new RegExp("^/flow/stages/prompts$"), html`<ak-stage-prompt-list></ak-stage-prompt-list>`),
     new Route(new RegExp("^/flow/stages$"), html`<ak-stage-list></ak-stage-list>`),
     new Route(new RegExp("^/flow/flows$"), html`<ak-flow-list></ak-flow-list>`),
     new Route(new RegExp(`^/flow/flows/(?<slug>${SLUG_REGEX})$`)).then((args) => {