sort items asc/desc

template/index.html

@@ -23,11 +23,21 @@
                         <span class="icon mr-1">{% inline "plus.svg" %}</span>
                         New Feed
                     </b-dropdown-item-button>
-                    <b-dropdown-item-button @click="showSettings('manage')">
+                    <b-dropdown-item-button @click.stop="showSettings('manage')">
                         <span class="icon mr-1">{% inline "list.svg" %}</span>
                         Manage Feeds
                     </b-dropdown-item-button>
                     <b-dropdown-divider></b-dropdown-divider>
+                    <b-dropdown-header>Sort by</b-dropdown-header>
+                    <b-dropdown-item-button @click.stop="itemSortNewestFirst=true">
+                        <span class="icon mr-1" :class="{invisible: !itemSortNewestFirst}">{% inline "check.svg" %}</span>
+                        Newest First
+                    </b-dropdown-item-button>
+                    <b-dropdown-item-button @click="itemSortNewestFirst=false">
+                        <span class="icon mr-1" :class="{invisible: itemSortNewestFirst}">{% inline "check.svg" %}</span>
+                        Oldest First
+                    </b-dropdown-item-button>
+                    <b-dropdown-divider></b-dropdown-divider>
                     <b-dropdown-form id="opml-import-form" enctype="multipart/form-data">
                         <input type="file"
                                id="opml-import"

template/static/javascripts/app.js

@@ -59,6 +59,7 @@ var vm = new Vue({
     api.settings.get().then(function(data) {
       vm.feedSelected = data.feed
       vm.filterSelected = data.filter
+      vm.itemSortNewestFirst = data.sort_newest_first
       vm.refreshItems()
     })
     this.refreshFeeds()
@@ -79,6 +80,7 @@ var vm = new Vue({
       'itemSelectedDetails': {},
       'itemSelectedReadability': '',
       'itemSearch': '',
+      'itemSortNewestFirst': null,
       'settings': 'create',
       'loading': {
         'newfeed': false,
@@ -161,6 +163,10 @@ var vm = new Vue({
         this.refreshItems()
       }
     }, 500),
+    'itemSortNewestFirst': function(newVal, oldVal) {
+      if (oldVal === null) return
+      api.settings.update({sort_newest_first: newVal}).then(this.refreshItems.bind(this))
+    },
   },
   methods: {
     refreshStats: function() {
@@ -190,6 +196,9 @@ var vm = new Vue({
       if (this.itemSearch) {
         query.search = this.itemSearch
       }
+      if (!this.itemSortNewestFirst) {
+        query.oldest_first = true
+      }
       return query
     },
     refreshFeeds: function() {