show custom fields on cards but still with dummy value

client/components/cards/cardCustomFields.jade

@@ -0,0 +1,23 @@
+template(name="cardCustomFieldsPopup")
+    ul.pop-over-list
+        each board.customFields
+            li.item(class="")
+                a.name.js-select-field(href="#")
+                    span.full-name
+                        = name
+                    if isCardMember
+                        i.fa.fa-check
+    hr
+    a.quiet-button.full.js-configure-custom-fields
+        i.fa.fa-cog
+        span {{_ 'configure-custom-fields'}}
+
+template(name="cardCustomFieldText")
+    if canModifyCard
+        .item-title.js-open-inlined-form.is-editable
+            if value
+                = value
+            else
+                | {{_ 'edit'}}
+    else
+        .item-title {{value}}

client/components/cards/cardCustomFields.js

@@ -0,0 +1,41 @@
+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-configure-custom-fields'(evt) {
+        EscapeActions.executeUpTo('detailsPane');
+        Sidebar.setView('customFields');
+        evt.preventDefault();
+    }
+});
+
+const CardCustomField = BlazeComponent.extendComponent({
+    template() {
+        return 'cardCustomFieldText';
+    },
+
+    onCreated() {
+        const self = this;
+        self.date = ReactiveVar();
+        self.now = ReactiveVar(moment());
+    },
+
+    value() {
+        return "this is the value";
+    },
+
+    showISODate() {
+        return this.date.get().toISOString();
+    },
+
+    events() {
+        return [{
+            'click .js-edit-date': Popup.open('editCardStartDate'),
+        }];
+    },
+});
+
+CardCustomField.register('cardCustomField');

client/components/cards/cardDetails.jade

@@ -45,9 +45,11 @@ template(name="cardDetails")
           h3.card-details-item-title {{_ 'card-due'}}
           +cardDueDate
 
-      each customFields
+      each customFieldsWD
         .card-details-item.card-details-item-customfield
-          h3.card-details-item-title {{_ 'some-title' }}
+          h3.card-details-item-title
+            = definition.name
+          +cardCustomField
 
     //- XXX We should use "editable" to avoid repetiting ourselves
     if canModifyCard
@@ -147,20 +149,6 @@ template(name="cardMembersPopup")
           if isCardMember
             i.fa.fa-check
 
-template(name="cardCustomFieldsPopup")
-  ul.pop-over-list
-    each board.customFields
-      li.item(class="")
-        a.name.js-select-field(href="#")
-          span.full-name
-            = name
-          if isCardMember
-            i.fa.fa-check
-  hr
-  a.quiet-button.full.js-configure-custom-fields
-    i.fa.fa-cog
-    span {{_ 'configure-custom-fields'}}
-
 template(name="cardMorePopup")
   p.quiet
     span.clearfix

client/components/cards/cardDetails.js

@@ -197,20 +197,6 @@ Template.editCardTitleForm.events({
   },
 });
 
-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-configure-custom-fields'(evt) {
-    EscapeActions.executeUpTo('detailsPane');
-    Sidebar.setView('customFields');
-    evt.preventDefault();
-  }
-});
-
 Template.moveCardPopup.events({
   'click .js-select-list' () {
     // XXX We should *not* get the currentCard from the global state, but

models/cards.js

@@ -190,6 +190,27 @@ Cards.helpers({
     return _.pluck(this.customFields, '_id').indexOf(customFieldId);
   },
 
+  // customFields with definitions
+  customFieldsWD() {
+
+    // get all definitions
+    const definitions = CustomFields.find({
+      boardId: this.boardId,
+    }).fetch();
+
+    // match right definition to each field
+    return this.customFields.map((customField) => {
+      return {
+        _id: customField._id,
+        value: customField.value,
+        definition: definitions.find((definition) => {
+          return definition._id == customField._id;
+        })
+      }
+    });
+
+  },
+
   absoluteUrl() {
     const board = this.board();
     return FlowRouter.url('card', {