Sort by date on the history page

src/renderer/helpers/history.js

@@ -0,0 +1,4 @@
+export const SORT_BY_VALUES = {
+  DateAddedNewest: 'newestFirst',
+  DateAddedOldest: 'oldestFirst',
+}

src/renderer/store/modules/history.js

@@ -1,8 +1,10 @@
 import { set as vueSet, del as vueDel } from 'vue'
 import { DBHistoryHandlers } from '../../../datastores/handlers/index'
+import { SORT_BY_VALUES } from '../../helpers/history'
 
 const state = {
   historyCacheSorted: [],
+  useAscendingOrder: SORT_BY_VALUES['DateAddedNewest'],
 
   // Vuex doesn't support Maps, so we have to use an object here instead
   // TODO: switch to a Map during the Pinia migration
@@ -16,6 +18,10 @@ const getters = {
 
   getHistoryCacheById(state) {
     return state.historyCacheById
+  },
+
+  getSortOrder(state) {
+    return state.useAscendingOrder
   }
 }
 
@@ -36,6 +42,15 @@ const actions = {
     }
   },
 
+  async selectSort({ commit }, sort) {
+    try {
+      const order = sort
+      commit('setSortOrder', order)
+    } catch (errMessage) {
+      console.error(errMessage)
+    }
+  },
+
   async updateHistory({ commit }, record) {
     try {
       await DBHistoryHandlers.upsert(record)
@@ -109,6 +124,11 @@ const mutations = {
     state.historyCacheSorted = historyCacheSorted
   },
 
+  setSortOrder(state, order) {
+    state.useAscendingOrder = order
+    return state.useAscendingOrder
+  },
+
   setHistoryCacheById(state, historyCacheById) {
     state.historyCacheById = historyCacheById
   },

src/renderer/views/History/History.js

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
 import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 import debounce from 'lodash.debounce'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
+import FtSelect from '../../components/ft-select/ft-select.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtElementList from '../../components/FtElementList/FtElementList.vue'
@@ -10,6 +11,9 @@ import FtInput from '../../components/ft-input/ft-input.vue'
 import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import { ctrlFHandler } from '../../helpers/utils'
+import { mapActions } from 'vuex'
+import { getIconForSortPreference } from '../../helpers/utils'
+import { SORT_BY_VALUES } from '../../helpers/history'
 
 const identity = (v) => v
 
@@ -20,10 +24,7 @@ function filterVideosWithQuery(videos, query, attrProcessor = identity) {
     } else if (typeof (video.author) === 'string' && attrProcessor(video.author).includes(query)) {
       return true
     }
-
     return false
-  }).sort((a, b) => {
-    return b.timeWatched - a.timeWatched
   })
 }
 
@@ -38,6 +39,7 @@ export default defineComponent({
     'ft-input': FtInput,
     'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
     'ft-toggle-switch': FtToggleSwitch,
+    'ft-select': FtSelect,
   },
   data: function () {
     return {
@@ -51,17 +53,28 @@ export default defineComponent({
     }
   },
   computed: {
+    sortByNames: function () {
+      return [
+        this.$t('History.Sort By.DateWatchedNewest'),
+        this.$t('History.Sort By.DateWatchedOldest'),
+      ]
+    },
+    sortOrder: function() {
+      return this.$store.getters.getSortOrder
+    },
     historyCacheSorted: function () {
-      return this.$store.getters.getHistoryCacheSorted
+      return this.sortOrder === SORT_BY_VALUES['DateAddedNewest'] ? this.$store.getters.getHistoryCacheSorted : this.$store.getters.getHistoryCacheSorted.toReversed()
     },
-
     fullData: function () {
       if (this.historyCacheSorted.length < this.dataLimit) {
         return this.historyCacheSorted
       } else {
         return this.historyCacheSorted.slice(0, this.dataLimit)
       }
     },
+    sortByValues() {
+      return Object.values(SORT_BY_VALUES)
+    }
   },
   watch: {
     fullData() {
@@ -186,5 +199,9 @@ export default defineComponent({
     keyboardShortcutHandler: function (event) {
       ctrlFHandler(event, this.$refs.searchBar)
     },
+    getIconForSortPreference: (s) => getIconForSortPreference(s),
+    ...mapActions([
+      'selectSort'
+    ])
   }
 })

src/renderer/views/History/History.vue

@@ -22,6 +22,17 @@
       <div
         class="optionsRow"
       >
+        <ft-select
+          v-if="fullData.length > 1"
+          class="sortSelect"
+          :placeholder="$t('History.Sort By.Sort By')"
+          :value="sortOrder"
+          :select-names="sortByNames"
+          :select-values="sortByValues"
+          :icon="getIconForSortPreference(sortOrder)"
+          @change="selectSort"
+        />
+
         <ft-toggle-switch
           v-if="fullData.length > 1"
           :label="$t('History.Case Sensitive Search')"

static/locales/en-US.yaml

@@ -270,6 +270,10 @@ History:
   Empty Search Message: There are no videos in your history that match your search
   Search bar placeholder: "Search in History"
   Case Sensitive Search: Case Sensitive Search
+  Sort By:
+    Sort By: Sort By
+    DateWatchedOldest: Earliest Watched First
+    DateWatchedNewest: Latest Watched First
 Settings:
   # On Settings Page
   Settings: Settings