1 files changed, 219 insertions, 8 deletions

diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js
index 09a6761b..f33e8c19 100644
--- a/client/components/cards/cardDate.js
+++ b/client/components/cards/cardDate.js
@@ -1,10 +1,114 @@
-// Edit start & due dates
+// Edit received, start, due & end dates
+const EditCardDate = BlazeComponent.extendComponent({
+  template() {
+    return 'editCardDate';
+  },
+
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.card = this.data();
+    this.date = new ReactiveVar(moment.invalid());
+  },
+
+  onRendered() {
+    const $picker = this.$('.js-datepicker').datepicker({
+      todayHighlight: true,
+      todayBtn: 'linked',
+      language: TAPi18n.getLanguage(),
+    }).on('changeDate', function(evt) {
+      this.find('#date').value = moment(evt.date).format('L');
+      this.error.set('');
+      this.find('#time').focus();
+    }.bind(this));
+
+    if (this.date.get().isValid()) {
+      $picker.datepicker('update', this.date.get().toDate());
+    }
+  },
+
+  showDate() {
+    if (this.date.get().isValid())
+      return this.date.get().format('L');
+    return '';
+  },
+  showTime() {
+    if (this.date.get().isValid())
+      return this.date.get().format('LT');
+    return '';
+  },
+  dateFormat() {
+    return moment.localeData().longDateFormat('L');
+  },
+  timeFormat() {
+    return moment.localeData().longDateFormat('LT');
+  },
+
+  events() {
+    return [{
+      'keyup .js-date-field'() {
+        // parse for localized date format in strict mode
+        const dateMoment = moment(this.find('#date').value, 'L', true);
+        if (dateMoment.isValid()) {
+          this.error.set('');
+          this.$('.js-datepicker').datepicker('update', dateMoment.toDate());
+        }
+      },
+      'keyup .js-time-field'() {
+        // parse for localized time format in strict mode
+        const dateMoment = moment(this.find('#time').value, 'LT', true);
+        if (dateMoment.isValid()) {
+          this.error.set('');
+        }
+      },
+      'submit .edit-date'(evt) {
+        evt.preventDefault();
+
+        // if no time was given, init with 12:00
+        const time = evt.target.time.value || moment(new Date().setHours(12, 0, 0)).format('LT');
+
+        const dateString = `${evt.target.date.value} ${time}`;
+        const newDate = moment(dateString, 'L LT', true);
+        if (newDate.isValid()) {
+          this._storeDate(newDate.toDate());
+          Popup.close();
+        }
+        else {
+          this.error.set('invalid-date');
+          evt.target.date.focus();
+        }
+      },
+      'click .js-delete-date'(evt) {
+        evt.preventDefault();
+        this._deleteDate();
+        Popup.close();
+      },
+    }];
+  },
+});
+
 Template.dateBadge.helpers({
   canModifyCard() {
     return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
   },
 });
 
+// editCardReceivedDatePopup
+(class extends EditCardDate {
+  onCreated() {
+    super.onCreated();
+    this.data().receivedAt && this.date.set(moment(this.data().receivedAt));
+  }
+
+  _storeDate(date) {
+    this.card.setReceived(date);
+  }
+
+  _deleteDate() {
+    this.card.unsetReceived();
+  }
+}).register('editCardReceivedDatePopup');
+
+
 // editCardStartDatePopup
 (class extends DatePicker {
   onCreated() {
@@ -12,6 +116,13 @@ Template.dateBadge.helpers({
     this.data().startAt && this.date.set(moment(this.data().startAt));
   }
 
+  onRendered() {
+    super.onRendered();
+    if (moment.isDate(this.card.receivedAt)) {
+      this.$('.js-datepicker').datepicker('setStartDate', this.card.receivedAt);
+    }
+  }
+
   _storeDate(date) {
     this.card.setStart(date);
   }
@@ -44,8 +155,31 @@ Template.dateBadge.helpers({
   }
 }).register('editCardDueDatePopup');
 
+// editCardEndDatePopup
+(class extends EditCardDate {
+  onCreated() {
+    super.onCreated();
+    this.data().endAt && this.date.set(moment(this.data().endAt));
+  }
+
+  onRendered() {
+    super.onRendered();
+    if (moment.isDate(this.card.startAt)) {
+      this.$('.js-datepicker').datepicker('setStartDate', this.card.startAt);
+    }
+  }
+
+  _storeDate(date) {
+    this.card.setEnd(date);
+  }
+
+  _deleteDate() {
+    this.card.unsetEnd();
+  }
+}).register('editCardEndDatePopup');
 
-// Display start & due dates
+
+// Display received, start, due & end dates
 const CardDate = BlazeComponent.extendComponent({
   template() {
     return 'dateBadge';
@@ -74,6 +208,36 @@ const CardDate = BlazeComponent.extendComponent({
   },
 });
 
+class CardReceivedDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().receivedAt));
+    });
+  }
+
+  classes() {
+    let classes = 'received-date' + ' ';
+    if (this.date.get().isBefore(this.now.get(), 'minute') &&
+        this.now.get().isBefore(this.data().dueAt)) {
+      classes += 'current';
+    }
+    return classes;
+  }
+
+  showTitle() {
+    return `${TAPi18n.__('card-received-on')} ${this.date.get().format('LLLL')}`;
+  }
+
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardReceivedDate'),
+    });
+  }
+}
+CardReceivedDate.register('cardReceivedDate');
+
 class CardStartDate extends CardDate {
   onCreated() {
     super.onCreated();
@@ -84,11 +248,12 @@ class CardStartDate extends CardDate {
   }
 
   classes() {
+    let classes = 'start-date' + ' ';
     if (this.date.get().isBefore(this.now.get(), 'minute') &&
         this.now.get().isBefore(this.data().dueAt)) {
-      return 'current';
+      classes += 'current';
     }
-    return '';
+    return classes;
   }
 
   showTitle() {
@@ -113,13 +278,14 @@ class CardDueDate extends CardDate {
   }
 
   classes() {
+    let classes = 'due-date' + ' ';
     if (this.now.get().diff(this.date.get(), 'days') >= 2)
-      return 'long-overdue';
+      classes += 'long-overdue';
     else if (this.now.get().diff(this.date.get(), 'minute') >= 0)
-      return 'due';
+      classes += 'due';
     else if (this.now.get().diff(this.date.get(), 'days') >= -1)
-      return 'almost-due';
-    return '';
+      classes += 'almost-due';
+    return classes;
   }
 
   showTitle() {
@@ -134,6 +300,44 @@ class CardDueDate extends CardDate {
 }
 CardDueDate.register('cardDueDate');
 
+class CardEndDate extends CardDate {
+  onCreated() {
+    super.onCreated();
+    const self = this;
+    self.autorun(() => {
+      self.date.set(moment(self.data().endAt));
+    });
+  }
+
+  classes() {
+    let classes = 'end-date' + ' ';
+    if (this.data.dueAt.diff(this.date.get(), 'days') >= 2)
+      classes += 'long-overdue';
+    else if (this.data.dueAt.diff(this.date.get(), 'days') >= 0)
+      classes += 'due';
+    else if (this.data.dueAt.diff(this.date.get(), 'days') >= -2)
+      classes += 'almost-due';
+    return classes;
+  }
+
+  showTitle() {
+    return `${TAPi18n.__('card-end-on')} ${this.date.get().format('LLLL')}`;
+  }
+
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardEndDate'),
+    });
+  }
+}
+CardEndDate.register('cardEndDate');
+
+(class extends CardReceivedDate {
+  showDate() {
+    return this.date.get().format('l');
+  }
+}).register('minicardReceivedDate');
+
 (class extends CardStartDate {
   showDate() {
     return this.date.get().format('l');
@@ -145,3 +349,10 @@ CardDueDate.register('cardDueDate');
     return this.date.get().format('l');
   }
 }).register('minicardDueDate');
+
+(class extends CardEndDate {
+  showDate() {
+    return this.date.get().format('l');
+  }
+}).register('minicardEndDate');
+