many custom fields model and UI enhancements

client/components/activities/activities.js

@@ -92,8 +92,8 @@ BlazeComponent.extendComponent({
   },
 
   customField() {
-    const customField = this.currentData().customFieldId;
-    return customField;
+    const customField = this.currentData().customField();
+    return customField.name;
   },
 
   events() {

client/components/boards/boardHeader.jade

@@ -103,7 +103,7 @@ template(name="boardHeaderBar")
 
 template(name="boardMenuPopup")
   ul.pop-over-list
-    li: a.js-custom-fields {{_ 'custom-fields'}}
+    li: a.js-configure-custom-fields {{_ 'configure-custom-fields'}}
     li: a.js-open-archives {{_ 'archived-items'}}
     if currentUser.isBoardAdmin
       li: a.js-change-board-color {{_ 'board-change-color'}}

client/components/boards/boardHeader.js

@@ -1,6 +1,6 @@
 Template.boardMenuPopup.events({
   'click .js-rename-board': Popup.open('boardChangeTitle'),
-  'click .js-custom-fields'() {
+  'click .js-configure-custom-fields'() {
     Sidebar.setView('customFields');
     Popup.close();
   },

client/components/cards/cardDetails.jade

@@ -107,6 +107,7 @@ template(name="cardDetailsActionsPopup")
       li: a.js-members {{_ 'card-edit-members'}}
       li: a.js-labels {{_ 'card-edit-labels'}}
       li: a.js-attachments {{_ 'card-edit-attachments'}}
+      li: a.js-custom-fields {{_ 'card-edit-custom-fields'}}
       li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
       li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
     hr
@@ -143,6 +144,20 @@ 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

@@ -154,6 +154,7 @@ Template.cardDetailsActionsPopup.events({
   'click .js-members': Popup.open('cardMembers'),
   'click .js-labels': Popup.open('cardLabels'),
   'click .js-attachments': Popup.open('cardAttachments'),
+  'click .js-custom-fields': Popup.open('cardCustomFields'),
   'click .js-start-date': Popup.open('editCardStartDate'),
   'click .js-due-date': Popup.open('editCardDueDate'),
   'click .js-move-card': Popup.open('moveCard'),
@@ -196,6 +197,20 @@ Template.editCardTitleForm.events({
   },
 });
 
+Template.cardCustomFieldsPopup.events({
+  'click .js-select-field'(evt) {
+    const card = Cards.findOne(Session.get('currentCard'));
+    const customFieldId = this.customFieldId;
+    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

client/components/sidebar/sidebar.js

@@ -5,7 +5,7 @@ const defaultView = 'home';
 const viewTitles = {
   filter: 'filter-cards',
   multiselection: 'multi-selection',
-  customFields: 'custom-fields',
+  customFields: 'configure-custom-fields',
   archives: 'archives',
 };
 

client/components/sidebar/sidebar.styl

@@ -45,28 +45,45 @@
       display: flex
       flex-direction: column
 
-      li > a
-        display: flex
-        height: 30px
-        margin: 0
-        padding: 4px
-        border-radius: 3px
-        align-items: center
+      li
+        & > a
+          display: flex
+          height: 30px
+          margin: 0
+          padding: 4px
+          border-radius: 3px
+          align-items: center
 
-        &:hover
-          &, i, .quiet
-            color white
+          &:hover
+            &, i, .quiet
+              color white
 
-        .member, .card-label
-          margin-right: 7px
-          margin-top: 5px
+          .member, .card-label
+            margin-right: 7px
+            margin-top: 5px
 
-        .sidebar-list-item-description
-          flex: 1
-          overflow: ellipsis
+          .minicard-edit-button
+            float: right
+            padding: 8px
+            border-radius: 3px
 
-        .fa.fa-check
-          margin: 0 4px
+          .sidebar-list-item-description
+            flex: 1
+            overflow: ellipsis
+
+          .fa.fa-check
+            margin: 0 4px
+
+        .minicard
+          padding: 6px 8px 4px
+
+          .minicard-edit-button
+            float: right
+            padding: 4px
+            border-radius: 3px
+
+            &:hover
+              background: #dbdbdb
 
     .sidebar-btn
       display: block

client/components/sidebar/sidebarCustomFields.jade

@@ -1,31 +1,49 @@
 template(name="customFieldsSidebar")
     ul.sidebar-list
-        each customsFields
+        each customFields
             li
-                a.name
-                    span.sidebar-list-item-description
-                        {{_ 'some name'}}
+                div.minicard-wrapper.js-minicard
+                    div.minicard
+                        a.fa.fa-pencil.js-edit-custom-field.minicard-edit-button
+                        div.minicard-title
+                            | {{ name }} ({{ type }})
+
     if currentUser.isBoardMember
         hr
         a.sidebar-btn.js-open-create-custom-field
             i.fa.fa-plus
-            span {{_ 'Create Custom Field'}}
+            span {{_ 'createCustomField'}}
 
 template(name="createCustomFieldPopup")
     form
         label
             | {{_ 'name'}}
-            input.js-field-name(type="text" name="field-name" autofocus)
+            unless _id
+                input.js-field-name(type="text" name="field-name" autofocus)
+            else
+                input.js-field-name(type="text" name="field-name" value=name)
+
         label
             | {{_ 'type'}}
-            select.js-field-type(name="field-type")
-                option(value="string") String
-                option(value="number") Number
-                option(value="checkbox") Checkbox
-                option(value="date") Date
-                option(value="DropdownList") Dropdown List
+            select.js-field-type(name="field-type" disabled="{{#if _id}}disabled{{/if}}")
+                each types
+                    if selected
+                        option(value=type selected="selected") {{name}}
+                    else
+                        option(value=type) {{name}}
         a.flex.js-field-show-on-card
             .materialCheckBox(class="{{#if showOnCard}}is-checked{{/if}}")
 
             span {{_ 'show-field-on-card'}}
-        input.primary.wide(type="submit" value="{{_ 'save'}}")
+        button.primary.wide.left(type="submit")
+            | {{_ 'save'}}
+        if _id
+            button.negate.wide.right.js-delete-custom-field
+                | {{_ 'delete'}}
+
+template(name="editCustomFieldPopup")
+    | {{> createCustomFieldPopup}}
+
+template(name="deleteCustomFieldPopup")
+    p {{_ "custom-field-delete-pop"}}
+    button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

client/components/sidebar/sidebarCustomFields.js

@@ -9,21 +9,22 @@ BlazeComponent.extendComponent({
   events() {
     return [{
       'click .js-open-create-custom-field': Popup.open('createCustomField'),
-      'click .js-edit-custom-field'() {
-        // todo
-      },
-      'click .js-delete-custom-field': Popup.afterConfirm('customFieldDelete', function() {
-        const customFieldId = this._id;
-        CustomFields.remove(customFieldId);
-        Popup.close();
-      }),
+      'click .js-edit-custom-field': Popup.open('editCustomField'),
     }];
   },
 
 }).register('customFieldsSidebar');
 
 Template.createCustomFieldPopup.helpers({
-
+  types() {
+    var currentType = this.type;
+    return ['text', 'number', 'checkbox', 'date', 'dropdown'].
+      map(type => {return {
+        type: type,
+        name: TAPi18n.__('custom-field-' + type),
+        selected: type == currentType,
+      }});
+  },
 });
 
 Template.createCustomFieldPopup.events({
@@ -41,7 +42,7 @@ Template.createCustomFieldPopup.events({
     const name = tpl.find('.js-field-name').value.trim();
     const type = tpl.find('.js-field-type').value.trim();
     const showOnCard = tpl.find('.js-field-show-on-card.is-checked') != null;
-    //console.log("Create",name,type,showOnCard);
+    //console.log('Create',name,type,showOnCard);
 
     CustomFields.insert({
       boardId: Session.get('currentBoard'),
@@ -52,4 +53,17 @@ Template.createCustomFieldPopup.events({
 
     Popup.back();
   },
-});
+  'click .js-delete-custom-field': Popup.afterConfirm('deleteCustomField', function() {
+    const customFieldId = this._id;
+    CustomFields.remove(customFieldId);
+    Popup.close();
+  }),
+});
+
+/*Template.deleteCustomFieldPopup.events({
+  'submit'(evt) {
+    const customFieldId = this._id;
+    CustomFields.remove(customFieldId);
+    Popup.close();
+  }
+});*/