Fix and improve dashboard repo UI (#2285)

* Fix and improve dashboard repo UI

* Change order of scripts loading

* Remove "mirror" tab

* Remove single tab panel for "org user"

* Add localization strings

* Create vue component and change event for search

* Add "mirrors" filter

options/locale/locale_en-US.ini

@@ -46,6 +46,11 @@ your_profile = Your Profile
 your_starred = Your Starred
 your_settings = Your Settings
 
+all = All
+sources = Sources
+mirrors = Mirrors
+collaborative = Collaborative
+
 activities = Activities
 pull_requests = Pull Requests
 issues = Issues

public/css/index.css

@@ -471,6 +471,17 @@ footer .ui.language .menu {
     padding-right: 30px !important;
   }
 }
+[v-cloak] {
+  display: none !important;
+}
+.repos-search {
+  padding-bottom: 0 !important;
+}
+.repos-filter {
+  margin-top: 0 !important;
+  border-bottom-width: 0 !important;
+  margin-bottom: 2px !important;
+}
 .markdown:not(code) {
   overflow: hidden;
   font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;

public/js/index.js

@@ -1655,29 +1655,45 @@ $(function () {
     });
 });
 
-function initDashboardSearch() {
+function initVueComponents(){
-    var el = document.getElementById('dashboard-repo-search');
+    var vueDelimeters = ['${', '}'];
-    if (!el) {
-        return;
-    }
 
-    new Vue({
+    Vue.component('repo-search', {
-        delimiters: ['${', '}'],
+        delimiters: vueDelimeters,
-        el: el,
+        template: '#repo-search-template',
 
-        data: {
+        props: {
-            tab: 'repos',
+            searchLimit: {
-            repos: [],
+                type: Number,
-            searchQuery: '',
+                default: 10
-            suburl: document.querySelector('meta[name=_suburl]').content,
+            },
-            uid: document.querySelector('meta[name=_context_uid]').content
+            suburl: {
+                type: String,
+                required: true
+            },
+            uid: {
+                type: Number,
+                required: true
+            },
+        },
+
+        data: function() {
+            return {
+                tab: 'repos',
+                repos: [],
+                reposTotal: 0,
+                reposFilter: 'all',
+                searchQuery: '',
+                isLoading: false
+            }
         },
 
         mounted: function() {
             this.searchRepos();
 
+            var self = this;
             Vue.nextTick(function() {
-                document.querySelector('#search_repo').focus();
+                self.$refs.search.focus();
             });
         },
 
@@ -1686,19 +1702,45 @@ function initDashboardSearch() {
                 this.tab = t;
             },
 
-            searchKeyUp: function() {
+            changeReposFilter: function(filter) {
-                this.searchRepos();
+                this.reposFilter = filter;
+            },
+
+            showRepo: function(repo, filter) {
+                switch (filter) {
+                    case 'sources':
+                        return repo.owner.id == this.uid && !repo.mirror && !repo.fork;
+                    case 'forks':
+                        return repo.owner.id == this.uid && !repo.mirror && repo.fork;
+                    case 'mirrors':
+                        return repo.mirror;
+                    case 'collaborative':
+                        return repo.owner.id != this.uid;
+                    default:
+                        return true;
+                }
             },
 
             searchRepos: function() {
                 var self = this;
-                $.getJSON(this.searchURL(), function(result) {
+                this.isLoading = true;
-                    self.repos = result.data;
+                var searchedQuery = this.searchQuery;
+                $.getJSON(this.searchURL(), function(result, textStatus, request) {
+                    if (searchedQuery == self.searchQuery) {
+                        self.repos = result.data;
+                        if (searchedQuery == "") {
+                            self.reposTotal = request.getResponseHeader('X-Total-Count');
+                        }
+                    }
+                }).always(function() {
+                    if (searchedQuery == self.searchQuery) {
+                        self.isLoading = false;
+                    }
                 });
             },
 
             searchURL: function() {
-                return this.suburl + '/api/v1/repos/search?uid=' + this.uid + '&q=' + this.searchQuery;
+                return this.suburl + '/api/v1/repos/search?uid=' + this.uid + '&q=' + this.searchQuery + '&limit=' + this.searchLimit;
             },
 
             repoClass: function(repo) {
@@ -1713,5 +1755,25 @@ function initDashboardSearch() {
                 }
             }
         }
+    })
+}
+
+function initDashboardSearch() {
+    var el = document.getElementById('dashboard-repo-search');
+    if (!el) {
+        return;
+    }
+
+    initVueComponents();
+
+    new Vue({
+        delimiters: ['${', '}'],
+        el: el,
+
+        data: {
+            searchLimit: document.querySelector('meta[name=_search_limit]').content,
+            suburl: document.querySelector('meta[name=_suburl]').content,
+            uid: document.querySelector('meta[name=_context_uid]').content,
+        },
     });
 }

public/less/_base.less

@@ -464,3 +464,17 @@ footer {
     padding-right: 30px !important;
   }
 }
+
+[v-cloak] {
+	display: none !important;
+}
+
+.repos-search {
+    padding-bottom: 0 !important;
+}
+
+.repos-filter {
+    margin-top: 0 !important;
+    border-bottom-width: 0 !important;
+    margin-bottom: 2px !important;
+}

routers/api/v1/repo/repo.go

@@ -5,6 +5,7 @@
 package repo
 
 import (
+	"fmt"
 	"strings"
 
 	api "code.gitea.io/sdk/gitea"
@@ -91,6 +92,7 @@ func Search(ctx *context.APIContext) {
 	}
 
 	ctx.SetLinkHeader(int(count), setting.API.MaxResponseItems)
+	ctx.Header().Set("X-Total-Count", fmt.Sprintf("%d", count))
 	ctx.JSON(200, api.SearchResults{
 		OK:   true,
 		Data: results,

routers/user/home.go

@@ -131,6 +131,7 @@ func Dashboard(ctx *context.Context) {
 	ctx.Data["Title"] = ctxUser.DisplayName() + " - " + ctx.Tr("dashboard")
 	ctx.Data["PageIsDashboard"] = true
 	ctx.Data["PageIsNews"] = true
+	ctx.Data["SearchLimit"] = setting.UI.User.RepoPagingNum
 
 	// Only user can have collaborative repositories.
 	if !ctxUser.IsOrganization() {

templates/base/footer.tmpl

@@ -45,10 +45,6 @@
 	<script src="{{AppSubUrl}}/js/draw.js"></script>
 {{end}}
 
-<!-- JavaScript -->
-<script src="{{AppSubUrl}}/js/semantic-2.2.1.min.js"></script>
-<script src="{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}"></script>
-
 <!-- Third-party libraries -->
 {{if .RequireHighlightJS}}
 	<script src="{{AppSubUrl}}/plugins/highlight-9.11.0/highlight.pack.js"></script>
@@ -66,5 +62,9 @@
 	<script src="{{AppSubUrl}}/js/libs/emojify-1.1.0.min.js"></script>
 	<script src="{{AppSubUrl}}/js/libs/clipboard-1.5.9.min.js"></script>
 	<script src="{{AppSubUrl}}/js/libs/vue.min.js"></script>
+
+	<!-- JavaScript -->
+	<script src="{{AppSubUrl}}/js/semantic-2.2.1.min.js"></script>
+	<script src="{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}"></script>
 </body>
 </html>

templates/base/head.tmpl

@@ -17,6 +17,9 @@
 	{{if .ContextUser}}
 		<meta name="_context_uid" content="{{.ContextUser.ID}}" />
 	{{end}}
+	{{if .SearchLimit}}
+		<meta name="_search_limit" content="{{.SearchLimit}}" />
+	{{end}}
 {{if .GoGetImport}}
 	<meta name="go-import" content="{{.GoGetImport}} git {{.CloneLink.HTTPS}}">
 	<meta name="go-source" content="{{.GoGetImport}} _ {{.GoDocDirectory}} {{.GoDocFile}}">

templates/user/dashboard/dashboard.tmpl

@@ -8,105 +8,10 @@
 				{{template "user/dashboard/feeds" .}}
 			</div>
 			<div id="dashboard-repo-search" class="six wide column">
-				<div class="ui {{if not .ContextUser.IsOrganization}}three{{else}}two{{end}} item stackable tabable menu">
+				<repo-search :search-limit="searchLimit" :suburl="suburl" :uid="uid"><i class="fa fa-spinner fa-spin"></i></repo-search>
-					<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
-					{{if not .ContextUser.IsOrganization}}
-						<a :class="{item: true, active: tab === 'orgs'}" @click="changeTab('orgs')">{{.i18n.Tr "organization"}}</a>
-					{{end}}
-					<a :class="{item: true, active: tab === 'mirrors'}" @click="changeTab('mirrors')">{{.i18n.Tr "mirror"}}</a>
-				</div>
-				<div v-if="tab === 'repos'" class="ui tab active list">
-					<div class="ui fluid input">
-						<input @keyUp="searchKeyUp" v-model="searchQuery" id="search_repo" placeholder="{{.i18n.Tr "home.search_repos"}}">
-					</div>
-					<h4 class="ui top attached header">
-						{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">{{.ContextUser.NumRepos}}</span>
-						<div class="ui right">
-							<a class="poping up" href="{{AppSubUrl}}/repo/create" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
-								<i class="plus icon"></i>
-								<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
-							</a>
-						</div>
-					</h4>
-					<div class="ui attached table segment">
-						<ul class="repo-owner-name-list">
-							<li v-for="repo in repos" :class="{'private': repo.private}">
-								<a :href="'{{AppSubUrl}}/' + repo.full_name">
-									<i :class="repoClass(repo)"></i>
-									<strong class="text truncate item-name">${ repo.full_name }</strong>
-									<span class="ui right text light grey">
-										${ repo.stars_count } <i class="octicon octicon-star rear"></i>
-									</span>
-								</a>
-							</li>
-							{{if gt .ContextUser.NumRepos .MaxShowRepoNum}}
-							<li>
-								<a href="{{.ContextUser.HomeLink}}">{{.i18n.Tr "home.show_more_repos"}}</a>
-							</li>
-							{{end}}
-						</ul>
-					</div>
-				</div>
-
-				{{if not .ContextUser.IsOrganization}}
-					<div v-if="tab === 'orgs'" class="ui tab active list">
-						<h4 class="ui top attached header">
-							{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">{{.ContextUser.GetOrganizationCount}}</span>
-							<div class="ui right">
-								{{if .SignedUser.CanCreateOrganization}}
-								<a class="poping up" href="{{AppSubUrl}}/org/create" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
-									<i class="plus icon"></i>
-									<span class="sr-only">{{.i18n.Tr "new_org"}}</span>
-								</a>
-								{{end}}
-							</div>
-						</h4>
-						<div class="ui attached table segment">
-							<ul class="repo-owner-name-list">
-								{{range .ContextUser.Orgs}}
-									<li>
-										<a href="{{AppSubUrl}}/{{.Name}}">
-											<i class="octicon octicon-organization"></i>
-											<strong class="text truncate item-name">{{.Name}}</strong>
-											<span class="ui right text light grey">
-												{{.NumRepos}} <i class="octicon octicon-repo rear"></i>
-											</span>
-										</a>
-									</li>
-								{{end}}
-							</ul>
-						</div>
-					</div>
-				{{end}}
-
-				<div v-if="tab === 'mirrors'" class="ui tab active list">
-					<h4 class="ui top attached header">
-						{{.i18n.Tr "home.my_mirrors"}} <span class="ui grey label">{{.MirrorCount}}</span>
-						<div class="ui right">
-							<a class="poping up" href="{{AppSubUrl}}/repo/migrate?mirror=1" data-content="{{.i18n.Tr "new_mirror"}}" data-variation="tiny inverted" data-position="left center">
-								<i class="plus icon"></i>
-								<span class="sr-only">{{.i18n.Tr "new_mirror"}}</span>
-							</a>
-						</div>
-					</h4>
-					<div class="ui attached table segment">
-						<ul class="repo-owner-name-list">
-							{{range .Mirrors}}
-								<li {{if .IsPrivate}}class="private"{{end}}>
-									<a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
-										<i class="octicon octicon-repo-clone"></i>
-										<strong class="text truncate item-name">{{.Name}}</strong>
-										<span class="ui right text light grey">
-											{{.Interval}}H <i class="octicon octicon-sync rear"></i>
-										</span>
-									</a>
-								</li>
-							{{end}}
-						</ul>
-					</div>
-				</div>
 			</div>
 		</div>
 	</div>
 </div>
+{{template "user/dashboard/repo-search" .}}
 {{template "base/footer" .}}

templates/user/dashboard/repo-search.tmpl

@@ -0,0 +1,81 @@
+<script type="text/x-template" id="repo-search-template">
+    <div>
+        {{if not .ContextUser.IsOrganization}}
+        <div class="ui two item stackable tabable menu">
+            <a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
+            <a :class="{item: true, active: tab === 'orgs'}" @click="changeTab('orgs')">{{.i18n.Tr "organization"}}</a>
+        </div>
+        {{end}}
+        <div v-if="tab === 'repos'" class="ui tab active list">
+            <h4 class="ui top attached header">
+                {{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${ reposTotal }</span>
+                <div class="ui right">
+                    <a class="poping up" href="{{AppSubUrl}}/repo/create" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
+                        <i class="plus icon"></i>
+                        <span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
+                    </a>
+                </div>
+            </h4>
+            <div class="ui attached secondary segment repos-search">
+                <div class="ui fluid icon input" :class="{loading: isLoading}">
+                    <input @input="searchRepos" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
+                    <i class="search icon"></i>
+                </div>
+                <div class="ui secondary tiny pointing borderless menu center aligned grid repos-filter">
+                    <a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">{{.i18n.Tr "all"}}</a>
+                    <a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">{{.i18n.Tr "sources"}}</a>
+                    <a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">{{.i18n.Tr "forks"}}</a>
+                    <a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')">{{.i18n.Tr "mirrors"}}</a>
+                    <a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">{{.i18n.Tr "collaborative"}}</a>
+                </div>
+            </div>
+            <div class="ui attached table segment">
+                <ul class="repo-owner-name-list">
+                    <li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)">
+                        <a :href="'{{AppSubUrl}}/' + repo.full_name">
+                            <i :class="repoClass(repo)"></i>
+                            <strong class="text truncate item-name">${ repo.full_name }</strong>
+                            <span class="ui right text light grey">
+                                ${ repo.stars_count } <i class="octicon octicon-star rear"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <li v-if="repos.length < reposTotal">
+                        <a href="{{.ContextUser.HomeLink}}">{{.i18n.Tr "home.show_more_repos"}}</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        {{if not .ContextUser.IsOrganization}}
+            <div v-if="tab === 'orgs'" class="ui tab active list">
+                <h4 class="ui top attached header">
+                    {{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">{{.ContextUser.GetOrganizationCount}}</span>
+                    <div class="ui right">
+                        {{if .SignedUser.CanCreateOrganization}}
+                        <a class="poping up" href="{{AppSubUrl}}/org/create" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
+                            <i class="plus icon"></i>
+                            <span class="sr-only">{{.i18n.Tr "new_org"}}</span>
+                        </a>
+                        {{end}}
+                    </div>
+                </h4>
+                <div class="ui attached table segment">
+                    <ul class="repo-owner-name-list">
+                        {{range .ContextUser.Orgs}}
+                            <li>
+                                <a href="{{AppSubUrl}}/{{.Name}}">
+                                    <i class="octicon octicon-organization"></i>
+                                    <strong class="text truncate item-name">{{.Name}}</strong>
+                                    <span class="ui right text light grey">
+                                        {{.NumRepos}} <i class="octicon octicon-repo rear"></i>
+                                    </span>
+                                </a>
+                            </li>
+                        {{end}}
+                    </ul>
+                </div>
+            </div>
+        {{end}}
+    </div>
+</script>