mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-06 03:46:39 +08:00
Merge pull request #1070 from okriuchykhin/ok_SCI_2223
Refactor smart annotations modal [SCI-2223]
This commit is contained in:
commit
6d68c5b9f4
8 changed files with 151 additions and 68 deletions
|
@ -39,16 +39,18 @@ var SmartAnnotation = (function() {
|
|||
dataUrl: $(document.body).attr('data-atwho-project-url')},
|
||||
EXPERIMENT: {tag: "exp",
|
||||
dataUrl: $(document.body).attr('data-atwho-experiment-url')},
|
||||
SAMPLE: {tag: "sam",
|
||||
dataUrl: $(document.body).attr('data-atwho-sample-url')},
|
||||
REPOSITORY: {tag: "rep",
|
||||
dataUrl: $(document.body).attr('data-atwho-rep-items-url')},
|
||||
MENU: {tag: "menu",
|
||||
dataUrl: $(document.body).attr('data-atwho-menu-items')}
|
||||
});
|
||||
var prevAt,
|
||||
// Default selected filter when using '#'
|
||||
DEFAULT_SEARCH_FILTER = FilterTypeEnum.SAMPLE,
|
||||
DEFAULT_SEARCH_FILTER = FilterTypeEnum.REPOSITORY,
|
||||
atWhoUpdating = false;
|
||||
|
||||
var defaultRepId;
|
||||
|
||||
// helper methods for AtWho callback
|
||||
function _templateEval(_tpl, map) {
|
||||
var res;
|
||||
|
@ -109,7 +111,7 @@ var SmartAnnotation = (function() {
|
|||
}
|
||||
|
||||
// Initialize or update dropdown header buttons
|
||||
function updateHeaderButtons(query, filterTypeTag) {
|
||||
function updateHeaderButtons(query, filterType) {
|
||||
var $currentAtWho = $('.atwho-view[style]');
|
||||
initDismissButton($currentAtWho);
|
||||
|
||||
|
@ -117,15 +119,25 @@ var SmartAnnotation = (function() {
|
|||
$currentAtWho.find('[data-filter]')
|
||||
.removeClass('btn-primary')
|
||||
.addClass('btn-default');
|
||||
$currentAtWho.find('[data-filter="' + filterTypeTag + '"]')
|
||||
.removeClass('btn-default')
|
||||
.addClass('btn-primary');
|
||||
if(filterType.tag === 'rep') {
|
||||
$currentAtWho.find('[data-rep-id="' + filterType.repository_id + '"]')
|
||||
.removeClass('btn-default')
|
||||
.addClass('btn-primary');
|
||||
} else {
|
||||
$currentAtWho.find('[data-filter="' + filterType.tag + '"]')
|
||||
.removeClass('btn-default')
|
||||
.addClass('btn-primary');
|
||||
}
|
||||
|
||||
// Update the selected filter button when clicking on one of them
|
||||
$currentAtWho.find('[data-filter]').off()
|
||||
.on('click', function(e) {
|
||||
if($(this).hasClass('btn-primary')) {
|
||||
return;
|
||||
}
|
||||
var $selectedBtn = $(this);
|
||||
var $prevBtn = $selectedBtn.closest('.title').children('.btn-primary');
|
||||
var $prevBtn = $selectedBtn.closest('.atwho-header-res')
|
||||
.children('.btn-primary');
|
||||
$selectedBtn.removeClass('btn-default').addClass('btn-primary');
|
||||
$prevBtn.removeClass('btn-primary').addClass('btn-default');
|
||||
|
||||
|
@ -136,16 +148,31 @@ var SmartAnnotation = (function() {
|
|||
|
||||
// Generates suggestion dropdown filter
|
||||
function generateFilterMenu(active, res_data) {
|
||||
var rep_buttons = '';
|
||||
$.ajax({
|
||||
async: false,
|
||||
dataType: 'json',
|
||||
url: $(document.body).attr('data-atwho-repositories-url'),
|
||||
success: function(data) {
|
||||
$.each(data['repositories'], function(id, name) {
|
||||
if(defaultRepId === undefined){
|
||||
defaultRepId = id;
|
||||
}
|
||||
rep_buttons += '<button data-filter="rep" data-rep-id="' + id +
|
||||
'" class="btn btn-xs btn-primary">' + name + '</button>';
|
||||
});
|
||||
}
|
||||
});
|
||||
var header = '<div class="atwho-header-res">' +
|
||||
'<div class="title">' +
|
||||
'<button data-filter="prj" class="btn btn-xs ' +
|
||||
(active === 'prj' ? 'btn-primary' : 'btn-default') + '">project#</button>' +
|
||||
'<button data-filter="exp" class="btn btn-xs ' +
|
||||
(active === 'exp' ? 'btn-primary' : 'btn-default') + '">experiment#</button>' +
|
||||
'<button data-filter="tsk" class="btn btn-xs ' +
|
||||
(active === 'tsk' ? 'btn-primary' : 'btn-default') + '">task#</button>' +
|
||||
'<button data-filter="sam" class="btn btn-xs ' +
|
||||
(active === 'sam' ? 'btn-primary' : 'btn-default') + '">sample#</button>' +
|
||||
'<button data-filter="prj" class="btn btn-xs btn-primary' +
|
||||
'">Projects</button>' +
|
||||
'<button data-filter="exp" class="btn btn-xs btn-primary' +
|
||||
'">Experiments</button>' +
|
||||
'<button data-filter="tsk" class="btn btn-xs btn-primary' +
|
||||
'">Tasks</button>' +
|
||||
rep_buttons +
|
||||
'<div class="dismiss">' +
|
||||
'<span class="glyphicon glyphicon-remove"></span>' +
|
||||
'</div>' +
|
||||
'<div class="help">' +
|
||||
'<div>' +
|
||||
|
@ -159,9 +186,6 @@ var SmartAnnotation = (function() {
|
|||
'<strong><%= I18n.t("atwho.users.dismiss_1") %></strong> ' +
|
||||
'<%= I18n.t("atwho.users.dismiss_2") %>' +
|
||||
'</div>' +
|
||||
'<div class="dismiss">' +
|
||||
'<span class="glyphicon glyphicon-remove"></span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
|
@ -193,8 +217,9 @@ var SmartAnnotation = (function() {
|
|||
case 'exp':
|
||||
res += '<span data-type class="res-type">' + map.type + '</span>';
|
||||
break;
|
||||
case 'sam':
|
||||
res += '<span class="glyphicon glyphicon-tint"></span>';
|
||||
case 'rep_item':
|
||||
res += '<span data-type class="res-type">' +
|
||||
map.repository_tag + '</span>';
|
||||
break;
|
||||
}
|
||||
|
||||
|
@ -287,9 +312,21 @@ var SmartAnnotation = (function() {
|
|||
$currentAtWho.removeAttr("style");
|
||||
}
|
||||
|
||||
var params = { query: query };
|
||||
|
||||
if(filterType.tag === 'rep') {
|
||||
params.repository_id = $currentAtWho
|
||||
.find('.btn-primary')
|
||||
.data('rep-id');
|
||||
if(params.repository_id === undefined) {
|
||||
params.repository_id = defaultRepId;
|
||||
}
|
||||
filterType.repository_id = params.repository_id;
|
||||
}
|
||||
|
||||
$.getJSON(
|
||||
filterType.dataUrl,
|
||||
{query: query},
|
||||
params,
|
||||
function(data) {
|
||||
// Updates dropdown
|
||||
if (data.res.length < 1) {
|
||||
|
@ -298,7 +335,7 @@ var SmartAnnotation = (function() {
|
|||
callback(data.res);
|
||||
}
|
||||
|
||||
updateHeaderButtons(query, filterType.tag);
|
||||
updateHeaderButtons(query, filterType);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
@ -389,7 +426,7 @@ var SmartAnnotation = (function() {
|
|||
},
|
||||
headerTpl:
|
||||
'<div class="atwho-header-res">' +
|
||||
'<div class="title title-user"><%= I18n.t("atwho.users.title") %></div>' +
|
||||
'<div class="title-user"><%= I18n.t("atwho.users.title") %></div>' +
|
||||
'<div class="help">' +
|
||||
'<div>' +
|
||||
'<strong><%= I18n.t("atwho.users.navigate_1") %></strong> ' +
|
||||
|
@ -403,21 +440,21 @@ var SmartAnnotation = (function() {
|
|||
'<strong><%= I18n.t("atwho.users.dismiss_1") %></strong> ' +
|
||||
'<%= I18n.t("atwho.users.dismiss_2") %>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="dismiss">' +
|
||||
'<span class="glyphicon glyphicon-remove"></span>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
|
||||
startsWithSpace: true,
|
||||
acceptSpaceBar: true,
|
||||
displayTimeout: 120000
|
||||
})
|
||||
.atwho(atWhoSettings('#', DEFAULT_SEARCH_FILTER));
|
||||
.atwho(atWhoSettings('#', DEFAULT_SEARCH_FILTER))
|
||||
// .atwho(atWhoSettings('task#', FilterTypeEnum.TASK)) Waiting for better times
|
||||
// .atwho(atWhoSettings('project#', FilterTypeEnum.PROJECT))
|
||||
// .atwho(atWhoSettings('experiment#', FilterTypeEnum.EXPERIMENT))
|
||||
// .atwho(atWhoSettings('sample#', FilterTypeEnum.SAMPLE));
|
||||
// .atwho(atWhoSettings('sample#', FilterTypeEnum.REPOSITORY));
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
@ -1549,8 +1549,8 @@ th.custom-field .modal-tooltiptext {
|
|||
border: 1px solid $color-emperor;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 5px $color-gainsboro;
|
||||
min-width: 520px;
|
||||
max-height: 200px;
|
||||
max-width: 800px;
|
||||
min-width: 700px;
|
||||
overflow: auto;
|
||||
z-index: 11110 !important;
|
||||
|
||||
|
@ -1594,33 +1594,20 @@ th.custom-field .modal-tooltiptext {
|
|||
// <End of overrides>
|
||||
|
||||
.atwho-header-res {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 7px;
|
||||
height: 34px;
|
||||
background-color: $color-concrete;
|
||||
border-bottom: 1px solid $color-emperor;
|
||||
clear: both;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 3px 5px;
|
||||
|
||||
> div {
|
||||
display: inline;
|
||||
.btn {
|
||||
border-radius: 4px;
|
||||
margin: 5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.title {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.btn:last-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-default {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.title-user {
|
||||
|
@ -1628,27 +1615,33 @@ th.custom-field .modal-tooltiptext {
|
|||
}
|
||||
|
||||
.help {
|
||||
float: right;
|
||||
padding-top: 4px;
|
||||
margin-left: auto;
|
||||
margin-right: 15px;
|
||||
order: 99;
|
||||
padding: 4px;
|
||||
white-space: nowrap;
|
||||
|
||||
div {
|
||||
display: inline;
|
||||
margin-right: 15px;
|
||||
font-size: smaller;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
div strong {
|
||||
strong {
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.dismiss {
|
||||
color: $color-emperor;
|
||||
}
|
||||
.dismiss {
|
||||
color: $color-emperor;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.dismiss:hover {
|
||||
color: $color-black;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dismiss:hover {
|
||||
color: $color-black;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -29,12 +29,28 @@ class AtWhoController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
def samples
|
||||
def rep_items
|
||||
res = SmartAnnotation.new(current_user, current_team, @query)
|
||||
repository = Repository.find_by_id(params[:repository_id])
|
||||
render_403 && return unless repository && can_read_team?(repository.team)
|
||||
respond_to do |format|
|
||||
format.json do
|
||||
render json: {
|
||||
res: res.samples,
|
||||
res: res.repository_rows(repository),
|
||||
status: :ok
|
||||
}
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def repositories
|
||||
repositories = @team.repositories.limit(Constants::REPOSITORIES_LIMIT)
|
||||
respond_to do |format|
|
||||
format.json do
|
||||
render json: {
|
||||
repositories: repositories.map do |r|
|
||||
[r.id, r.name.truncate(Constants::ATWHO_REP_NAME_LIMIT)]
|
||||
end.to_h,
|
||||
status: :ok
|
||||
}
|
||||
end
|
||||
|
|
|
@ -97,4 +97,36 @@ class SmartAnnotation
|
|||
end
|
||||
samples_list
|
||||
end
|
||||
|
||||
def repository_rows(repository)
|
||||
res = RepositoryRow
|
||||
.where(repository: repository)
|
||||
.where_attributes_like('name', @query)
|
||||
.limit(Constants::ATWHO_SEARCH_LIMIT)
|
||||
rep_items_list = []
|
||||
splitted_name = repository.name.gsub(/[^0-9a-z ]/i, '').split
|
||||
repository_tag =
|
||||
case splitted_name.length
|
||||
when 1
|
||||
splitted_name[0][0..2]
|
||||
when 2
|
||||
if splitted_name[0].length == 1
|
||||
splitted_name[0][0] + splitted_name[1][0..1]
|
||||
else
|
||||
splitted_name[0][0..1] + splitted_name[1][0]
|
||||
end
|
||||
else
|
||||
splitted_name[0][0] + splitted_name[1][0] + splitted_name[2][0]
|
||||
end
|
||||
repository_tag.downcase!
|
||||
res.each do |rep_row|
|
||||
rep_item = {}
|
||||
rep_item['id'] = rep_row.id.base62_encode
|
||||
rep_item['name'] = sanitize(rep_row.name)
|
||||
rep_item['repository_tag'] = repository_tag
|
||||
rep_item['type'] = 'rep_item'
|
||||
rep_items_list << rep_item
|
||||
end
|
||||
rep_items_list
|
||||
end
|
||||
end
|
||||
|
|
|
@ -22,7 +22,8 @@
|
|||
data-atwho-task-url="<%= atwho_my_modules_team_path(current_team) %>"
|
||||
data-atwho-project-url="<%= atwho_projects_team_path(current_team) %>"
|
||||
data-atwho-experiment-url="<%= atwho_experiments_team_path(current_team) %>"
|
||||
data-atwho-sample-url="<%= atwho_samples_team_path(current_team) %>"
|
||||
data-atwho-repositories-url="<%= atwho_repositories_team_path(current_team) %>"
|
||||
data-atwho-rep-items-url="<%= atwho_rep_items_team_path(current_team) %>"
|
||||
data-atwho-menu-items="<%= atwho_menu_items_team_path(current_team) %>"
|
||||
<% end %>
|
||||
>
|
||||
|
|
|
@ -51,6 +51,9 @@ class Constants
|
|||
# Maximum nr. of search results for atwho (smart annotations)
|
||||
ATWHO_SEARCH_LIMIT = 5
|
||||
|
||||
# Max characters for repository name in Atwho modal
|
||||
ATWHO_REP_NAME_LIMIT = 16
|
||||
|
||||
# Maximum number of repositories per team allowed
|
||||
REPOSITORIES_LIMIT = 5
|
||||
|
||||
|
|
|
@ -181,7 +181,8 @@ Rails.application.routes.draw do
|
|||
post 'export_repository', to: 'repositories#export_repository'
|
||||
# Used for atwho (smart annotations)
|
||||
get 'atwho_users', to: 'at_who#users'
|
||||
get 'atwho_samples', to: 'at_who#samples'
|
||||
get 'atwho_repositories', to: 'at_who#repositories'
|
||||
get 'atwho_rep_items', to: 'at_who#rep_items'
|
||||
get 'atwho_projects', to: 'at_who#projects'
|
||||
get 'atwho_experiments', to: 'at_who#experiments'
|
||||
get 'atwho_my_modules', to: 'at_who#my_modules'
|
||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue