mostly frontend work, lists coll update with wipLimit field

client/components/lists/list.styl

@@ -110,3 +110,16 @@
       background: #fafafa
       color: #222
       box-shadow: 0 1px 2px rgba(0,0,0,.2)
+
+#js-wip-limit-edit
+  padding-top: 2%
+  
+  p
+    margin-bottom: 0
+
+  input
+    display: inline-block
+
+  .wip-limit-value
+    width: 20%
+    margin-right: 5%

client/components/lists/listHeader.jade

@@ -7,10 +7,8 @@ template(name="listHeader")
         class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
         = title
         if hasWipLimit
-          span.wip-limit
-            | (
-            = wipLimit
-            | )
+          span
+            | (#{wipLimit})
         if showCardsCountForList cards.count
           = cards.count
           span.lowercase
@@ -39,7 +37,7 @@ template(name="listActionPopup")
         li: a.js-select-cards {{_ 'list-select-cards'}}
         hr
     ul.pop-over-list
-      li: a.js-set-wip-limit {{#if hasWipLimit}}{{_ 'edit-wip-limit'}}{{else}}{{_ 'set-wip-limit'}}{{/if}}
+      li: a.js-set-wip-limit {{#if hasWipLimit}}{{_ 'edit-wip-limit'}}{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
     hr
     ul.pop-over-list
       li: a.js-close-list {{_ 'archive-list'}}
@@ -74,5 +72,8 @@ template(name="listDeletePopup")
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
 template(name="setWipLimitPopup")
-  p {{_ 'set-wip-limit'}}
-  input(type="number")
+  #js-wip-limit-edit
+    lable {{_ 'set-wip-limit-value'}}
+    p
+      input.wip-limit-value(type="number" value="#{wipLimit}" min="0" max="99" onkeydown="return false")
+      input.wip-limit-apply(type="submit" value="{{_ 'apply'}}")

client/components/lists/listHeader.js

@@ -8,6 +8,10 @@ BlazeComponent.extendComponent({
     }
   },
 
+  hasWipLimit() {
+    return this.currentData().wipLimit > 0 ? true : false;
+  },
+
   isWatching() {
     const list = this.currentData();
     return list.findWatcher(Meteor.userId());
@@ -21,11 +25,6 @@ BlazeComponent.extendComponent({
     return count > this.limitToShowCardsCount();
   },
 
-  hasWipLimit() {
-    return null;
-      //return this.currentData().wipLimit ? true : false;
-  },
-
   events() {
     return [{
       'click .js-open-list-menu': Popup.open('listAction'),
@@ -42,6 +41,10 @@ BlazeComponent.extendComponent({
 }).register('listHeader');
 
 Template.listActionPopup.helpers({
+  hasWipLimit() {
+    return this.wipLimit > 0 ? true : false;
+  },
+
   isWatching() {
     return this.findWatcher(Meteor.userId());
   },
@@ -70,6 +73,13 @@ Template.listActionPopup.events({
   'click .js-more': Popup.open('listMore'),
 });
 
+Template.setWipLimitPopup.events({
+  'click .wip-limit-apply'(_, instance) {
+    const limit = instance.$('.wip-limit-value').val();
+    this.setWipLimit(limit);
+  },
+});
+
 Template.listMorePopup.events({
   'click .js-delete': Popup.afterConfirm('listDelete', function () {
     Popup.close();