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%
+        max-width: 50%
-        flex-shrink: 1
+        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() {

models/cards.js

@@ -38,6 +38,21 @@ Cards.attachSchema(new SimpleSchema({
       }
     },
   },
+  customFields: {
+    type: [Object],
+    optional: true,
+  },
+  'customFields.$': {
+    type: new SimpleSchema({
+      _id: {
+        type: String,
+      },
+      value: {
+        type: Match.OneOf(String,Number,Boolean,Date),
+        optional: true,
+      },
+    })
+  },
   dateLastActivity: {
     type: Date,
     autoValue() {
@@ -238,6 +253,24 @@ Cards.mutations({
     }
   },
 
+  assignCustomField(customFieldId) {
+    console.log("assignCustomField", customFieldId);
+    return {$push: {customFields: {_id: customFieldId, value: null}}};
+  },
+
+  unassignCustomField(customFieldId) {
+    console.log("unassignCustomField", customFieldId);
+    return {$pull: {customFields: {_id: customFieldId}}};
+  },
+
+  toggleCustomField(customFieldId) {
+    if (this.customFields && this.customFields[customFieldId]) {
+      return this.unassignCustomField(customFieldId);
+    } else {
+      return this.assignCustomField(customFieldId);
+    }
+  },
+
   setCover(coverId) {
     return {$set: {coverId}};
   },