Add checklist feature: Merge branch 'lkisme-ckls' into devel

8 files changed, 263 insertions, 1 deletions

diff --git a/client/components/activities/activities.jade b/client/components/activities/activities.jade
index 9ff73864..9bbcd055 100644
--- a/client/components/activities/activities.jade
+++ b/client/components/activities/activities.jade
@@ -26,6 +26,12 @@ template(name="boardActivities")
             +viewer
               = comment.text
 
+        if($eq activityType 'addChecklist')
+          | {{{_ 'activity-checklist-added' cardLink}}}.
+          .activity-checklist(href="{{ card.absoluteUrl }}")
+            +viewer
+              = checklist.title
+
         if($eq activityType 'archivedCard')
           | {{{_ 'activity-archived' cardLink}}}.
 
@@ -103,6 +109,11 @@ template(name="cardActivities")
           | {{{_ 'activity-attached' attachmentLink cardLabel}}}.
           if attachment.isImage
             img.attachment-image-preview(src=attachment.url)
+        if($eq activityType 'addChecklist')
+          | {{{_ 'activity-checklist-added' cardLabel}}}.
+          .activity-checklist
+            +viewer
+              = checklist.title
 
         if($eq activityType 'addComment')
           +inlinedForm(classNames='js-edit-comment')
diff --git a/client/components/activities/activities.styl b/client/components/activities/activities.styl
index 1f0494c7..2285fc0a 100644
--- a/client/components/activities/activities.styl
+++ b/client/components/activities/activities.styl
@@ -26,6 +26,14 @@
         margin-top: 5px
         padding: 5px
 
+      .activity-checklist
+        display: block
+        border-radius: 3px
+        background: white
+        text-decoration: none
+        box-shadow: 0 1px 2px rgba(0,0,0,.2)
+        margin-top: 5px
+        padding: 5px
       .activity-meta
         font-size: 0.8em
         color: darken(white, 40%)
diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade
index f4212d83..cf113951 100644
--- a/client/components/cards/cardDetails.jade
+++ b/client/components/cards/cardDetails.jade
@@ -72,6 +72,10 @@ template(name="cardDetails")
       h3.card-details-item-title {{_ 'description'}}
       +viewer
         = description
+
+    hr
+    +checklists(cardId = _id)
+
     if attachments.count
       hr
       h2
diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
new file mode 100644
index 00000000..987e6cd9
--- /dev/null
+++ b/client/components/cards/checklists.jade
@@ -0,0 +1,61 @@
+template(name="checklists")
+  h2 {{_ 'checklists'}}
+  .card-checklist-items
+    each checklist in currentCard.checklists
+      +checklistDetail(checklist = checklist)
+  +inlinedForm(classNames="js-add-checklist" cardId = cardId)
+    +addChecklistItemForm
+  else
+    a.js-open-inlined-form
+      i.fa.fa-plus
+      | {{_ 'add-checklist'}}...
+
+template(name="checklistDetail")
+  +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
+    +editChecklistItemForm(checklist = checklist)
+  else
+    .checklist-title
+      .checkbox.fa.fa-check-square-o
+      a.js-delete-checklist {{_ "delete"}}...
+      span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}}
+      h2.title.js-open-inlined-form.is-editable  {{checklist.title}}
+  +checklistItems(checklist = checklist)
+
+template(name="addChecklistItemForm")
+  textarea.js-add-checklist-item(rows='1' autofocus)
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
+    a.fa.fa-times-thin.js-close-inlined-form
+
+template(name="editChecklistItemForm")
+  textarea.js-edit-checklist-item(rows='1' autofocus)
+    if $eq type 'item'
+      = item.title
+    else
+      = checklist.title
+  .edit-controls.clearfix
+    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
+    a.fa.fa-times-thin.js-close-inlined-form
+    span(title=createdAt) {{ moment createdAt }}
+    if currentUser.isBoardMember
+      a.js-delete-checklist-item {{_ "delete"}}...
+
+template(name="checklistItems")
+  .checklist-items
+    each item in checklist.items
+      +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
+        +editChecklistItemForm(type = 'item' item = item checklist = checklist)
+      else
+        +itemDetail(item = item checklist = checklist)
+    if currentUser.isBoardMember
+      +inlinedForm(classNames="js-add-checklist-item" checklist = checklist)
+        +addChecklistItemForm
+      else
+        a.add-checklist-item.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-checklist-item'}}...
+
+template(name='itemDetail')
+  .item
+    .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
+    .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}") {{item.title}}
diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js
new file mode 100644
index 00000000..5dac7bd3
--- /dev/null
+++ b/client/components/cards/checklists.js
@@ -0,0 +1,89 @@
+BlazeComponent.extendComponent({
+  addChecklist(event) {
+    event.preventDefault();
+    const textarea = this.find('textarea.js-add-checklist-item');
+    const title = textarea.value.trim();
+    const cardId = this.currentData().cardId;
+    Checklists.insert({
+      cardId,
+      title,
+    });
+  },
+
+  addChecklistItem(event) {
+    event.preventDefault();
+    const textarea = this.find('textarea.js-add-checklist-item');
+    const title = textarea.value.trim();
+    const checklist = this.currentData().checklist;
+    checklist.addItem(title);
+  },
+
+  editChecklist(event) {
+    event.preventDefault();
+    const textarea = this.find('textarea.js-edit-checklist-item');
+    const title = textarea.value.trim();
+    const checklist = this.currentData().checklist;
+    checklist.setTitle(title);
+  },
+
+  editChecklistItem(event) {
+    event.preventDefault();
+
+    const textarea = this.find('textarea.js-edit-checklist-item');
+    const title = textarea.value.trim();
+    const itemId = this.currentData().item._id;
+    const checklist = this.currentData().checklist;
+    checklist.editItem(itemId, title);
+  },
+
+  deleteItem() {
+    const checklist = this.currentData().checklist;
+    const item = this.currentData().item;
+    if (checklist && item && item._id) {
+      checklist.removeItem(item._id);
+    }
+  },
+
+  deleteChecklist() {
+    const checklist = this.currentData().checklist;
+    if (checklist && checklist._id) {
+      Checklists.remove(checklist._id);
+    }
+  },
+
+  pressKey(event) {
+    //If user press enter key inside a form, submit it, so user doesn't have to leave keyboard to submit a form.
+    if (event.keyCode === 13) {
+      event.preventDefault();
+      const $form = $(event.currentTarget).closest('form');
+      $form.find('button[type=submit]').click();
+    }
+  },
+
+  events() {
+    return [{
+      'submit .js-add-checklist': this.addChecklist,
+      'submit .js-edit-checklist-title': this.editChecklist,
+      'submit .js-add-checklist-item': this.addChecklistItem,
+      'submit .js-edit-checklist-item': this.editChecklistItem,
+      'click .js-delete-checklist-item': this.deleteItem,
+      'click .js-delete-checklist': this.deleteChecklist,
+      keydown: this.pressKey,
+    }];
+  },
+}).register('checklists');
+
+BlazeComponent.extendComponent({
+  toggleItem() {
+    const checklist = this.currentData().checklist;
+    const item = this.currentData().item;
+    if (checklist && item && item._id) {
+      checklist.toggleItem(item._id);
+    }
+  },
+  events() {
+    return [{
+      'click .item .check-box': this.toggleItem,
+    }];
+  },
+}).register('itemDetail');
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
new file mode 100644
index 00000000..885d7528
--- /dev/null
+++ b/client/components/cards/checklists.styl
@@ -0,0 +1,68 @@
+.js-add-checklist
+  color: #8c8c8c
+
+textarea.js-add-checklist-item, textarea.js-edit-checklist-item
+  overflow: hidden
+  word-wrap: break-word
+  resize: none
+  height: 34px
+
+.delete-text
+  color: #8c8c8c
+  text-decoration: underline
+  word-wrap: break-word
+  float: right
+  padding-top: 6px
+  &:hover
+    color: inherit
+
+.checklist-title
+  .checkbox
+    float: left
+    width: 30px
+    height 30px
+    font-size: 18px
+    line-height: 30px
+
+  .title
+    font-size: 18px
+    line-height: 30px
+
+  .checklist-stat
+    margin: 0 0.5em
+    float: right
+    padding-top: 6px
+    &.is-finished
+      color: #3cb500
+
+  .js-delete-checklist
+    @extends .delete-text
+
+.checklist-items
+  margin: 0 0 0.5em 1.33em
+
+  .item
+    line-height: 25px
+    font-size: 1.1em
+    margin-top: 3px
+    display: flex
+
+    .check-box
+      margin-top: 5px
+      &.is-checked
+        border-bottom: 2px solid #3cb500
+        border-right: 2px solid #3cb500
+
+    .item-title
+      padding-left: 10px;
+      &.is-checked
+        color: #8c8c8c
+        font-style: italic
+
+  .js-delete-checklist-item
+    @extends .delete-text
+    padding: 12px 0 0 0
+
+  .add-checklist-item
+    padding-top: 0.5em
+    display: inline-block
diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index edc7d2d3..8b46ee74 100644
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@@ -14,7 +14,7 @@ template(name="minicard")
     .badges
       if comments.count
         .badge(title="{{_ 'card-comments-title' comments.count }}")
-          span.badge-icon.fa.fa-comment-o
+          span.badge-icon.fa.fa-comment-o.badge-comment
           span.badge-text= comments.count
       if description
         .badge.badge-state-image-only(title=description)
@@ -29,3 +29,8 @@ template(name="minicard")
       if dueAt
         .badge
           +minicardDueDate
+      if checklists.count
+        .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
+          span.badge-icon.fa.fa-check-square-o
+          span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
+
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index a61f6067..12a89785 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -99,10 +99,26 @@
       .badge-text
         vertical-align: middle
 
+      &.is-finished
+        background: #3cb500
+        padding: 0px 3px
+        border-radius: 3px
+        color: white
+
+      .badge-icon,
+      .badge-text
+        vertical-align: middle//didn't figure why use top, it'd be easier to fill bg if it's middle. This was introduced in commit "91cfcf7b12b5e7c137c2e765b2c378dde6b82966" & "* Improve the design of the minicards badges" was mentioned.
+        &.badge-comment
+          margin-bottom: 0.1rem
+
       .badge-text
         font-size: 0.9em
         padding-left: 2px
         line-height: 14px
+      .check-list-text
+        padding-left: 0px
+        line-height: 12px
+
 
   .minicard-members
     float: right