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
Lunny Xiao
parent
2c6a0fdca8
commit
7455604f0c
2 changed files with 74 additions and 46 deletions
|
|
@ -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() {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue