✨ add "sort by" dropdown to content screen filters (#565)

closes TryGhost/Ghost#7860
- add "sort by" dropdown allowing to order posts by earliest or latest publication date

ghost/admin/app/controllers/posts-loading.js

@@ -11,6 +11,8 @@ export default Controller.extend({
     availableTags: readOnly('postsController.availableTags'),
     selectedTag: readOnly('postsController.selectedTag'),
     availableAuthors: readOnly('postsController.availableAuthors'),
-    selectedAuthor: readOnly('postsController.selectedAuthor')
+    selectedAuthor: readOnly('postsController.selectedAuthor'),
+    availableOrders: readOnly('postsController.availableOrders'),
+    selectedOrder: readOnly('postsController.selectedOrder')
 
 });

ghost/admin/app/controllers/posts.js

@@ -8,10 +8,11 @@ export default Controller.extend({
     session: injectService(),
     store: injectService(),
 
-    queryParams: ['type', 'author', 'tag'],
+    queryParams: ['type', 'author', 'tag', 'order'],
     type: null,
     author: null,
     tag: null,
+    order: null,
 
     _hasLoadedTags: false,
     _hasLoadedAuthors: false,
@@ -35,6 +36,14 @@ export default Controller.extend({
         value: 'page'
     }],
 
+    availableOrders: [{
+        name: 'Latest',
+        value: null
+    }, {
+        name: 'Earliest',
+        value: 'published_at asc'
+    }],
+
     showingAll: computed('type', 'author', 'tag', function () {
         let {type, author, tag} = this.getProperties(['type', 'author', 'tag']);
 
@@ -46,6 +55,11 @@ export default Controller.extend({
         return types.findBy('value', this.get('type'));
     }),
 
+    selectedOrder: computed('order', function () {
+        let orders = this.get('availableOrders');
+        return orders.findBy('value', this.get('order'));
+    }),
+
     _availableTags: computed(function () {
         return this.get('store').peekAll('tag');
     }),
@@ -101,6 +115,10 @@ export default Controller.extend({
 
         changeTag(tag) {
             this.set('tag', get(tag, 'slug'));
+        },
+
+        changeOrder(order) {
+            this.set('order', get(order, 'value'));
         }
     }
 });

ghost/admin/app/routes/posts.js

@@ -24,6 +24,10 @@ export default AuthenticatedRoute.extend(InfinityRoute, ShortcutsRoute, {
         tag: {
             refreshModel: true,
             replace: true
+        },
+        order: {
+            refreshModel: true,
+            replace: true
         }
     },
 
@@ -47,6 +51,10 @@ export default AuthenticatedRoute.extend(InfinityRoute, ShortcutsRoute, {
                 queryParams.filter = filter;
             }
 
+            if (!isBlank(params.order)) {
+                queryParams.order = params.order;
+            }
+
             let perPage = this.get('perPage');
             let paginationSettings = assign({perPage, startingPage: 1}, queryParams);
 

ghost/admin/app/templates/components/gh-nav-menu.hbs

@@ -33,7 +33,7 @@
         <li>
             {{!-- clicking the Content link whilst on the content screen should reset the filter --}}
             {{#if (eq routing.currentRouteName "posts.index")}}
-                {{#link-to "posts" (query-params type=null author=null tag=null) classNames="gh-nav-main-content active"}}<i class="icon-content"></i>Stories{{/link-to}}
+                {{#link-to "posts" (query-params type=null author=null tag=null order=null) classNames="gh-nav-main-content active"}}<i class="icon-content"></i>Stories{{/link-to}}
             {{else}}
                 {{#link-to "posts" classNames="gh-nav-main-content"}}<i class="icon-content"></i>Stories{{/link-to}}
             {{/if}}

ghost/admin/app/templates/posts-loading.hbs

@@ -47,6 +47,19 @@
         }}
             {{tag.name}}
         {{/power-select}}
+
+        Sort by:
+        {{#power-select
+            selected=selectedOrder
+            options=availableOrders
+            searchEnabled=false
+            onchange=(action (mut k))
+            tagName="div"
+            data-test-order-select=true
+            as |order|
+        }}
+            {{order.name}}
+        {{/power-select}}
     </div>
 
     {{gh-loading-spinner}}

ghost/admin/app/templates/posts.hbs

@@ -44,6 +44,19 @@
         }}
             {{tag.name}}
         {{/power-select}}
+
+        Sort by:
+        {{#power-select
+            selected=selectedOrder
+            options=availableOrders
+            searchEnabled=false
+            onchange=(action "changeOrder")
+            tagName="div"
+            data-test-order-select=true
+            as |order|
+        }}
+            {{order.name}}
+        {{/power-select}}
     </div>
 
     <section class="content-list">