diff --git a/web/src/elements/buttons/ActionButton.ts b/web/src/elements/buttons/ActionButton.ts index 02f13eb50..868c99b36 100644 --- a/web/src/elements/buttons/ActionButton.ts +++ b/web/src/elements/buttons/ActionButton.ts @@ -15,7 +15,7 @@ export class ActionButton extends SpinnerButton { // eslint-disable-next-line @typescript-eslint/no-explicit-any apiRequest: () => Promise = () => { throw new Error(); }; - callAction(): void { + defaultCallAction(): void { if (this.isRunning === true) { return; } diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts index be56fee06..d04e02b16 100644 --- a/web/src/elements/buttons/ModalButton.ts +++ b/web/src/elements/buttons/ModalButton.ts @@ -158,6 +158,10 @@ export class ModalButton extends LitElement { } } + renderModalInner(): TemplateResult { + return html`${unsafeHTML(this.modal)}`; + } + renderModal(): TemplateResult { return html`
@@ -176,7 +180,7 @@ export class ModalButton extends LitElement { > - ${unsafeHTML(this.modal)} + ${this.renderModalInner()}
`; diff --git a/web/src/elements/buttons/SpinnerButton.ts b/web/src/elements/buttons/SpinnerButton.ts index 966324777..b46fe5e1f 100644 --- a/web/src/elements/buttons/SpinnerButton.ts +++ b/web/src/elements/buttons/SpinnerButton.ts @@ -13,6 +13,9 @@ export class SpinnerButton extends LitElement { @property() form?: string; + @property() + callAction: () => void = this.defaultCallAction; + static get styles(): CSSResult[] { return [ PFBase, @@ -49,7 +52,7 @@ export class SpinnerButton extends LitElement { }, 1000); } - callAction(): void { + defaultCallAction(): void { if (this.isRunning === true) { return; } diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts new file mode 100644 index 000000000..98816ff4b --- /dev/null +++ b/web/src/elements/forms/DeleteForm.ts @@ -0,0 +1,77 @@ +import { gettext } from "django"; +import { customElement, html, property, TemplateResult } from "lit-element"; +import { BaseInheritanceModel } from "../../api/Client"; +import { ModalButton } from "../buttons/ModalButton"; + +export interface DeletableObject extends BaseInheritanceModel { + name: string | number; +} + +@customElement("ak-forms-delete") +export class DeleteForm extends ModalButton { + + @property() + obj?: DeletableObject; + + @property() + objectLabel?: string; + + @property({attribute: false}) + delete!: () => Promise; + + confirm(): void { + this.delete().then(() => { + this.open = false; + this.dispatchEvent( + new CustomEvent("ak-refresh", { + bubbles: true, + composed: true, + }) + ); + }); + } + + renderModalInner(): TemplateResult { + return html`
+
+

+ ${gettext(`Delete ${(this.obj?.verboseName) || this.objectLabel}`)} +

+
+
+
+
+
+
+
+
+

+ ${gettext( + `Are you sure you want to delete ${(this.obj?.verboseName) || this.objectLabel} '${this.obj?.name}'?` + )} +

+
+
+
+
+
+
+
+ { + this.confirm(); + }} + class="pf-m-danger"> + ${gettext("Delete")} +   + { + this.open = false; + }} + class="pf-m-secondary"> + ${gettext("Cancel")} + +
`; + } + +} diff --git a/web/src/pages/groups/GroupListPage.ts b/web/src/pages/groups/GroupListPage.ts index 9d896b468..5b2ed1ab9 100644 --- a/web/src/pages/groups/GroupListPage.ts +++ b/web/src/pages/groups/GroupListPage.ts @@ -3,6 +3,7 @@ import { customElement, html, property, TemplateResult } from "lit-element"; import { AKResponse } from "../../api/Client"; import { TablePage } from "../../elements/table/TablePage"; +import "../../elements/forms/DeleteForm"; import "../../elements/buttons/ModalButton"; import "../../elements/buttons/SpinnerButton"; import { TableColumn } from "../../elements/table/Table"; @@ -61,12 +62,18 @@ export class GroupListPage extends TablePage {
- - + { + return new CoreApi(DEFAULT_CONFIG).coreGroupsDelete({ + groupUuid: item.pk || "" + }); + }}> + + `, ]; }