Checklist, hide checked checklist items (configureable at each checklist)

client/components/cards/checklists.jade

@@ -10,17 +10,17 @@ template(name="checklists")
           a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
             i.fa.fa-plus
     if currentUser.isBoardMember
-      .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
+      .material-toggle-switch(title="{{_ 'hide-finished-checklist'}}")
         //span.toggle-switch-title
-        if card.hideCheckedChecklistItems
-          input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems" checked="checked")
+        if card.hideFinishedChecklistIfItemsAreHidden
+          input.toggle-switch(type="checkbox" id="toggleHideFinishedChecklist" checked="checked")
         else
-          input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems")
-        label.toggle-label(for="toggleHideCheckedChecklistItems")
+          input.toggle-switch(type="checkbox" id="toggleHideFinishedChecklist")
+        label.toggle-label(for="toggleHideFinishedChecklist")
 
   .card-checklist-items
     each checklist in checklists
-      if checklist.showChecklist card.hideCheckedChecklistItems
+      if checklist.showChecklist card.hideFinishedChecklistIfItemsAreHidden
         +checklistDetail(checklist = checklist card = card)
 
   if canModifyCard
@@ -120,7 +120,7 @@ template(name="checklistItems")
           i.fa.fa-plus
 
 template(name='checklistItemDetail')
-  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if card.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}"
+  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if checklist.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}"
     role="checkbox" aria-checked="{{#if item.isFinished }}true{{else}}false{{/if}}" tabindex="0")
     if canModifyCard
       .check-box-container
@@ -148,6 +148,15 @@ template(name="checklistActionsPopup")
       a.js-copy-checklist.copy-checklist
         i.fa.fa-copy
         | {{_ "copyChecklist"}} ...
+      a.js-hide-checked-checklist-items
+        i.fa.fa-eye-slash
+        | {{_ "hideCheckedChecklistItems"}} ...
+        .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
+          if checklist.hideCheckedChecklistItems
+            input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}" checked="checked")
+          else
+            input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}")
+          label.toggle-label(for="toggleHideCheckedChecklistItems_{{checklist._id}}")
 
 template(name="copyChecklistPopup")
   +copyAndMoveChecklist

client/components/cards/checklists.js

@@ -220,6 +220,10 @@ BlazeComponent.extendComponent({
         'focus .js-add-checklist-item': this.focusChecklistItem,
         // add and delete checklist / checklist-item
         'click .js-open-inlined-form': this.closeAllInlinedForms,
+        'click #toggleHideFinishedChecklist'(event) {
+          event.preventDefault();
+          this.data().card.toggleHideFinishedChecklist();
+        },
         keydown: this.pressKey,
       },
     ];
@@ -274,11 +278,6 @@ Template.checklists.helpers({
     const ret = card.checklists();
     return ret;
   },
-  hideCheckedChecklistItems() {
-    const card = ReactiveCache.getCard(this.cardId);
-    const ret = card.hideCheckedChecklistItems ?? false;
-    return ret;
-  },
 });
 
 BlazeComponent.extendComponent({
@@ -313,6 +312,11 @@ BlazeComponent.extendComponent({
         }),
         'click .js-move-checklist': Popup.open('moveChecklist'),
         'click .js-copy-checklist': Popup.open('copyChecklist'),
+        'click .js-hide-checked-checklist-items'(event) {
+          event.preventDefault();
+          this.data().checklist.toggleHideCheckedChecklistItems();
+          Popup.back();
+        },
       }
     ]
   }

imports/i18n/data/en.i18n.json

@@ -958,6 +958,7 @@
   "delete-linked-card-before-this-card": "You can not delete this card before first deleting linked card that has",
   "delete-linked-cards-before-this-list": "You can not delete this list before first deleting linked cards that are pointing to cards in this list",
   "hide-checked-items": "Hide checked items",
+  "hide-finished-checklist": "Hide finished checklist",
   "task": "Task",
   "create-task": "Create Task",
   "ok": "OK",
@@ -1251,5 +1252,6 @@
   "convert-to-markdown": "Convert to markdown",
   "import-board-zip": "Add .zip file that has board JSON files, and board name subdirectories with attachments",
   "collapse": "Collapse",
-  "uncollapse": "Uncollapse"
+  "uncollapse": "Uncollapse",
+  "hideCheckedChecklistItems": "Hide checked checklist items"
 }

models/cards.js

@@ -477,9 +477,9 @@ Cards.attachSchema(
       type: Boolean,
       defaultValue: false,
     },
-    hideCheckedChecklistItems: {
+    hideFinishedChecklistIfItemsAreHidden: {
       /**
-       * hide the checked checklist-items?
+       * hide completed checklist?
        */
       type: Boolean,
       optional: true,
@@ -2186,10 +2186,10 @@ Cards.mutations({
     };
   },
 
-  toggleHideCheckedChecklistItems() {
+  toggleHideFinishedChecklist() {
     return {
       $set: {
-        hideCheckedChecklistItems: !this.hideCheckedChecklistItems,
+        hideFinishedChecklistIfItemsAreHidden: !this.hideFinishedChecklistIfItemsAreHidden,
       }
     };
   },

models/checklists.js

@@ -63,6 +63,13 @@ Checklists.attachSchema(
       type: Number,
       decimal: true,
     },
+    hideCheckedChecklistItems: {
+      /**
+       * hide the checked checklist-items?
+       */
+      type: Boolean,
+      optional: true,
+    },
   }),
 );
 
@@ -118,9 +125,9 @@ Checklists.helpers({
   isFinished() {
     return 0 !== this.itemCount() && this.itemCount() === this.finishedCount();
   },
-  showChecklist(hideCheckedChecklistItems) {
+  showChecklist(hideFinishedChecklistIfItemsAreHidden) {
     let ret = true;
-    if (this.isFinished() && hideCheckedChecklistItems === true) {
+    if (this.isFinished() && hideFinishedChecklistIfItemsAreHidden === true && (this.hideCheckedChecklistItems === true || this.hideAllChecklistItems)) {
       ret = false;
     }
     return ret;
@@ -198,6 +205,13 @@ Checklists.mutations({
       },
     };
   },
+  toggleHideCheckedChecklistItems() {
+    return {
+      $set: {
+        hideCheckedChecklistItems: !this.hideCheckedChecklistItems,
+      }
+    };
+  },
 });
 
 if (Meteor.isServer) {