Merge pull request #4299 from mfilser/checklist_add_progress_bar

Add progress bar to checklist

client/components/cards/checklists.jade

@@ -43,6 +43,11 @@ template(name="checklistDetail")
           h2.title
             +viewer
                 = checklist.title
+
+    .checklist-progress-bar-container
+      .checklist-progress-text {{#if $gt finishedPercent 0}}{{finishedPercent}}%{{/if}}
+      .checklist-progress-bar
+        .checklist-progress(style="width:{{finishedPercent}}%;{{#if $eq finishedPercent 0}}display:none{{/if}}")
     +checklistItems(checklist = checklist)
 
 template(name="checklistDeletePopup")

client/components/cards/checklists.js

@@ -77,6 +77,12 @@ BlazeComponent.extendComponent({
       !Meteor.user().isWorker()
     );
   },
+
+  /** returns the finished percent of the checklist */
+  finishedPercent() {
+    const ret = this.data().checklist.finishedPercent();
+    return ret;
+  },
 }).register('checklistDetail');
 
 BlazeComponent.extendComponent({

client/components/cards/checklists.styl

@@ -20,6 +20,25 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   display: flex
   justify-content: space-between
 
+.checklist-progress-bar-container
+  display: flex
+  flex-direction: row
+  align-items: center
+
+  .checklist-progress-text
+    margin-right: 10px
+
+  .checklist-progress-bar
+    width: 80%
+    height: 10px
+
+    .checklist-progress
+      color: #fff !important
+      background-color: #2196F3 !important
+      padding: 0.01em 16px
+      border-radius: 16px
+      height: 100%
+
 .checklist-title
   .checkbox
     float: left

models/checklists.js

@@ -102,6 +102,19 @@ Checklists.helpers({
       isFinished: true,
     }).count();
   },
+  /** returns the finished percent of the checklist */
+  finishedPercent() {
+    const checklistItems = ChecklistItems.find({ checklistId: this._id });
+    const count = checklistItems.count();
+    const checklistItemsFinished = checklistItems.fetch().filter(checklistItem => checklistItem.isFinished);
+
+    let ret = 0;
+
+    if (count > 0) {
+      ret = Math.round(checklistItemsFinished.length / count * 100);
+    }
+    return ret;
+  },
   isFinished() {
     return 0 !== this.itemCount() && this.itemCount() === this.finishedCount();
   },