Merge pull request #5567 from mfilser/checklist_items_hide_per_card

Checklist items hide per card

client/components/cards/cardDetails.jade

@@ -549,7 +549,7 @@ template(name="cardDetails")
         .card-checklist-attachmentGallery.card-checklists
           if currentBoard.allowsChecklists
             hr
-            +checklists(cardId = _id)
+            +checklists(cardId = _id card = this)
           if currentBoard.allowsSubtasks
             hr
             +subtasks(cardId = _id)

client/components/cards/cardDetails.js

@@ -376,6 +376,9 @@ BlazeComponent.extendComponent({
         'click #toggleShowActivitiesCard'() {
           this.data().toggleShowActivities();
         },
+        'click #toggleHideCheckedChecklistItems'() {
+          this.data().toggleHideCheckedChecklistItems();
+        },
         'click #toggleCustomFieldsGridButton'() {
           Meteor.call('toggleCustomFieldsGrid');
         },

client/components/cards/checklists.css

@@ -8,20 +8,6 @@ textarea.js-edit-checklist-item {
   resize: none;
   height: 34px;
 }
-.card-details .text-show-at-minicard {
-  width: 350px;
-  text-align: left;
-}
-.minicard .text-show-at-minicard {
-  display: none;
-}
-.text-some-space {
-  width: 20px;
-}
-.text-hide-checked-items {
-  width: 400px;
-  text-align: left;
-}
 .delete-text,
 .js-delete-checklist-item,
 .js-convert-checklist-item-to-card {
@@ -40,8 +26,6 @@ textarea.js-edit-checklist-item {
   display: flex;
   justify-content: space-between;
 }
-
-
 .checklist-progress-bar-container {
   display: flex;
   flex-direction: row;

client/components/cards/checklists.jade

@@ -9,10 +9,19 @@ template(name="checklists")
         else
           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'}}")
+        //span.toggle-switch-title
+        if card.hideCheckedChecklistItems
+          input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems" checked="checked")
+        else
+          input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems")
+        label.toggle-label(for="toggleHideCheckedChecklistItems")
 
   .card-checklist-items
     each checklist in checklists
-      +checklistDetail(checklist=checklist)
+      if checklist.showChecklist card.hideCheckedChecklistItems
+        +checklistDetail(checklist = checklist card = card)
 
   if canModifyCard
     +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
@@ -47,7 +56,7 @@ template(name="checklistDetail")
         .checklist-progress-text {{finishedPercent}}%
         .checklist-progress-bar
           .checklist-progress(style="width:{{finishedPercent}}%")
-    +checklistItems(checklist = checklist)
+    +checklistItems(checklist = checklist card = card)
 
 template(name="checklistDeletePopup")
   p {{_ 'confirm-checklist-delete-popup'}}
@@ -96,7 +105,7 @@ template(name="checklistItems")
       +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
         +editChecklistItemForm(type = 'item' item = item checklist = checklist)
       else
-        +checklistItemDetail(item = item checklist = checklist)
+        +checklistItemDetail(item = item checklist = checklist card = card)
     if canModifyCard
       +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
         +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true)
@@ -105,7 +114,7 @@ template(name="checklistItems")
           i.fa.fa-plus
 
 template(name='checklistItemDetail')
-  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}"
+  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if card.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}"
     role="checkbox" aria-checked="{{#if item.isFinished }}true{{else}}false{{/if}}" tabindex="0")
     if canModifyCard
       .check-box-container
@@ -122,27 +131,6 @@ template(name='checklistItemDetail')
           = item.title
 
 template(name="checklistActionsPopup")
-  if currentUser.isBoardMember
-    span.text-show-at-minicard
-      | {{_ 'show-at-minicard'}}
-    .material-toggle-switch(title="{{_ 'show-checklist-at-minicard'}}")
-      if showAtMinicard
-        input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicardButton" checked="checked")
-      else
-        input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicardButton")
-      label.toggle-label(for="toggleShowChecklistAtMinicardButton")
-    hr
-    span.text-hide-checked-items
-      | {{_ 'hide-checked-items'}}
-    .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
-      //span.toggle-switch-title
-      //.check-square-icon.i.fa.fa-check-square-o
-      if hideCheckedItems
-        input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
-      else
-        input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
-      label.toggle-label(for="toggleHideCheckedItemsButton")
-    hr
   ul.pop-over-list
     li
       a.js-delete-checklist.delete-checklist

client/components/cards/checklists.js

@@ -201,12 +201,8 @@ BlazeComponent.extendComponent({
   },
 
   events() {
-    const events = {
-    };
-
     return [
       {
-        ...events,
         'click .js-open-checklist-details-menu': Popup.open('checklistActions'),
         'submit .js-add-checklist': this.addChecklist,
         'submit .js-edit-checklist-title': this.editChecklist,
@@ -271,16 +267,11 @@ Template.checklists.helpers({
     const ret = card.checklists();
     return ret;
   },
-  showAtMinicard() {
+  hideCheckedChecklistItems() {
     const card = ReactiveCache.getCard(this.cardId);
-    const ret = card.checklists({'showAtMinicard':1});
+    const ret = card.hideCheckedChecklistItems ?? false;
     return ret;
   },
-  hideCheckedItems() {
-    const currentUser = ReactiveCache.getCurrentUser();
-    if (currentUser) return currentUser.hasHideCheckedItems();
-    return false;
-  },
 });
 
 BlazeComponent.extendComponent({
@@ -303,26 +294,9 @@ BlazeComponent.extendComponent({
 }).register('addChecklistItemForm');
 
 BlazeComponent.extendComponent({
-  toggleItem() {
-    const checklist = this.currentData().checklist;
-    const item = this.currentData().item;
-    if (checklist && item && item._id) {
-      item.toggleItem();
-    }
-  },
   events() {
     return [
       {
-        'click .js-checklist-item .check-box-container': this.toggleItem,
-        'click #toggleShowChecklistAtMinicardButton'() {
-          const checklist = this.checklist;
-          if (checklist && checklist._id) {
-            Meteor.call('toggleShowChecklistAtMinicard', checklist._id);
-          }
-        },
-        'click #toggleHideCheckedItemsButton'() {
-          Meteor.call('toggleHideCheckedItems');
-        },
         'click .js-delete-checklist': Popup.afterConfirm('checklistDelete', function () {
           Popup.back(2);
           const checklist = this.checklist;
@@ -357,11 +331,6 @@ BlazeComponent.extendComponent({
 }).register('editChecklistItemForm');
 
 Template.checklistItemDetail.helpers({
-  hideCheckedItems() {
-    const user = ReactiveCache.getCurrentUser();
-    if (user) return user.hasHideCheckedItems();
-    return false;
-  },
 });
 
 BlazeComponent.extendComponent({

client/components/cards/minicard.css

@@ -1,12 +1,3 @@
-.minicard .checklists-title,
-.minicard .add-checklist,
-.minicard .add-checklist-item,
-.minicard .checklist-details-menu {
-  display: none;
-}
-.minicard .checklist-progress-bar-container {
-  width: 190px; /* TODO: Add adjustable width https://github.com/wekan/wekan/pull/4964 */
-}
 .minicard-wrapper {
   cursor: pointer;
   position: relative;
@@ -138,14 +129,6 @@
   max-width: 100%;
   margin-right: 4px;
 }
-/*
-.minicard .checklists-title,
-.minicard .add-checklist,
-.minicard .add-checklist-item,
-.minicard .checklist-details-menu {
-  display: none;
-}
-*/
 .minicard .handle {
   width: 20px;
   height: 20px;

client/components/cards/minicard.jade

@@ -112,12 +112,6 @@ template(name="minicard")
                     +viewer
                       = trueValue
 
-    .card-checklist-attachmentGalleries
-      .card-checklist-attachmentGallery.card-checklists
-        if currentBoard.allowsChecklists
-          //hr
-          //+checklists(cardId=_id showAtMinicard=true)
-
     if showAssignee
       if getAssignees
         .minicard-assignees.js-minicard-assignees

client/components/cards/minicard.js

@@ -88,11 +88,6 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
-        'click .minicard-checklists'() {
-          // Prevents clicking checklist at minicard from opening card details,
-          // while still allowing checking checlist items.
-          event.preventDefault();
-        },
         'click .js-linked-link'() {
           if (this.data().isLinkedCard()) Utils.goCardId(this.data().linkedId);
           else if (this.data().isLinkedBoard())

imports/i18n/data/en.i18n.json

@@ -1244,8 +1244,6 @@
   "translation": "Translation",
   "text": "Text",
   "translation-text": "Translation text",
-  "show-at-minicard": "Show at minicard",
-  "show-checklist-at-minicard": "Show checklist at minicard",
   "show-subtasks-field": "Show subtasks field",
   "convert-to-markdown": "Convert to markdown",
   "import-board-zip": "Add .zip file that has board JSON files, and board name subdirectories with attachments",

models/cards.js

@@ -477,6 +477,13 @@ Cards.attachSchema(
       type: Boolean,
       defaultValue: false,
     },
+    hideCheckedChecklistItems: {
+      /**
+       * hide the checked checklist-items?
+       */
+      type: Boolean,
+      optional: true,
+    },
   }),
 );
 
@@ -2179,6 +2186,14 @@ Cards.mutations({
     };
   },
 
+  toggleHideCheckedChecklistItems() {
+    return {
+      $set: {
+        hideCheckedChecklistItems: !this.hideCheckedChecklistItems,
+      }
+    };
+  },
+
   setCustomField(customFieldId, value) {
     // todo
     const index = this.customFieldIndex(customFieldId);

models/checklists.js

@@ -27,14 +27,6 @@ Checklists.attachSchema(
       type: Date,
       optional: true,
     },
-    showAtMinicard: {
-      /**
-       * Show at minicard. Default: false.
-       */
-      type: Boolean,
-      optional: true,
-      defaultValue: false,
-    },
     createdAt: {
       /**
        * Creation date of the checklist
@@ -126,6 +118,13 @@ Checklists.helpers({
   isFinished() {
     return 0 !== this.itemCount() && this.itemCount() === this.finishedCount();
   },
+  showChecklist(hideCheckedChecklistItems) {
+    let ret = true;
+    if (this.isFinished() && hideCheckedChecklistItems === true) {
+      ret = false;
+    }
+    return ret;
+  },
   checkAllItems() {
     const checkItems = ReactiveCache.getChecklistItems({ checklistId: this._id });
     checkItems.forEach(function(item) {
@@ -142,9 +141,6 @@ Checklists.helpers({
     const items = ReactiveCache.getChecklist({ _id: this._id }).items;
     return _.pluck(items, '_id').indexOf(itemId);
   },
-  hasShowChecklistAtMinicard() {
-    return showAtMinicard || false;
-  },
 });
 
 Checklists.allow({
@@ -202,15 +198,6 @@ Checklists.mutations({
       },
     };
   },
-
-  toggleShowChecklistAtMinicard(checklistId) {
-    const value = this.hasShowChecklistAtMinicard();
-    return {
-      $set: {
-        'showAtMinicard': !value,
-      },
-    };
-  },
 });
 
 if (Meteor.isServer) {

models/users.js

@@ -172,13 +172,6 @@ Users.attachSchema(
       type: Boolean,
       optional: true,
     },
-    'profile.hideCheckedItems': {
-      /**
-       * does the user want to hide checked checklist items?
-       */
-      type: Boolean,
-      optional: true,
-    },
     'profile.cardMaximized': {
       /**
        * has user clicked maximize card?
@@ -853,11 +846,6 @@ Users.helpers({
     return profile.showDesktopDragHandles || false;
   },
 
-  hasHideCheckedItems() {
-    const profile = this.profile || {};
-    return profile.hideCheckedItems || false;
-  },
-
   hasCustomFieldsGrid() {
     const profile = this.profile || {};
     return profile.customFieldsGrid || false;
@@ -1048,15 +1036,6 @@ Users.mutations({
     };
   },
 
-  toggleHideCheckedItems() {
-    const value = this.hasHideCheckedItems();
-    return {
-      $set: {
-        'profile.hideCheckedItems': !value,
-      },
-    };
-  },
-
   toggleFieldsGrid(value = false) {
     return {
       $set: {

server/migrations.js

@@ -1473,3 +1473,19 @@ Migrations.add('remove-user-profile-hiddenSystemMessages', () => {
     noValidateMulti,
   );
 });
+
+Migrations.add('remove-user-profile-hideCheckedItems', () => {
+  Users.update(
+    {
+      "profile.hideCheckedItems": {
+        $exists: true,
+      },
+    },
+    {
+      $unset: {
+        "profile.hideCheckedItems": 1,
+      },
+    },
+    noValidateMulti,
+  );
+});