web: implement bulk-delete form

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/pages/policies/BoundPoliciesList.ts

@@ -4,7 +4,7 @@ import { AKResponse } from "../../api/Client";
 import { Table, TableColumn } from "../../elements/table/Table";
 import { PoliciesApi, PolicyBinding } from "authentik-api";
 
-import "../../elements/forms/DeleteForm";
+import "../../elements/forms/DeleteBulkForm";
 import "../../elements/Tabs";
 import "../../elements/forms/ProxyForm";
 import "../../elements/buttons/SpinnerButton";
@@ -96,26 +96,25 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
     }
 
     renderToolbarSelected(): TemplateResult {
-        const disabled = this.selectedElements.length !== 1;
-        const item = this.selectedElements[0];
-        return html`<ak-forms-delete
-            .obj=${item}
-            objectLabel=${t`Policy binding`}
-            .usedBy=${() => {
+        const disabled = this.selectedElements.length < 1;
+        return html`<ak-forms-delete-bulk
+            objectLabel=${t`Policy binding(s)`}
+            .objects=${this.selectedElements}
+            .usedBy=${(item: PolicyBinding) => {
                 return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsUsedByList({
                     policyBindingUuid: item.pk,
                 });
             }}
-            .delete=${() => {
+            .delete=${(item: PolicyBinding) => {
                 return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsDestroy({
                     policyBindingUuid: item.pk,
                 });
             }}
         >
             <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
-                ${t`Delete Binding`}
+                ${t`Delete`}
             </button>
-        </ak-forms-delete>`;
+        </ak-forms-delete-bulk>`;
     }
 
     row(item: PolicyBinding): TemplateResult[] {

web/src/pages/policies/PolicyListPage.ts

@@ -5,7 +5,7 @@ import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
-import "../../elements/forms/DeleteForm";
+import "../../elements/forms/DeleteBulkForm";
 import "../../elements/forms/ModalForm";
 import "../../elements/forms/ProxyForm";
 import "../../elements/forms/ConfirmationForm";
@@ -99,31 +99,25 @@ export class PolicyListPage extends TablePage<Policy> {
     }
 
     renderToolbarSelected(): TemplateResult {
-        const disabled = this.selectedElements.length !== 1;
-        const item = this.selectedElements[0];
-        return html`<ak-forms-delete
-            .obj=${item}
-            objectLabel=${t`Policy`}
-            .usedBy=${() => {
+        const disabled = this.selectedElements.length < 1;
+        return html`<ak-forms-delete-bulk
+            objectLabel=${t`Policy / Policies`}
+            .objects=${this.selectedElements}
+            .usedBy=${(item: Policy) => {
                 return new PoliciesApi(DEFAULT_CONFIG).policiesAllUsedByList({
                     policyUuid: item.pk,
                 });
             }}
-            .delete=${() => {
+            .delete=${(item: Policy) => {
                 return new PoliciesApi(DEFAULT_CONFIG).policiesAllDestroy({
                     policyUuid: item.pk,
                 });
             }}
         >
-            <button
-                ?disabled=${disabled}
-                slot="trigger"
-                type="button"
-                class="pf-c-button pf-m-danger ${disabled && "pf-m-disabled"}"
-            >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
                 ${t`Delete`}
             </button>
-        </ak-forms-delete>`;
+        </ak-forms-delete-bulk>`;
     }
 
     renderToolbar(): TemplateResult {

web/src/pages/policies/reputation/IPReputationListPage.ts

@@ -5,7 +5,7 @@ import { TablePage } from "../../../elements/table/TablePage";
 
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
-import "../../../elements/forms/DeleteForm";
+import "../../../elements/forms/DeleteBulkForm";
 import "../../../elements/forms/ModalForm";
 import { TableColumn } from "../../../elements/table/Table";
 import { PAGE_SIZE } from "../../../constants";
@@ -50,17 +50,16 @@ export class IPReputationListPage extends TablePage<IPReputation> {
     }
 
     renderToolbarSelected(): TemplateResult {
-        const disabled = this.selectedElements.length !== 1;
-        const item = this.selectedElements[0];
-        return html`<ak-forms-delete
-            .obj=${item}
+        const disabled = this.selectedElements.length < 1;
+        return html`<ak-forms-delete-bulk
             objectLabel=${t`IP Reputation`}
-            .usedBy=${() => {
+            .objects=${this.selectedElements}
+            .usedBy=${(item: IPReputation) => {
                 return new PoliciesApi(DEFAULT_CONFIG).policiesReputationIpsUsedByList({
                     id: item.pk,
                 });
             }}
-            .delete=${() => {
+            .delete=${(item: IPReputation) => {
                 return new PoliciesApi(DEFAULT_CONFIG).policiesReputationIpsDestroy({
                     id: item.pk,
                 });
@@ -69,7 +68,7 @@ export class IPReputationListPage extends TablePage<IPReputation> {
             <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
                 ${t`Delete`}
             </button>
-        </ak-forms-delete>`;
+        </ak-forms-delete-bulk>`;
     }
 
     row(item: IPReputation): TemplateResult[] {

web/src/pages/policies/reputation/UserReputationListPage.ts

@@ -5,7 +5,7 @@ import { TablePage } from "../../../elements/table/TablePage";
 
 import "../../../elements/buttons/ModalButton";
 import "../../../elements/buttons/SpinnerButton";
-import "../../../elements/forms/DeleteForm";
+import "../../../elements/forms/DeleteBulkForm";
 import "../../../elements/forms/ModalForm";
 import { TableColumn } from "../../../elements/table/Table";
 import { PAGE_SIZE } from "../../../constants";
@@ -46,17 +46,16 @@ export class UserReputationListPage extends TablePage<UserReputation> {
     }
 
     renderToolbarSelected(): TemplateResult {
-        const disabled = this.selectedElements.length !== 1;
-        const item = this.selectedElements[0];
-        return html`<ak-forms-delete
-            .obj=${item}
+        const disabled = this.selectedElements.length < 1;
+        return html`<ak-forms-delete-bulk
             objectLabel=${t`User Reputation`}
-            .usedBy=${() => {
+            .objects=${this.selectedElements}
+            .usedBy=${(item: UserReputation) => {
                 return new PoliciesApi(DEFAULT_CONFIG).policiesReputationUsersUsedByList({
                     id: item.pk,
                 });
             }}
-            .delete=${() => {
+            .delete=${(item: UserReputation) => {
                 return new PoliciesApi(DEFAULT_CONFIG).policiesReputationUsersDestroy({
                     id: item.pk,
                 });
@@ -65,7 +64,7 @@ export class UserReputationListPage extends TablePage<UserReputation> {
             <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
                 ${t`Delete`}
             </button>
-        </ak-forms-delete>`;
+        </ak-forms-delete-bulk>`;
     }
 
     row(item: UserReputation): TemplateResult[] {