resolving merge conflicts

client/components/cards/cardCustomFields.jade

@@ -0,0 +1,76 @@
+template(name="cardCustomFieldsPopup")
+    ul.pop-over-list
+        each board.customFields
+            li.item(class="")
+                a.name.js-select-field(href="#")
+                    span.full-name
+                        = name
+                    if hasCustomField
+                        i.fa.fa-check
+    hr
+    a.quiet-button.full.js-settings
+        i.fa.fa-cog
+        span {{_ 'settings'}}
+
+template(name="cardCustomField")
+    +Template.dynamic(template=getTemplate)
+
+template(name="cardCustomField-text")
+    if canModifyCard
+        +inlinedForm(classNames="js-card-customfield-text")
+            +editor(autofocus=true)
+                = value
+            .edit-controls.clearfix
+                button.primary(type="submit") {{_ 'save'}}
+                a.fa.fa-times-thin.js-close-inlined-form
+        else
+            a.js-open-inlined-form
+                if value
+                    +viewer
+                        = value
+                else
+                    | {{_ 'edit'}}
+
+template(name="cardCustomField-number")
+    if canModifyCard
+        +inlinedForm(classNames="js-card-customfield-number")
+            input(type="number" value=data.value)
+            .edit-controls.clearfix
+                button.primary(type="submit") {{_ 'save'}}
+                a.fa.fa-times-thin.js-close-inlined-form
+        else
+            a.js-open-inlined-form
+                if value
+                    = value
+                else
+                    | {{_ 'edit'}}
+
+template(name="cardCustomField-date")
+    if canModifyCard
+        a.js-edit-date(title="{{showTitle}}" class="{{classes}}")
+            if value
+                div.card-date
+                    time(datetime="{{showISODate}}")
+                        | {{showDate}}
+            else
+                | {{_ 'edit'}}
+
+template(name="cardCustomField-dropdown")
+    if canModifyCard
+        +inlinedForm(classNames="js-card-customfield-dropdown")
+            select.inline
+                each items
+                    if($eq data.value this._id)
+                        option(value=_id selected="selected") {{name}}
+                    else
+                        option(value=_id) {{name}}
+            .edit-controls.clearfix
+                button.primary(type="submit") {{_ 'save'}}
+                a.fa.fa-times-thin.js-close-inlined-form
+        else
+            a.js-open-inlined-form
+                if value
+                    +viewer
+                        = selectedItem
+                else
+                    | {{_ 'edit'}}

client/components/cards/cardCustomFields.js

@@ -0,0 +1,179 @@
+Template.cardCustomFieldsPopup.helpers({
+    hasCustomField() {
+        const card = Cards.findOne(Session.get('currentCard'));
+        const customFieldId = this._id;
+        return card.customFieldIndex(customFieldId) > -1;
+    },
+});
+
+Template.cardCustomFieldsPopup.events({
+    'click .js-select-field'(evt) {
+        const card = Cards.findOne(Session.get('currentCard'));
+        const customFieldId = this._id;
+        card.toggleCustomField(customFieldId);
+        evt.preventDefault();
+    },
+    'click .js-settings'(evt) {
+        EscapeActions.executeUpTo('detailsPane');
+        Sidebar.setView('customFields');
+        evt.preventDefault();
+    }
+});
+
+// cardCustomField
+const CardCustomField = BlazeComponent.extendComponent({
+
+    getTemplate() {
+        return 'cardCustomField-' + this.data().definition.type;
+    },
+
+    onCreated() {
+        const self = this;
+        self.card = Cards.findOne(Session.get('currentCard'));
+        self.customFieldId = this.data()._id;
+    },
+
+    canModifyCard() {
+        return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+    },
+});
+CardCustomField.register('cardCustomField');
+
+// cardCustomField-text
+(class extends CardCustomField {
+
+    onCreated() {
+        super.onCreated();
+    }
+
+    events() {
+        return [{
+            'submit .js-card-customfield-text'(evt) {
+                evt.preventDefault();
+                const value = this.currentComponent().getValue();
+                this.card.setCustomField(this.customFieldId, value);
+            },
+        }];
+    }
+
+}).register('cardCustomField-text');
+
+// cardCustomField-number
+(class extends CardCustomField {
+
+    onCreated() {
+        super.onCreated();
+    }
+
+    events() {
+        return [{
+            'submit .js-card-customfield-number'(evt) {
+                evt.preventDefault();
+                const value = parseInt(this.find('input').value);
+                this.card.setCustomField(this.customFieldId, value);
+            },
+        }];
+    }
+
+}).register('cardCustomField-number');
+
+// cardCustomField-date
+(class extends CardCustomField {
+
+    onCreated() {
+        super.onCreated();
+        const self = this;
+        self.date = ReactiveVar();
+        self.now = ReactiveVar(moment());
+        window.setInterval(() => {
+            self.now.set(moment());
+        }, 60000);
+
+        self.autorun(() => {
+            self.date.set(moment(self.data().value));
+        });
+    }
+
+    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',
+        });
+    }
+
+    showISODate() {
+        return this.date.get().toISOString();
+    }
+
+    classes() {
+        if (this.date.get().isBefore(this.now.get(), 'minute') &&
+            this.now.get().isBefore(this.data().value)) {
+            return 'current';
+        }
+        return '';
+    }
+
+    showTitle() {
+        return `${TAPi18n.__('card-start-on')} ${this.date.get().format('LLLL')}`;
+    }
+
+    events() {
+        return [{
+            'click .js-edit-date': Popup.open('cardCustomField-date'),
+        }];
+    }
+
+}).register('cardCustomField-date');
+
+// cardCustomField-datePopup
+(class extends DatePicker {
+    onCreated() {
+        super.onCreated();
+        const self = this;
+        self.card = Cards.findOne(Session.get('currentCard'));
+        self.customFieldId = this.data()._id;
+        this.data().value && this.date.set(moment(this.data().value));
+    }
+
+    _storeDate(date) {
+        this.card.setCustomField(this.customFieldId, date);
+    }
+
+    _deleteDate() {
+        this.card.setCustomField(this.customFieldId, '');
+    }
+}).register('cardCustomField-datePopup');
+
+// cardCustomField-dropdown
+(class extends CardCustomField {
+
+    onCreated() {
+        super.onCreated();
+        this._items = this.data().definition.settings.dropdownItems;
+        this.items = this._items.slice(0);
+        this.items.unshift({
+            _id: "",
+            name: TAPi18n.__('custom-field-dropdown-none')
+        });
+    }
+
+    selectedItem() {
+        const selected = this._items.find((item) => {
+            return item._id == this.data().value;
+        });
+        return (selected) ? selected.name : TAPi18n.__('custom-field-dropdown-unknown');
+    }
+
+    events() {
+        return [{
+            'submit .js-card-customfield-dropdown'(evt) {
+                evt.preventDefault();
+                const value = this.find('select').value;
+                this.card.setCustomField(this.customFieldId, value);
+            },
+        }];
+    }
+
+}).register('cardCustomField-dropdown');

client/components/cards/cardDate.jade

@@ -1,19 +1,3 @@
-template(name="editCardDate")
-  .edit-card-date
-    form.edit-date
-      .fields
-        .left
-          label(for="date") {{_ 'date'}}
-          input.js-date-field#date(type="text" name="date" value=showDate placeholder=dateFormat autofocus)
-        .right
-          label(for="time") {{_ 'time'}}
-          input.js-time-field#time(type="text" name="time" value=showTime placeholder=timeFormat)
-      .js-datepicker
-      if error.get
-        .warning {{_ error.get}}
-      button.primary.wide.left.js-submit-date(type="submit") {{_ 'save'}}
-      button.js-delete-date.negate.wide.right.js-delete-date {{_ 'delete'}}
-
 template(name="dateBadge")
   if canModifyCard
     a.js-edit-date.card-date(title="{{showTitle}}" class="{{classes}}")

client/components/cards/cardDate.js

@@ -110,7 +110,7 @@ Template.dateBadge.helpers({
 
 
 // editCardStartDatePopup
-(class extends EditCardDate {
+(class extends DatePicker {
   onCreated() {
     super.onCreated();
     this.data().startAt && this.date.set(moment(this.data().startAt));
@@ -133,7 +133,7 @@ Template.dateBadge.helpers({
 }).register('editCardStartDatePopup');
 
 // editCardDueDatePopup
-(class extends EditCardDate {
+(class extends DatePicker {
   onCreated() {
     super.onCreated();
     this.data().dueAt && this.date.set(moment(this.data().dueAt));

client/components/cards/cardDate.styl

@@ -1,22 +1,3 @@
-.edit-card-date
-  .fields
-    .left
-      width: 56%
-    .right
-      width: 38%
-  .datepicker
-    width: 100%
-    table
-      width: 100%
-      border: none
-      border-spacing: 0
-      border-collapse: collapse
-      thead
-        background: none
-      td, th
-        box-sizing: border-box
-
-
 .card-date
   display: block
   border-radius: 4px

client/components/cards/cardDetails.jade

@@ -65,6 +65,22 @@ template(name="cardDetails")
           a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
             i.fa.fa-plus
 
+      if startAt
+        .card-details-item.card-details-item-start
+          h3.card-details-item-title {{_ 'card-start'}}
+          +cardStartDate
+
+      if dueAt
+        .card-details-item.card-details-item-due
+          h3.card-details-item-title {{_ 'card-due'}}
+          +cardDueDate
+
+      each customFieldsWD
+        .card-details-item.card-details-item-customfield
+          h3.card-details-item-title
+            = definition.name
+          +cardCustomField
+
     .card-details-items
       if spentTime
         .card-details-item.card-details-item-spent
@@ -144,6 +160,7 @@ template(name="cardDetailsActionsPopup")
       li: a.js-labels {{_ 'card-edit-labels'}}
       li: a.js-attachments {{_ 'card-edit-attachments'}}
       li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
+      li: a.js-custom-fields {{_ 'card-edit-custom-fields'}}
       li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
       li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
       li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}

client/components/cards/cardDetails.js

@@ -216,6 +216,7 @@ Template.cardDetailsActionsPopup.events({
   'click .js-labels': Popup.open('cardLabels'),
   'click .js-attachments': Popup.open('cardAttachments'),
   'click .js-received-date': Popup.open('editCardReceivedDate'),
+  'click .js-custom-fields': Popup.open('cardCustomFields'),
   'click .js-start-date': Popup.open('editCardStartDate'),
   'click .js-due-date': Popup.open('editCardDueDate'),
   'click .js-end-date': Popup.open('editCardEndDate'),

client/components/cards/cardDetails.styl

@@ -69,10 +69,11 @@
 
   .card-details-items
     display: flex
-    margin: 15px 0
+    flex-wrap: wrap
+    margin: 0 0 15px
 
     .card-details-item
-      margin-right: 0.5em
+      margin: 15px 0.5em 0 0
       &:last-child
         margin-right: 0
       &.card-details-item-labels,
@@ -83,6 +84,9 @@
       &.card-details-item-end
         width: 50%
         flex-shrink: 1
+      &.card-details-item-customfield
+        max-width: 50%
+        flex-grow: 1
 
   .card-details-item-title
     font-size: 16px