refactor preferences page [fixes SCI-1564]

2025-09-04 12:14:37 +08:00 · 2017-09-28 16:53:51 +02:00 · 2017-09-28 16:53:51 +02:00 · cb4bacc372
commit cb4bacc372
parent 54c771804a
7 changed files with 129 additions and 95 deletions
--- a/app/controllers/client_api/users/users_controller.rb
+++ b/app/controllers/client_api/users/users_controller.rb
@ -65,15 +65,11 @@ module ClientApi

      def user_params
        params.require(:user)
-              .permit(:password,
-                      :initials,
-                      :email,
-                      :full_name,
-                      :password_confirmation,
-                      :current_password,
-                      :avatar,
-                      :assignments,
-                      :time_zone)
+              .permit(:password, :initials, :email, :full_name,
+                      :password_confirmation, :current_password, :avatar,
+                      :assignments, :time_zone, :assignmentsNotification,
+                      :assignmentsEmailNotification, :recentNotification,
+                      :recentEmailNotification, :systemMessageEmailNotification)
      end

      def success_response(template = nil, locals = nil)
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/components/NotificationsGroup.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/components/NotificationsGroup.jsx
@ -51,6 +51,7 @@ class NotificationsGroup extends Component {
    this.inAppNotificationField = this.inAppNotificationField.bind(this);
    this.emailNotificationField = this.emailNotificationField.bind(this);
    this.updateStatus = this.updateStatus.bind(this);
+    this.buttonGroupStatus = this.buttonGroupStatus.bind(this);
  }

  notificationImage() {
@ -68,17 +69,25 @@ class NotificationsGroup extends Component {
    );
  }

-  inAppNotificationField() {
+  inAppNotificationField(value) {
+    let params = {};
    switch (this.props.type) {
      case ASSIGNMENT_NOTIFICATION:
-        return "assignmentsNotification";
+        params.assignmentsNotification = value;
+        if(!value) {
+          params.assignmentsEmailNotification = false;
+        }
+        break;
      case RECENT_NOTIFICATION:
-        return "recentNotification";
-      case SYSTEM_NOTIFICATION:
-        return "systemMessageEmailNofification";
+        params.recentNotification = value;
+        if(!value) {
+          params.recentEmailNotification = false;
+        }
+        break;
      default:
-        return "";
+        params = {}
    }
+    return params
  }

  emailNotificationField() {
@ -87,6 +96,8 @@ class NotificationsGroup extends Component {
        return "assignmentsEmailNotification";
      case RECENT_NOTIFICATION:
        return "recentEmailNotification";
+      case SYSTEM_NOTIFICATION:
+        return "systemMessageEmailNotification"
      default:
        return "";
    }
@ -94,14 +105,21 @@ class NotificationsGroup extends Component {

  updateStatus(actionType, value) {
    if (actionType === "inAppNotification") {
-      const inAppField = this.inAppNotificationField();
-      updateUser({ [inAppField]: value }).then(() => this.props.reloadInfo());
+      const params = this.inAppNotificationField(value);
+      updateUser(params).then(() => this.props.reloadInfo());
    } else if (actionType === "emailNotification") {
      const emailField = this.emailNotificationField();
      updateUser({ [emailField]: value }).then(() => this.props.reloadInfo());
    }
  }

+  // check if the in sciNote notification is disabled
+  buttonGroupStatus() {
+    return (
+      this.props.type !== SYSTEM_NOTIFICATION && !this.props.inAppNotification
+    );
+  }
+
  render() {
    return (
      <Wrapper className="row">
@ -123,14 +141,15 @@ class NotificationsGroup extends Component {
              status={this.props.inAppNotification}
              updateStatus={value =>
                this.updateStatus("inAppNotification", value)}
-              isDisabled={false}
+              isDisabled={this.props.type === SYSTEM_NOTIFICATION}
            />
            <NotificationsSwitch
              title="settings_page.notify_me_via_email"
              status={this.props.emailNotification}
              updateStatus={value =>
                this.updateStatus("emailNotification", value)}
-              isDisabled={this.props.type === SYSTEM_NOTIFICATION}
+              isDisabled={false}
+              isTemporarilyDisabled={this.buttonGroupStatus()}
            />
          </div>
        </div>
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/components/NotificationsSwitch.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/components/NotificationsSwitch.jsx
@ -1,10 +1,5 @@
 import React, { Component } from "react";
 import { string, bool, func } from "prop-types";
-import {
-  ButtonToolbar,
-  ToggleButtonGroup,
-  ToggleButton
-} from "react-bootstrap";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";

@ -44,37 +39,73 @@ class NotificationsSwitch extends Component {
  }

  disabledButton() {
-    if (this.props.isDisabled) {
+    if(this.props.isTemporarilyDisabled) {
      return (
-        <ToggleButtonGroup
-          type="radio"
-          name={this.props.title}
-          defaultValue={this.state.status}
-          disabled
-        >
-          <ToggleButton disabled value={false}>
-            No
-          </ToggleButton>
-          <ToggleButton disabled value={true}>
-            Yes
-          </ToggleButton>
-        </ToggleButtonGroup>
+        <div className="btn-group">
+          <LeftButton
+            className="btn btn-danger"
+            disabled
+          >
+            <FormattedMessage id="settings_page.no" />
+          </LeftButton>
+          <RightButton
+            className="btn btn-default"
+            disabled
+          >
+            <FormattedMessage id="settings_page.yes" />
+          </RightButton>
+        </div>
+      );
+    } else if(this.props.isDisabled) {
+      return (
+        <div className="btn-group">
+          <LeftButton
+            className="btn btn-default"
+            disabled
+          >
+            <FormattedMessage id="settings_page.no" />
+          </LeftButton>
+          <RightButton
+            className="btn btn-primary"
+            disabled
+          >
+            <FormattedMessage id="settings_page.yes" />
+          </RightButton>
+        </div>
+      );
+    } else if(this.props.status) {
+      return (
+        <div className="btn-group">
+          <LeftButton
+            className="btn btn-default"
+            onClick={() => this.handleClick(false)}
+          >
+            <FormattedMessage id="settings_page.no" />
+          </LeftButton>
+          <RightButton
+            className="btn btn-primary"
+            onClick={() => this.handleClick(true)}
+          >
+            <FormattedMessage id="settings_page.yes" />
+          </RightButton>
+        </div>
      );
    }
    return (
-      <ToggleButtonGroup
-        type="radio"
-        name={this.props.title}
-        onChange={this.handleClick}
-        defaultValue={this.state.status}
-      >
-        <ToggleButton value={false}>
-          No
-        </ToggleButton>
-        <ToggleButton value={true}>
-          Yes
-        </ToggleButton>
-      </ToggleButtonGroup>
+      <div className="btn-group">
+        <LeftButton
+          className="btn btn-danger"
+          onClick={() => this.handleClick(false)}
+        >
+          <FormattedMessage id="settings_page.no" />
+        </LeftButton>
+        <RightButton
+          className="btn btn-default"
+          onClick={() => this.handleClick(true)}
+        >
+          <FormattedMessage id="settings_page.yes" />
+        </RightButton>
+      </div>
    );
  }
  render() {
@ -84,7 +115,7 @@ class NotificationsSwitch extends Component {
          <FormattedMessage id={this.props.title} />
        </div>
        <div className="col-sm-7">
-          <ButtonToolbar>{this.disabledButton()}</ButtonToolbar>
+          {this.disabledButton()}
        </div>
      </Wrapper>
    );
@ -95,7 +126,12 @@ NotificationsSwitch.propTypes = {
  title: string.isRequired,
  status: bool.isRequired,
  isDisabled: bool.isRequired,
-  updateStatus: func.isRequired
+  updateStatus: func.isRequired,
+  isTemporarilyDisabled: bool
 };

+NotificationsSwitch.defaultProps = {
+  isTemporarilyDisabled: false
+}
+
 export default NotificationsSwitch;
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
@ -27,7 +27,7 @@ class SettingsPreferences extends Component {
      assignmentsEmailNotification: false,
      recentNotification: false,
      recentEmailNotification: false,
-      systemMessageEmailNofification: false
+      systemMessageEmailNotification: false
    };

    this.getPreferencesInfo = this.getPreferencesInfo.bind(this);
@ -78,8 +78,8 @@ class SettingsPreferences extends Component {
            type={SYSTEM_NOTIFICATION}
            title="settings_page.system_message"
            subtitle="settings_page.system_message_msg"
-            inAppNotification={
-              this.state.systemMessageEmailNofification
+            emailNotification={
+              this.state.systemMessageEmailNotification
            }
            iconClasses="glyphicon glyphicon-tower"
            iconBackground={ICON_GREEN_COLOR}
--- a/app/models/user.rb
+++ b/app/models/user.rb
@ -49,27 +49,6 @@ class User < ApplicationRecord
    }
  )

-  # json friendly attributes
-  NOTIFICATIONS_TYPES = %w(assignmentsNotification assignmentsEmailNotification
-                           recentNotification recentEmailNotification
-                           systemMessageEmailNofification)
-  # declare notifications getters
-  NOTIFICATIONS_TYPES.each do |name|
-    define_method(name) do
-      attr_name = name.slice!('Notification').underscore
-      self.notifications.fetch(attr_name.to_sym)
-    end
-  end
-
-  # declare notifications setters
-  NOTIFICATIONS_TYPES.each do |name|
-    next if name == 'systemMessageEmailNofification'
-    define_method("#{name}=") do |value|
-      attr_name = name.slice!('Notification').underscore
-      self.notifications[attr_name.to_sym] = value
-      save
-    end
-  end
  # Relations
  has_many :user_teams, inverse_of: :user
  has_many :teams, through: :user_teams
@ -434,6 +413,27 @@ class User < ApplicationRecord
    statistics
  end

+  # json friendly attributes
+  NOTIFICATIONS_TYPES = %w(assignmentsNotification assignmentsEmailNotification
+                           recentNotification recentEmailNotification
+                           systemMessageEmailNotification)
+  # declare notifications getters
+  NOTIFICATIONS_TYPES.each do |name|
+    define_method(name) do
+      attr_name = name.gsub('Notification', '').underscore
+      self.notifications.fetch(attr_name.to_sym)
+    end
+  end
+
+  # declare notifications setters
+  NOTIFICATIONS_TYPES.each do |name|
+    define_method("#{name}=") do |value|
+      attr_name = name.gsub('Notification', '').underscore.to_sym
+      self.notifications[attr_name] = value
+      save
+    end
+  end
+
  protected

  def confirmation_required?
--- a/app/views/client_api/users/preferences.json.jbuilder
+++ b/app/views/client_api/users/preferences.json.jbuilder
@ -3,4 +3,4 @@ json.assignmentsNotification notifications['assignments']
 json.assignmentsEmailNotification notifications['assignments_email']
 json.recentNotification notifications['recent']
 json.recentEmailNotification notifications['recent_email']
-json.systemMessageEmailNofification notifications['system_message_email']
+json.systemMessageEmailNotification notifications['system_message_email']
--- a/config/routes.rb
+++ b/config/routes.rb
@ -36,25 +36,8 @@ Rails.application.routes.draw do
        delete '/leave_team', to: 'user_teams#leave_team'
        put '/update_role', to: 'user_teams#update_role'
        get '/profile_info', to: 'users#profile_info'
-        # get '/statistics_info', to: 'users#statistics_info'
        get '/preferences_info', to: 'users#preferences_info'
        post '/update', to: 'users#update'
-        # delete '/leave_team', to: 'user_teams#leave_team'
-        # post '/change_full_name', to: 'users#change_full_name'
-        # post '/change_initials', to: 'users#change_initials'
-        # post '/change_email', to: 'users#change_email'
-        # post '/change_password', to: 'users#change_password'
-        # post '/change_timezone', to: 'users#change_timezone'
-        # post '/change_assignements_notification',
-        #      to: 'users#change_assignements_notification'
-        # post '/change_assignements_notification_email',
-        #      to: 'users#change_assignements_notification_email'
-        # post '/change_recent_notification',
-        #      to: 'users#change_recent_notification'
-        # post '/change_recent_notification_email',
-        #      to: 'users#change_recent_notification_email'
-        # post '/change_system_notification_email',
-        #      to: 'users#change_system_notification_email'
      end
    end