Skip to content

Commit b3cfa5a

Browse files
harryxulafriks
harryxu
authored and
lafriks
committed
Use Semantic UI's Search component for user and repo search (#2636)
* Use search component on org invitation user input. * Search component for collaboration and members. * Search component for repo search. * minCharacters for search input * Display full_name for user search. * Fixed missing uid query parameter for repo search. * Removed unused comment.
1 parent a04718a commit b3cfa5a

File tree

7 files changed

+49
-109
lines changed

7 files changed

+49
-109
lines changed

‎public/css/index.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/index.js

Lines changed: 36 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1230,104 +1230,53 @@ function hideWhenLostFocus(body, parent) {
12301230
}
12311231

12321232
function searchUsers() {
1233-
if (!$('#search-user-box .results').length) {
1234-
return;
1235-
}
1236-
12371233
var $searchUserBox = $('#search-user-box');
1238-
var $results = $searchUserBox.find('.results');
1239-
$searchUserBox.keyup(function () {
1240-
var $this = $(this);
1241-
var keyword = $this.find('input').val();
1242-
if (keyword.length < 2) {
1243-
$results.hide();
1244-
return;
1245-
}
1234+
$searchUserBox.search({
1235+
minCharacters: 2,
1236+
apiSettings: {
1237+
url: suburl + '/api/v1/users/search?q={query}',
1238+
onResponse: function(response) {
1239+
var items = [];
1240+
$.each(response.data, function (i, item) {
1241+
var title = item.login;
1242+
if (item.full_name && item.full_name.length > 0) {
1243+
title += ' (' + item.full_name + ')';
1244+
}
1245+
items.push({
1246+
title: title,
1247+
image: item.avatar_url
1248+
})
1249+
});
12461250

1247-
$.ajax({
1248-
url: suburl + '/api/v1/users/search?q=' + keyword,
1249-
dataType: "json",
1250-
success: function (response) {
1251-
var notEmpty = function (str) {
1252-
return str && str.length > 0;
1253-
};
1254-
1255-
$results.html('');
1256-
1257-
if (response.ok && response.data.length) {
1258-
var html = '';
1259-
$.each(response.data, function (i, item) {
1260-
html += '<div class="item"><img class="ui avatar image" src="' + item.avatar_url + '"><span class="username">' + item.login + '</span>';
1261-
if (notEmpty(item.full_name)) {
1262-
html += ' (' + item.full_name + ')';
1263-
}
1264-
html += '</div>';
1265-
});
1266-
$results.html(html);
1267-
$this.find('.results .item').click(function () {
1268-
$this.find('input').val($(this).find('.username').text());
1269-
$results.hide();
1270-
});
1271-
$results.show();
1272-
} else {
1273-
$results.hide();
1274-
}
1251+
return { results: items }
12751252
}
1276-
});
1277-
});
1278-
$searchUserBox.find('input').focus(function () {
1279-
$searchUserBox.keyup();
1253+
},
1254+
searchFields: ['login', 'full_name'],
1255+
showNoResults: false
12801256
});
1281-
hideWhenLostFocus('#search-user-box .results', '#search-user-box');
12821257
}
12831258

1284-
// FIXME: merge common parts in two functions
12851259
function searchRepositories() {
1286-
if (!$('#search-repo-box .results').length) {
1287-
return;
1288-
}
1289-
12901260
var $searchRepoBox = $('#search-repo-box');
1291-
var $results = $searchRepoBox.find('.results');
1292-
$searchRepoBox.keyup(function () {
1293-
var $this = $(this);
1294-
var keyword = $this.find('input').val();
1295-
if (keyword.length < 2) {
1296-
$results.hide();
1297-
return;
1298-
}
1299-
1300-
$.ajax({
1301-
url: suburl + '/api/v1/repos/search?q=' + keyword + "&uid=" + $searchRepoBox.data('uid'),
1302-
dataType: "json",
1303-
success: function (response) {
1304-
var notEmpty = function (str) {
1305-
return str && str.length > 0;
1306-
};
1307-
1308-
$results.html('');
1261+
$searchRepoBox.search({
1262+
minCharacters: 2,
1263+
apiSettings: {
1264+
url: suburl + '/api/v1/repos/search?q={query}&uid=' + $searchRepoBox.data('uid'),
1265+
onResponse: function(response) {
1266+
var items = [];
1267+
$.each(response.data, function (i, item) {
1268+
items.push({
1269+
title: item.full_name.split("/")[1],
1270+
description: item.full_name
1271+
})
1272+
});
13091273

1310-
if (response.ok && response.data.length) {
1311-
var html = '';
1312-
$.each(response.data, function (i, item) {
1313-
html += '<div class="item"><i class="icon octicon octicon-repo"></i> <span class="fullname">' + item.full_name + '</span></div>';
1314-
});
1315-
$results.html(html);
1316-
$this.find('.results .item').click(function () {
1317-
$this.find('input').val($(this).find('.fullname').text().split("/")[1]);
1318-
$results.hide();
1319-
});
1320-
$results.show();
1321-
} else {
1322-
$results.hide();
1323-
}
1274+
return { results: items }
13241275
}
1325-
});
1326-
});
1327-
$searchRepoBox.find('input').focus(function () {
1328-
$searchRepoBox.keyup();
1276+
},
1277+
searchFields: ['full_name'],
1278+
showNoResults: false
13291279
});
1330-
hideWhenLostFocus('#search-repo-box .results', '#search-repo-box');
13311280
}
13321281

13331282
function initCodeView() {

‎public/less/_repository.less

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1345,20 +1345,15 @@
13451345
#search-repo-box,
13461346
#search-user-box {
13471347
.results {
1348-
padding: 0;
1349-
position: absolute;
1350-
1351-
.item {
1352-
padding: 10px 15px;
1353-
border-bottom: 1px solid #DDD;
1354-
cursor: pointer;
1355-
1356-
&:hover {
1357-
background: rgba(0,0,0,.05)!important;
1358-
color: rgba(0,0,0,.95)!important;
1359-
}
1360-
img {
1348+
.result {
1349+
.image {
1350+
float: left;
13611351
margin-right: 8px;
1352+
width: 2em;
1353+
height: 2em;
1354+
}
1355+
.content {
1356+
margin: 6px 0;
13621357
}
13631358
}
13641359
}

‎templates/org/member/invite.tmpl

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@
88
<form class="ui form" action="{{.Link}}" method="post">
99
{{.CsrfTokenHtml}}
1010
<div class="inline field ui left">
11-
<div id="search-user-box">
11+
<div id="search-user-box" class="ui search">
1212
<div class="ui input">
1313
<input class="prompt" name="uname" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
1414
</div>
15-
<div class="ui segment results hide"></div>
1615
</div>
1716
</div>
1817
<button class="ui blue button">{{.i18n.Tr "org.members.invite_now"}}</button>

‎templates/org/team/members.tmpl

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,10 @@
2828
{{.CsrfTokenHtml}}
2929
<input type="hidden" name="uid" value="{{.SignedUser.ID}}">
3030
<div class="inline field ui left">
31-
<div id="search-user-box">
31+
<div id="search-user-box" class="ui search">
3232
<div class="ui input">
3333
<input class="prompt" name="uname" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" required>
3434
</div>
35-
<div class="ui segment results hide"></div>
3635
</div>
3736
</div>
3837
<button class="ui green button">{{.i18n.Tr "org.teams.add_team_member"}}</button>

‎templates/org/team/repositories.tmpl

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,10 @@
2828
<form class="ui form" id="add-repo-form" action="{{$.OrgLink}}/teams/{{$.Team.LowerName}}/action/repo/add" method="post">
2929
{{.CsrfTokenHtml}}
3030
<div class="inline field ui left">
31-
<div id="search-repo-box" data-uid="{{.Org.ID}}">
31+
<div id="search-repo-box" data-uid="{{.Org.ID}}" class="ui search">
3232
<div class="ui input">
3333
<input class="prompt" name="repo_name" placeholder="{{.i18n.Tr "org.teams.search_repo_placeholder"}}" autocomplete="off" required>
3434
</div>
35-
<div class="ui segment results hide"></div>
3635
</div>
3736
</div>
3837
<button class="ui green button">{{.i18n.Tr "org.teams.add_team_repository"}}</button>

‎templates/repo/settings/collaboration.tmpl

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,10 @@
4242
<form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
4343
{{.CsrfTokenHtml}}
4444
<div class="inline field ui left">
45-
<div id="search-user-box">
45+
<div id="search-user-box" class="ui search">
4646
<div class="ui input">
4747
<input class="prompt" name="collaborator" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
4848
</div>
49-
<div class="ui segment results hide"></div>
5049
</div>
5150
</div>
5251
<button class="ui green button">{{.i18n.Tr "repo.settings.add_collaborator"}}</button>

0 commit comments

Comments
 (0)