From 3c3b60c4c236ea5a487324b5d38328d7d93432a8 Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Thu, 30 May 2024 14:03:41 +0800 Subject: [PATCH 1/2] $ Simplify boolean assignment, rename session storage key --- src/renderer/views/History/History.js | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js index b3df7d88e2f47..a87ccdcc6c96a 100644 --- a/src/renderer/views/History/History.js +++ b/src/renderer/views/History/History.js @@ -55,20 +55,14 @@ export default defineComponent({ }, mounted: function () { document.addEventListener('keydown', this.keyboardShortcutHandler) - const limit = sessionStorage.getItem('historyLimit') + const limit = sessionStorage.getItem('History/dataLimit') if (limit !== null) { this.dataLimit = limit } this.activeData = this.fullData - - if (this.activeData.length < this.historyCacheSorted.length) { - this.showLoadMoreButton = true - } else { - this.showLoadMoreButton = false - } - + this.showLoadMoreButton = this.activeData.length < this.historyCacheSorted.length this.filterHistoryDebounce = debounce(this.filterHistory, 500) }, beforeDestroy: function () { @@ -81,7 +75,7 @@ export default defineComponent({ this.filterHistory() } else { this.dataLimit += 100 - sessionStorage.setItem('historyLimit', this.dataLimit) + sessionStorage.setItem('History/dataLimit', this.dataLimit) } }, filterHistoryAsync: function() { @@ -92,11 +86,7 @@ export default defineComponent({ filterHistory: function() { if (this.query === '') { this.activeData = this.fullData - if (this.activeData.length < this.historyCacheSorted.length) { - this.showLoadMoreButton = true - } else { - this.showLoadMoreButton = false - } + this.showLoadMoreButton = this.activeData.length < this.historyCacheSorted.length } else { const lowerCaseQuery = this.query.toLowerCase() const filteredQuery = this.historyCacheSorted.filter((video) => { @@ -110,11 +100,7 @@ export default defineComponent({ }).sort((a, b) => { return b.timeWatched - a.timeWatched }) - if (filteredQuery.length <= this.searchDataLimit) { - this.showLoadMoreButton = false - } else { - this.showLoadMoreButton = true - } + this.showLoadMoreButton = filteredQuery.length > this.searchDataLimit this.activeData = filteredQuery.length < this.searchDataLimit ? filteredQuery : filteredQuery.slice(0, this.searchDataLimit) } }, From cfbda54487556bca2d159c2e53b083ded089e1ad Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Thu, 30 May 2024 14:29:45 +0800 Subject: [PATCH 2/2] * Make history page remember last query string & search limit only when going back --- src/renderer/views/History/History.js | 63 +++++++++++++++++++++----- src/renderer/views/History/History.vue | 5 +- 2 files changed, 55 insertions(+), 13 deletions(-) diff --git a/src/renderer/views/History/History.js b/src/renderer/views/History/History.js index a87ccdcc6c96a..efa093737092d 100644 --- a/src/renderer/views/History/History.js +++ b/src/renderer/views/History/History.js @@ -1,4 +1,5 @@ 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 FtCard from '../../components/ft-card/ft-card.vue' @@ -44,34 +45,49 @@ export default defineComponent({ }, }, watch: { - query() { - this.searchDataLimit = 100 - this.filterHistoryAsync() - }, fullData() { this.activeData = this.fullData this.filterHistory() - } + }, }, - mounted: function () { + created: function () { document.addEventListener('keydown', this.keyboardShortcutHandler) - const limit = sessionStorage.getItem('History/dataLimit') - if (limit !== null) { - this.dataLimit = limit + const oldDataLimit = sessionStorage.getItem('History/dataLimit') + if (oldDataLimit !== null) { + this.dataLimit = oldDataLimit } - this.activeData = this.fullData - this.showLoadMoreButton = this.activeData.length < this.historyCacheSorted.length this.filterHistoryDebounce = debounce(this.filterHistory, 500) + + const oldQuery = this.$route.query.searchQueryText ?? '' + if (oldQuery !== null && oldQuery !== '') { + // `handleQueryChange` must be called after `filterHistoryDebounce` assigned + this.handleQueryChange(oldQuery, this.$route.query.searchDataLimit) + } else { + // Only display unfiltered data when no query used last time + this.filterHistory() + } }, beforeDestroy: function () { document.removeEventListener('keydown', this.keyboardShortcutHandler) }, methods: { + handleQueryChange(val, customLimit = null) { + this.query = val + + const newLimit = customLimit ?? 100 + this.searchDataLimit = newLimit + + this.saveStateInRouter(val, newLimit) + + this.filterHistoryAsync() + }, + increaseLimit: function () { if (this.query !== '') { this.searchDataLimit += 100 + this.saveStateInRouter(this.query, this.searchDataLimit) this.filterHistory() } else { this.dataLimit += 100 @@ -104,6 +120,31 @@ export default defineComponent({ this.activeData = filteredQuery.length < this.searchDataLimit ? filteredQuery : filteredQuery.slice(0, this.searchDataLimit) } }, + + async saveStateInRouter(query, searchDataLimit) { + if (this.query === '') { + await this.$router.replace({ name: 'history' }).catch(failure => { + if (isNavigationFailure(failure, NavigationFailureType.duplicated)) { + return + } + + throw failure + }) + return + } + + await this.$router.replace({ + name: 'history', + query: { searchQueryText: query, searchDataLimit: searchDataLimit }, + }).catch(failure => { + if (isNavigationFailure(failure, NavigationFailureType.duplicated)) { + return + } + + throw failure + }) + }, + keyboardShortcutHandler: function (event) { ctrlFHandler(event, this.$refs.searchBar) } diff --git a/src/renderer/views/History/History.vue b/src/renderer/views/History/History.vue index 98a4ce34d2890..d7fb9d3a32a3d 100644 --- a/src/renderer/views/History/History.vue +++ b/src/renderer/views/History/History.vue @@ -15,8 +15,9 @@ :placeholder="$t('History.Search bar placeholder')" :show-clear-text-button="true" :show-action-button="false" - @input="(input) => query = input" - @clear="query = ''" + :value="query" + @input="(input) => handleQueryChange(input)" + @clear="() => handleQueryChange('')" />