Add Feature: allow user to sort Lists in Board by his own preference, boardadmin can star list

client/components/boards/boardHeader.jade

@@ -77,6 +77,10 @@ template(name="boardHeaderBar")
             i.fa.fa-archive
             span {{_ 'archives'}}
 
+      if showSort
+       a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
+        i.fa(class="{{directionClass}}")
+        span {{_ 'sort'}}{{_ listSortShortDesc}}
       a.board-header-btn.js-open-filter-view(
           title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
           class="{{#if Filter.isActive}}emphasis{{/if}}")
@@ -194,6 +198,20 @@ template(name="createBoard")
       | /
       a.js-board-template {{_ 'template'}}
 
+template(name="listsortPopup")
+  h2
+   | {{_ 'list-sort-by'}}
+  hr
+  ul.pop-over-list
+    each value in allowedSortValues
+     li
+      a.js-sort-by(name="{{value.name}}")
+        if $eq sortby value.name
+           i(class="fa {{Direction}}") 
+        | {{_ value.label }}{{_ value.shortLabel}}
+        if $eq sortby value.name
+           i(class="fa fa-check")
+
 template(name="boardChangeTitlePopup")
   form
     label

client/components/boards/boardHeader.js

@@ -1,3 +1,5 @@
+const DOWNCLS = 'fa-sort-down';
+const UPCLS = 'fa-sort-up';
 Template.boardMenuPopup.events({
   'click .js-rename-board': Popup.open('boardChangeTitle'),
   'click .js-custom-fields'() {
@@ -80,7 +82,25 @@ BlazeComponent.extendComponent({
     const currentBoard = Boards.findOne(Session.get('currentBoard'));
     return currentBoard && currentBoard.stars >= 2;
   },
-
+  showSort() {
+    return Meteor.user().hasSortBy();
+  },
+  directionClass() {
+    return this.currentDirection() === -1 ? DOWNCLS : UPCLS;
+  },
+  changeDirection() {
+    const direction = 0 - this.currentDirection() === -1 ? '-' : '';
+    Meteor.call('setListSortBy', direction + this.currentListSortBy());
+  },
+  currentDirection() {
+    return Meteor.user().getListSortByDirection();
+  },
+  currentListSortBy() {
+    return Meteor.user().getListSortBy();
+  },
+  listSortShortDesc() {
+    return `list-label-short-${this.currentListSortBy()}`;
+  },
   events() {
     return [
       {
@@ -118,6 +138,16 @@ BlazeComponent.extendComponent({
         'click .js-open-filter-view'() {
           Sidebar.setView('filter');
         },
+        'click .js-open-sort-view'(evt) {
+          const target = evt.target;
+          if (target.tagName === 'I') {
+            // click on the text, popup choices
+            this.changeDirection();
+          } else {
+            // change the sort order
+            Popup.open('listsort')(evt);
+          }
+        },
         'click .js-filter-reset'(event) {
           event.stopPropagation();
           Sidebar.setView();
@@ -277,3 +307,73 @@ BlazeComponent.extendComponent({
     ];
   },
 }).register('boardChangeWatchPopup');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    //this.sortBy = new ReactiveVar();
+    ////this.sortDirection = new ReactiveVar();
+    //this.setSortBy();
+    this.downClass = DOWNCLS;
+    this.upClass = UPCLS;
+  },
+  allowedSortValues() {
+    const types = [];
+    const pushed = {};
+    Meteor.user()
+      .getListSortTypes()
+      .forEach(type => {
+        const key = type.replace(/^-/, '');
+        if (pushed[key] === undefined) {
+          types.push({
+            name: key,
+            label: `list-label-${key}`,
+            shortLabel: `list-label-short-${key}`,
+          });
+          pushed[key] = 1;
+        }
+      });
+    return types;
+  },
+  Direction() {
+    return Meteor.user().getListSortByDirection() === -1
+      ? this.downClass
+      : this.upClass;
+  },
+  sortby() {
+    return Meteor.user().getListSortBy();
+  },
+
+  setSortBy(type = null) {
+    const user = Meteor.user();
+    if (type === null) {
+      type = user._getListSortBy();
+    } else {
+      let value = '';
+      if (type.map) {
+        // is an array
+        value = (type[1] === -1 ? '-' : '') + type[0];
+      }
+      Meteor.call('setListSortBy', value);
+    }
+    //this.sortBy.set(type[0]);
+    //this.sortDirection.set(type[1]);
+  },
+
+  events() {
+    return [
+      {
+        'click .js-sort-by'(evt) {
+          evt.preventDefault();
+          const target = evt.target;
+          const sortby = target.getAttribute('name');
+          const down = !!target.querySelector(`.${this.upClass}`);
+          const direction = down ? -1 : 1;
+          this.setSortBy([sortby, direction]);
+          if (Utils.isMiniScreen) {
+            Popup.close();
+          }
+        },
+      },
+    ];
+  },
+}).register('listsortPopup');

client/components/lists/listHeader.jade

@@ -9,7 +9,7 @@ template(name="listHeader")
         if currentList
           a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
       h2.list-header-name(
-        title="{{ moment updatedAt 'LLL' }}"
+        title="{{ moment modifiedAt 'LLL' }}"
         class="{{#if currentUser.isBoardMember}}{{#unless currentUser.isCommentOnly}}js-open-inlined-form is-editable{{/unless}}{{/if}}")
         +viewer
           = title
@@ -39,6 +39,8 @@ template(name="listHeader")
           i.list-header-watch-icon.fa.fa-eye
         div.list-header-menu
           unless currentUser.isCommentOnly
+            if isBoardAdmin
+              a.fa.js-list-star.list-header-plus-icon(class="fa-star{{#unless starred}}-o{{/unless}}")
             if canSeeAddCard
               a.js-add-card.fa.fa-plus.list-header-plus-icon
             a.fa.fa-navicon.js-open-list-menu

client/components/lists/listHeader.js

@@ -13,6 +13,20 @@ BlazeComponent.extendComponent({
     );
   },
 
+  isBoardAdmin() {
+    return Meteor.user().isBoardAdmin();
+  },
+  starred(check = undefined) {
+    const list = Template.currentData();
+    const status = list.isStarred();
+    if (check === undefined) {
+      // just check
+      return status;
+    } else {
+      list.star(!status);
+      return !status;
+    }
+  },
   editTitle(event) {
     event.preventDefault();
     const newTitle = this.childComponents('inlinedForm')[0]
@@ -61,6 +75,10 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
+        'click .js-list-star'(event) {
+          event.preventDefault();
+          this.starred(!this.starred());
+        },
         'click .js-open-list-menu': Popup.open('listAction'),
         'click .js-add-card'(event) {
           const listDom = $(event.target).parents(

client/components/sidebar/sidebarFilters.jade

@@ -4,6 +4,9 @@
   and #each x in y constructors to fix this.
 
 template(name="filterSidebar")
+  ul.sidebar-list
+    span {{_ 'list-filter-label'}}          
+    input.js-list-filter(type="text")
   ul.sidebar-list
     li(class="{{#if Filter.labelIds.isSelected undefined}}active{{/if}}")
           a.name.js-toggle-label-filter

client/components/sidebar/sidebarFilters.js

@@ -4,6 +4,10 @@ BlazeComponent.extendComponent({
   events() {
     return [
       {
+        'change .js-list-filter'(evt) {
+          evt.preventDefault();
+          Filter.lists.set(this.find('.js-list-filter').value.trim());
+        },
         'click .js-toggle-label-filter'(evt) {
           evt.preventDefault();
           Filter.labelIds.toggle(this.currentData()._id);

client/components/swimlanes/swimlanes.jade

@@ -42,7 +42,7 @@ template(name="listsGroup")
           +cardDetails(currentCard)
 
 template(name="addListForm")
-  .list.list-composer.js-list-composer
+  .list.list-composer.js-list-composer(class="{{#if isMiniScreen}}mini-list{{/if}}")
     .list-header-add
       +inlinedForm(autoclose=false)
         input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"

client/components/swimlanes/swimlanes.js

@@ -267,6 +267,11 @@ BlazeComponent.extendComponent({
         return false;
       }
     }
+    if (Filter.lists._isActive()) {
+      if (!list.title.match(Filter.lists.getRegexSelector())) {
+        return false;
+      }
+    }
     if (Filter.hideEmpty.isSelected()) {
       const swimlaneId = this.parentComponent()
         .parentComponent()

client/lib/filter.js

@@ -439,6 +439,14 @@ class AdvancedFilter {
     const commands = this._filterToCommands();
     return this._arrayToSelector(commands);
   }
+  getRegexSelector() {
+    // generate a regex for filter list
+    this._dep.depend();
+    return new RegExp(
+      `^.*${this._filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}.*$`,
+      'i',
+    );
+  }
 }
 
 // The global Filter object.
@@ -455,8 +463,16 @@ Filter = {
   hideEmpty: new SetFilter(),
   customFields: new SetFilter('_id'),
   advanced: new AdvancedFilter(),
+  lists: new AdvancedFilter(), // we need the ability to filter list by name as well
 
-  _fields: ['labelIds', 'members', 'archive', 'hideEmpty', 'customFields'],
+  _fields: [
+    'labelIds',
+    'members',
+    'archive',
+    'hideEmpty',
+    'customFields',
+    'lists',
+  ],
 
   // We don't filter cards that have been added after the last filter change. To
   // implement this we keep the id of these cards in this `_exceptions` fields