Add user option to hide finished checklist items

Add a user option to hide finished items in a checklist.

client/components/cards/checklists.jade

@@ -1,7 +1,17 @@
 template(name="checklists")
-  h3
-    i.fa.fa-check
-    | {{_ 'checklists'}}
+  .checklists-title
+    h3
+      i.fa.fa-check
+      | {{_ 'checklists'}}
+    if currentUser.isBoardMember
+      .material-toggle-switch
+        span.toggle-switch-title {{_ 'hide-checked-items'}}
+        if hideCheckedItems
+          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
+        else
+          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
+        label.toggle-label(for="toggleHideCheckedItemsButton")
+
   if toggleDeleteDialog.get
     .board-overlay#card-details-overlay
     +checklistDeleteDialog(checklist = checklistToDelete)
@@ -86,7 +96,7 @@ template(name="checklistItems")
           | {{_ 'add-checklist-item'}}...
 
 template(name='checklistItemDetail')
-  .js-checklist-item.checklist-item
+  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}")
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")

client/components/cards/checklists.js

@@ -193,6 +193,9 @@ BlazeComponent.extendComponent({
         }
         this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
       },
+      'click #toggleHideCheckedItemsButton'() {
+        Meteor.call('toggleHideCheckedItems');
+      },
     };
 
     return [
@@ -211,6 +214,14 @@ BlazeComponent.extendComponent({
   },
 }).register('checklists');
 
+Template.checklists.helpers({
+  hideCheckedItems() {
+    const currentUser = Meteor.user();
+    if (currentUser) return currentUser.hasHideCheckedItems();
+    return false;
+  },
+});
+
 Template.checklistDeleteDialog.onCreated(() => {
   const $cardDetails = this.$('.card-details');
   this.scrollState = {
@@ -246,6 +257,11 @@ Template.checklistItemDetail.helpers({
       !Meteor.user().isWorker()
     );
   },
+  hideCheckedItems() {
+    const user = Meteor.user();
+    if (user) return user.hasHideCheckedItems();
+    return false;
+  },
 });
 
 BlazeComponent.extendComponent({

client/components/cards/checklists.styl

@@ -16,6 +16,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   &:hover
     color: inherit
 
+.checklists-title
+  display: flex
+  justify-content: space-between
+
 .checklist-title
   .checkbox
     float: left
@@ -99,6 +103,15 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   margin-top: 3px
   display: flex
   background: darken(white, 3%)
+  opacity: 1
+  transition: height 0ms 400ms, opacity 400ms 0ms
+  height: auto
+  overflow: hidden
+
+  &.is-checked.invisible
+    opacity: 0
+    height: 0
+    transition: height 0ms 0ms, opacity 600ms 0ms
 
   &.placeholder
     background: darken(white, 20%)

i18n/en.i18n.json

@@ -808,5 +808,6 @@
   "voting": "Voting",
   "archived": "Archived",
   "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"
+  "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"
 }

models/users.js

@@ -128,6 +128,13 @@ Users.attachSchema(
       type: Boolean,
       optional: true,
     },
+    'profile.hideCheckedItems': {
+      /**
+       * does the user want to hide checked checklist items?
+       */
+      type: Boolean,
+      optional: true,
+    },
     'profile.hiddenSystemMessages': {
       /**
        * does the user want to hide system messages?
@@ -483,6 +490,11 @@ Users.helpers({
     return profile.showDesktopDragHandles || false;
   },
 
+  hasHideCheckedItems() {
+    const profile = this.profile || {};
+    return profile.hideCheckedItems || false;
+  },
+
   hasHiddenSystemMessages() {
     const profile = this.profile || {};
     return profile.hiddenSystemMessages || false;
@@ -612,6 +624,15 @@ Users.mutations({
     };
   },
 
+  toggleHideCheckedItems() {
+    const value = this.hasHideCheckedItems();
+    return {
+      $set: {
+        'profile.hideCheckedItems': !value,
+      },
+    };
+  },
+
   toggleSystem(value = false) {
     return {
       $set: {
@@ -690,6 +711,10 @@ Meteor.methods({
     const user = Meteor.user();
     user.toggleDesktopHandles(user.hasShowDesktopDragHandles());
   },
+  toggleHideCheckedItems() {
+    const user = Meteor.user();
+    user.toggleHideCheckedItems();
+  },
   toggleSystemMessages() {
     const user = Meteor.user();
     user.toggleSystem(user.hasHiddenSystemMessages());

public/api/wekan.yml

@@ -3071,6 +3071,10 @@ definitions:
         description: |
            does the user want to hide system messages?
         type: boolean
+      hideCheckedItems:
+        description: |
+          does the user want to hide checked checklist items?
+        type: boolean
       hiddenSystemMessages:
         description: |
            does the user want to hide system messages?