public/js/views/modals/notification-defaults-view.js

   1 'use strict';
   2
   3 var Marionette = require('backbone.marionette');
   4 var _ = require('lodash');
   5 var apiClient = require('../../components/api-client');
   6 var ModalView = require('./modal');
   7 var template = require('./tmpl/notification-defaults.hbs');
   8 var FeaturesView = require('./notification-features-collection-view');
   9
  10 var View = Marionette.LayoutView.extend({
  11   template: template,
  12   events: {
  13     'click #close-settings': 'destroySettings',
  14     'change @ui.options': 'formChange',
  15     'change @ui.override': 'formChange',
  16     'change @ui.sendEmailsCheckbox': 'formChange'
  17   },
  18   modelEvents: {
  19     change: 'update'
  20   },
  21   ui: {
  22     options: '#notification-options',
  23     override: '#override-all',
  24     notifyFeatures: '#notify-features',
  25     noticeNoOverride: '#notice-no-override',
  26     sendEmailsCheckbox: '#send-emails-checkbox'
  27   },
  28   regions: {
  29     notifyFeatures: '#notify-features'
  30   },
  31
  32   initialize: function() {
  33     // TODO: this should go to the userRoom endpoint as a get
  34     // or better yet should be a live field on the room
  35     apiClient.user
  36       .get('/settings/defaultRoomMode,unread_notifications_optout')
  37       .bind(this)
  38       .then(function(response) {
  39         var defaultRoomMode = response.defaultRoomMode || {};
  40         // Use a single, flat model for the view
  41         defaultRoomMode.unread_notifications_optout = !!response.unread_notifications_optout;
  42         this.model.set(defaultRoomMode);
  43       });
  44
  45     this.listenTo(this, 'menuItemClicked', this.menuItemClicked);
  46   },
  47
  48   update: function() {
  49     var selectInput = this.ui.options;
  50     selectInput.val(this.model.get('mode'));
  51
  52     var count = 0;
  53     if (this.featuresView) {
  54       count = this.featuresView.resetFromHash(this.model.attributes);
  55     } else {
  56       count = 0;
  57     }
  58
  59     if (count > 0) {
  60       this.ui.notifyFeatures.show();
  61     } else {
  62       this.ui.notifyFeatures.hide();
  63     }
  64
  65     var sendEmails = !this.model.get('unread_notifications_optout');
  66     this.ui.sendEmailsCheckbox.prop('checked', sendEmails);
  67   },
  68
  69   onRender: function() {
  70     this.featuresView = new FeaturesView({});
  71     this.getRegion('notifyFeatures').show(this.featuresView);
  72     this.update();
  73   },
  74
  75   formChange: function(e) {
  76     if (e) e.preventDefault();
  77     var mode = this.ui.options.val();
  78     var override = !!this.ui.override.is(':checked');
  79     var emailOptOut = !this.ui.sendEmailsCheckbox.is(':checked');
  80
  81     this.featuresView.resetFromMode(mode);
  82
  83     var noChange =
  84       mode === this.model.get('mode') &&
  85       !override &&
  86       emailOptOut === this.model.get('unread_notifications_optout');
  87
  88     this.dialog.toggleButtonClass('apply', 'modal--default__footer__btn--neutral', noChange);
  89     this.dialog.toggleButtonClass('apply', 'modal--default__footer__btn', !noChange);
  90
  91     if (override) {
  92       this.ui.noticeNoOverride.hide('fast');
  93     } else {
  94       this.ui.noticeNoOverride.show('fast');
  95     }
  96   },
  97
  98   destroySettings: function() {
  99     this.dialog.hide();
 100     this.dialog = null;
 101   },
 102
 103   menuItemClicked: function(button) {
 104     switch (button) {
 105       case 'room-settings':
 106         window.location.href = '#notifications';
 107         break;
 108       case 'apply':
 109         this.applyChangeAndClose();
 110         break;
 111     }
 112   },
 113
 114   applyChangeAndClose: function() {
 115     var mode = this.ui.options.val();
 116     var override = !!this.ui.override.is(':checked');
 117     var emailOptOut = !this.ui.sendEmailsCheckbox.is(':checked');
 118
 119     apiClient.user
 120       .post('/settings/', {
 121         defaultRoomMode: {
 122           mode: mode,
 123           override: override
 124         },
 125         unread_notifications_optout: emailOptOut
 126       })
 127       .bind(this)
 128       .then(function() {
 129         this.dialog.hide();
 130         this.dialog = null;
 131       });
 132   }
 133 });
 134
 135 module.exports = ModalView.extend({
 136   initialize: function(options) {
 137     options = _.extend(
 138       {
 139         title: 'Default Notification Settings',
 140         menuItems: [
 141           {
 142             action: 'room-settings',
 143             pull: 'left',
 144             text: 'Room Settings',
 145             className: 'modal--default__footer__link'
 146           },
 147           {
 148             action: 'apply',
 149             pull: 'right',
 150             text: 'Apply',
 151             className: 'modal--default__footer__btn--neutral'
 152           }
 153         ]
 154       },
 155       options
 156     );
 157
 158     ModalView.prototype.initialize.call(this, options);
 159     this.view = new View(options);
 160   }
 161 });