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

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

web/src/elements/forms/ConfirmationForm.ts

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

web/src/elements/forms/DeleteForm.ts

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

web/src/elements/forms/ModalForm.ts

@@ -11,26 +11,26 @@ export class ModalForm extends ModalButton {
     @property({ type: Boolean })
     closeAfterSuccessfulSubmit = true;
 
-    confirm(): void {
-        this.querySelectorAll<Form<unknown>>("[slot=form]").forEach(form => {
-            const formPromise = form.submit(new Event("submit"));
-            if (!formPromise) {
-                return;
+    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 Promise.reject(t`Form didn't return a promise for submitting`);
+        }
+        return formPromise.then(() => {
+            if (this.closeAfterSuccessfulSubmit) {
+                this.open = false;
+                form.reset();
             }
-            formPromise.then(() => {
-                if (this.closeAfterSuccessfulSubmit) {
-                    this.open = false;
-                    form.reset();
-                }
-                this.dispatchEvent(
-                    new CustomEvent(EVENT_REFRESH, {
-                        bubbles: true,
-                        composed: true,
-                    })
-                );
-            }).catch((e) => {
-                console.log(e);
-            });
+            this.dispatchEvent(
+                new CustomEvent(EVENT_REFRESH, {
+                    bubbles: true,
+                    composed: true,
+                })
+            );
         });
     }
 
@@ -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">