From ac1f5407634358cb787ab1dfa6ce4f6bbd4f6985 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 15 Jan 2022 15:48:55 +0100 Subject: [PATCH 1/4] Added progress bar to checklist - Relates #1847 --- client/components/cards/checklists.jade | 2 ++ client/components/cards/checklists.js | 6 ++++++ client/components/cards/checklists.styl | 11 +++++++++++ models/checklists.js | 13 +++++++++++++ 4 files changed, 32 insertions(+) diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index 590b5e2eb..dfb4f8f96 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -43,6 +43,8 @@ template(name="checklistDetail") h2.title +viewer = checklist.title + .checklist-progress-bar + .checklist-progress(style="width:{{finishedPercent}}%") {{finishedPercent}}% +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..6dad6c2e9 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -20,6 +20,17 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item display: flex justify-content: space-between +.checklist-progress-bar + width: 90% + height: 20px + + .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(); }, From 1670ba31e8268561a8f39015022c3e3527aa01f4 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 15 Jan 2022 16:33:46 +0100 Subject: [PATCH 2/4] Changed progress bar layout --- client/components/cards/checklists.jade | 7 +++++-- client/components/cards/checklists.styl | 25 ++++++++++++++++--------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index dfb4f8f96..e36a25c00 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -43,8 +43,11 @@ template(name="checklistDetail") h2.title +viewer = checklist.title - .checklist-progress-bar - .checklist-progress(style="width:{{finishedPercent}}%") {{finishedPercent}}% + + .checklist-progress-bar-container + .checklist-progress-text {{finishedPercent}}% + .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.styl b/client/components/cards/checklists.styl index 6dad6c2e9..21fa1ba44 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -20,16 +20,23 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item display: flex justify-content: space-between -.checklist-progress-bar - width: 90% - height: 20px +.checklist-progress-bar-container + display: flex + flex-direction: row - .checklist-progress - color: #fff !important - background-color: #2196F3 !important - padding: 0.01em 16px - border-radius: 16px - height: 100% + .checklist-progress-text + margin-right: 10px + + .checklist-progress-bar + width: 80% + height: 20px + + .checklist-progress + color: #fff !important + background-color: #2196F3 !important + padding: 0.01em 16px + border-radius: 16px + height: 100% .checklist-title .checkbox From e7051c8ecd737e22ba267713f8f75ba4eb8466e1 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 15 Jan 2022 18:13:46 +0100 Subject: [PATCH 3/4] Smaller progress bar --- client/components/cards/checklists.styl | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl index 21fa1ba44..c906eec5d 100644 --- a/client/components/cards/checklists.styl +++ b/client/components/cards/checklists.styl @@ -23,13 +23,14 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item .checklist-progress-bar-container display: flex flex-direction: row + align-items: center .checklist-progress-text margin-right: 10px .checklist-progress-bar width: 80% - height: 20px + height: 10px .checklist-progress color: #fff !important From 1fcc0d2ec2cf7f25b4ba06c19e6e974cf3f76e1c Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Sat, 15 Jan 2022 18:41:00 +0100 Subject: [PATCH 4/4] Only show progress bar percent if there is any checklist item done --- client/components/cards/checklists.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade index e36a25c00..77633d212 100644 --- a/client/components/cards/checklists.jade +++ b/client/components/cards/checklists.jade @@ -45,7 +45,7 @@ template(name="checklistDetail") = checklist.title .checklist-progress-bar-container - .checklist-progress-text {{finishedPercent}}% + .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)