card model and card ui preparation for custom fields

client/components/cards/cardDetails.jade

@@ -45,6 +45,9 @@ template(name="cardDetails")
           h3.card-details-item-title {{_ 'card-due'}}
           +cardDueDate
 
+      each customFields
+        .card-details-item.card-details-item-customfield
+          h3.card-details-item-title {{_ 'some-title' }}
 
     //- XXX We should use "editable" to avoid repetiting ourselves
     if canModifyCard

client/components/cards/cardDetails.js

@@ -200,7 +200,7 @@ Template.editCardTitleForm.events({
 Template.cardCustomFieldsPopup.events({
   'click .js-select-field'(evt) {
     const card = Cards.findOne(Session.get('currentCard'));
-    const customFieldId = this.customFieldId;
+    const customFieldId = this._id;
     card.toggleCustomField(customFieldId);
     evt.preventDefault();
   },

client/components/cards/cardDetails.styl

@@ -70,6 +70,7 @@
 
   .card-details-items
     display: flex
+    flex-wrap: wrap
     margin: 15px 0
 
     .card-details-item
@@ -80,8 +81,8 @@
       &.card-details-item-members,
       &.card-details-item-start,
       &.card-details-item-due
-        width: 50%
-        flex-shrink: 1
+        max-width: 50%
+        flex-grow: 1
 
   .card-details-item-title
     font-size: 14px

client/components/lists/listBody.js

@@ -35,12 +35,17 @@ BlazeComponent.extendComponent({
 
     const members = formComponent.members.get();
     const labelIds = formComponent.labels.get();
+    const customFields = formComponent.customFields.get();
+    console.log("members", members);
+    console.log("labelIds", labelIds);
+    console.log("customFields", customFields);
 
     if (title) {
       const _id = Cards.insert({
         title,
         members,
         labelIds,
+        customFields,
         listId: this.data()._id,
         boardId: this.data().board()._id,
         sort: sortIndex,
@@ -121,11 +126,13 @@ BlazeComponent.extendComponent({
   onCreated() {
     this.labels = new ReactiveVar([]);
     this.members = new ReactiveVar([]);
+    this.customFields = new ReactiveVar([]);
   },
 
   reset() {
     this.labels.set([]);
     this.members.set([]);
+    this.customFields.set([]);
   },
 
   getLabels() {