Use ignore dialog for list of ignored users (#4199)

Close #4140

diff --git a/com.woltlab.wcf/templates/ignoredUsers.tpl b/com.woltlab.wcf/templates/ignoredUsers.tpl
index 4a37a19cb61f9b43cf7e8bda930c45a9c6f275db..fe10da048376a6cacde7e121f9db847d6b0a83e8 100644 (file)
--- a/com.woltlab.wcf/templates/ignoredUsers.tpl
+++ b/com.woltlab.wcf/templates/ignoredUsers.tpl
@@ -12,9 +12,9 @@
 
 {if $objects|count}
        <div class="section sectionContainerList">
-               <ol class="containerList userList jsReloadPageWhenEmpty jsObjectActionContainer" data-object-action-class-name="wcf\data\user\ignore\UserIgnoreAction">
+               <ol class="containerList userList jsReloadPageWhenEmpty">
                        {foreach from=$objects item=user}
-                               <li class="jsIgnoredUser jsObjectActionObject" data-object-id="{@$user->getObjectID()}">
+                               <li class="jsIgnoredUser" data-object-id="{@$user->getObjectID()}">
                                        <div class="box48">
                                                {user object=$user type='avatar48' ariaHidden='true' tabindex='-1'}
                                                
@@ -23,7 +23,12 @@
                                                        
                                                        <nav class="jsMobileNavigation buttonGroupNavigation">
                                                                <ul class="buttonList iconList jsOnly">
-                                                                       <li><a class="pointer jsTooltip jsObjectAction" data-object-action="delete" title="{lang}wcf.user.button.unignore{/lang}" data-object-id="{@$user->ignoreID}"><span class="icon icon16 fa-times"></span> <span class="invisible">{lang}wcf.user.button.unignore{/lang}</span></a></li>
+                                                                       <li>
+                                                                               <a class="pointer jsTooltip jsEditIgnoreButton" title="{lang}wcf.global.button.edit{/lang}">
+                                                                                       <span class="icon icon16 fa-pencil"></span>
+                                                                                       <span class="invisible">{lang}wcf.global.button.edit{/lang}</span>
+                                                                               </a>
+                                                                       </li>
                                                                        {event name='userButtons'}
                                                                </ul>
                                                        </nav>
@@ -53,6 +58,16 @@
                        </nav>
                {/hascontent}
        </footer>
+       
+       <script data-relocate="true">
+               require(['Language', 'WoltLabSuite/Core/Ui/User/Ignore/List'], (Language, { UiUserIgnoreList }) => {
+                       Language.addObject({
+                               'wcf.user.button.ignore': '{jslang}wcf.user.button.ignore{/jslang}',
+                       });
+                       
+                       new UiUserIgnoreList();
+               });
+       </script>
 {else}
        <p class="info" role="status">{lang}wcf.user.ignoredUsers.noUsers{/lang}</p>
 {/if}

diff --git a/ts/WoltLabSuite/Core/Ui/User/Ignore/List.ts b/ts/WoltLabSuite/Core/Ui/User/Ignore/List.ts
new file mode 100644 (file)
index 0000000..23a35c3
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Ui/User/Ignore/List.ts
@@ -0,0 +1,57 @@
+/**
+ * Shows the ignore dialogs when editing users on the page listing ignored users.
+ *
+ * @author  Matthias Schmidt
+ * @copyright  2001-2021 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Ui/User/Ignore/List
+ */
+
+import FormBuilderDialog from "../../../Form/Builder/Dialog";
+import * as Language from "../../../Language";
+import * as UiNotification from "../../Notification";
+
+interface AjaxResponse {
+  isIgnoredUser: 0 | 1;
+}
+
+export class UiUserIgnoreList {
+  protected dialogs = new Map<number, FormBuilderDialog>();
+
+  constructor() {
+    document
+      .querySelectorAll(".jsEditIgnoreButton")
+      .forEach((el) => el.addEventListener("click", (ev) => this.openDialog(ev)));
+  }
+
+  protected openDialog(event: Event): void {
+    const button = event.currentTarget as HTMLAnchorElement;
+    const userId = ~~(button.closest(".jsIgnoredUser") as HTMLLIElement).dataset.objectId!;
+
+    if (!this.dialogs.has(userId)) {
+      this.dialogs.set(
+        userId,
+        new FormBuilderDialog("ignoreDialog", "wcf\\data\\user\\ignore\\UserIgnoreAction", "getDialog", {
+          dialog: {
+            title: Language.get("wcf.user.button.ignore"),
+          },
+          actionParameters: {
+            userID: userId,
+          },
+          submitActionName: "submitDialog",
+          successCallback(data: AjaxResponse) {
+            UiNotification.show(undefined, () => {
+              if (!data.isIgnoredUser) {
+                window.location.reload();
+              }
+            });
+          },
+        }),
+      );
+    }
+
+    this.dialogs.get(userId)!.open();
+  }
+}
+
+export default UiUserIgnoreList;

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Ignore/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Ignore/List.js
new file mode 100644 (file)
index 0000000..8b0e277
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Ignore/List.js
@@ -0,0 +1,49 @@
+/**
+ * Shows the ignore dialogs when editing users on the page listing ignored users.
+ *
+ * @author  Matthias Schmidt
+ * @copyright  2001-2021 WoltLab GmbH
+ * @license  GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Ui/User/Ignore/List
+ */
+define(["require", "exports", "tslib", "../../../Form/Builder/Dialog", "../../../Language", "../../Notification"], function (require, exports, tslib_1, Dialog_1, Language, UiNotification) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.UiUserIgnoreList = void 0;
+    Dialog_1 = tslib_1.__importDefault(Dialog_1);
+    Language = tslib_1.__importStar(Language);
+    UiNotification = tslib_1.__importStar(UiNotification);
+    class UiUserIgnoreList {
+        constructor() {
+            this.dialogs = new Map();
+            document
+                .querySelectorAll(".jsEditIgnoreButton")
+                .forEach((el) => el.addEventListener("click", (ev) => this.openDialog(ev)));
+        }
+        openDialog(event) {
+            const button = event.currentTarget;
+            const userId = ~~button.closest(".jsIgnoredUser").dataset.objectId;
+            if (!this.dialogs.has(userId)) {
+                this.dialogs.set(userId, new Dialog_1.default("ignoreDialog", "wcf\\data\\user\\ignore\\UserIgnoreAction", "getDialog", {
+                    dialog: {
+                        title: Language.get("wcf.user.button.ignore"),
+                    },
+                    actionParameters: {
+                        userID: userId,
+                    },
+                    submitActionName: "submitDialog",
+                    successCallback(data) {
+                        UiNotification.show(undefined, () => {
+                            if (!data.isIgnoredUser) {
+                                window.location.reload();
+                            }
+                        });
+                    },
+                }));
+            }
+            this.dialogs.get(userId).open();
+        }
+    }
+    exports.UiUserIgnoreList = UiUserIgnoreList;
+    exports.default = UiUserIgnoreList;
+});