From a353c6956e5bd07e15a3778037347fda57c308d0 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Wed, 10 Feb 2021 20:12:15 +0100
Subject: [PATCH] web: fix missing source create button

---
 web/src/api/Sources.ts                      |  5 ++++
 web/src/pages/providers/ProviderListPage.ts |  2 +-
 web/src/pages/sources/SourcesListPage.ts    | 31 +++++++++++++++++++--
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/web/src/api/Sources.ts b/web/src/api/Sources.ts
index 749dfb031..0e05d2b5b 100644
--- a/web/src/api/Sources.ts
+++ b/web/src/api/Sources.ts
@@ -1,4 +1,5 @@
 import { BaseInheritanceModel, DefaultClient, AKResponse, QueryArguments } from "./Client";
+import { TypeCreate } from "./Providers";
 
 export class Source implements BaseInheritanceModel {
     pk: string;
@@ -23,6 +24,10 @@ export class Source implements BaseInheritanceModel {
         return DefaultClient.fetch<AKResponse<Source>>(["sources", "all"], filter);
     }
 
+    static getTypes(): Promise<TypeCreate[]> {
+        return DefaultClient.fetch<TypeCreate[]>(["sources", "all", "types"]);
+    }
+
     static adminUrl(rest: string): string {
         return `/administration/sources/${rest}`;
     }
diff --git a/web/src/pages/providers/ProviderListPage.ts b/web/src/pages/providers/ProviderListPage.ts
index c7ca29608..fc524f796 100644
--- a/web/src/pages/providers/ProviderListPage.ts
+++ b/web/src/pages/providers/ProviderListPage.ts
@@ -92,7 +92,7 @@ export class ProviderListPage extends TablePage<Provider> {
                                 <div slot="modal"></div>
                             </ak-modal-button>
                         </li>`;
-                    })
+                    });
                 }), html`<ak-spinner></ak-spinner>`)}
             </ul>
         </ak-dropdown>
diff --git a/web/src/pages/sources/SourcesListPage.ts b/web/src/pages/sources/SourcesListPage.ts
index f64e21ea9..7266e9e22 100644
--- a/web/src/pages/sources/SourcesListPage.ts
+++ b/web/src/pages/sources/SourcesListPage.ts
@@ -7,6 +7,8 @@ import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
+import "../../elements/buttons/Dropdown";
+import { until } from "lit-html/directives/until";
 
 @customElement("ak-source-list")
 export class SourceListPage extends TablePage<Source> {
@@ -52,13 +54,13 @@ export class SourceListPage extends TablePage<Source> {
             html`
             <ak-modal-button href="${Source.adminUrl(`${item.pk}/update/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-secondary">
-                    Edit
+                    ${gettext("Edit")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>&nbsp;
             <ak-modal-button href="${Source.adminUrl(`${item.pk}/delete/`)}">
                 <ak-spinner-button slot="trigger" class="pf-m-danger">
-                    Delete
+                    ${gettext("Delete")}
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
@@ -66,4 +68,29 @@ export class SourceListPage extends TablePage<Source> {
         ];
     }
 
+    renderToolbar(): TemplateResult {
+        return html`
+        <ak-dropdown class="pf-c-dropdown">
+            <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
+                <span class="pf-c-dropdown__toggle-text">${gettext("Create")}</span>
+                <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
+            </button>
+            <ul class="pf-c-dropdown__menu" hidden>
+                ${until(Source.getTypes().then((types) => {
+                    return types.map((type) => {
+                        return html`<li>
+                            <ak-modal-button href="${type.link}">
+                                <button slot="trigger" class="pf-c-dropdown__menu-item">${type.name}<br>
+                                    <small>${type.description}</small>
+                                </button>
+                                <div slot="modal"></div>
+                            </ak-modal-button>
+                        </li>`;
+                    });
+                }), html`<ak-spinner></ak-spinner>`)}
+            </ul>
+        </ak-dropdown>
+        ${super.renderToolbar()}`;
+    }
+
 }