githaven-fork/templates/user/dashboard/repolist.tmpl

<div id="app" class="six wide column">
	<repo-search
	:search-limit="searchLimit"
	:suburl="suburl"
	:uid="uid"
	:more-repos-link="'{{.ContextUser.HomeLink}}'"
	{{if not .ContextUser.IsOrganization}}
	:organizations="[
	{{range .ContextUser.Orgs}}
	{name: '{{.Name}}', num_repos: '{{.NumRepos}}'},
	{{end}}
	]"
	: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 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 dashboard-repos">
			<h4 class="ui top attached header">
				{{.i18n.Tr "home.my_repos"}} <span class="ui grey label">${reposTotalCount}</span>
				{{if or (not .ContextUser.IsOrganization) .IsOrganizationOwner}}
				<div class="ui right">
					<a class="poping up" :href="suburl + '/repo/create{{if .ContextUser.IsOrganization}}?org={{.ContextUser.ID}}{{end}}'" 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>
				{{end}}
			</h4>
			<div class="ui attached secondary segment repos-search">
				<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
					<input @input="searchRepos(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
					<i class="search icon"></i>
					<div class="ui dropdown button" title="{{.i18n.Tr "home.filter"}}">
						<i class="icon filter"></i>
						<div class="menu">
							<div class="item">
								<a @click="toggleArchivedFilter()">
									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_both_archived_unarchived"}}" v-if="archivedFilter === 'both'">
										<input type="checkbox">
										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
									</div>
									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_only_unarchived"}}" v-if="archivedFilter === 'unarchived'">
										<input type="checkbox">
										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
									</div>
									<div class="ui checkbox" id="archivedFilterCheckbox" title="{{.i18n.Tr "home.show_only_archived"}}" v-if="archivedFilter === 'archived'">
										<input type="checkbox">
										<label><i class="archive icon archived-icon"></i>{{.i18n.Tr "home.show_archived"}}</label>
									</div>
								</a>
							</div>
							<div class="item">
								<a @click="togglePrivateFilter()">
									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_both_private_public"}}" v-if="privateFilter === 'both'">
										<input type="checkbox">
										<label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label>
									</div>
									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_public"}}" v-if="privateFilter === 'public'">
										<input type="checkbox">
										<label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label>
									</div>
									<div class="ui checkbox" id="privateFilterCheckbox" title="{{.i18n.Tr "home.show_only_private"}}" v-if="privateFilter === 'private'">
										<input type="checkbox">
										<label><svg class="svg octicon-lock" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-lock" /></svg>{{.i18n.Tr "home.show_private"}}</label>
									</div>
								</a>
							</div>
						</div>
					</div>
				</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"}}
						<div v-show="reposFilter === 'all'" class="ui circular mini grey label">${repoTypeCount}</div>
					</a>
					<a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
						{{.i18n.Tr "sources"}}
						<div v-show="reposFilter === 'sources'" class="ui circular mini grey label">${repoTypeCount}</div>
					</a>
					<a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
						{{.i18n.Tr "forks"}}
						<div v-show="reposFilter === 'forks'" class="ui circular mini grey label">${repoTypeCount}</div>
					</a>
					<a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')">
						{{.i18n.Tr "mirrors"}}
						<div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">${repoTypeCount}</div>
					</a>
					<a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
						{{.i18n.Tr "collaborative"}}
						<div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">${repoTypeCount}</div>
					</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}">
						<a :href="suburl + '/' + repo.full_name">
							<svg :class="'svg ' + repoClass(repo)" width="16" height="16" aria-hidden="true"><use :xlink:href="'#' + repoClass(repo)" /></svg>
							<strong class="text truncate item-name">${repo.full_name}</strong>
							<i v-if="repo.archived" class="archive icon archived-icon"></i>
							<span class="ui right text light grey">
								${repo.stars_count} <span class="rear">{{svg "octicon-star" 16}}</span>
							</span>
						</a>
					</li>
					<li v-if="showMoreReposLink">
						<div class="center">
							<div class="ui borderless pagination menu narrow">
								<a class="item navigation" :class="{'disabled': page === 1}"
									@click="changePage(1)" title="{{$.i18n.Tr "admin.first_page"}}">
									<i class="angle double left icon"></i>
								</a>
								<a class="item navigation" :class="{'disabled': page === 1}"
									@click="changePage(page - 1)" title="{{$.i18n.Tr "repo.issues.previous"}}">
									<i class="left arrow icon"></i>
								</a>
								<a class="active item">${page}</a>
								<a class="item navigation" :class="{'disabled': page === finalPage}"
									@click="changePage(page + 1)" title="{{$.i18n.Tr "repo.issues.next"}}">
									<i class="icon right arrow"></i>
								</a>
								<a class="item navigation" :class="{'disabled': page === finalPage}"
									@click="changePage(finalPage)" title="{{$.i18n.Tr "admin.last_page"}}">
									<i class="angle double right icon"></i>
								</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list">
			<h4 class="ui top attached header">
				{{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">${organizationsTotalCount}</span>
				<div v-if="canCreateOrganization" class="ui right">
					<a class="poping up" :href="suburl + '/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>
				</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">
							{{svg "octicon-organization" 16}}
							<strong class="text truncate item-name">${org.name}</strong>
							<span class="ui right text light grey">
								${org.num_repos} <span class="rear">{{svg "octicon-repo" 16}}</span>
							</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</repo-search>
</div>