Merge pull request #1396 from OpenBazaar/moderatorFixes

fix moderators in settings

Author: jjeffryes

css/obBase.css

@@ -5623,15 +5623,19 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   -webkit-filter: blur(20px) grayscale(1) contrast(0.5);
 }
 
+
 #ov1 .fadeOut {
   opacity: 0;
   pointer-events: none;
+  transition: opacity .3s cubic-bezier(0, 0, 0.2, 1);
 }
 
 #ov1 .foldIn {
   height: 0;
+  padding: 0;
   overflow: hidden;
-  transition: height 1s;
+  transition: height 1s, padding 1s;
+  pointer-events: none;
 }
 
 #ov1 .underline {
@@ -5801,8 +5805,11 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   border-bottom: 1px solid #444;
 }
 
+#ov1.notFancy .fadeOut,
 #ov1.notFancy .statusBar.fadeOut,
 #ov1.notFancy #pageNav .statusBar.fadeOut,
+#ov1.notFancy #userPage .fadeOut,
+#ov1.notFancy #userPage #pageNav .fadeOut,
 #ov1.notFancy #userPage #pageNav .statusBar.fadeOut,
 #ov1.notFancy #userPage #obContainer #content .statusBar.fadeOut {
   opacity: 0 !important;

js/templates/settings.html

@@ -728,7 +728,9 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Basic') %></h3>
 
               <div class="flexCol-9 borderRight0 custCol-border">
                 <div class="hideTopAndBottomBorder js-settingsCurrentMods">
-                  <!--TODO: moderators input here-->
+                </div>
+                <div class="padding10 width100 alignCenter fadeable js-loadingMsg">
+                  <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
                 </div>
               </div>
             </div>
@@ -748,6 +750,9 @@ <h3 class="padding15 margin0 fontWeight500"><%= polyglot.t('Basic') %></h3>
               <div class="flexCol-9 borderRight0 custCol-border">
                 <div class="hideTopAndBottomBorder js-settingsNewMods">
                 </div>
+                <div class="padding10 width100 alignCenter fadeable js-loadingMsg">
+                  <i class="ion-android-sync spinner textSize24px textOpacity50"></i>
+                </div>
               </div>
             </div>
 

js/views/settingsVw.js

@@ -74,10 +74,12 @@ module.exports = Backbone.View.extend({
     this.serverUrl = options.userModel.get('serverUrl');
     this.userModel = this.options.userModel;
     this.model = new Backbone.Model();
-    this.subViews = [];
+    this.subViews = []; //TODO: get rid of subviews, submodels, use proper remove method
     this.subModels = [];
     this.subModels.push(this.userProfile);
 
+    this.shownMods = []; //array of mods that have been shown, used to prevent duplicates
+
     this.moderatorFeeInput;
     this.moderatorFeeHolder;
     this.oldFeeValue = options.userProfile.get('profile').moderation_fee || 0;
@@ -479,6 +481,13 @@ module.exports = Backbone.View.extend({
         existingMods = this.userModel.get('moderator_guids'),
         isExistingMod = existingMods.indexOf(moderator.guid) > -1;
 
+    //make sure this moderator is not a duplicate
+    if(this.shownMods.indexOf(moderator.guid) > -1){
+      return;
+    } else {
+      this.shownMods.push(moderator.guid);
+    }
+
     if(moderator.guid != this.model.get('page').profile.guid && this.userModel.get('blocked_guids').indexOf(moderator.guid) == -1){
       moderator.serverUrl = self.serverUrl;
       moderator.userID = moderator.guid;
@@ -547,6 +556,10 @@ module.exports = Backbone.View.extend({
             }
           });
         }
+        //hide spinners after a while
+        setTimeout(()=> {
+          this.$('.js-loadingMsg').addClass('foldIn');
+        },3000);
         this.firstLoadModerators = false;
       } else if (state === 'blocked') {
         // Since the Blocked Users View kicks off many server calls (one
@@ -796,18 +809,27 @@ module.exports = Backbone.View.extend({
     var self = this,
         form = this.$el.find("#storeForm"),
         settingsData = {},
-        moderatorsChecked = this.$el.find('.js-userShortView input:checked'),
-        modList = [],
+        moderatorsNew = this.$el.find('#storeForm .js-settingsNewMods .js-userShortView input:checked'),
+        moderatorList = this.userModel.get('moderators').map(function(moderatorObject){
+          return moderatorObject.guid;
+        }),
+        moderatorsUnChecked = this.$('#storeForm .js-settingsCurrentMods .js-userShortView input:not(:checked)'),
         onFail,
         $saveBtn = this.$('.js-saveStore');
 
     $saveBtn.addClass('loading');
 
-    moderatorsChecked.each(function() {
-      modList.push($(this).data('guid'));
+    //first, remove any existing moderators that have been unchecked. This prevents removing saved moderators that don't show up in the UI for some reason
+    moderatorsUnChecked.each(function() {
+      moderatorList = __.without(moderatorList, ($(this).data('guid')));
+    });
+
+    //add any new moderators that have been checked
+    moderatorsNew.each(function() {
+      moderatorList.push($(this).data('guid'));
     });
 
-    settingsData.moderators = modList.length > 0 ? modList : "";
+    settingsData.moderators = moderatorList.length > 0 ? moderatorList : "";
 
     onFail = (data) => {
       $saveBtn.removeClass('loading');