Add interaction effect that reloads the detail page

Author: BurntimeX

ts/WoltLabSuite/Core/Component/Interaction/FormBuilderDialog.ts

@@ -9,30 +9,65 @@
 
 import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
 import { showDefaultSuccessSnackbar } from "WoltLabSuite/Core/Component/Snackbar";
+import { InteractionEffect } from "./InteractionEffect";
 
 type Payload = Record<string, string>;
 
-async function handleFormBuilderDialogAction(element: HTMLElement, endpoint: string, detail: Payload): Promise<void> {
+async function handleFormBuilderDialogAction(
+  container: HTMLElement,
+  element: HTMLElement,
+  endpoint: string,
+  interactionEffect: InteractionEffect = InteractionEffect.ReloadItem,
+  detail: Payload,
+): Promise<void> {
   const { ok } = await dialogFactory().usingFormBuilder().fromEndpoint(endpoint);
 
   if (!ok) {
     return;
   }
 
-  element.dispatchEvent(
-    new CustomEvent<Payload>("interaction:invalidate", {
-      bubbles: true,
-      detail,
-    }),
-  );
+  if (interactionEffect === InteractionEffect.ReloadItem || interactionEffect === InteractionEffect.ReloadPage) {
+    element.dispatchEvent(
+      new CustomEvent<Payload>("interaction:invalidate", {
+        bubbles: true,
+        detail: {
+          ...detail,
+          _reloadPage: String(interactionEffect === InteractionEffect.ReloadPage),
+        },
+      }),
+    );
+  } else if (interactionEffect === InteractionEffect.ReloadList) {
+    container.dispatchEvent(
+      new CustomEvent<Payload>("interaction:invalidate-all", {
+        detail: {
+          ...detail,
+        },
+      }),
+    );
+  } else {
+    element.dispatchEvent(
+      new CustomEvent<Payload>("interaction:remove", {
+        bubbles: true,
+        detail: {
+          ...detail,
+        },
+      }),
+    );
+  }
 
   showDefaultSuccessSnackbar();
 }
 
 export function setup(identifier: string, container: HTMLElement): void {
   container.addEventListener("interaction:execute", (event: CustomEvent<Payload>) => {
     if (event.detail.interaction === identifier) {
-      void handleFormBuilderDialogAction(event.target as HTMLElement, event.detail.endpoint, event.detail);
+      void handleFormBuilderDialogAction(
+        container,
+        event.target as HTMLElement,
+        event.detail.endpoint,
+        event.detail.interactionEffect as InteractionEffect,
+        event.detail,
+      );
     }
   });
 }

ts/WoltLabSuite/Core/Component/Interaction/InteractionEffect.ts

@@ -10,5 +10,6 @@
 export enum InteractionEffect {
   ReloadItem = "ReloadItem",
   ReloadList = "ReloadList",
+  ReloadPage = "ReloadPage",
   RemoveItem = "RemoveItem",
 }

ts/WoltLabSuite/Core/Component/Interaction/LegacyDboAction.ts

@@ -37,11 +37,14 @@ async function handleDboAction(
     .payload(confirmationResult.reason ? { reason: confirmationResult.reason } : {})
     .dispatch();
 
-  if (interactionEffect === InteractionEffect.ReloadItem) {
+  if (interactionEffect === InteractionEffect.ReloadItem || interactionEffect === InteractionEffect.ReloadPage) {
     element.dispatchEvent(
       new CustomEvent<Payload>("interaction:invalidate", {
         bubbles: true,
-        detail,
+        detail: {
+          ...detail,
+          _reloadPage: String(interactionEffect === InteractionEffect.ReloadPage),
+        },
       }),
     );
   } else if (interactionEffect === InteractionEffect.ReloadList) {

ts/WoltLabSuite/Core/Component/Interaction/Rpc.ts

@@ -46,11 +46,14 @@ async function handleRpcInteraction(
     }
   }
 
-  if (interactionEffect === InteractionEffect.ReloadItem) {
+  if (interactionEffect === InteractionEffect.ReloadItem || interactionEffect === InteractionEffect.ReloadPage) {
     element.dispatchEvent(
       new CustomEvent<Payload>("interaction:invalidate", {
         bubbles: true,
-        detail,
+        detail: {
+          ...detail,
+          _reloadPage: String(interactionEffect === InteractionEffect.ReloadPage),
+        },
       }),
     );
   } else if (interactionEffect === InteractionEffect.ReloadList) {

ts/WoltLabSuite/Core/Component/Interaction/StandaloneButton.ts

@@ -15,6 +15,8 @@ interface HeaderContent {
   template: string;
 }
 
+type Payload = Record<string, string>;
+
 export class StandaloneButton {
   #container: HTMLElement;
   #providerClassName: string;
@@ -100,9 +102,15 @@ export class StandaloneButton {
   }
 
   #initEventListeners(): void {
-    this.#container.addEventListener("interaction:invalidate", () => {
-      void this.#refreshContextMenu();
-      void this.#refreshHeader();
+    this.#container.addEventListener("interaction:invalidate", (event: CustomEvent<Payload>) => {
+      if (event.detail._reloadPage === "true") {
+        setTimeout(() => {
+          window.location.reload();
+        }, 2000);
+      } else {
+        void this.#refreshContextMenu();
+        void this.#refreshHeader();
+      }
     });
 
     this.#container.addEventListener("interaction:invalidate-all", () => {
@@ -111,7 +119,9 @@ export class StandaloneButton {
     });
 
     this.#container.addEventListener("interaction:remove", () => {
-      window.location.href = this.#redirectUrl;
+      setTimeout(() => {
+        window.location.href = this.#redirectUrl;
+      }, 2000);
     });
   }
 }

wcfsetup/install/files/acp/templates/articleAdd.tpl

@@ -10,17 +10,6 @@
 			{if $action == 'edit'}
 				<li>
 					{unsafe:$interactionContextMenu->render()}
-					<script data-relocate="true">
-						{
-							document.getElementById('{unsafe:$interactionContextMenu->getContainerID()|encodeJS}').addEventListener('interaction:invalidate', (event) => {
-								if (event.detail.interaction === 'toggle-i18n') {
-									setTimeout(() => {
-										window.location.reload();
-									}, 2000);
-								}
-							});
-						}
-					</script>
 				</li>
 			{/if}