Convert `Conversation/Ui/Participant/Add` to TypeScript
authorMatthias Schmidt <gravatronics@live.com>
Sun, 17 Jan 2021 12:35:17 +0000 (13:35 +0100)
committerTim Düsterhus <duesterhus@woltlab.com>
Mon, 18 Jan 2021 13:15:43 +0000 (14:15 +0100)
files/js/WoltLabSuite/Core/Conversation/Ui/Participant/Add.js
ts/WoltLabSuite/Core/Conversation/Ui/Participant/Add.js [deleted file]
ts/WoltLabSuite/Core/Conversation/Ui/Participant/Add.ts [new file with mode: 0644]

index f5d6be0ac63f77581b39bc097bc7b792a07b6f13..436edce273baaaf92b8c10e0349ea6f852c75358 100644 (file)
 /**
  * Adds participants to an existing conversation.
  *
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Conversation/Ui/Participant/Add
+ * @author  Alexander Ebert
+ * @copyright   2001-2021 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Conversation/Ui/Participant/Add
  */
-define(['Ajax', 'Language', 'Ui/Dialog', 'Ui/Notification', 'WoltLabSuite/Core/Ui/ItemList/User'], function (Ajax, Language, UiDialog, UiNotification, UiItemListUser) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/Ajax", "WoltLabSuite/Core/Dom/Util", "WoltLabSuite/Core/Ui/Dialog", "WoltLabSuite/Core/Ui/Notification", "WoltLabSuite/Core/Ui/ItemList/User", "WoltLabSuite/Core/Language"], function (require, exports, tslib_1, Ajax, Util_1, Dialog_1, UiNotification, UiItemListUser, Language) {
     "use strict";
-    /**
-     * @constructor
-     * @param  {int}   conversationId          conversation id
-     */
-    function UiParticipantAdd(conversationId) { this.init(conversationId); }
-    UiParticipantAdd.prototype = {
-        /**
-         * Manages the form to add one or more participants to an existing conversation.
-         *
-         * @param      {int}   conversationId          conversation id
-         */
-        init: function (conversationId) {
-            this._conversationId = conversationId;
+    Ajax = tslib_1.__importStar(Ajax);
+    Util_1 = tslib_1.__importDefault(Util_1);
+    Dialog_1 = tslib_1.__importDefault(Dialog_1);
+    UiNotification = tslib_1.__importStar(UiNotification);
+    UiItemListUser = tslib_1.__importStar(UiItemListUser);
+    Language = tslib_1.__importStar(Language);
+    class UiParticipantAdd {
+        constructor(conversationId) {
+            this.conversationId = conversationId;
             Ajax.api(this, {
-                actionName: 'getAddParticipantsForm'
+                actionName: "getAddParticipantsForm",
             });
-        },
-        _ajaxSetup: function () {
+        }
+        _ajaxSetup() {
             return {
                 data: {
-                    className: 'wcf\\data\\conversation\\ConversationAction',
-                    objectIDs: [this._conversationId]
-                }
+                    className: "wcf\\data\\conversation\\ConversationAction",
+                    objectIDs: [this.conversationId],
+                },
             };
-        },
-        /**
-         * Handles successful Ajax requests.
-         *
-         * @param      {Object}        data            response data
-         */
-        _ajaxSuccess: function (data) {
+        }
+        _ajaxSuccess(data) {
             switch (data.actionName) {
-                case 'addParticipants':
-                    this._handleResponse(data);
+                case "addParticipants":
+                    this.handleResponse(data);
                     break;
-                case 'getAddParticipantsForm':
-                    this._render(data);
+                case "getAddParticipantsForm":
+                    this.render(data);
                     break;
             }
-        },
+        }
         /**
          * Shows the success message and closes the dialog overlay.
-         *
-         * @param      {Object}        data            response data
          */
-        _handleResponse: function (data) {
-            //noinspection JSUnresolvedVariable
+        handleResponse(data) {
             if (data.returnValues.errorMessage) {
-                var innerError = elCreate('small');
-                innerError.className = 'innerError';
-                //noinspection JSUnresolvedVariable
-                innerError.textContent = data.returnValues.errorMessage;
-                var itemList = elById('participantsInput').closest('.inputItemList');
-                itemList.parentNode.insertBefore(innerError, itemList.nextSibling);
-                var oldError = innerError.nextElementSibling;
-                if (oldError && oldError.classList.contains('innerError')) {
-                    elRemove(oldError);
-                }
+                Util_1.default.innerError(document.getElementById("participantsInput").closest(".inputItemList"), data.returnValues.errorMessage);
                 return;
             }
-            //noinspection JSUnresolvedVariable
             if (data.returnValues.count) {
-                //noinspection JSUnresolvedVariable
-                UiNotification.show(data.returnValues.successMessage, window.location.reload.bind(window.location));
+                UiNotification.show(data.returnValues.successMessage, () => window.location.reload());
             }
-            UiDialog.close(this);
-        },
+            Dialog_1.default.close(this);
+        }
         /**
          * Renders the dialog to add participants.
-         *
-         * @param      {object}        data            response data
+         * @protected
          */
-        _render: function (data) {
-            //noinspection JSUnresolvedVariable
-            UiDialog.open(this, data.returnValues.template);
-            var buttonSubmit = elById('addParticipants');
+        render(data) {
+            Dialog_1.default.open(this, data.returnValues.template);
+            const buttonSubmit = document.getElementById("addParticipants");
             buttonSubmit.disabled = true;
-            //noinspection JSUnresolvedVariable
-            UiItemListUser.init('participantsInput', {
-                callbackChange: function (elementId, values) { buttonSubmit.disabled = (values.length === 0); },
+            UiItemListUser.init("participantsInput", {
+                callbackChange: (elementId, values) => {
+                    buttonSubmit.disabled = values.length === 0;
+                },
                 excludedSearchValues: data.returnValues.excludedSearchValues,
                 maxItems: data.returnValues.maxItems,
                 includeUserGroups: data.returnValues.canAddGroupParticipants && data.returnValues.restrictUserGroupIDs.length > 0,
                 restrictUserGroupIDs: data.returnValues.restrictUserGroupIDs,
-                csvPerType: true
+                csvPerType: true,
             });
-            buttonSubmit.addEventListener('click', this._submit.bind(this));
-        },
+            buttonSubmit.addEventListener("click", () => this.submit());
+        }
         /**
          * Sends a request to add participants.
          */
-        _submit: function () {
-            var values = UiItemListUser.getValues('participantsInput'), participants = [], participantsGroupIDs = [];
-            for (var i = 0, length = values.length; i < length; i++) {
-                if (values[i].type === 'group')
-                    participantsGroupIDs.push(values[i].objectId);
-                else
-                    participants.push(values[i].value);
-            }
-            var parameters = {
+        submit() {
+            const participants = [];
+            const participantsGroupIDs = [];
+            UiItemListUser.getValues("participantsInput").forEach((value) => {
+                if (value.type === "group") {
+                    participantsGroupIDs.push(value.objectId);
+                }
+                else {
+                    participants.push(value.value);
+                }
+            });
+            const parameters = {
                 participants: participants,
-                participantsGroupIDs: participantsGroupIDs
+                participantsGroupIDs: participantsGroupIDs,
+                visibility: null,
             };
-            var visibility = elBySel('input[name="messageVisibility"]:checked, input[name="messageVisibility"][type="hidden"]', UiDialog.getDialog(this).content);
-            if (visibility)
+            const visibility = Dialog_1.default.getDialog(this).content.querySelector('input[name="messageVisibility"]:checked, input[name="messageVisibility"][type="hidden"]');
+            if (visibility) {
                 parameters.visibility = visibility.value;
+            }
             Ajax.api(this, {
-                actionName: 'addParticipants',
-                parameters: parameters
+                actionName: "addParticipants",
+                parameters: parameters,
             });
-        },
-        _dialogSetup: function () {
+        }
+        _dialogSetup() {
             return {
-                id: 'conversationAddParticipants',
+                id: "conversationAddParticipants",
                 options: {
-                    title: Language.get('wcf.conversation.edit.addParticipants')
+                    title: Language.get("wcf.conversation.edit.addParticipants"),
                 },
-                source: null
+                source: null,
             };
         }
-    };
+    }
     return UiParticipantAdd;
 });
diff --git a/ts/WoltLabSuite/Core/Conversation/Ui/Participant/Add.js b/ts/WoltLabSuite/Core/Conversation/Ui/Participant/Add.js
deleted file mode 100644 (file)
index 03df942..0000000
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * Adds participants to an existing conversation.
- * 
- * @author     Alexander Ebert
- * @copyright  2001-2019 WoltLab GmbH
- * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module     WoltLabSuite/Core/Conversation/Ui/Participant/Add
- */
-define(['Ajax', 'Language', 'Ui/Dialog', 'Ui/Notification', 'WoltLabSuite/Core/Ui/ItemList/User'], function(Ajax, Language, UiDialog, UiNotification, UiItemListUser) {
-       "use strict";
-       
-       /**
-        * @constructor
-        * @param       {int}   conversationId          conversation id
-        */
-       function UiParticipantAdd(conversationId) { this.init(conversationId); }
-       UiParticipantAdd.prototype = {
-               /**
-                * Manages the form to add one or more participants to an existing conversation.
-                * 
-                * @param       {int}   conversationId          conversation id
-                */
-               init: function(conversationId) {
-                       this._conversationId = conversationId;
-                       
-                       Ajax.api(this, {
-                               actionName: 'getAddParticipantsForm'
-                       });
-               },
-               
-               _ajaxSetup: function() {
-                       return {
-                               data: {
-                                       className: 'wcf\\data\\conversation\\ConversationAction',
-                                       objectIDs: [ this._conversationId ]
-                               }
-                       };
-               },
-               
-               /**
-                * Handles successful Ajax requests.
-                * 
-                * @param       {Object}        data            response data
-                */
-               _ajaxSuccess: function(data) {
-                       switch (data.actionName) {
-                               case 'addParticipants':
-                                       this._handleResponse(data);
-                                       break;
-                               
-                               case 'getAddParticipantsForm':
-                                       this._render(data);
-                                       break;
-                       }
-               },
-               
-               /**
-                * Shows the success message and closes the dialog overlay.
-                * 
-                * @param       {Object}        data            response data
-                */
-               _handleResponse: function(data) {
-                       //noinspection JSUnresolvedVariable
-                       if (data.returnValues.errorMessage) {
-                               var innerError = elCreate('small');
-                               innerError.className = 'innerError';
-                               //noinspection JSUnresolvedVariable
-                               innerError.textContent = data.returnValues.errorMessage;
-                               
-                               var itemList = elById('participantsInput').closest('.inputItemList');
-                               itemList.parentNode.insertBefore(innerError, itemList.nextSibling);
-                               
-                               var oldError = innerError.nextElementSibling;
-                               if (oldError && oldError.classList.contains('innerError')) {
-                                       elRemove(oldError);
-                               }
-                               
-                               return;
-                       }
-                       
-                       //noinspection JSUnresolvedVariable
-                       if (data.returnValues.count) {
-                               //noinspection JSUnresolvedVariable
-                               UiNotification.show(data.returnValues.successMessage, window.location.reload.bind(window.location));
-                       }
-                       
-                       UiDialog.close(this);
-               },
-               
-               /**
-                * Renders the dialog to add participants.
-                * 
-                * @param       {object}        data            response data
-                */
-               _render: function(data) {
-                       //noinspection JSUnresolvedVariable
-                       UiDialog.open(this, data.returnValues.template);
-                       
-                       var buttonSubmit = elById('addParticipants');
-                       buttonSubmit.disabled = true;
-                       
-                       //noinspection JSUnresolvedVariable
-                       UiItemListUser.init('participantsInput', {
-                               callbackChange: function(elementId, values) { buttonSubmit.disabled = (values.length === 0); },
-                               excludedSearchValues: data.returnValues.excludedSearchValues,
-                               maxItems: data.returnValues.maxItems,
-                               includeUserGroups: data.returnValues.canAddGroupParticipants && data.returnValues.restrictUserGroupIDs.length > 0,
-                               restrictUserGroupIDs: data.returnValues.restrictUserGroupIDs,
-                               csvPerType: true
-                       });
-                       
-                       buttonSubmit.addEventListener('click', this._submit.bind(this));
-               },
-               
-               /**
-                * Sends a request to add participants.
-                */
-               _submit: function() {
-                       var values = UiItemListUser.getValues('participantsInput'), participants = [], participantsGroupIDs = [];
-                       for (var i = 0, length = values.length; i < length; i++) {
-                               if (values[i].type === 'group') participantsGroupIDs.push(values[i].objectId);
-                               else participants.push(values[i].value);
-                       }
-                       
-                       var parameters = {
-                               participants: participants,
-                               participantsGroupIDs: participantsGroupIDs
-                       };
-                       
-                       var visibility = elBySel('input[name="messageVisibility"]:checked, input[name="messageVisibility"][type="hidden"]', UiDialog.getDialog(this).content);
-                       if (visibility) parameters.visibility = visibility.value;
-                       
-                       Ajax.api(this, {
-                               actionName: 'addParticipants',
-                               parameters: parameters
-                       });
-               },
-               
-               _dialogSetup: function() {
-                       return {
-                               id: 'conversationAddParticipants',
-                               options: {
-                                       title: Language.get('wcf.conversation.edit.addParticipants')
-                               },
-                               source: null
-                       };
-               }
-       };
-       
-       return UiParticipantAdd;
-});
diff --git a/ts/WoltLabSuite/Core/Conversation/Ui/Participant/Add.ts b/ts/WoltLabSuite/Core/Conversation/Ui/Participant/Add.ts
new file mode 100644 (file)
index 0000000..5425a9b
--- /dev/null
@@ -0,0 +1,161 @@
+/**
+ * Adds participants to an existing conversation.
+ *
+ * @author  Alexander Ebert
+ * @copyright   2001-2021 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module  WoltLabSuite/Core/Conversation/Ui/Participant/Add
+ */
+
+import * as Ajax from "WoltLabSuite/Core/Ajax";
+import { AjaxCallbackObject } from "WoltLabSuite/Core/Ajax/Data";
+import { AjaxCallbackSetup, ResponseData } from "WoltLabSuite/Core/Ajax/Data";
+import DomUtil from "WoltLabSuite/Core/Dom/Util";
+import UiDialog from "WoltLabSuite/Core/Ui/Dialog";
+import * as UiNotification from "WoltLabSuite/Core/Ui/Notification";
+import { DialogCallbackObject, DialogCallbackSetup } from "WoltLabSuite/Core/Ui/Dialog/Data";
+import * as UiItemListUser from "WoltLabSuite/Core/Ui/ItemList/User";
+import { ItemData } from "WoltLabSuite/Core/Ui/ItemList";
+import * as Language from "WoltLabSuite/Core/Language";
+
+interface AjaxResponseData extends ResponseData {
+  actionName: "addParticipants" | "getAddParticipantsForm";
+}
+
+interface AjaxAddParticipantsData extends AjaxResponseData {
+  returnValues: {
+    count?: number;
+    errorMessage?: string;
+    successMessage?: string;
+  };
+}
+
+interface AjaxGetAddParticipantsFormData extends AjaxResponseData {
+  returnValues: {
+    canAddGroupParticipants: boolean;
+    csvPerType: boolean;
+    excludedSearchValues: string[];
+    maxItems: number;
+    restrictUserGroupIDs: number[];
+    template: string;
+  };
+}
+
+class UiParticipantAdd implements AjaxCallbackObject, DialogCallbackObject {
+  protected readonly conversationId: number;
+
+  constructor(conversationId: number) {
+    this.conversationId = conversationId;
+
+    Ajax.api(this, {
+      actionName: "getAddParticipantsForm",
+    });
+  }
+
+  _ajaxSetup(): ReturnType<AjaxCallbackSetup> {
+    return {
+      data: {
+        className: "wcf\\data\\conversation\\ConversationAction",
+        objectIDs: [this.conversationId],
+      },
+    };
+  }
+
+  _ajaxSuccess(data: AjaxResponseData): void {
+    switch (data.actionName) {
+      case "addParticipants":
+        this.handleResponse(data as AjaxAddParticipantsData);
+        break;
+      case "getAddParticipantsForm":
+        this.render(data as AjaxGetAddParticipantsFormData);
+        break;
+    }
+  }
+
+  /**
+   * Shows the success message and closes the dialog overlay.
+   */
+  protected handleResponse(data: AjaxAddParticipantsData): void {
+    if (data.returnValues.errorMessage) {
+      DomUtil.innerError(
+        document.getElementById("participantsInput")!.closest(".inputItemList") as HTMLElement,
+        data.returnValues.errorMessage
+      );
+      return;
+    }
+
+    if (data.returnValues.count) {
+      UiNotification.show(data.returnValues.successMessage, () => window.location.reload());
+    }
+
+    UiDialog.close(this);
+  }
+
+  /**
+   * Renders the dialog to add participants.
+   * @protected
+   */
+  protected render(data: AjaxGetAddParticipantsFormData): void {
+    UiDialog.open(this, data.returnValues.template);
+
+    const buttonSubmit = document.getElementById("addParticipants") as HTMLButtonElement;
+    buttonSubmit.disabled = true;
+
+    UiItemListUser.init("participantsInput", {
+      callbackChange: (elementId: string, values: ItemData[]): void => {
+        buttonSubmit.disabled = values.length === 0;
+      },
+      excludedSearchValues: data.returnValues.excludedSearchValues,
+      maxItems: data.returnValues.maxItems,
+      includeUserGroups: data.returnValues.canAddGroupParticipants && data.returnValues.restrictUserGroupIDs.length > 0,
+      restrictUserGroupIDs: data.returnValues.restrictUserGroupIDs,
+      csvPerType: true,
+    });
+    buttonSubmit.addEventListener("click", () => this.submit());
+  }
+
+  /**
+   * Sends a request to add participants.
+   */
+  protected submit(): void {
+    const participants: string[] = [];
+    const participantsGroupIDs: number[] = [];
+    UiItemListUser.getValues("participantsInput").forEach((value) => {
+      if (value.type === "group") {
+        participantsGroupIDs.push(value.objectId);
+      } else {
+        participants.push(value.value);
+      }
+    });
+
+    const parameters = {
+      participants: participants,
+      participantsGroupIDs: participantsGroupIDs,
+      visibility: null as null | string,
+    };
+    const visibility = UiDialog.getDialog(this)!.content.querySelector(
+      'input[name="messageVisibility"]:checked, input[name="messageVisibility"][type="hidden"]'
+    ) as HTMLInputElement;
+
+    if (visibility) {
+      parameters.visibility = visibility.value;
+    }
+
+    Ajax.api(this, {
+      actionName: "addParticipants",
+      parameters: parameters,
+    });
+  }
+
+  _dialogSetup(): ReturnType<DialogCallbackSetup> {
+    return {
+      id: "conversationAddParticipants",
+      options: {
+        title: Language.get("wcf.conversation.edit.addParticipants"),
+      },
+      source: null,
+    };
+  }
+}
+
+export = UiParticipantAdd;