At opened card, toggle to show checklist at minicard. Part 1.

Thanks to xet7 !

client/components/cards/checklists.css

@@ -8,6 +8,17 @@ textarea.js-edit-checklist-item {
   resize: none;
   height: 34px;
 }
+.text-show-at-minicard {
+  width: 350px;
+  text-align: left;
+}
+.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 {

client/components/cards/checklists.jade

@@ -10,8 +10,20 @@ template(name="checklists")
           a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
             i.fa.fa-plus
     if currentUser.isBoardMember
+      span.text-show-at-minicard
+        | {{_ 'show-at-minicard'}}
+      .material-toggle-switch(title="{{_ 'show-checklist-at-minicard'}}")
+        if showChecklistAtMinicard
+          input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicardButton" checked="checked")
+        else
+          input.toggle-switch(type="checkbox" id="toggleShowChecklistAtMinicardButton")
+        label.toggle-label(for="toggleShowChecklistAtMinicardButton")
+      span.text-some-space
+      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

client/components/cards/checklists.js

@@ -202,6 +202,9 @@ BlazeComponent.extendComponent({
 
   events() {
     const events = {
+      'click #toggleShowChecklistAtMinicardButton'() {
+        Meteor.call('toggleShowChecklistAtMinicard');
+      },
       'click #toggleHideCheckedItemsButton'() {
         Meteor.call('toggleHideCheckedItems');
       },

imports/i18n/data/en.i18n.json

@@ -1237,5 +1237,7 @@
   "settingsTranslationPopup-title": "Delete this custom translation string?",
   "translation": "Translation",
   "text": "Text",
-  "translation-text": "Translation text"
+  "translation-text": "Translation text",
+  "show-at-minicard": "Show at minicard",
+  "show-checklist-at-minicard": "Show checklist at minicard"
 }

models/checklists.js

@@ -27,6 +27,14 @@ Checklists.attachSchema(
       type: Date,
       optional: true,
     },
+    showAtMinicard: {
+      /**
+       * Show at minicard. Default: false.
+       */
+      type: Boolean,
+      optional: true,
+      defaultValue: false,
+    },
     createdAt: {
       /**
        * Creation date of the checklist
@@ -134,6 +142,9 @@ Checklists.helpers({
     const items = ReactiveCache.getChecklist({ _id: this._id }).items;
     return _.pluck(items, '_id').indexOf(itemId);
   },
+  hasShowChecklistAtMinicard() {
+    return showAtMinicard || false;
+  },
 });
 
 Checklists.allow({
@@ -191,6 +202,15 @@ Checklists.mutations({
       },
     };
   },
+
+  toggleShowChecklistAtMinicard() {
+    const value = this.hasShowChecklistAtMinicard();
+    return {
+      $set: {
+        'showAtMinicard': !value,
+      },
+    };
+  },
 });
 
 if (Meteor.isServer) {