most work concluded, code needs clean up, further testing required

client/components/lists/list.js

@@ -22,7 +22,7 @@ BlazeComponent.extendComponent({
     const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
     const $cards = this.$('.js-minicards');
     $cards.sortable({
-      connectWith: '.js-minicards',
+      connectWith: '.js-minicards:not(.js-list-full)',
       tolerance: 'pointer',
       appendTo: 'body',
       helper(evt, item) {
@@ -81,7 +81,7 @@ BlazeComponent.extendComponent({
     function userIsMember() {
       return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
     }
-
+  
     // Disable drag-dropping if the current user is not a board member or is comment only
     this.autorun(() => {
       $cards.sortable('option', 'disabled', !userIsMember());

client/components/lists/listBody.jade

@@ -1,6 +1,6 @@
 template(name="listBody")
   .list-body.js-perfect-scrollbar
-    .minicards.clearfix.js-minicards
+    .minicards.clearfix.js-minicards(class="{{#if reachedWipLimit}}js-list-full{{/if}}")
       if cards.count
         +inlinedForm(autoclose=false position="top")
           +addCardForm(listId=_id position="top")

client/components/lists/listBody.js

@@ -96,6 +96,15 @@ BlazeComponent.extendComponent({
     MultiSelection.toggle(this.currentData()._id);
   },
 
+  canSeeAddCard() {
+    return !this.reachedWipLimit() && Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+
+  reachedWipLimit() {
+    const list = Template.currentData();
+    return list.wipLimit.enabled && list.wipLimit.value == list.cards().count();
+  },
+
   events() {
     return [{
       'click .js-minicard': this.clickOnMiniCard,
@@ -239,10 +248,3 @@ BlazeComponent.extendComponent({
     });
   },
 }).register('addCardForm');
-
-
-Template.listBody.helpers({
-  canSeeAddCard() {
-    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
-  },
-});

client/components/lists/listHeader.jade

@@ -36,9 +36,10 @@ template(name="listActionPopup")
       if cards.count
         li: a.js-select-cards {{_ 'list-select-cards'}}
         hr
-    ul.pop-over-list
-      li: a.js-set-wip-limit {{#if isWipLimitEnabled }}EDIT{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
-    hr
+    if currentUser.isBoardAdmin
+      ul.pop-over-list
+        li: a.js-set-wip-limit {{#if isWipLimitEnabled }}{{_ 'edit-wip-limit'}}{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
+      hr
     ul.pop-over-list
       li: a.js-close-list {{_ 'archive-list'}}
     hr
@@ -74,13 +75,11 @@ template(name="listDeletePopup")
 template(name="setWipLimitPopup")
   #js-wip-limit-edit
     lable {{_ 'set-wip-limit-value'}}
-    {{one}}
     ul.pop-over-list
       li: a.js-enable-wip-limit Enable WIP Limit 
-        if isWipLimitEnabled  
+        if wipEnabled.get  
           i.fa.fa-check
-          
-    if isWipLimitEnabled
+    if wipEnabled.get
       p
         input.wip-limit-value(type="number" value="#{wipLimit.value}" min="1" max="99" onkeydown="return false")
         input.wip-limit-apply(type="submit" value="{{_ 'apply'}}")

client/components/lists/listHeader.js

@@ -43,8 +43,14 @@ BlazeComponent.extendComponent({
 
 Template.listActionPopup.helpers({
   isWipLimitEnabled() {
-    return Lists.findOne(this.data()._id, { 'wipLimit.enabled': 1 }).wipLimit.enabled;
+    const prevState = Template.parentData(4).stack[0].dataContext.wipEnableState;
+    // If user was already inside setWipLimitPopup, return previous state. Popup stack not reacting to database mutations
+    if(typeof prevState !== "undefined") {
+      return prevState;
+    }
+    return Template.currentData().wipLimit.enabled;
   },
+
   isWatching() {
     return this.findWatcher(Meteor.userId());
   },
@@ -73,78 +79,55 @@ Template.listActionPopup.events({
   'click .js-more': Popup.open('listMore'),
 });
 
-Template.setWipLimitPopup.helpers({
-  one() {
-    //console.log(this)
-    //console.log(Template.instance())
-  }
-});
-
 BlazeComponent.extendComponent({
   onCreated() {
-    this.wipEnabled = new ReactiveVar(Template.currentData().wipLimit.enabled);
+    const prevState = Template.parentData(4).stack[0].dataContext.wipEnableState;
+    // Check if the user as already opened this popup before and retrieve previous state
+    // This check is necessary due to the fact that database mutations inside popups are not reactive inside the popup stack.
+    //The use of ReactiveVar is due to the same reason.
+    if(typeof prevState !== "undefined") {
+      this.wipEnabled = new ReactiveVar(prevState)
+    } else {
+      this.wipEnabled = new ReactiveVar(Template.currentData().wipLimit.enabled);
+    }
   },
 
-  toggleWipEnabled() {
-    const list = Lists.findOne(this.data()._id);
-    list.wipLimit.enabled ? list.setWipLimitDisabled() : list.setWipLimitEnabled()
+  onDestroyed() {
+    // Save current wipEnabled state in the first element of the popup stack to maintain UI coherence if user returns to popup
+    Template.parentData(4).stack[0].dataContext.wipEnableState = this.wipEnabled.get();
   },
 
-  isWipLimitEnabled() {
-    return Lists.findOne(this.data()._id, { 'wipLimit.enabled': 1 }).wipLimit.enabled;
+  applyWipLimit() {
+    const list = Template.currentData();
+    const limit = Template.instance().$('.wip-limit-value').val();
+
+    if(limit < list.cards().count()){
+      Template.instance().$('.wip-limit-error').click();
+    } else {
+      list.setWipLimit(limit);
+    }
   },
+
+  enableWipLimit() {
+    const list = Template.currentData();
+    // Prevent user from using previously stored wipLimit.value if it is less than the current number of cards in the list
+    if(!list.wipLimit.enabled && list.wipLimit.value < list.cards().count()){
+      list.setWipLimit(list.cards().count());
+    }
+
+    this.wipEnabled.set(!this.wipEnabled.get()); //If wipLimit.enabled is not yet definied, the negation of "undefined" is "true"
+    list.toggleWipLimit(this.wipEnabled.get());
+  },
+
   events() {
     return [{
-      'click .js-enable-wip-limit'(_, instance) {
-        //By default wipLimit.enabled is false or undefined. First click will always be to enable wip limiting
-        this.wipEnabled.set(!this.wipEnabled.get());
-        //console.log(Template.parentData(2))
-        //Template.parentData(2).data.toggleWipLimit(!Template.currentData().wipLimit.enabled); //If wipLimit.enabled is not yet definied, the negation of "undefined" is "true"
-        this.toggleWipEnabled()
-      },
-      'click .wip-limit-apply'(_, instance) {
-        const list = Template.currentData();
-        const limit = Template.instance().$('.wip-limit-value').val();
-
-        if(limit < list.allCards().count()){
-          Template.instance().$('.wip-limit-error').click();
-        } else {
-          list.setWipLimit(limit);
-        }
-      },
+      'click .js-enable-wip-limit': this.enableWipLimit,
+      'click .wip-limit-apply': this.applyWipLimit,
       'click .wip-limit-error': Popup.open('wipLimitError'),
     }];
   },
 }).register('setWipLimitPopup');
 
-
-/*
-Template.setWipLimitPopup.helpers({
-  isWipLimitEnabled(instance) {
-    console.log(this);
-    console.log(Template.currentData());
-    console.log(instance);
-    return Template.currentData().wipLimit.enabled;
-  },
-});
-
-Template.setWipLimitPopup.events({
-  'click .js-enable-wip-limit'(_, instance) {
-    //By default wipLimit.enabled is false or undefined. First click will always be to enable wip limiting
-    instance.wipEnabled.set(!instance.wipEnabled.get())
-  //  list.toggleWipLimit(!list.wipLimit.enabled); //If wipLimit.enabled is not yet definied, the negation of "undefined" is "true"
-  },
-  'click .wip-limit-apply'(_, instance) {
-    const limit = instance.$('.wip-limit-value').val();
-    if(limit < this.allCards().count()){
-      instance.$('.wip-limit-error').click(); //open popup with invisible button click
-      return;
-    }
-    this.setWipLimit(limit);
-  },
-  'click .wip-limit-error': Popup.open('wipLimitError'),
-});*/
-
 Template.listMorePopup.events({
   'click .js-delete': Popup.afterConfirm('listDelete', function () {
     Popup.close();

client/components/sidebar/sidebarArchives.js

@@ -32,7 +32,9 @@ BlazeComponent.extendComponent({
     return [{
       'click .js-restore-card'() {
         const card = this.currentData();
-        card.restore();
+        if(card.canBeRestored()){
+          card.restore();
+        }
       },
       'click .js-delete-card': Popup.afterConfirm('cardDelete', function() {
         const cardId = this._id;

client/lib/popup.js

@@ -205,4 +205,3 @@ escapeActions.forEach((actionName) => {
     }
   );
 });
-

models/cards.js

@@ -179,6 +179,14 @@ Cards.helpers({
       cardId: this._id,
     });
   },
+
+  canBeRestored() {
+    const list = Lists.findOne({_id: this.listId});
+    if(list.wipLimit.enabled && list.wipLimit.value == list.cards().count()){
+      return false;
+    }
+    return true;
+  },
 });
 
 Cards.mutations({

models/lists.js

@@ -105,16 +105,7 @@ Lists.mutations({
   },
 
   toggleWipLimit(toggle) {
-    console.log("toggle " + this.wipLimit.enabled)
-    return { $set: { "wipLimit.enabled": !this.wipLimit.enabled } };
-  },
-
-  setWipLimitEnabled() {
-    return { $set: { "wipLimit.enabled": true } };
-  },
-
-  setWipLimitDisabled() {
-    return { $set: { "wipLimit.enabled": false } };
+    return { $set: { "wipLimit.enabled": toggle } };
   },
 
   setWipLimit(limit) {