Remove (almost) server side data rendering from repo-search component (#2317)

* Rename some shorthands

* Remove (almost) server side data rendering from repo-search component template
This commit is contained in:
Morlinest 2017-08-22 15:00:34 +02:00 committed by Lunny Xiao
parent 2c6a0fdca8
commit 7455604f0c
2 changed files with 74 additions and 46 deletions

View file

@ -1687,13 +1687,33 @@ function initVueComponents(){
type: Number, type: Number,
required: true required: true
}, },
organizations: {
type: Array,
default: []
},
isOrganization: {
type: Boolean,
default: true
},
canCreateOrganization: {
type: Boolean,
default: false
},
organizationsTotalCount: {
type: Number,
default: 0
},
moreReposLink: {
type: String,
default: ''
}
}, },
data: function() { data: function() {
return { return {
tab: 'repos', tab: 'repos',
repos: [], repos: [],
reposTotal: 0, reposTotalCount: 0,
reposFilter: 'all', reposFilter: 'all',
searchQuery: '', searchQuery: '',
isLoading: false isLoading: false
@ -1741,7 +1761,7 @@ function initVueComponents(){
if (searchedQuery == self.searchQuery) { if (searchedQuery == self.searchQuery) {
self.repos = result.data; self.repos = result.data;
if (searchedQuery == "") { if (searchedQuery == "") {
self.reposTotal = request.getResponseHeader('X-Total-Count'); self.reposTotalCount = request.getResponseHeader('X-Total-Count');
} }
} }
}).always(function() { }).always(function() {

View file

@ -8,19 +8,34 @@
{{template "user/dashboard/feeds" .}} {{template "user/dashboard/feeds" .}}
</div> </div>
<div id="app" class="six wide column"> <div id="app" class="six wide column">
<repo-search :search-limit="searchLimit" :suburl="suburl" :uid="uid" inline-template v-cloak> <repo-search
<div> :search-limit="searchLimit"
{{if not .ContextUser.IsOrganization}} :suburl="suburl"
<div class="ui two item stackable tabable menu"> :uid="uid"
<a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{.i18n.Tr "repository"}}</a> :more-repos-link="'{{.ContextUser.HomeLink}}'"
<a :class="{item: true, active: tab === 'orgs'}" @click="changeTab('orgs')">{{.i18n.Tr "organization"}}</a> {{if not .ContextUser.IsOrganization}}
</div> :organizations="[
{{range .ContextUser.Orgs}}
{name: '{{.Name}}', num_repos: '{{.NumRepos}}'},
{{end}} {{end}}
<div v-if="tab === 'repos'" class="ui tab active list"> ]"
:is-organization="false"
:organizations-total-count="{{.ContextUser.GetOrganizationCount}}"
:can-create-organization="{{.SignedUser.CanCreateOrganization}}"
{{end}}
inline-template
v-cloak
>
<div>
<div v-if="!isOrganization" 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 === 'organizations'}" @click="changeTab('organizations')">{{.i18n.Tr "organization"}}</a>
</div>
<div v-show="tab === 'repos'" class="ui tab active list">
<h4 class="ui top attached header"> <h4 class="ui top attached header">
{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${ reposTotal }</span> {{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${reposTotalCount}</span>
<div class="ui right"> <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"> <a class="poping up" :href="suburl + '/repo/create>'" data-content="{{.i18n.Tr "new_repo"}}" data-variation="tiny inverted" data-position="left center">
<i class="plus icon"></i> <i class="plus icon"></i>
<span class="sr-only">{{.i18n.Tr "new_repo"}}</span> <span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
</a> </a>
@ -42,51 +57,44 @@
<div class="ui attached table segment"> <div class="ui attached table segment">
<ul class="repo-owner-name-list"> <ul class="repo-owner-name-list">
<li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)"> <li v-for="repo in repos" :class="{'private': repo.private}" v-show="showRepo(repo, reposFilter)">
<a :href="'{{AppSubUrl}}/' + repo.full_name"> <a :href="suburl + '/' + repo.full_name">
<i :class="repoClass(repo)"></i> <i :class="repoClass(repo)"></i>
<strong class="text truncate item-name">${ repo.full_name }</strong> <strong class="text truncate item-name">${repo.full_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> ${repo.stars_count} <i class="octicon octicon-star rear"></i>
</span> </span>
</a> </a>
</li> </li>
<li v-if="repos.length < reposTotal"> <li v-if="repos.length < reposTotalCount">
<a href="{{.ContextUser.HomeLink}}">{{.i18n.Tr "home.show_more_repos"}}</a> <a :href="moreReposLink">{{.i18n.Tr "home.show_more_repos"}}</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list">
{{if not .ContextUser.IsOrganization}} <h4 class="ui top attached header">
<div v-if="tab === 'orgs'" class="ui tab active list"> {{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">${organizationsTotalCount}</span>
<h4 class="ui top attached header"> <div v-if="canCreateOrganization" class="ui right">
{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">{{.ContextUser.GetOrganizationCount}}</span> <a class="poping up" :href="suburl + '/org/create'" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center">
<div class="ui right"> <i class="plus icon"></i>
{{if .SignedUser.CanCreateOrganization}} <span class="sr-only">{{.i18n.Tr "new_org"}}</span>
<a class="poping up" href="{{AppSubUrl}}/org/create" data-content="{{.i18n.Tr "new_org"}}" data-variation="tiny inverted" data-position="left center"> </a>
<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>
</h4>
<div class="ui attached table segment">
<ul class="repo-owner-name-list">
<li v-for="org in organizations">
<a :href="suburl + '/' + org.name">
<i class="octicon octicon-organization"></i>
<strong class="text truncate item-name">${org.name}</strong>
<span class="ui right text light grey">
${org.num_repos} <i class="octicon octicon-repo rear"></i>
</span>
</a>
</li>
</ul>
</div> </div>
{{end}} </div>
</div> </div>
</repo-search> </repo-search>
</div> </div>