Add card spent time to log time what can be overtime or not (will support filtering in future)

client/components/cards/cardDetails.jade

@@ -46,6 +46,14 @@ template(name="cardDetails")
           h3.card-details-item-title {{_ 'card-due'}}
           +cardDueDate
 
+    .card-details-items
+      if spentTime
+        .card-details-item.card-details-item-spent
+          if isOvertime
+            h3.card-details-item-title {{_ 'overtime-hours'}}
+          else
+            h3.card-details-item-title {{_ 'spent-time-hours'}}
+          +cardSpentTime
 
     //- XXX We should use "editable" to avoid repetiting ourselves
     if canModifyCard
@@ -119,6 +127,7 @@ template(name="cardDetailsActionsPopup")
       li: a.js-attachments {{_ 'card-edit-attachments'}}
       li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
       li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
+      li: a.js-spent-time {{_ 'editCardSpentTimePopup-title'}}
     hr
     ul.pop-over-list
       li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}}

client/components/cards/cardDetails.js

@@ -163,6 +163,7 @@ Template.cardDetailsActionsPopup.events({
   'click .js-attachments': Popup.open('cardAttachments'),
   'click .js-start-date': Popup.open('editCardStartDate'),
   'click .js-due-date': Popup.open('editCardDueDate'),
+  'click .js-spent-time': Popup.open('editCardSpentTime'),
   'click .js-move-card': Popup.open('moveCard'),
   'click .js-copy-card': Popup.open('copyCard'),
   'click .js-move-card-to-top' (evt) {

client/components/cards/cardTime.jade

@@ -0,0 +1,22 @@
+template(name="editCardSpentTime")
+  .edit-card-time
+    form.edit-time
+      .fields
+        label(for="time") {{_ 'time'}}
+        input.js-time-field#time(type="number" step="0.01" name="time" value="{{card.spentTime}}" placeholder=timeFormat autofocus)
+        label(for="overtime") {{_ 'overtime'}}
+        a.js-toggle-overtime
+          .materialCheckBox#overtime(class="{{#if card.isOvertime}}is-checked{{/if}}" name="overtime")
+
+      if error.get
+        .warning {{_ error.get}}
+      button.primary.wide.left.js-submit-time(type="submit") {{_ 'save'}}
+      button.js-delete-time.negate.wide.right {{_ 'delete'}}
+
+template(name="timeBadge")
+  if canModifyCard
+    a.js-edit-time.card-time(title="{{showTitle}}" class="{{#if isOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | {{showTime}}
+  else
+    a.card-time(title="{{showTitle}}" class="{{#if isOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | {{showTime}}

client/components/cards/cardTime.js

@@ -0,0 +1,77 @@
+BlazeComponent.extendComponent({
+  template() {
+    return 'editCardSpentTime';
+  },
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.card = this.data();
+  },
+  toggleOvertime() {
+    this.card.isOvertime = !this.card.isOvertime;
+    $('#overtime .materialCheckBox').toggleClass('is-checked');
+
+    $('#overtime').toggleClass('is-checked');
+  },
+  storeTime(spentTime, isOvertime) {
+    this.card.setSpentTime(spentTime);
+    this.card.setOvertime(isOvertime);
+  },
+  deleteTime() {
+    this.card.unsetSpentTime();
+  },
+  events() {
+    return [{
+      //TODO : need checking this portion
+      'submit .edit-time'(evt) {
+        evt.preventDefault();
+
+        const spentTime = parseFloat(evt.target.time.value);
+        const isOvertime = this.card.isOvertime;
+
+        if (spentTime >= 0) {
+          this.storeTime(spentTime, isOvertime);
+          Popup.close();
+        } else {
+          this.error.set('invalid-time');
+          evt.target.time.focus();
+        }
+      },
+      'click .js-delete-time'(evt) {
+        evt.preventDefault();
+        this.deleteTime();
+        Popup.close();
+      },
+      'click a.js-toggle-overtime': this.toggleOvertime,
+    }];
+  },
+}).register('editCardSpentTimePopup');
+
+BlazeComponent.extendComponent({
+  template() {
+    return 'timeBadge';
+  },
+  onCreated() {
+    const self = this;
+    self.time = ReactiveVar();
+  },
+  showTitle() {
+    return `${TAPi18n.__('card-spent')} ${this.data().spentTime}`;
+  },
+  showTime() {
+    return this.data().spentTime;
+  },
+  isOvertime() {
+    return this.data().isOvertime;
+  },
+  events() {
+    return [{
+      'click .js-edit-time': Popup.open('editCardSpentTime'),
+    }];
+  },
+}).register('cardSpentTime');
+
+Template.timeBadge.helpers({
+  canModifyCard() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+});

client/components/cards/cardTime.styl

@@ -0,0 +1,17 @@
+.card-time
+  display: block
+  border-radius: 4px
+  padding: 1px 3px
+  color: #fff
+
+  background-color: #dbdbdb
+  &:hover, &.is-active
+    background-color: #b3b3b3
+
+  time
+    &::before
+      font: normal normal normal 14px/1 FontAwesome
+      font-size: inherit
+      -webkit-font-smoothing: antialiased
+      content: "\f017"  // clock symbol
+      margin-right: 0.3em

client/components/cards/minicard.jade

@@ -11,11 +11,15 @@ template(name="minicard")
         = title
     .dates
       if startAt
-          .date
-            +minicardStartDate
+        .date
+          +minicardStartDate
       if dueAt
-          .date
-            +minicardDueDate
+        .date
+          +minicardDueDate
+      if spentTime
+        .date
+          +cardSpentTime
+
     if members
       .minicard-members.js-minicard-members
         each members