Change "show more repos" to extend the repo list

templates/user/dashboard/dashboard.tmpl

@@ -22,7 +22,6 @@
 					:search-limit="searchLimit"
 					:suburl="suburl"
 					:uid="uid"
-					:more-repos-link="'{{.ContextUser.HomeLink}}'"
 					{{if not .ContextUser.IsOrganization}}
 					:organizations="[
 						{{range .ContextUser.Orgs}}
@@ -81,7 +80,7 @@
 									</a>
 								</div>
 							</div>
-							<div class="ui attached table segment">
+							<div class="ui attached table segment repo-owner">
 								<ul class="repo-owner-name-list">
 									<li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)">
 										<a :href="suburl + '/' + repo.full_name">
@@ -93,8 +92,12 @@
 											</span>
 										</a>
 									</li>
-									<li v-if="showMoreReposLink">
-										<a :href="moreReposLink">{{.i18n.Tr "home.show_more_repos"}}</a>
+								</ul>
+							</div>
+							<div v-if="hasMoreRepos" class="ui attached table segment">
+								<ul class="repo-owner-name-list">
+									<li>
+										<a @click="showMoreRepos">{{.i18n.Tr "home.show_more_repos"}}</a>
 									</li>
 								</ul>
 							</div>

web_src/js/index.js

@@ -2795,16 +2795,13 @@ function initVueComponents() {
         type: Number,
         default: 0
       },
-      moreReposLink: {
-        type: String,
-        default: ''
-      }
     },
 
     data() {
       return {
         tab: 'repos',
         repos: [],
+        page: 1,
         reposTotalCount: 0,
         reposFilter: 'all',
         searchQuery: '',
@@ -2836,13 +2833,13 @@ function initVueComponents() {
     },
 
     computed: {
-      showMoreReposLink() {
+      hasMoreRepos() {
         return this.repos.length > 0 && this.repos.length < this.repoTypes[this.reposFilter].count;
       },
       searchURL() {
         return `${this.suburl}/api/v1/repos/search?sort=updated&order=desc&uid=${this.uid}&q=${this.searchQuery
         }&limit=${this.searchLimit}&mode=${this.repoTypes[this.reposFilter].searchMode
-        }${this.reposFilter !== 'all' ? '&exclusive=1' : ''}`;
+        }${this.reposFilter !== 'all' ? '&exclusive=1' : ''}&page=${this.page}`;
       },
       repoTypeCount() {
         return this.repoTypes[this.reposFilter].count;
@@ -2866,6 +2863,7 @@ function initVueComponents() {
       changeReposFilter(filter) {
         this.reposFilter = filter;
         this.repos = [];
+        this.page = 1;
         this.repoTypes[filter].count = 0;
         this.searchRepos(filter);
       },
@@ -2896,7 +2894,11 @@ function initVueComponents() {
 
         $.getJSON(searchedURL, (result, _textStatus, request) => {
           if (searchedURL === self.searchURL) {
-            self.repos = result.data;
+            if (self.page > 1) {
+              result.data.forEach((repo) => self.repos.push(repo));
+            } else {
+              self.repos = result.data;
+            }
             const count = request.getResponseHeader('X-Total-Count');
             if (searchedQuery === '' && searchedMode === '') {
               self.reposTotalCount = count;
@@ -2910,6 +2912,11 @@ function initVueComponents() {
         });
       },
 
+      showMoreRepos() {
+        this.page += 1;
+        this.searchRepos(this.reposFilter);
+      },
+
       repoClass(repo) {
         if (repo.fork) {
           return 'octicon-repo-forked';

web_src/less/_dashboard.less

@@ -170,6 +170,11 @@
             }
         }
 
+        .segment.repo-owner {
+            max-height: 60vh;
+            overflow-y: auto;
+        }
+
         .repo-owner-name-list {
             .item-name {
                 max-width: 70%;