switch to using ft-select, updated store, now it's easier to expand t…

…o more sort types

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

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
 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'
@@ -9,6 +10,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
 
@@ -34,31 +38,42 @@ export default defineComponent({
     'ft-input': FtInput,
     'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
     'ft-toggle-switch': FtToggleSwitch,
+    'ft-select': FtSelect,
   },
   data: function () {
     return {
       isLoading: false,
       dataLimit: 100,
       searchDataLimit: 100,
       doCaseSensitiveSearch: false,
-      ascending: false,
       showLoadMoreButton: false,
       query: '',
       activeData: [],
     }
   },
   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.ascending ? [...this.$store.getters.getHistoryCacheSorted].reverse() : 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: {
     query() {
@@ -70,7 +85,7 @@ export default defineComponent({
     },
     doCaseSensitiveSearch() {
       this.filterHistory()
-    },
+    }
   },
   mounted: function () {
     document.addEventListener('keydown', this.keyboardShortcutHandler)
@@ -123,5 +138,9 @@ export default defineComponent({
     keyboardShortcutHandler: function (event) {
       ctrlFHandler(event, this.$refs.searchBar)
     },
+    getIconForSortPreference: (s) => getIconForSortPreference(s),
+    ...mapActions([
+      'selectSort'
+    ])
   }
 })

src/renderer/views/History/History.vue

@@ -21,20 +21,24 @@
       <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')"
           :compact="true"
           :default-value="doCaseSensitiveSearch"
           @change="doCaseSensitiveSearch = !doCaseSensitiveSearch"
         />
-        <ft-toggle-switch
-          v-if="fullData.length > 1"
-          :label="$t('History.Sort By Date ASC')"
-          :compact="true"
-          :default-value="ascending"
-          @change="ascending = !ascending"
-        />
       </div>
       <ft-flex-box
         v-show="fullData.length === 0"

static/locales/en-US.yaml

@@ -269,7 +269,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 Date ASC: Sort By Date ASC
+  Sort By:
+    Sort By: Sort By
+    DateWatchedOldest: Earliest Watched First
+    DateWatchedNewest: Latest Watched First
 Settings:
   # On Settings Page
   Settings: Settings