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

@ -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