Mark active items on dropdown

[ci skip]

app/assets/javascripts/allowed_to_merge_dropdown.js.es6

@@ -14,6 +14,24 @@
 
       return fieldName;
     }
+
+    getActiveIds() {
+      let selected = [];
+
+      // Todo: Find a better way to get the wrap element of each dropdown
+      let $wrap = this.$dropdown.parents().eq(1); // Please, don't judge me
+      
+      $wrap.find('input[name^="protected_branch[merge_access_levels_attributes]"]')
+                        .map((i, el) => {
+                          const $el = $(el);
+                          selected.push({
+                            id: parseInt($el.val()),
+                            type: $el.data('type')
+                          });
+                        });
+
+      return selected;
+    }
   }
 
   global.gl.allowedToMergeDropdown = allowedToMergeDropdown;

app/assets/javascripts/allowed_to_push_dropdown.js.es6

@@ -14,6 +14,24 @@
 
       return fieldName;
     }
+
+    getActiveIds() {
+      let selected = [];
+
+      // Todo: Find a better way to get the wrap element of each dropdown
+      let $wrap = this.$dropdown.parents().eq(1); // Please, don't judge me
+      
+      $wrap.find('input[name^="protected_branch[push_access_levels_attributes]"]')
+                        .map((i, el) => {
+                          const $el = $(el);
+                          selected.push({
+                            id: parseInt($el.val()),
+                            type: $el.data('type')
+                          });
+                        });
+
+      return selected;
+    }
   }
 
   global.gl.allowedToPushDropdown = allowedToPushDropdown;

app/assets/javascripts/protected_branch_access_dropdown.js.es6

@@ -20,7 +20,8 @@
         renderRow: this.renderRow.bind(this),
         toggleLabel: this.toggleLabel.bind(this),
         fieldName: this.fieldName.bind(this),
-        setActiveIds() {
+        hidden() {
+          // Here because last selected item is not considered after first close
           this.activeIds = self.getActiveIds();
         },
         clicked(item, $el, e) {
@@ -36,6 +37,10 @@
       throw new Error('No fieldName method defined');
     }
 
+    getActiveIds() {
+      throw new Error('No getActiveIds method defined');
+    }
+
     toggleLabel(selectedItem, el) {
       let currentItems = this.$dropdown.siblings('.dropdown-menu').find('.is-active');
       let types = _.groupBy(currentItems, (item) => { return item.dataset.type; });
@@ -100,27 +105,23 @@
     }
 
     renderRow(item, instance) {
+      const isActive = _.findWhere(instance.activeIds, {id: item.id, type: item.type}) ? 'is-active' : '';
       if (item.type === 'user') {
-        return this.userRowHtml(item);
+        return this.userRowHtml(item, isActive);
       } else if (item.type === 'role') {
-        return this.roleRowHtml(item);
+        return this.roleRowHtml(item, isActive);
       }
     }
 
-    userRowHtml(user) {
+    userRowHtml(user, isActive) {
       const  avatarHtml = `<img src='${user.avatar_url}' class='avatar avatar-inline' width='30'>`;
       const  nameHtml = `<strong class='dropdown-menu-user-full-name'>${user.name}</strong>`;
       const  usernameHtml = `<span class='dropdown-menu-user-username'>${user.username}</span>`;
-
-      return `<li><a href='#' data-type='${user.type}'>${avatarHtml} ${nameHtml} ${usernameHtml}</a></li>`;
+      return `<li><a href='#' class='${isActive ? 'is-active' : ''}' data-type='${user.type}'>${avatarHtml} ${nameHtml} ${usernameHtml}</a></li>`;
     }
 
-    roleRowHtml(role) {
-      return `<li><a href='#' data-type='${role.type}'>${role.text}</a></li>`;
-    }
-
-    getActiveIds() {
-      console.log('getActiveIds');
+    roleRowHtml(role, isActive) {
+      return `<li><a href='#' class='${isActive ? 'is-active' : ''}' data-type='${role.type}'>${role.text}</a></li>`;
     }
   }
 

app/assets/javascripts/protected_branch_create.js.es6

@@ -40,9 +40,8 @@
       const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
       const $allowedToMergeInputs = this.$wrap.find('input[name^="protected_branch[merge_access_levels_attributes]"]');
       const $allowedToPushInputs = this.$wrap.find('input[name^="protected_branch[push_access_levels_attributes]"]');
-      console.log('x');
+
       if ($branchInput.length && $allowedToMergeInputs.length && $allowedToPushInputs.length){
-        console.log('onSelect');
         this.$form.find('input[type="submit"]').removeAttr('disabled');
       }
     }