diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 590b5e2eb..77633d212 100644 --- a/client/components/cards/checklists.jade +++ b/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") diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 0d5589650..692e8eb13 100644 --- a/client/components/cards/checklists.js +++ b/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({ diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl index c8ca24f06..c906eec5d 100644 --- a/client/components/cards/checklists.styl +++ b/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 diff --git a/models/checklists.js b/models/checklists.js index 0e76d4001..c9448293e 100644 --- a/models/checklists.js +++ b/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(); },