customizable table view

app/scripts/presenters/entry-presenter.js

@@ -31,7 +31,9 @@ EntryPresenter.prototype = {
     get created() { return this.entry ? Format.dtStr(this.entry.created) : undefined; },
     get updated() { return this.entry ? Format.dtStr(this.entry.updated) : undefined; },
     get expired() { return this.entry ? this.entry.expired : false; },
-    get tags() { return this.entry ? this.entry.tags : false; },
+    get tags() { return this.entry ? this.entry.tags : undefined; },
+    get groupName() { return this.entry ? this.entry.groupName : undefined; },
+    get fileName() { return this.entry ? this.entry.fileName : undefined; },
     get description() {
         if (!this.entry) {
             return '[' + Locale.listGroup + ']';

app/scripts/util/format.js

@@ -22,6 +22,9 @@ var Format = {
     },
     dStr: function(dt) {
         return dt ? dt.getDate() + ' ' + Locale.monthsShort[dt.getMonth()] + ' ' + dt.getFullYear() : '';
+    },
+    capFirst: function(str) {
+        return str[0].toUpperCase() + str.substr(1);
     }
 };
 

app/scripts/util/locale.js

@@ -15,6 +15,7 @@ var Locale = {
     website: 'website',
     tags: 'tags',
     notes: 'notes',
+    group: 'group',
     noTitle: 'no title',
     or: 'or',
     notImplemented: 'Not Implemented',

app/scripts/views/dropdown-view.js

@@ -35,8 +35,9 @@ var DropdownView = Backbone.View.extend({
 
     itemClick: function(e) {
         e.stopPropagation();
-        var selected = $(e.target).closest('.dropdown__item').data('value');
-        this.trigger('select', { item: selected });
+        var el = $(e.target).closest('.dropdown__item');
+        var selected = el.data('value');
+        this.trigger('select', { item: selected, el: el });
     }
 });
 

app/scripts/views/list-view.js

@@ -4,9 +4,12 @@ var Backbone = require('backbone'),
     Resizable = require('../mixins/resizable'),
     Scrollable = require('../mixins/scrollable'),
     ListSearchView = require('./list-search-view'),
+    DropdownView = require('./dropdown-view'),
     EntryPresenter = require('../presenters/entry-presenter'),
     DragDropInfo = require('../comp/drag-drop-info'),
-    AppSettingsModel = require('../models/app-settings-model');
+    AppSettingsModel = require('../models/app-settings-model'),
+    Locale = require('../util/locale'),
+    Format = require('../util/format');
 
 var ListView = Backbone.View.extend({
     template: require('templates/list.hbs'),
@@ -27,6 +30,17 @@ var ListView = Backbone.View.extend({
 
     itemsEl: null,
 
+
+    tableColumns: [
+        { val: 'title', name: 'title', enabled: true },
+        { val: 'user', name: 'user', enabled: true },
+        { val: 'url', name: 'website', enabled: true },
+        { val: 'tags', name: 'tags', enabled: true },
+        { val: 'notes', name: 'notes', enabled: true },
+        { val: 'groupName', name: 'group', enabled: false },
+        { val: 'fileName', name: 'file', enabled: false }
+    ],
+
     initialize: function () {
         this.initScroll();
         this.views = {};
@@ -65,12 +79,19 @@ var ListView = Backbone.View.extend({
             var itemsTemplate = this.getItemsTemplate();
             var noColor = AppSettingsModel.instance.get('colorfulIcons') ? '' : 'grayscale';
             var presenter = new EntryPresenter(this.getDescField(), noColor, this.model.activeEntryId);
+            var columns = {};
+            this.tableColumns.forEach(function(col) {
+                if (col.enabled) {
+                    columns[col.val] = true;
+                }
+            });
+            presenter.columns = columns;
             var itemsHtml = '';
             this.items.forEach(function (item) {
                 presenter.present(item);
                 itemsHtml += itemTemplate(presenter);
             }, this);
-            var html = itemsTemplate({ items: itemsHtml });
+            var html = itemsTemplate({ items: itemsHtml, columns: this.tableColumns });
             this.itemsEl.html(html);
         } else {
             this.itemsEl.html(this.emptyTemplate());
@@ -209,8 +230,45 @@ var ListView = Backbone.View.extend({
         DragDropInfo.dragObject = this.items.get(id);
     },
 
-    tableOptionsClick: function() {
-        // TODO: show available columns list
+    tableOptionsClick: function(e) {
+        e.stopImmediatePropagation();
+        if (this.views.optionsDropdown) {
+            this.hideOptionsDropdown();
+            return;
+        }
+        var view = new DropdownView();
+        this.listenTo(view, 'cancel', this.hideOptionsDropdown);
+        this.listenTo(view, 'select', this.optionsDropdownSelect);
+        var targetElRect = this.$el.find('.list__table-options')[0].getBoundingClientRect();
+        var options = this.tableColumns.map(function(col) {
+            return {
+                value: col.val,
+                icon: col.enabled ? 'check-square-o' : 'square-o',
+                text: Format.capFirst(Locale[col.name])
+            };
+        });
+        view.render({
+            position: {
+                top: targetElRect.bottom,
+                left: targetElRect.left
+            },
+            options: options
+        });
+        this.views.optionsDropdown = view;
+    },
+
+    hideOptionsDropdown: function() {
+        if (this.views.optionsDropdown) {
+            this.views.optionsDropdown.remove();
+            delete this.views.optionsDropdown;
+        }
+    },
+
+    optionsDropdownSelect: function(e) {
+        var col = _.find(this.tableColumns, function(c) { return c.val === e.item; });
+        col.enabled = !col.enabled;
+        e.el.find('i:first').toggleClass('fa-check-square-o fa-square-o');
+        this.render();
     }
 });
 

app/templates/list-item-table.hbs

@@ -6,9 +6,11 @@
             <i class="fa fa-{{icon}} {{#if color}}{{color}}-color{{/if}} list__item-icon"></i>
         {{~/if~}}
     </td>
-    <td>{{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}}</td>
-    <td>{{user}}</td>
-    <td>{{url}}</td>
-    <td>{{tags}}</td>
-    <td>{{notes}}</td>
+    {{#if columns.title}}<td>{{#if title}}{{title}}{{else}}({{res 'noTitle'}}){{/if}}</td>{{/if}}
+    {{#if columns.user}}<td>{{user}}</td>{{/if}}
+    {{#if columns.url}}<td>{{url}}</td>{{/if}}
+    {{#if columns.tags}}<td>{{tags}}</td>{{/if}}
+    {{#if columns.notes}}<td>{{notes}}</td>{{/if}}
+    {{#if columns.groupName}}<td>{{groupName}}</td>{{/if}}
+    {{#if columns.fileName}}<td>{{fileName}}</td>{{/if}}
 </tr>

app/templates/list-table.hbs

@@ -2,11 +2,9 @@
     <thead>
         <tr>
             <th><i class="fa fa-bars muted-color list__table-options"></i></th>
-            <th>{{Res 'title'}}</th>
-            <th>{{Res 'user'}}</th>
-            <th>{{Res 'website'}}</th>
-            <th>{{Res 'tags'}}</th>
-            <th>{{Res 'notes'}}</th>
+            {{#each columns as |col|}}
+                {{#if col.enabled}}<th>{{Res col.name}}</th>{{/if}}
+            {{/each}}
         </tr>
     </thead>
     <tbody>

release-notes.md

@@ -15,6 +15,7 @@ Auto-type, ui improvements
 `+` group info in entry details  
 `+` logout from remote storages on disable  
 `+` select file for new records  
+`+` customizable table view  
 `*` don't check updates at startup  
 `*` repos moved to github organization account  
 `*` allow opening same file twice