repos square

web_src/vuepages/pages/repos/components/ReposList.vue

@@ -7,8 +7,9 @@
       <div v-show="(!list.length && !loading)" class="repos-no-data">{{ $t('repos.noReposfound') }}</div>
     </div>
     <div class="center">
-      <el-pagination background @current-change="currentChange" @size-change="sizeChange" :current-page="page"
-        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      <el-pagination ref="paginationRef" background @current-change="currentChange" @size-change="sizeChange"
+        :current-page.sync="iPage" :page-sizes="iPageSizes" :page-size.sync="iPageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total">
       </el-pagination>
     </div>
   </div>
@@ -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() { },
 };
 </script>

web_src/vuepages/pages/repos/components/SearchBar.vue

@@ -3,7 +3,7 @@
     <div class="_repo_search">
       <div class="_repo_search_input_c">
         <div class="_repo_search_input">
-          <input type="text" v-model="searchInputValue" :placeholder="$t('repos.searchRepositories')"
+          <input type="text" v-model="searchInputValue" :placeholder="$t('repos.searchRepositories')" autocomplete="off"
             @keyup.enter="search" />
         </div>
         <div class="_repo_search_btn" @click="search">
@@ -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 {

web_src/vuepages/pages/repos/search/index.vue

@@ -11,7 +11,9 @@
           <ReposFilters ref="reposFiltersRef" @change="filtersChange"></ReposFilters>
         </div>
         <div class="ui sixteen wide mobile twelve wide tablet ten wide computer column">
-          <ReposList ref="reposListRef" :sort="reposListSortType" :q="reposListQurey" :topic="reposListTopic">
+          <ReposList ref="reposListRef" :sort="reposListSortType" :q="reposListQurey" :topic="reposListTopic"
+            :page="page" :pageSize="pageSize" :pageSizes="pageSizes" @current-change="currentChange"
+            @size-change="sizeChange">
           </ReposList>
         </div>
         <div class="computer only ui four wide computer column">
@@ -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() { },

web_src/vuepages/pages/repos/square/index.vue

@@ -17,7 +17,9 @@
           <ReposFilters ref="reposFiltersRef" @change="filtersChange"></ReposFilters>
         </div>
         <div class="ui sixteen wide mobile twelve wide tablet ten wide computer column">
-          <ReposList ref="reposListRef" :sort="reposListSortType" :q="reposListQurey" :topic="reposListTopic">
+          <ReposList ref="reposListRef" :sort="reposListSortType" :q="reposListQurey" :topic="reposListTopic"
+            :page="page" :pageSize="pageSize" :pageSizes="pageSizes" @current-change="currentChange"
+            @size-change="sizeChange">
           </ReposList>
         </div>
         <div class="computer only ui four wide computer column">
@@ -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() { },