Custom sort functionality - Community#470

app/internal_packages/thread-list/lib/thread-list-store.ts

@@ -20,6 +20,8 @@ class ThreadListStore extends MailspringStore {
     super();
     this.listenTo(FocusedPerspectiveStore, this._onPerspectiveChanged);
     this.createListDataSource();
+
+    AppEnv.config.observe('core.lastUsedOrder', () => this.createListDataSource());
   }
 
   dataSource = () => {

app/internal_packages/thread-search/lib/search-query-subscription.ts

@@ -7,6 +7,7 @@ import {
   ComponentRegistry,
   MutableQuerySubscription,
 } from 'mailspring-exports';
+import { SortOrder } from 'src/flux/attributes';
 
 class SearchQuerySubscription extends MutableQuerySubscription<Thread> {
   _searchQuery: string;
@@ -46,9 +47,29 @@ class SearchQuerySubscription extends MutableQuerySubscription<Thread> {
       console.info('Failed to parse local search query, falling back to generic query', e);
       dbQuery = dbQuery.search(this._searchQuery);
     }
+
+    let order = Thread.attributes.lastMessageReceivedTimestamp.descending();
+
+    const orderBy: string | undefined = AppEnv.config.get('core.lastUsedOrder');
+    if (orderBy) {
+      switch (orderBy) {
+        case '2':
+          order = Thread.attributes.subject.ascending();
+          break;
+
+        case '3':
+          order = Thread.attributes.subject.descending();
+          break;
+
+        case '0':
+          order = Thread.attributes.lastMessageReceivedTimestamp.ascending();
+          break;
+      }
+    }
+
     dbQuery = dbQuery
       .background()
-      .order(Thread.attributes.lastMessageReceivedTimestamp.descending())
+      .order(order)
       .limit(1000);
 
     this.replaceQuery(dbQuery);

app/internal_packages/thread-search/lib/thread-search-bar.tsx

@@ -1,6 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ListensToFluxStore, RetinaImg, KeyCommandsRegion } from 'mailspring-component-kit';
+import {
+  ListensToFluxStore,
+  RetinaImg,
+  KeyCommandsRegion,
+  DropdownMenu,
+  Flexbox,
+} from 'mailspring-component-kit';
 import {
   localized,
   Actions,
@@ -41,6 +47,7 @@ interface ThreadSearchBarState {
     description: any;
   };
   selectedIdx: number;
+  lastSortBy: string;
 }
 
 class ThreadSearchBar extends Component<ThreadSearchBarProps, ThreadSearchBarState> {
@@ -61,6 +68,7 @@ class ThreadSearchBar extends Component<ThreadSearchBarProps, ThreadSearchBarSta
       focused: false,
       selected: null,
       selectedIdx: -1,
+      lastSortBy: AppEnv.config.get('core.lastUsedOrder') || '0',
     };
   }
 
@@ -325,54 +333,60 @@ class ThreadSearchBar extends Component<ThreadSearchBarProps, ThreadSearchBarSta
 
     const showPlaceholder = !this.state.focused && !query;
     const showX = this.state.focused || !!(perspective as any).searchQuery;
+    const list = [
+      { id: '0', name: `${localized('Date')} (${localized('ASC')})` },
+      { id: '1', name: `${localized('Date')} (${localized('DESC')})` },
+      { id: '2', name: `${localized('Subject')} (${localized('ASC')})` },
+      { id: '3', name: `${localized('Subject')} (${localized('DESC')})` },
+    ];
 
     return (
-      <KeyCommandsRegion
-        className={`thread-search-bar ${showPlaceholder ? 'placeholder' : ''}`}
-        globalHandlers={{
-          'core:focus-search': () => {
-            // If the user is in list mode, we need to clear the selection because the
-            // thread action bar appears over the search bar. Kind of a hack.
-            if (WorkspaceStore.layoutMode() === 'list') {
-              AppEnv.commands.dispatch('multiselect-list:deselect-all');
-            }
-            Actions.popSheet();
-            this._fieldEl.focus();
-          },
-        }}
-      >
-        {isSearching ? (
-          <RetinaImg
-            className="search-accessory search loading"
-            name="inline-loading-spinner.gif"
-            mode={RetinaImg.Mode.ContentPreserve}
-          />
-        ) : (
-          <RetinaImg
-            className="search-accessory search"
-            name="searchloupe.png"
-            mode={RetinaImg.Mode.ContentDark}
-            onClick={() => this._fieldEl.focus()}
-          />
-        )}
-        <TokenizingContenteditable
-          ref={el => (this._fieldEl = el)}
-          value={showPlaceholder ? this._placeholder() : query}
-          onKeyDown={this._onKeyDown}
-          onFocus={this._onFocus}
-          onBlur={this._onBlur}
-          onChange={this._onSearchQueryChanged}
-        />
-        {showX && (
-          <RetinaImg
-            name="searchclear.png"
-            className="search-accessory clear"
-            mode={RetinaImg.Mode.ContentDark}
-            onMouseDown={this._onClearSearchQuery}
+      <Flexbox className="thread-search-container">
+        <KeyCommandsRegion
+          className={`thread-search-bar ${showPlaceholder ? 'placeholder' : ''}`}
+          globalHandlers={{
+            'core:focus-search': () => {
+              // If the user is in list mode, we need to clear the selection because the
+              // thread action bar appears over the search bar. Kind of a hack.
+              if (WorkspaceStore.layoutMode() === 'list') {
+                AppEnv.commands.dispatch('multiselect-list:deselect-all');
+              }
+              Actions.popSheet();
+              this._fieldEl.focus();
+            },
+          }}
+        >
+          {isSearching ? (
+            <RetinaImg
+              className="search-accessory search loading"
+              name="inline-loading-spinner.gif"
+              mode={RetinaImg.Mode.ContentPreserve}
+            />
+          ) : (
+            <RetinaImg
+              className="search-accessory search"
+              name="searchloupe.png"
+              mode={RetinaImg.Mode.ContentDark}
+              onClick={() => this._fieldEl.focus()}
+            />
+          )}
+          <TokenizingContenteditable
+            ref={el => (this._fieldEl = el)}
+            value={showPlaceholder ? this._placeholder() : query}
+            onKeyDown={this._onKeyDown}
+            onFocus={this._onFocus}
+            onBlur={this._onBlur}
+            onChange={this._onSearchQueryChanged}
           />
-        )}
-        {this.state.suggestions.length > 0 &&
-          this.state.focused && (
+          {showX && (
+            <RetinaImg
+              name="searchclear.png"
+              className="search-accessory clear"
+              mode={RetinaImg.Mode.ContentDark}
+              onMouseDown={this._onClearSearchQuery}
+            />
+          )}
+          {this.state.suggestions.length > 0 && this.state.focused && (
             <div className="suggestions">
               {suggestions.map((s, idx) => (
                 <div
@@ -407,9 +421,26 @@ class ThreadSearchBar extends Component<ThreadSearchBarProps, ThreadSearchBarSta
               )}
             </div>
           )}
-      </KeyCommandsRegion>
+        </KeyCommandsRegion>
+        <DropdownMenu
+          className="thread-search-sort"
+          attachment={DropdownMenu.Attachment.RightEdge}
+          items={list}
+          intitialSelectionItem={list.filter(x => x.id === (this.state.lastSortBy || '1'))[0]}
+          defaultSelectedIndex={Number.parseInt(this.state.lastSortBy) || -1}
+          itemKey={item => item.id}
+          itemContent={item => item.name}
+          onSelect={this._onSortSelect}
+          style={{ order: 100 }}
+        />
+      </Flexbox>
     );
   }
+
+  private _onSortSelect = (item: any) => {
+    this.setState({ lastSortBy: item.id });
+    AppEnv.config.set('core.lastUsedOrder', item.id);
+  };
 }
 
 export default ListensToFluxStore(ThreadSearchBar, {

app/internal_packages/thread-search/styles/thread-search-bar.less

@@ -3,9 +3,14 @@
 
 @token-color: @accent-primary;
 
+.thread-search-container {
+  order: -100;
+  width: 100%;
+  flex: 1;
+}
+
 .thread-search-bar {
   position: relative;
-  order: -100;
   overflow: visible;
   z-index: 100;
   width: 450px;
@@ -125,3 +130,11 @@
     }
   }
 }
+
+.btn.thread-search-sort {
+  box-shadow: @shadow-border !important;
+  height: 23px;
+  margin-left: 5px;
+  margin-top: 5px;
+  white-space: nowrap;
+}

app/lang/en.json

@@ -61,6 +61,7 @@
   "Archive": "Archive",
   "Archived %@": "Archived %@",
   "Are you sure?": "Are you sure?",
+  "ASC": "ASC",
   "Attach File": "Attach File",
   "Attach Mailsync to Xcode": "Attach Mailsync to Xcode",
   "Attachment name": "Attachment name",
@@ -178,6 +179,7 @@
   "Deleting %@": "Deleting %@",
   "Deleting all messages in %@": "Deleting all messages in %@",
   "Deleting draft": "Deleting draft",
+  "DESC": "DESC",
   "Deselect all conversations": "Deselect all conversations",
   "Developer": "Developer",
   "Disable": "Disable",

app/src/flux/attributes/attribute-string.ts

@@ -10,6 +10,8 @@ String attributes can be queries using `equal`, `not`, and `startsWith`. Matchin
 Section: Database
 */
 export class AttributeString extends Attribute {
+  applyCaseInsensitivity = true;
+
   toJSON(val) {
     return val;
   }

app/src/flux/attributes/attribute.ts

@@ -15,6 +15,7 @@ export class Attribute {
   public jsonKey: string;
   public queryable: boolean;
   public loadFromColumn: boolean;
+  public applyCaseInsensitivity = false;
 
   constructor({
     modelKey,

app/src/flux/attributes/sort-order.ts

@@ -18,14 +18,17 @@ Section: Database
 export class SortOrder {
   public attr: Attribute;
   public direction: 'ASC' | 'DESC';
+  public collation: string;
 
   constructor(attr: Attribute, direction: 'ASC' | 'DESC' = 'DESC') {
     this.attr = attr;
     this.direction = direction;
   }
 
   orderBySQL(klass: typeof Model) {
-    return `\`${klass.name}\`.\`${this.attr.tableColumn}\` ${this.direction}`;
+    return `\`${klass.name}\`.\`${this.attr.tableColumn}\` ${
+      this.attr.applyCaseInsensitivity ? 'COLLATE NOCASE' : ''
+    } ${this.direction}`;
   }
 
   attribute() {

app/src/mailbox-perspective.ts

@@ -20,6 +20,7 @@ import { Folder } from './flux/models/folder';
 import { Task } from './flux/tasks/task';
 import * as Actions from './flux/actions';
 import { QuerySubscription } from 'mailspring-exports';
+import { SortOrder } from './flux/attributes';
 
 let WorkspaceStore = null;
 let ChangeStarredTask = null;
@@ -384,7 +385,31 @@ class CategoryMailboxPerspective extends MailboxPerspective {
       .where([Thread.attributes.categories.containsAny(this.categories().map(c => c.id))])
       .limit(0);
 
-    if (this.isSent()) {
+    const orderBy: string | undefined = AppEnv.config.get('core.lastUsedOrder');
+
+    if (orderBy) {
+      let order: SortOrder;
+
+      switch (orderBy) {
+        case '2':
+          order = Thread.attributes.subject.ascending();
+          break;
+
+        case '3':
+          order = Thread.attributes.subject.descending();
+          break;
+
+        case '0':
+          order = Thread.attributes.lastMessageReceivedTimestamp.ascending();
+          break;
+
+        default:
+          order = Thread.attributes.lastMessageReceivedTimestamp.descending();
+          break;
+      }
+
+      query.order(order);
+    } else if (this.isSent()) {
       query.order(Thread.attributes.lastMessageSentTimestamp.descending());
     }