Merge pull request #1551 from weseek/reactify-admin/global-notification-switch

Reactify admin/global notification switch

resource/locales/en-US/translation.json

@@ -614,7 +614,8 @@
     "add_notification_pattern": "Add user trigger notification patterns",
     "delete_notification_pattern": "Delete notification pattern",
     "delete_notification_pattern_desc1": "Delete Path: {{path}}",
-    "delete_notification_pattern_desc2": "Once deleted, it cannot be recovered"
+    "delete_notification_pattern_desc2": "Once deleted, it cannot be recovered",
+    "toggle_notification": "Updated setting of {{path}}"
   },
   "customize_page": {
     "recommended": "Recommended",

resource/locales/ja/translation.json

@@ -597,7 +597,8 @@
     "add_notification_pattern": "通知パターンを追加しました。",
     "delete_notification_pattern": "通知パターンを削除しました。",
     "delete_notification_pattern_desc1": "Path: {{path}} を削除します。",
-    "delete_notification_pattern_desc2": "Once deleted, it cannot be recovered"
+    "delete_notification_pattern_desc2": "Once deleted, it cannot be recovered",
+    "toggle_notification": "{{path}}の通知設定を変更しました"
   },
   "customize_page": {
     "recommended": "おすすめ",

src/client/js/components/Admin/Notification/GlobalNotificationList.jsx

@@ -20,7 +20,7 @@ class GlobalNotificationList extends React.Component {
 
     this.state = {
       isConfirmationModalOpen: false,
-      notificatiionForConfiguration: null,
+      notificationForConfiguration: null,
     };
 
     this.openConfirmationModal = this.openConfirmationModal.bind(this);
@@ -28,19 +28,35 @@ class GlobalNotificationList extends React.Component {
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
-  openConfirmationModal(notificatiion) {
-    this.setState({ isConfirmationModalOpen: true, notificatiionForConfiguration: notificatiion });
+  async toggleIsEnabled(notification) {
+    const { t } = this.props;
+    const isEnabled = !notification.isEnabled;
+    try {
+      await this.props.appContainer.apiv3.put(`/notification-setting/global-notification/${notification._id}/enabled`, {
+        isEnabled,
+      });
+      toastSuccess(t('notification_setting.toggle_notification', { path: notification.triggerPath }));
+      await this.props.adminNotificationContainer.retrieveNotificationData();
+    }
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
+  }
+
+  openConfirmationModal(notification) {
+    this.setState({ isConfirmationModalOpen: true, notificationForConfiguration: notification });
   }
 
   closeConfirmationModal() {
-    this.setState({ isConfirmationModalOpen: false, notificatiionForConfiguration: null });
+    this.setState({ isConfirmationModalOpen: false, notificationForConfiguration: null });
   }
 
   async onClickSubmit() {
     const { t, adminNotificationContainer } = this.props;
 
     try {
-      const deletedNotificaton = await adminNotificationContainer.deleteGlobalNotificationPattern(this.state.notificatiionForConfiguration._id);
+      const deletedNotificaton = await adminNotificationContainer.deleteGlobalNotificationPattern(this.state.notificationForConfiguration._id);
       toastSuccess(t('notification_setting.delete_notification_pattern', { path: deletedNotificaton.triggerPath }));
     }
     catch (err) {
@@ -60,8 +76,12 @@ class GlobalNotificationList extends React.Component {
           return (
             <tr key={notification._id}>
               <td className="align-middle td-abs-center">
-                {/* GW-807 switch enable notification */}
-                <input type="checkbox" className="js-switch" data-size="small" data-id="{{ notification._id.toString() }}" />
+                <input
+                  id="isNotificationEnabled"
+                  type="checkbox"
+                  defaultChecked={notification.isEnabled}
+                  onClick={e => this.toggleIsEnabled(notification)}
+                />
               </td>
               <td>
                 {notification.triggerPath}
@@ -126,12 +146,12 @@ class GlobalNotificationList extends React.Component {
             </tr>
           );
         })}
-        {this.state.notificatiionForConfiguration != null && (
+        {this.state.notificationForConfiguration != null && (
           <NotificationDeleteModal
             isOpen={this.state.isConfirmationModalOpen}
             onClose={this.closeConfirmationModal}
             onClickSubmit={this.onClickSubmit}
-            notificatiionForConfiguration={this.state.notificatiionForConfiguration}
+            notificationForConfiguration={this.state.notificationForConfiguration}
           />
         )}
       </React.Fragment>

src/client/js/components/Admin/Notification/NotificationDeleteModal.jsx

@@ -7,7 +7,7 @@ import Modal from 'react-bootstrap/es/Modal';
 class NotificationDeleteModal extends React.PureComponent {
 
   render() {
-    const { t, notificatiionForConfiguration } = this.props;
+    const { t, notificationForConfiguration } = this.props;
     return (
       <Modal show={this.props.isOpen} onHide={this.props.onClose}>
         <Modal.Header className="modal-header" closeButton>
@@ -19,7 +19,7 @@ class NotificationDeleteModal extends React.PureComponent {
         </Modal.Header>
         <Modal.Body>
           <p>
-            {t('notification_setting.delete_notification_pattern_desc1', { path: notificatiionForConfiguration.triggerPath })}
+            {t('notification_setting.delete_notification_pattern_desc1', { path: notificationForConfiguration.triggerPath })}
           </p>
           <span className="text-danger">
             {t('notification_setting.delete_notification_pattern_desc2')}
@@ -42,7 +42,7 @@ NotificationDeleteModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   onClickSubmit: PropTypes.func.isRequired,
-  notificatiionForConfiguration: PropTypes.object.isRequired,
+  notificationForConfiguration: PropTypes.object.isRequired,
 };
 
 export default withTranslation()(NotificationDeleteModal);

src/server/routes/apiv3/notification-setting.js

@@ -190,6 +190,63 @@ module.exports = (crowi) => {
 
   });
 
+  /**
+   * @swagger
+   *
+   *    /_api/v3/notification-setting/global-notification/{id}/enabled:
+   *      put:
+   *        tags: [NotificationSetting]
+   *        description: toggle enabled global notification
+   *        parameters:
+   *          - name: id
+   *            in: path
+   *            required: true
+   *            description: notification id for updated
+   *            schema:
+   *              type: string
+   *        requestBody:
+   *          required: true
+   *          content:
+   *            application/json:
+   *              schema:
+   *                properties:
+   *                  isEnabled:
+   *                    type: boolean
+   *                    description: is notification enabled
+   *        responses:
+   *          200:
+   *            description: Succeeded to delete global notification pattern
+   *            content:
+   *              application/json:
+   *                schema:
+   *                  properties:
+   *                    deletedNotificaton:
+   *                      type: object
+   *                      description: notification id for updated
+   */
+  router.put('/global-notification/:id/enabled', loginRequiredStrictly, adminRequired, csrf, async(req, res) => {
+    const { id } = req.params;
+    const { isEnabled } = req.body;
+
+    try {
+      if (isEnabled) {
+        await GlobalNotificationSetting.enable(id);
+      }
+      else {
+        await GlobalNotificationSetting.disable(id);
+      }
+
+      return res.apiv3({ id });
+
+    }
+    catch (err) {
+      const msg = 'Error occurred in toggle of global notification';
+      logger.error('Error', err);
+      return res.apiv3Err(new ErrorV3(msg, 'toggle-globalNotification-failed'));
+    }
+
+  });
+
   /**
   * @swagger
   *