Merge pull request #6588 from WoltLab/62-articles-mark-as-read

Fix removal of the 'new' badges when marking all articles as read

Author: BurntimeX

com.woltlab.wcf/templates/articleList.tpl

@@ -39,7 +39,7 @@
 {if $__wcf->user->userID}
 	<script data-relocate="true">
 		require(['WoltLabSuite/Core/Ui/Article/MarkAllAsRead'], ({ setup }) => {
-			setup();
+			setup(document.getElementById('{unsafe:$listView->getID()|encodeJS}_items'));
 		});
 	</script>
 {/if}

com.woltlab.wcf/templates/categoryArticleList.tpl

@@ -46,7 +46,7 @@
 {if $__wcf->user->userID}
 	<script data-relocate="true">
 		require(['WoltLabSuite/Core/Ui/Article/MarkAllAsRead'], ({ setup }) => {
-			setup();
+			setup(document.getElementById('{unsafe:$listView->getID()|encodeJS}_items'));
 		});
 	</script>
 {/if}

ts/WoltLabSuite/Core/Ui/Article/MarkAllAsRead.ts

@@ -9,22 +9,27 @@
 
 import { showDefaultSuccessSnackbar } from "WoltLabSuite/Core/Component/Snackbar";
 import { dboAction } from "../../Ajax";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
 
-async function markAllAsRead(): Promise<void> {
+async function markAllAsRead(listView?: HTMLElement): Promise<void> {
   await dboAction("markAllAsRead", "wcf\\data\\article\\ArticleAction").dispatch();
 
-  document.querySelectorAll(".contentItemList .contentItemBadgeNew").forEach((el: HTMLElement) => el.remove());
+  if (listView !== undefined) {
+    listView.dispatchEvent(new CustomEvent("interaction:invalidate-all"));
+  }
+
   document.querySelectorAll(".boxMenu .active .badgeUpdate").forEach((el: HTMLElement) => el.remove());
 
   showDefaultSuccessSnackbar();
 }
 
-export function setup(): void {
+export function setup(listView?: HTMLElement): void {
   document.querySelectorAll(".markAllAsReadButton").forEach((el: HTMLElement) => {
-    el.addEventListener("click", (event) => {
-      event.preventDefault();
-
-      void markAllAsRead();
-    });
+    el.addEventListener(
+      "click",
+      promiseMutex(async () => {
+        await markAllAsRead(listView);
+      }),
+    );
   });
 }