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

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();
+  },
+});