web: implement initial DeleteForm

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-18 01:43:12 +01:00
parent ac78e3e2ec
commit a95b6e0e61
5 changed files with 99 additions and 8 deletions

View file

@ -15,7 +15,7 @@ export class ActionButton extends SpinnerButton {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
apiRequest: () => Promise<any> = () => { throw new Error(); }; apiRequest: () => Promise<any> = () => { throw new Error(); };
callAction(): void { defaultCallAction(): void {
if (this.isRunning === true) { if (this.isRunning === true) {
return; return;
} }

View file

@ -158,6 +158,10 @@ export class ModalButton extends LitElement {
} }
} }
renderModalInner(): TemplateResult {
return html`${unsafeHTML(this.modal)}`;
}
renderModal(): TemplateResult { renderModal(): TemplateResult {
return html`<div class="pf-c-backdrop"> return html`<div class="pf-c-backdrop">
<div class="pf-l-bullseye"> <div class="pf-l-bullseye">
@ -176,7 +180,7 @@ export class ModalButton extends LitElement {
> >
<i class="fas fa-times" aria-hidden="true"></i> <i class="fas fa-times" aria-hidden="true"></i>
</button> </button>
${unsafeHTML(this.modal)} ${this.renderModalInner()}
</div> </div>
</div> </div>
</div>`; </div>`;

View file

@ -13,6 +13,9 @@ export class SpinnerButton extends LitElement {
@property() @property()
form?: string; form?: string;
@property()
callAction: () => void = this.defaultCallAction;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
PFBase, PFBase,
@ -49,7 +52,7 @@ export class SpinnerButton extends LitElement {
}, 1000); }, 1000);
} }
callAction(): void { defaultCallAction(): void {
if (this.isRunning === true) { if (this.isRunning === true) {
return; return;
} }

View file

@ -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<DeletableObject>;
confirm(): void {
this.delete().then(() => {
this.open = false;
this.dispatchEvent(
new CustomEvent("ak-refresh", {
bubbles: true,
composed: true,
})
);
});
}
renderModalInner(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
${gettext(`Delete ${(this.obj?.verboseName) || this.objectLabel}`)}
</h1>
</div>
</section>
<section class="pf-c-page__main-section">
<div class="pf-l-stack">
<div class="pf-l-stack__item">
<div class="pf-c-card">
<div class="pf-c-card__body">
<form class="pf-c-form pf-m-horizontal">
<p>
${gettext(
`Are you sure you want to delete ${(this.obj?.verboseName) || this.objectLabel} '${this.obj?.name}'?`
)}
</p>
</form>
</div>
</div>
</div>
</div>
</section>
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
this.confirm();
}}
class="pf-m-danger">
${gettext("Delete")}
</ak-spinner-button>&nbsp;
<ak-spinner-button
.callAction=${() => {
this.open = false;
}}
class="pf-m-secondary">
${gettext("Cancel")}
</ak-spinner-button>
</footer>`;
}
}

View file

@ -3,6 +3,7 @@ import { customElement, html, property, TemplateResult } from "lit-element";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../api/Client";
import { TablePage } from "../../elements/table/TablePage"; import { TablePage } from "../../elements/table/TablePage";
import "../../elements/forms/DeleteForm";
import "../../elements/buttons/ModalButton"; import "../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../elements/buttons/SpinnerButton";
import { TableColumn } from "../../elements/table/Table"; import { TableColumn } from "../../elements/table/Table";
@ -61,12 +62,18 @@ export class GroupListPage extends TablePage<Group> {
</ak-spinner-button> </ak-spinner-button>
<div slot="modal"></div> <div slot="modal"></div>
</ak-modal-button> </ak-modal-button>
<ak-modal-button href="${AdminURLManager.groups(`${item.pk}/delete/`)}"> <ak-forms-delete
<ak-spinner-button slot="trigger" class="pf-m-danger"> .obj=${item}
objectLabel=${gettext("Group")}
.delete=${() => {
return new CoreApi(DEFAULT_CONFIG).coreGroupsDelete({
groupUuid: item.pk || ""
});
}}>
<button slot="trigger" class="pf-c-button pf-m-danger">
${gettext("Delete")} ${gettext("Delete")}
</ak-spinner-button> </button>
<div slot="modal"></div> </ak-forms-delete>`,
</ak-modal-button>`,
]; ];
} }