From 2bdf38767338c6beb322c9eaad019e62db67861a Mon Sep 17 00:00:00 2001 From: chenshihai Date: Wed, 14 Dec 2022 14:14:49 +0800 Subject: [PATCH 1/3] repos square --- .../vuepages/pages/repos/components/ReposList.vue | 54 ++++++++++++++++------ .../vuepages/pages/repos/components/SearchBar.vue | 8 ++-- web_src/vuepages/pages/repos/search/index.vue | 31 ++++++++++--- web_src/vuepages/pages/repos/square/index.vue | 39 +++++++++++++--- 4 files changed, 102 insertions(+), 30 deletions(-) diff --git a/web_src/vuepages/pages/repos/components/ReposList.vue b/web_src/vuepages/pages/repos/components/ReposList.vue index 50e41f699..046a0112c 100644 --- a/web_src/vuepages/pages/repos/components/ReposList.vue +++ b/web_src/vuepages/pages/repos/components/ReposList.vue @@ -7,8 +7,9 @@
{{ $t('repos.noReposfound') }}
- +
@@ -25,15 +26,18 @@ export default { q: { type: String, default: '' }, sort: { type: String, default: 'mostpopular' }, topic: { type: String, default: '' }, + page: { type: Number, default: 1 }, + pageSize: { type: Number, default: 15 }, + pageSizes: { type: Array, default: () => [15, 30, 50] } }, components: { ReposItem }, data() { return { loading: false, list: [], - pageSizes: [15, 30, 50], - pageSize: 15, - page: 1, + iPageSizes: [15, 30, 50], + iPageSize: 15, + iPage: 1, total: 0, }; }, @@ -44,8 +48,8 @@ export default { q: this.q || '', topic: this.topic || '', sort: this.sort || 'mostpopular', - pageSize: this.pageSize || 15, - page: this.page || 1, + pageSize: this.iPageSize || 15, + page: this.iPage || 1, }).then(res => { res = res.data; this.loading = false; @@ -72,31 +76,42 @@ export default { } }); this.total = res.Data.Total; + this.iPage = this.iPage; + this.iPageSize = this.iPageSize; this.$nextTick(() => { LetterAvatar.transform(); }); } else { this.list = []; this.total = 0; + this.iPage = this.iPage; + this.iPageSize = this.iPageSize; } }).catch(err => { console.log(err); this.loading = false; this.list = []; this.total = 0; + this.iPage = this.iPage; + this.iPageSize = this.iPageSize; }); }, search() { - this.page = 1; this.getListData(); }, currentChange(page) { - this.page = page; - this.getListData(); + this.iPage = page; + this.$emit('current-change', { + page: this.iPage, + pageSize: this.iPageSize, + }); }, sizeChange(pageSize) { - this.pageSize = pageSize; - this.getListData(); + this.iPageSize = pageSize; + this.$emit('size-change', { + page: this.iPage, + pageSize: this.iPageSize, + }); }, handlerSearchStr(oStr, searchKey) { if (!searchKey) return oStr; @@ -109,7 +124,20 @@ export default { return colorList[tIndex % colorList.length]; } }, - watch: {}, + watch: { + page: { + handler(val) { + this.iPage = val; + }, + immediate: true, + }, + pageSize: { + handler(val) { + this.iPageSize = val; + }, + immediate: true, + } + }, mounted() { }, }; diff --git a/web_src/vuepages/pages/repos/components/SearchBar.vue b/web_src/vuepages/pages/repos/components/SearchBar.vue index a97ac1fbd..6e90418ef 100644 --- a/web_src/vuepages/pages/repos/components/SearchBar.vue +++ b/web_src/vuepages/pages/repos/components/SearchBar.vue @@ -3,7 +3,7 @@
-
@@ -88,9 +88,9 @@ export default { this.selectTopic && this.changeTopic({ k: this.selectTopic.toLocaleLowerCase(), v: this.selectTopic, - }) + }, true) }, - changeTopic(topicItem) { + changeTopic(topicItem, noSearch) { const index_ori = this.topicOri.findIndex((item) => { return item.k == this.selectTopic.toLocaleLowerCase(); }); @@ -112,7 +112,7 @@ export default { }); } } - this.search(); + !noSearch && this.search(); }, handlerTopicsData(data) { try { diff --git a/web_src/vuepages/pages/repos/search/index.vue b/web_src/vuepages/pages/repos/search/index.vue index d5a520011..c23b55ba1 100644 --- a/web_src/vuepages/pages/repos/search/index.vue +++ b/web_src/vuepages/pages/repos/search/index.vue @@ -11,7 +11,9 @@
- +
@@ -44,6 +46,10 @@ export default { reposListQurey: '', reposListTopic: '', + page: 1, + pageSize: 15, + pageSizes: [15, 30, 50], + staticSquareTopics: staticSquareTopics, }; }, @@ -56,32 +62,45 @@ export default { }, methods: { filtersChange(condition) { + this.page = 1; this.reposListSortType = condition.key; this.search(); }, searchBarChange(params) { + this.page = 1; this.reposListQurey = params.q || ''; this.reposListTopic = params.topic || ''; this.search(); }, + currentChange({ page, pageSize }) { + this.page = page; + this.search(); + }, + sizeChange({ page, pageSize }) { + this.page = 1; + this.pageSize = pageSize; + this.search(); + }, search() { - this.$nextTick(() => { - this.$refs.reposListRef.search(); - }); + window.location.href = `/explore/repos?q=${this.reposListQurey.trim()}&sort=${this.reposListSortType}&topic=${this.reposListTopic.trim()}&page=${this.page}&pageSize=${this.pageSize}`; } }, - mounted() { + beforeMount() { const urlParams = getUrlSearchParams(); this.reposListQurey = urlParams.q || ''; this.reposListTopic = urlParams.topic || ''; this.reposListSortType = urlParams.sort || 'mostpopular'; - this.search(); + this.page = Number(urlParams.page) || 1; + this.pageSize = this.pageSizes.indexOf(Number(urlParams.pageSize)) >= 0 ? Number(urlParams.pageSize) : 15; + }, + mounted() { this.$nextTick(() => { this.$refs.reposFiltersRef.setDefaultFilter(this.reposListSortType); this.$refs.searchBarRef.setDefaultSearch({ q: this.reposListQurey, topic: this.reposListTopic, }); + this.$refs.reposListRef.search(); }); }, beforeDestroy() { }, diff --git a/web_src/vuepages/pages/repos/square/index.vue b/web_src/vuepages/pages/repos/square/index.vue index 56a8bb539..c6dc49bf6 100644 --- a/web_src/vuepages/pages/repos/square/index.vue +++ b/web_src/vuepages/pages/repos/square/index.vue @@ -17,7 +17,9 @@
- +
@@ -41,6 +43,7 @@ import ReposFilters from '../components/ReposFilters.vue'; import ReposList from '../components/ReposList.vue'; import ActiveUsers from '../components/ActiveUsers.vue'; import ActiveOrgs from '../components/ActiveOrgs.vue'; +import { getUrlSearchParams } from '~/utils'; const staticSquareBanners = JSON.stringify(window.staticSquareBanners || []); const staticSquarePreferredRepos = window.staticSquarePreferredRepos || []; @@ -54,6 +57,10 @@ export default { reposListQurey: '', reposListTopic: '', + page: 1, + pageSize: 15, + pageSizes: [15, 30, 50], + staticSquareBanners: staticSquareBanners, staticSquarePreferredRepos: staticSquarePreferredRepos, staticSquareTopics: staticSquareTopics, @@ -71,27 +78,45 @@ export default { }, methods: { filtersChange(condition) { + this.page = 1; this.reposListSortType = condition.key; this.search(); }, searchBarChange(params) { + this.page = 1; this.reposListQurey = params.q || ''; this.reposListTopic = params.topic || ''; this.search(); }, + currentChange({ page, pageSize }) { + this.page = page; + this.search(); + }, + sizeChange({ page, pageSize }) { + this.page = 1; + this.pageSize = pageSize; + this.search(); + }, search() { - this.$nextTick(() => { - this.$refs.reposListRef.search(); - }); + window.location.href = `/explore/repos/square?q=${this.reposListQurey.trim()}&sort=${this.reposListSortType}&topic=${this.reposListTopic.trim()}&page=${this.page}&pageSize=${this.pageSize}`; } }, + beforeMount() { + const urlParams = getUrlSearchParams(); + this.reposListQurey = urlParams.q || ''; + this.reposListTopic = urlParams.topic || ''; + this.reposListSortType = urlParams.sort || 'mostpopular'; + this.page = Number(urlParams.page) || 1; + this.pageSize = this.pageSizes.indexOf(Number(urlParams.pageSize)) >= 0 ? Number(urlParams.pageSize) : 15; + }, mounted() { this.$nextTick(() => { + this.$refs.reposFiltersRef.setDefaultFilter(this.reposListSortType); this.$refs.searchBarRef.setDefaultSearch({ - q: '', - topic: '', + q: this.reposListQurey, + topic: this.reposListTopic, }); - this.search(); + this.$refs.reposListRef.search(); }); }, beforeDestroy() { }, From 1bfd94540f863af40ef17705fe36ff564987228a Mon Sep 17 00:00:00 2001 From: chenshihai Date: Wed, 14 Dec 2022 15:40:40 +0800 Subject: [PATCH 2/3] repos square --- web_src/vuepages/pages/repos/search/index.vue | 5 +++++ web_src/vuepages/pages/repos/square/index.vue | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/web_src/vuepages/pages/repos/search/index.vue b/web_src/vuepages/pages/repos/search/index.vue index c23b55ba1..488245b41 100644 --- a/web_src/vuepages/pages/repos/search/index.vue +++ b/web_src/vuepages/pages/repos/search/index.vue @@ -102,6 +102,11 @@ export default { }); this.$refs.reposListRef.search(); }); + window.addEventListener('pageshow', function (e) { + if (e.persisted) { + window.location.reload(); + } + }, false); }, beforeDestroy() { }, }; diff --git a/web_src/vuepages/pages/repos/square/index.vue b/web_src/vuepages/pages/repos/square/index.vue index c6dc49bf6..0c06a085e 100644 --- a/web_src/vuepages/pages/repos/square/index.vue +++ b/web_src/vuepages/pages/repos/square/index.vue @@ -118,6 +118,11 @@ export default { }); this.$refs.reposListRef.search(); }); + window.addEventListener('pageshow', function (e) { + if (e.persisted) { + window.location.reload(); + } + }, false); }, beforeDestroy() { }, }; From 468b48b052cfdecc16cc25f77d0f85bd1fa1a574 Mon Sep 17 00:00:00 2001 From: chenshihai Date: Wed, 14 Dec 2022 16:43:21 +0800 Subject: [PATCH 3/3] repos square --- web_src/vuepages/pages/repos/square/index.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web_src/vuepages/pages/repos/square/index.vue b/web_src/vuepages/pages/repos/square/index.vue index 0c06a085e..ed2d9cf5b 100644 --- a/web_src/vuepages/pages/repos/square/index.vue +++ b/web_src/vuepages/pages/repos/square/index.vue @@ -10,6 +10,7 @@
+
@@ -116,6 +117,12 @@ export default { q: this.reposListQurey, topic: this.reposListTopic, }); + const urlParams = getUrlSearchParams(); + const page = Number(urlParams.page) || 1; + const reposListSortType = urlParams.sort; + if (page != 1 || reposListSortType) { + window.location.href = '#search'; + } this.$refs.reposListRef.search(); }); window.addEventListener('pageshow', function (e) {