web/elements: rewrite SpinnerButton to promises, fix spinner button with forms after errors

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-04 20:42:50 +02:00
parent 52029f55e4
commit 002c048d0b
7 changed files with 44 additions and 52 deletions

View File

@ -101,15 +101,6 @@ body {
--pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
--pf-global--link--Color: var(--ak-dark-foreground-link);
}
paper-input {
/* --paper-input-container-input-color: var(--ak-dark-foreground); */
--primary-text-color: var(--ak-dark-foreground);
}
paper-checkbox {
--primary-text-color: var(--ak-dark-foreground);
}
/* Global page background colour */
.pf-c-page {
--pf-c-page--BackgroundColor: var(--ak-dark-background);

View File

@ -1,5 +1,4 @@
import { customElement, property } from "lit-element";
import { ERROR_CLASS, SUCCESS_CLASS } from "../../constants";
import { SpinnerButton } from "./SpinnerButton";
import { showMessage } from "../messages/MessageContainer";
import { MessageLevel } from "../messages/Message";
@ -16,14 +15,9 @@ export class ActionButton extends SpinnerButton {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
apiRequest: () => Promise<any> = () => { throw new Error(); };
callAction = (): void => {
if (this.isRunning === true) {
return;
}
callAction = (): Promise<void> => {
this.setLoading();
this.apiRequest().then(() => {
this.setDone(SUCCESS_CLASS);
}).catch((e: Error | Response) => {
return this.apiRequest().catch((e: Error | Response) => {
if (e instanceof Error) {
showMessage({
level: MessageLevel.error,
@ -37,7 +31,7 @@ export class ActionButton extends SpinnerButton {
});
});
}
this.setDone(ERROR_CLASS);
throw e;
});
};
}

View File

@ -4,7 +4,7 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFSpinner from "@patternfly/patternfly/components/Spinner/spinner.css";
import AKGlobal from "../../authentik.css";
import { SpinnerSize } from "../Spinner";
import { PRIMARY_CLASS, PROGRESS_CLASS } from "../../constants";
import { ERROR_CLASS, PRIMARY_CLASS, PROGRESS_CLASS, SUCCESS_CLASS } from "../../constants";
@customElement("ak-spinner-button")
export class SpinnerButton extends LitElement {
@ -12,7 +12,7 @@ export class SpinnerButton extends LitElement {
isRunning = false;
@property()
callAction?: () => void;
callAction?: () => Promise<void>;
static get styles(): CSSResult[] {
return [
@ -60,7 +60,11 @@ export class SpinnerButton extends LitElement {
}
this.setLoading();
if (this.callAction) {
this.callAction();
this.callAction().then(() => {
this.setDone(SUCCESS_CLASS);
}).catch(() => {
this.setDone(ERROR_CLASS);
});
}
}}>
${this.isRunning

View File

@ -20,8 +20,8 @@ export class ConfirmationForm extends ModalButton {
@property({attribute: false})
onConfirm!: () => Promise<unknown>;
confirm(): void {
this.onConfirm().then(() => {
confirm(): Promise<void> {
return this.onConfirm().then(() => {
this.onSuccess();
this.open = false;
this.dispatchEvent(
@ -32,6 +32,7 @@ export class ConfirmationForm extends ModalButton {
);
}).catch((e) => {
this.onError(e);
throw e;
});
}
@ -65,13 +66,13 @@ export class ConfirmationForm extends ModalButton {
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
this.confirm();
return this.confirm();
}}
class="pf-m-danger">
${this.action}
</ak-spinner-button>&nbsp;
<ak-spinner-button
.callAction=${() => {
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary">

View File

@ -18,8 +18,8 @@ export class DeleteForm extends ModalButton {
@property({attribute: false})
delete!: () => Promise<unknown>;
confirm(): void {
this.delete().then(() => {
confirm(): Promise<void> {
return this.delete().then(() => {
this.onSuccess();
this.open = false;
this.dispatchEvent(
@ -30,6 +30,7 @@ export class DeleteForm extends ModalButton {
);
}).catch((e) => {
this.onError(e);
throw e;
});
}
@ -65,13 +66,13 @@ export class DeleteForm extends ModalButton {
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
this.confirm();
return this.confirm();
}}
class="pf-m-danger">
${t`Delete`}
</ak-spinner-button>&nbsp;
<ak-spinner-button
.callAction=${() => {
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary">

View File

@ -11,13 +11,16 @@ export class ModalForm extends ModalButton {
@property({ type: Boolean })
closeAfterSuccessfulSubmit = true;
confirm(): void {
this.querySelectorAll<Form<unknown>>("[slot=form]").forEach(form => {
confirm(): Promise<void> {
const form = this.querySelector<Form<unknown>>("[slot=form]");
if (!form) {
return Promise.reject(t`No form found`);
}
const formPromise = form.submit(new Event("submit"));
if (!formPromise) {
return;
return Promise.reject(t`Form didn't return a promise for submitting`);
}
formPromise.then(() => {
return formPromise.then(() => {
if (this.closeAfterSuccessfulSubmit) {
this.open = false;
form.reset();
@ -28,9 +31,6 @@ export class ModalForm extends ModalButton {
composed: true,
})
);
}).catch((e) => {
console.log(e);
});
});
}
@ -48,13 +48,14 @@ export class ModalForm extends ModalButton {
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
this.confirm();
return this.confirm();
}}
class="pf-m-primary">
<slot name="submit"></slot>
</ak-spinner-button>&nbsp;
<ak-spinner-button
.callAction=${() => {
.callAction=${async () => {
this.resetForms();
this.open = false;
}}
class="pf-m-secondary">

View File

@ -48,13 +48,13 @@ export class UserActiveForm extends DeleteForm {
<footer class="pf-c-modal-box__footer">
<ak-spinner-button
.callAction=${() => {
this.confirm();
return this.confirm();
}}
class="pf-m-warning">
${t`Update`}
</ak-spinner-button>&nbsp;
<ak-spinner-button
.callAction=${() => {
.callAction=${async () => {
this.open = false;
}}
class="pf-m-secondary">