web: fix missing source create button

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}`;
     }

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>

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()}`;
+    }
+
 }