Create custom fields creation UI added to Board Menu, Model in progress

client/components/activities/activities.jade

@@ -50,6 +50,9 @@ template(name="boardActivities")
         if($eq activityType 'createCard')
           | {{{_ 'activity-added' cardLink boardLabel}}}.
 
+        if($eq activityType 'createCustomField')
+          | {{_ 'activity-customfield-created' customField}}.
+
         if($eq activityType 'createList')
           | {{_ 'activity-added' list.title boardLabel}}.
 

client/components/activities/activities.js

@@ -91,6 +91,11 @@ BlazeComponent.extendComponent({
     }, attachment.name()));
   },
 
+  customField() {
+    const customField = this.currentData().customFieldId;
+    return customField;
+  },
+
   events() {
     return [{
       // XXX We should use Popup.afterConfirmation here

client/components/boards/boardHeader.jade

@@ -103,6 +103,7 @@ template(name="boardHeaderBar")
 
 template(name="boardMenuPopup")
   ul.pop-over-list
+    li: a.js-custom-fields {{_ '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,5 +1,9 @@
 Template.boardMenuPopup.events({
   'click .js-rename-board': Popup.open('boardChangeTitle'),
+  'click .js-custom-fields'() {
+    Sidebar.setView('customFields');
+    Popup.close();
+  },
   'click .js-open-archives'() {
     Sidebar.setView('archives');
     Popup.close();

client/components/main/popup.styl

@@ -33,6 +33,9 @@ $popupWidth = 300px
   textarea
     height: 72px
 
+  form a span
+    padding: 0 0.5rem
+
   .header
     height: 36px
     position: relative

client/components/sidebar/sidebar.js

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

client/components/sidebar/sidebarCustomFields.jade

@@ -0,0 +1,31 @@
+template(name="customFieldsSidebar")
+    ul.sidebar-list
+        each customsFields
+            li
+                a.name
+                    span.sidebar-list-item-description
+                        {{_ 'some name'}}
+    if currentUser.isBoardMember
+        hr
+        a.sidebar-btn.js-open-create-custom-field
+            i.fa.fa-plus
+            span {{_ 'Create Custom Field'}}
+
+template(name="createCustomFieldPopup")
+    form
+        label
+            | {{_ 'name'}}
+            input.js-field-name(type="text" name="field-name" autofocus)
+        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
+        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'}}")

client/components/sidebar/sidebarCustomFields.js

@@ -0,0 +1,55 @@
+BlazeComponent.extendComponent({
+
+  customFields() {
+    return CustomFields.find({
+      boardId: Session.get('currentBoard'),
+    });
+  },
+
+  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();
+      }),
+    }];
+  },
+
+}).register('customFieldsSidebar');
+
+Template.createCustomFieldPopup.helpers({
+
+});
+
+Template.createCustomFieldPopup.events({
+  'click .js-field-show-on-card'(event) {
+    let $target = $(event.target);
+    if(!$target.hasClass('js-field-show-on-card')){
+      $target = $target.parent();
+    }
+    $target.find('.materialCheckBox').toggleClass('is-checked');
+    $target.toggleClass('is-checked');
+  },
+  'submit'(evt, tpl) {
+    evt.preventDefault();
+
+    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);
+
+    CustomFields.insert({
+      boardId: Session.get('currentBoard'),
+      name: name,
+      type: type,
+      showOnCard: showOnCard
+    });
+
+    Popup.back();
+  },
+});