Do not reload the page in the ACP when editing the user after his avatar has been...

diff --git a/ts/WoltLabSuite/Core/Component/User/Avatar.ts b/ts/WoltLabSuite/Core/Component/User/Avatar.ts
index c339b0690644ac05894da12947eaaa0ae991a3fa..4c829c54ce2ade414edc87b455adb6d80976d280 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/User/Avatar.ts
+++ b/ts/WoltLabSuite/Core/Component/User/Avatar.ts
@@ -12,19 +12,37 @@ import { wheneverFirstSeen } from "WoltLabSuite/Core/Helper/Selector";
 import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
 import UiCloseOverlay from "WoltLabSuite/Core/Ui/CloseOverlay";
 
+interface Result {
+  avatar: string;
+}
+
 async function editAvatar(button: HTMLElement): Promise<void> {
   // If the user is editing their own avatar, the control panel is open and can overlay the dialog.
   UiCloseOverlay.execute();
 
-  const { ok } = await dialogFactory().usingFormBuilder().fromEndpoint(button.dataset.editAvatar!);
+  const { ok, result } = await dialogFactory().usingFormBuilder().fromEndpoint<Result>(button.dataset.editAvatar!);
 
   if (ok) {
-    // TODO can we simple replace all avatar images?
-    window.location.reload();
+    const avatarForm = document.getElementById("avatarForm");
+    if (avatarForm) {
+      // In the ACP, the form should not be reloaded after changing the avatar.
+      avatarForm.querySelector<HTMLImageElement>("img.userAvatarImage")!.src = result.avatar;
+    } else {
+      // TODO can we simple replace all avatar images?
+      window.location.reload();
+    }
   }
 }
 
 export function setup(): void {
+  wheneverFirstSeen(
+    "#wcf\\\\action\\\\UserAvatarAction_avatarFileIDContainer woltlab-core-file img",
+    (img: HTMLImageElement) => {
+      img.classList.add("userAvatarImage");
+      img.parentElement!.classList.add("userAvatar");
+    },
+  );
+
   wheneverFirstSeen("[data-edit-avatar]", (button) => {
     button.addEventListener(
       "click",

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
index c57c8c91e7c78cbafb052a38382c6841bd2b262c..1f211f28a257e3393a4ce4ecfb9c30b9114824a9 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/User/Avatar.js
@@ -14,13 +14,24 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/PromiseMutex",
     async function editAvatar(button) {
         // If the user is editing their own avatar, the control panel is open and can overlay the dialog.
         CloseOverlay_1.default.execute();
-        const { ok } = await (0, Dialog_1.dialogFactory)().usingFormBuilder().fromEndpoint(button.dataset.editAvatar);
+        const { ok, result } = await (0, Dialog_1.dialogFactory)().usingFormBuilder().fromEndpoint(button.dataset.editAvatar);
         if (ok) {
-            // TODO can we simple replace all avatar images?
-            window.location.reload();
+            const avatarForm = document.getElementById("avatarForm");
+            if (avatarForm) {
+                // In the ACP, the form should not be reloaded after changing the avatar.
+                avatarForm.querySelector("img.userAvatarImage").src = result.avatar;
+            }
+            else {
+                // TODO can we simple replace all avatar images?
+                window.location.reload();
+            }
         }
     }
     function setup() {
+        (0, Selector_1.wheneverFirstSeen)("#wcf\\\\action\\\\UserAvatarAction_avatarFileIDContainer woltlab-core-file img", (img) => {
+            img.classList.add("userAvatarImage");
+            img.parentElement.classList.add("userAvatar");
+        });
         (0, Selector_1.wheneverFirstSeen)("[data-edit-avatar]", (button) => {
             button.addEventListener("click", (0, PromiseMutex_1.promiseMutex)(() => editAvatar(button)));
         });

diff --git a/wcfsetup/install/files/lib/action/UserAvatarAction.class.php b/wcfsetup/install/files/lib/action/UserAvatarAction.class.php
index c42a5019d45946ef35247121c9c359d53d806aa5..7529be1d066c73176c74ac15f02a58e6ad10a4d6 100644 (file)
--- a/wcfsetup/install/files/lib/action/UserAvatarAction.class.php
+++ b/wcfsetup/install/files/lib/action/UserAvatarAction.class.php
@@ -78,9 +78,14 @@ final class UserAvatarAction implements RequestHandlerInterface
                 (new SetAvatar($user->getDecoratedObject()))();
             }
 
+            // Reload the user object to get the updated avatar
+            UserProfileRuntimeCache::getInstance()->removeObject($user->userID);
+            $user = UserProfileRuntimeCache::getInstance()->getObject($user->userID);
+
             return new JsonResponse([
-                // TODO did we need the avatar url?
-                'result' => [],
+                'result' => [
+                    'avatar' => $user->getAvatar()->getURL(),
+                ],
             ]);
         } else {
             throw new \LogicException('Unreachable');