sort items asc/desc

server/handlers.go

@@ -332,7 +332,8 @@ func ItemListHandler(rw http.ResponseWriter, req *http.Request) {
 		if search := query.Get("search"); len(search) != 0 {
 			filter.Search = &search
 		}
-		items := db(req).ListItems(filter, (curPage-1)*perPage, perPage)
+		newestFirst := query.Get("oldest_first") != "true"
+		items := db(req).ListItems(filter, (curPage-1)*perPage, perPage, newestFirst)
 		count := db(req).CountItems(filter)
 		writeJSON(rw, map[string]interface{}{
 			"page": map[string]int{

storage/item.go

@@ -131,9 +131,13 @@ func listQueryPredicate(filter ItemFilter) (string, []interface{}) {
 	return predicate, args
 }
 
-func (s *Storage) ListItems(filter ItemFilter, offset, limit int) []Item {
+func (s *Storage) ListItems(filter ItemFilter, offset, limit int, newestFirst bool) []Item {
 	predicate, args := listQueryPredicate(filter)
 	result := make([]Item, 0, 0)
+	order := "desc"
+	if !newestFirst {
+		order = "asc"
+	}
 	query := fmt.Sprintf(`
 		select
 			i.id, i.guid, i.feed_id, i.title, i.link, i.description,
@@ -141,9 +145,9 @@ func (s *Storage) ListItems(filter ItemFilter, offset, limit int) []Item {
 		from items i
 		join feeds f on f.id = i.feed_id
 		where %s
-		order by i.date desc
+		order by i.date %s
 		limit %d offset %d
-		`, predicate, limit, offset)
+		`, predicate, order, limit, offset)
 	rows, err := s.db.Query(query, args...)
 	if err != nil {
 		s.log.Print(err)

storage/settings.go

@@ -8,6 +8,7 @@ func settingsDefaults() map[string]interface{} {
 		"feed":            "",
 		"feed_list_width": 300,
 		"item_list_width": 300,
+		"sort_newest_first": true,
 	}
 }
 

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() {