Add basic start and due dates for cards.

client/components/cards/cardDate.js

@@ -0,0 +1,193 @@
+// Edit start & due dates
+const EditCardDate = BlazeComponent.extendComponent({
+  template() {
+    return 'editCardDate';
+  },
+
+  onCreated() {
+    this.error = new ReactiveVar('');
+    this.card = this.data();
+    this.date = new ReactiveVar(moment.invalid());
+  },
+
+  onRendered() {
+    let $picker = this.$('.js-datepicker').datepicker({
+      todayHighlight: true,
+      todayBtn: 'linked',
+      language: TAPi18n.getLanguage()
+    }).on('changeDate', function(e) {
+      const localDate = moment(e.date).format('L');
+      date.value = localDate;
+      this.error.set('');
+      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');
+  },
+  showTime() {
+    if (this.date.get().isValid())
+      return this.date.get().format('LT');
+  },
+  dateFormat() {
+    return moment.localeData().longDateFormat('L');
+  },
+  timeFormat() {
+    return moment.localeData().longDateFormat('LT');
+  },
+
+  events() {
+    return [{
+      'keyup .js-date-field'(evt) {
+        // parse for localized date format in strict mode
+        const dateMoment = moment(date.value, 'L', true);
+        if (dateMoment.isValid()) {
+          this.error.set('');
+          this.$('.js-datepicker').datepicker('update', dateMoment.toDate());
+        }
+      },
+      'keyup .js-time-field'(evt) {
+        // parse for localized time format in strict mode
+        const dateMoment = moment(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
+        var time = evt.target.time.value || moment(new Date().setHours(12,0,0)).format('LT');
+        
+        const dateString = evt.target.date.value + ' ' + time;
+        const newDate = moment.utc(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();
+      },
+    }];
+  },
+});
+
+// editCardStartDatePopup
+(class extends EditCardDate {
+  onCreated() {
+    super();
+    if (this.data().startAt) {
+      this.date.set(moment.utc(this.data().startAt));
+    }
+  }
+
+  _storeDate(date) {
+    this.card.setStart(date);
+  }
+
+  _deleteDate() {
+    this.card.unsetStart();
+  }
+}).register('editCardStartDatePopup');
+
+// editCardDueDatePopup
+(class extends EditCardDate {
+  onCreated() {
+    super();
+    if (this.data().dueAt !== undefined) {
+      this.date.set(moment.utc(this.data().dueAt));
+    }
+  }
+
+  onRendered() {
+    super();
+    if (moment.isDate(this.card.startAt)) {
+      this.$('.js-datepicker').datepicker('setStartDate', this.card.startAt);
+    }
+  }
+
+  _storeDate(date) {
+    this.card.setDue(date);
+  }
+
+  _deleteDate() {
+    this.card.unsetDue();
+  }
+}).register('editCardDueDatePopup');
+
+
+
+// Display start & due dates
+const CardDate = BlazeComponent.extendComponent({
+  template() {
+    return 'dateBadge';
+  },
+
+  onCreated() {
+    this.date = ReactiveVar();
+  },
+
+  showDate() {
+    // this will start working once mquandalle:moment
+    // is updated to at least moment.js 2.10.5
+    // until then, the date is displayed in the "L" format
+    return this.date.get().calendar(null, {
+      sameElse: 'llll'
+    });
+  },
+
+  showTitle() {
+    return this.date.get().format('LLLL');
+  },
+
+  showISODate() {
+    return this.date.get().toISOString();
+  },
+});
+
+// cardStartDate
+(class extends CardDate {
+  onCreated() {
+    super();
+    let self = this;
+    this.autorun(() => {
+      self.date.set(moment.utc(this.data().startAt));
+    });
+  }
+
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardStartDate'),
+    });
+  }
+}).register('cardStartDate');
+
+// cardDueDate
+(class extends CardDate {
+  onCreated() {
+    super();
+    let self = this;
+    this.autorun(() => {
+      self.date.set(moment.utc(this.data().dueAt));
+    });
+  }
+
+  events() {
+    return super.events().concat({
+      'click .js-edit-date': Popup.open('editCardDueDate'),
+    });
+  }
+}).register('cardDueDate');