many custom fields model and UI enhancements

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