From f976aeb92ec2f477772a565b9ce0f150dc184439 Mon Sep 17 00:00:00 2001 From: JL Date: Fri, 22 Nov 2024 10:57:29 -0800 Subject: [PATCH 1/5] add a simple toggle switch to change search history from descending to ascending --- src/renderer/views/History/History.js | 6 ++---- src/renderer/views/History/History.vue | 7 +++++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js index 1613eb1998f15..6ac9719726c4b 100644 --- a/src/renderer/views/History/History.js +++ b/src/renderer/views/History/History.js @@ -20,10 +20,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 }) } @@ -45,6 +42,7 @@ export default defineComponent({ dataLimit: 100, searchDataLimit: 100, doCaseSensitiveSearch: false, + ascending: false, showLoadMoreButton: false, query: '', activeData: [], @@ -52,7 +50,7 @@ export default defineComponent({ }, computed: { historyCacheSorted: function () { - return this.$store.getters.getHistoryCacheSorted + return this.ascending ? [...this.$store.getters.getHistoryCacheSorted].reverse() : this.$store.getters.getHistoryCacheSorted }, fullData: function () { diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue index 27d2949165142..e822840c30706 100644 --- a/src/renderer/views/History/History.vue +++ b/src/renderer/views/History/History.vue @@ -29,6 +29,13 @@ :default-value="doCaseSensitiveSearch" @change="doCaseSensitiveSearch = !doCaseSensitiveSearch" /> + Date: Fri, 22 Nov 2024 12:01:59 -0800 Subject: [PATCH 2/5] add name for english string for sort by date in history --- src/renderer/views/History/History.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue index e822840c30706..08404c5f808a7 100644 --- a/src/renderer/views/History/History.vue +++ b/src/renderer/views/History/History.vue @@ -31,7 +31,7 @@ /> Date: Fri, 22 Nov 2024 12:16:19 -0800 Subject: [PATCH 3/5] add the en-US locale string so that it can be used for translations --- static/locales/en-US.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 5abc95fb17867..cd9714d52b533 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -270,6 +270,7 @@ 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 Settings: # On Settings Page Settings: Settings From 1768258cbc99fd3e3354e4289dabef806bb6dcb7 Mon Sep 17 00:00:00 2001 From: JL Date: Sat, 7 Dec 2024 09:28:56 -0800 Subject: [PATCH 4/5] switch to using ft-select, updated store, now it's easier to expand to more sort types --- src/renderer/store/modules/history.js | 20 ++++++++++++++++++++ src/renderer/views/History/History.js | 25 ++++++++++++++++++++++--- src/renderer/views/History/History.vue | 18 +++++++++++------- static/locales/en-US.yaml | 5 ++++- 4 files changed, 57 insertions(+), 11 deletions(-) diff --git a/src/renderer/store/modules/history.js b/src/renderer/store/modules/history.js index b99b63a1c2b4a..73e781c1ddca1 100644 --- a/src/renderer/store/modules/history.js +++ b/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 }, diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js index 6ac9719726c4b..eddf1ba8023a6 100644 --- a/src/renderer/views/History/History.js +++ b/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 @@ -35,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 { @@ -42,17 +47,24 @@ export default defineComponent({ 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 @@ -60,6 +72,9 @@ export default defineComponent({ return this.historyCacheSorted.slice(0, this.dataLimit) } }, + sortByValues() { + return Object.values(SORT_BY_VALUES) + } }, watch: { fullData() { @@ -184,5 +199,9 @@ export default defineComponent({ keyboardShortcutHandler: function (event) { ctrlFHandler(event, this.$refs.searchBar) }, + getIconForSortPreference: (s) => getIconForSortPreference(s), + ...mapActions([ + 'selectSort' + ]) } }) diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue index 08404c5f808a7..d1f1064bbd65e 100644 --- a/src/renderer/views/History/History.vue +++ b/src/renderer/views/History/History.vue @@ -22,6 +22,17 @@
+ + -
Date: Sat, 7 Dec 2024 10:08:22 -0800 Subject: [PATCH 5/5] add renderers helper with map of sort by options --- src/renderer/helpers/history.js | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/renderer/helpers/history.js diff --git a/src/renderer/helpers/history.js b/src/renderer/helpers/history.js new file mode 100644 index 0000000000000..6bcf731d67dae --- /dev/null +++ b/src/renderer/helpers/history.js @@ -0,0 +1,4 @@ +export const SORT_BY_VALUES = { + DateAddedNewest: 'newestFirst', + DateAddedOldest: 'oldestFirst', +}