Improve dashboard repo search (#1652)

* Add VueJS

* Improve dashboard search

* Fix tab switching

* Fix input autofocus

models/repo_list.go

@@ -115,9 +115,6 @@ func SearchRepositoryByName(opts *SearchRepoOptions) (repos RepositoryList, coun
 		cond = builder.NewCond()
 	)
 
-	if len(opts.Keyword) == 0 {
-		return repos, 0, nil
-	}
 	opts.Keyword = strings.ToLower(opts.Keyword)
 
 	if opts.Page <= 0 {

public/js/index.js

@@ -1560,6 +1560,7 @@ $(document).ready(function () {
     initWebhook();
     initAdmin();
     initCodeView();
+    initDashboardSearch();
 
     // Repo clone url.
     if ($('#repo-clone-url').length > 0) {
@@ -1635,13 +1636,6 @@ $(function () {
     if ($('.user.signin').length > 0) return;
     $('form').areYouSure();
 
-    $("#search_repo").on('change paste keyup',function(){
-        var value = $(this).val();
-        $.map($('.search-list li'), function(i) {
-            $(i).css("display", (value.trim().length == 0 || $(i).attr("data-title").trim().toLowerCase().indexOf(value.trim().toLowerCase()) > -1) ? "" : "none");
-        });
-    });
-
     // Parse SSH Key
     $("#ssh-key-content").on('change paste keyup',function(){
         var arrays = $(this).val().split(" ");
@@ -1651,3 +1645,64 @@ $(function () {
         }
     });
 });
+
+function initDashboardSearch() {
+    var el = document.getElementById('dashboard-repo-search');
+    if (!el) {
+        return;
+    }
+
+    new Vue({
+        delimiters: ['<%', '%>'],
+        el: el,
+
+        data: {
+            tab: 'repos',
+            repos: [],
+            searchQuery: '',
+            suburl: document.querySelector('meta[name=_suburl]').content,
+            uid: document.querySelector('meta[name=_uid]').content
+        },
+
+        mounted: function() {
+            this.searchRepos();
+
+            Vue.nextTick(function() {
+                document.querySelector('#search_repo').focus();
+            });
+        },
+
+        methods: {
+            changeTab: function(t) {
+                this.tab = t;
+            },
+
+            searchKeyUp: function() {
+                this.searchRepos();
+            },
+
+            searchRepos: function() {
+                var self = this;
+                $.getJSON(this.searchURL(), function(result) {
+                    self.repos = result.data;
+                });
+            },
+
+            searchURL: function() {
+                return this.suburl + '/api/v1/repos/search?uid=' + this.uid + '&q=' + this.searchQuery;
+            },
+
+            repoClass: function(repo) {
+                if (repo.fork) {
+                    return 'octicon octicon-repo-forked';
+                } else if (repo.mirror) {
+                    return 'octicon octicon-repo-clone';
+                } else if (repo.private) {
+                    return 'octicon octicon-repo-forked';
+                } else {
+                    return 'octicon octicon-repo';
+                }
+            }
+        }
+    });
+}

templates/base/footer.tmpl

@@ -65,5 +65,6 @@
 	<script src="{{AppSubUrl}}/js/libs/autolink.js"></script>
 	<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.js"></script>
 </body>
 </html>

templates/base/head.tmpl

@@ -11,6 +11,9 @@
 	<meta name="referrer" content="no-referrer" />
 	<meta name="_csrf" content="{{.CsrfToken}}" />
 	<meta name="_suburl" content="{{AppSubUrl}}" />
+	{{if .IsSigned}}
+		<meta name="_uid" content="{{.SignedUser.ID}}" />
+	{{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

@@ -7,17 +7,17 @@
 			<div class="ten wide column">
 				{{template "user/dashboard/feeds" .}}
 			</div>
-			<div class="six wide column">
+			<div id="dashboard-repo-search" class="six wide column">
 				<div class="ui {{if not .ContextUser.IsOrganization}}three{{else}}two{{end}} item tabable menu">
-					<a class="item active" data-tab="repos">{{.i18n.Tr "repository"}}</a>
+					<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a>
 					{{if not .ContextUser.IsOrganization}}
-						<a class="item" data-tab="orgs">{{.i18n.Tr "organization"}}</a>
+						<a :class="{item: true, active: tab === 'orgs'}" @click="changeTab('orgs')">{{.i18n.Tr "organization"}}</a>
 					{{end}}
-					<a class="item" data-tab="mirrors">{{.i18n.Tr "mirror"}}</a>
+					<a :class="{item: true, active: tab === 'mirrors'}" @click="changeTab('mirrors')">{{.i18n.Tr "mirror"}}</a>
 				</div>
-				<div class="ui tab active list" data-tab="repos">
+				<div v-if="tab === 'repos'" class="ui tab active list">
 					<div class="ui fluid input">
-						<input id="search_repo" name="q" value="" placeholder="{{.i18n.Tr "home.search_repos"}}" autofocus="">
+						<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>
@@ -29,18 +29,16 @@
 						</div>
 					</h4>
 					<div class="ui attached table segment">
-						<ul class="repo-owner-name-list search-list">
+						<ul class="repo-owner-name-list">
-							{{range .Repos}}
+							<li v-for="repo in repos" :class="{'private': repo.private}">
-								<li {{if .IsPrivate}}class="private"{{end}} data-title="{{.Name}}">
+								<a :href="'{{AppSubUrl}}/' + repo.full_name">
-									<a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
+									<i :class="repoClass(repo)"></i>
-										<i class="octicon octicon-{{if .IsFork}}repo-forked{{else if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
+									<strong class="text truncate item-name"><% repo.full_name %></strong>
-										<strong class="text truncate item-name">{{.Name}}</strong>
+									<span class="ui right text light grey">
-										<span class="ui right text light grey">
+										<% repo.stars_count %> <i class="octicon octicon-star rear"></i>
-											{{.NumStars}} <i class="octicon octicon-star rear"></i>
+									</span>
-										</span>
+								</a>
-									</a>
+							</li>
-								</li>
-							{{end}}
 							{{if gt .ContextUser.NumRepos .MaxShowRepoNum}}
 							<li>
 								<a href="{{.ContextUser.HomeLink}}">{{.i18n.Tr "home.show_more_repos"}}</a>
@@ -54,9 +52,9 @@
 							{{.i18n.Tr "home.collaborative_repos"}}
 						</h4>
 						<div class="ui attached table segment">
-							<ul id="collaborative-repo-list" class="search-list">
+							<ul id="collaborative-repo-list">
 								{{range .CollaborativeRepos}}
-									<li {{if .IsPrivate}}class="private"{{end}} data-title="{{.Name}}">
+									<li {{if .IsPrivate}}class="private"{{end}}>
 										<a href="{{AppSubUrl}}/{{.Owner.Name}}/{{.Name}}">
 											<i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
 											<span class="text truncate owner-and-repo">
@@ -74,7 +72,7 @@
 				</div>
 
 				{{if not .ContextUser.IsOrganization}}
-					<div class="ui tab list" data-tab="orgs">
+					<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">
@@ -102,7 +100,7 @@
 					</div>
 				{{end}}
 
-				<div class="ui tab list" data-tab="mirrors">
+				<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">