scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 23:16:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Finish main part of selectors

Browse source
This commit is contained in:
Anton Ignatov 2019-08-06 15:25:52 +02:00 committed by aignatov-bio
parent f832cfbbd4
commit 7b855f54ac
7 changed files with 330 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/assets/javascripts/global_activities/side_pane.js
View file

@ -22,12 +22,12 @@ function GlobalActivitiesFiltersGetDates() {
}
function GlobalActivitiesFilterPrepareArray() {
var teamFilter = ($('.ga-side .team-selector select').val() || [])
.map(e => { return parseInt(e, 10); });
var userFilter = ($('.ga-side .user-selector select').val() || [])
.map(e => { return parseInt(e, 10); });
var activityFilter = ($('.ga-side .activity-selector select').val() || [])
.map(e => { return parseInt(e, 10); });
//var teamFilter = ($('.ga-side .team-selector select').val() || [])
// .map(e => { return parseInt(e, 10); });
//var userFilter = ($('.ga-side .user-selector select').val() || [])
// .map(e => { return parseInt(e, 10); });
//var activityFilter = ($('.ga-side .activity-selector select').val() || [])
// .map(e => { return parseInt(e, 10); });
var subjectFilter = {};
$.each(($('.ga-side .subject-selector select').val() || []), function(index, object) {
var splitObject = object.split('_');
@ -36,14 +36,14 @@ function GlobalActivitiesFilterPrepareArray() {
});
// Clear request parameters if all options are selected
if (activityFilter.length === $('.ga-side .activity-selector option').length) {
activityFilter = [];
}
//if (activityFilter.length === $('.ga-side .activity-selector option').length) {
// activityFilter = [];
//}
return {
teams: teamFilter,
users: userFilter,
types: activityFilter,
teams: [],
users: [],
types: [],
subjects: subjectFilter,
from_date: GlobalActivitiesFiltersGetDates().from,
to_date: GlobalActivitiesFiltersGetDates().to
@ -52,7 +52,7 @@ function GlobalActivitiesFilterPrepareArray() {
$(function() {
var updateRunning = false;
var selectors = ['user', 'team'];
var selectors = [];
// Ajax request for object search
var subjectAjaxQuery = {
url: '/global_activities/search_subjects',
@ -88,7 +88,25 @@ $(function() {
return (state.label ? state.label + ': ' : '') + state.text;
};
dropdownSelector.init('.activity-selector #activity')
var ajaxParams = function(params) {
var filter = GlobalActivitiesFilterPrepareArray();
filter.query = params.query;
return filter;
}
dropdownSelector.init('.activity-selector select')
dropdownSelector.init('.user-selector select', {
ajaxParams: ajaxParams
})
dropdownSelector.init('.team-selector select', {
ajaxParams: ajaxParams
})
dropdownSelector.init('.subject-selector select', {
tagLabel: function(data) {
return I18n.t('global_activities.subject_name.' + data.group.toLowerCase()) + ': ' + data.label
},
ajaxParams: ajaxParams
})
var ajaxQuery = {};
$.each(selectors, (index, e) => {
@ -242,7 +260,7 @@ $(function() {
});
// Object selection intialize
$('.ga-side .subject-selector select').select2Multiple({
/*$('.ga-side .subject-selector select').select2Multiple({
ajax: subjectAjaxQuery,
customSelection: subjectCustomDisplay,
unlimitedSize: true
@ -253,6 +271,7 @@ $(function() {
$('.ga-side .subject-selector .clear').click(function() {
$('.ga-side .subject-selector select').select2MultipleClearAll();
});
*/
$('.ga-tags-container .clear-container span').click(function() {
updateRunning = true;

312
app/assets/javascripts/sitewide/dropdown_selector.js
View file

@ -1,30 +1,64 @@
var dropdownSelector = (function() {
function generateDropdown(selector){
function generateDropdown(selector, config = {}){
var selectElement = $(selector)
var optionContainer;
var dropdownContainer = selectElement.after('<div class="dropdown-selector-container"></div>').next()
var dropdownContainer = selectElement.after(`<div class="dropdown-selector-container"></div>`).next()
selectElement.data('config', config)
$(`
<div class="input-field"></div>
<input type="hidden" class="data-field" value="[]">
<div class="dropdown-container"></div>
<div class="input-field">
<input type="text" class="seacrh-field" placeholder="${selectElement.data('placeholder')}"></input>
</div>
<input type="hidden" class="data-field" value="[]">
`).appendTo(dropdownContainer)
if (selectElement.data('select-all-button')){
$(`<div class="dropdown-select-all btn">${selectElement.data('select-all-button')}</div>`)
.appendTo(dropdownContainer.find('.dropdown-container'))
.click(() => {
if (allOptionsSelected(selectElement, dropdownContainer) || selectElement.data('ajax-url')) {
dropdownContainer.find('.dropdown-group, .dropdown-option').removeClass('select')
} else {
dropdownContainer.find('.dropdown-group, .dropdown-option').addClass('select')
}
saveData(selectElement, dropdownContainer)
})
}
dropdownContainer.find('.seacrh-field').keyup(() => {
loadData(selectElement, dropdownContainer)
}).click((e) =>{
e.stopPropagation()
if (dropdownContainer.hasClass("open")) {
loadData(selectElement, dropdownContainer)
} else {
dropdownContainer.find('.input-field').click()
}
})
ps = new PerfectScrollbar(dropdownContainer.find('.dropdown-container')[0])
activePSB.push(ps)
optionContainer = dropdownContainer.find('.dropdown-container')
dropdownContainer.find('.input-field').click(() => {
optionContainer.find('.dropdown-group, .dropdown-option').remove()
$('.dropdown-selector-container').removeClass('active')
dropdownContainer.addClass("active")
$(".dropdown-selector-container:not(.active)").removeClass('open');
optionContainer.scrollTo(0)
dropdownContainer.toggleClass("open")
if (dropdownContainer.hasClass("open")) {
loadData(selectElement , dropdownContainer)
updateDropdownDirection(dropdownContainer)
loadData(selectElement, dropdownContainer)
updateDropdownDirection(selectElement, dropdownContainer)
}
})
$(window).resize(function(){
updateDropdownDirection(dropdownContainer)
updateDropdownDirection(selectElement, dropdownContainer)
})
$(window).click(() => {
@ -35,30 +69,43 @@ var dropdownSelector = (function() {
})
selectElement.css('display', 'none')
updateDropdownDirection(selectElement, dropdownContainer)
}
function updateDropdownDirection(container) {
function updateDropdownDirection(selector, container) {
var windowHeight = $(window).height()
var containerPosition = container[0].getBoundingClientRect().top
var containerHeight = container[0].getBoundingClientRect().height
var containerWidth = container[0].getBoundingClientRect().width
var bottomSpace = windowHeight - containerPosition - containerHeight
if (bottomSpace < 232) {
if (bottomSpace < 280) {
container.addClass('inverse')
container.find('.dropdown-container').css('max-height', (containerPosition - 82) + 'px')
.css('margin-bottom', (containerPosition * -1) + 'px')
.css('width', containerWidth + 'px')
} else {
container.removeClass('inverse')
container.find('.dropdown-container').css('max-height', (bottomSpace - 32) + 'px')
.css('width', '')
}
}
function loadData(selector, container) {
function loadData(selector, container, ajaxData = null) {
var data
if (ajaxData) {
data = ajaxData
} else {
data = dataSource(selector, container)
}
function drawOption(option) {
function drawOption(option, group = null) {
return $(`
<div class="dropdown-option checkbox-icon"
data-label="${option.innerHTML}"
data-label="${option.label}"
data-group="${group ? group.value : ''}"
data-value="${option.value}">
${option.innerHTML}
${option.label}
</div>"
`)
}
@ -75,14 +122,15 @@ var dropdownSelector = (function() {
$(this).toggleClass('select')
saveData(selector, container)
}
container.find('.dropdown-group, .dropdown-option').remove()
if (!data || !data.length) return
if (selector.data('select-by-group')){
var groups = selector.find('optgroup')
$.each(groups, function(gi, group) {
$.each(data, function(gi, group) {
var groupElement = drawGroup(group)
$.each($(group).find('option'), function(oi, option) {
optionElement = drawOption(option)
$.each(group.options, function(oi, option) {
optionElement = drawOption(option, group)
optionElement.click(clickOption)
optionElement.appendTo(groupElement)
})
@ -98,8 +146,7 @@ var dropdownSelector = (function() {
groupElement.appendTo(container.find('.dropdown-container'))
})
} else {
options = selector.find('option')
$.each(options, function(oi, option) {
$.each(data, function(oi, option) {
optionElement = drawOption(option)
optionElement.click(clickOption)
optionElement.appendTo(container.find('.dropdown-container'))
@ -107,9 +154,155 @@ var dropdownSelector = (function() {
}
PerfectSb().update_all()
refreshDropdownSelection(selector, container)
}
function saveData(selector, container) {
container.find('.seacrh-field').val('')
var selectArray = JSON.parse(container.find('.data-field').val())
$.each(container.find('.dropdown-container .dropdown-option'), function(oi ,option){
var alreadySelected;
var toDelete;
var newOption;
if ($(option).hasClass('select') ) {
alreadySelected = selectArray.findIndex(x => (x.value === option.dataset.value && x.group === option.dataset.group))
if (alreadySelected == -1) {
newOption = {
label: option.dataset.label,
value: option.dataset.value,
group: option.dataset.group
}
selectArray.push(newOption)
}
} else {
toDelete = selectArray.findIndex(x => (x.value === option.dataset.value && x.group === option.dataset.group))
if (toDelete >= 0) selectArray.splice(toDelete,1)
}
})
container.find('.data-field').val(JSON.stringify(selectArray))
updateTags(selector, container)
}
function updateTags(selector, container) {
var selectedOptions = JSON.parse(container.find('.data-field').val())
var searchFieldValue = container.find('.seacrh-field')
function drawTag(data) {
customLabel = selector.data('config').tagLabel
var tag = $(`<div class="ds-tags" >
<div class="tag-label"
data-ds-tag-group="${data.group}"
data-ds-tag-id=${data.value}>
${customLabel ? customLabel(data) : data.label}
</div>
<i class="fas fa-times"></i>
</div>`).insertBefore(container.find('.input-field .seacrh-field'))
tag.click((e) => {e.stopPropagation()});
tag.find('.fa-times').click(function(e) {
var tagLabel = $(this).prev()
e.stopPropagation()
tagLabel.addClass('closing')
setTimeout(() => {
if (selector.data('combine-tags')) {
container.find('.data-field').val('[]')
updateTags(selector, container)
} else {
selectedOptions = JSON.parse(container.find('.data-field').val())
toDelete = selectedOptions.findIndex(x => (x.value == tagLabel.data('ds-tag-id') && x.group == tagLabel.data('ds-tag-group')))
selectedOptions.splice(toDelete,1)
container.find('.data-field').val(JSON.stringify(selectedOptions))
updateTags(selector, container)
}
}, 150)
});
}
container.find('.ds-tags').remove()
if (selector.data('combine-tags')){
if (selectedOptions.length === 1) {
drawTag({label: selectedOptions[0].label, value: selectedOptions[0].value})
} else if (allOptionsSelected(selector, container)) {
drawTag({label: selector.data('select-multiple-all-selected'), value: 0})
} else if (selectedOptions.length > 1) {
drawTag({label: selectedOptions.length + ' ' + selector.data('select-multiple-name'), value: 0})
}
} else {
$.each(selectedOptions, (ti, tag) => {
drawTag(tag)
})
}
searchFieldValue.attr("placeholder",
selectedOptions.length > 0 ? '' : selector.data('placeholder'));
if (selectedOptions.length > 1) {
container.find('.ds-tags').addClass('stretch')
} else {
container.find('.ds-tags').removeClass('stretch')
}
updateDropdownDirection(selector, container)
refreshDropdownSelection(selector, container)
}
function dataSource(selector, container){
var result = [];
var groups;
var options;
var defaultParams;
var customParams;
var ajaxParams;
if (selector.data('ajax-url')){
defaultParams = { query: container.find('.seacrh-field').val() }
customParams = selector.data('config').ajaxParams
ajaxParams = customParams ? customParams(defaultParams) : defaultParams
$.get(selector.data('ajax-url'), ajaxParams, (data) => {
loadData(selector, container, data)
})
}else{
if (selector.data('select-by-group')){
groups = selector.find('optgroup');
$.each(groups, (gi, group) => {
var groupElement = {label: group.label, value: group.label, options: []}
var groupOptions = filterOptions(container, $(group).find('option'))
$.each(groupOptions, function(oi, option) {
groupElement.options.push({label: option.innerHTML, value: option.value})
})
if (groupElement.options.length > 0) result.push(groupElement)
})
} else {
options = filterOptions(container, selector.find('option'))
$.each(options, function(oi, option) {
result.push({label: option.innerHTML, value: option.value})
})
}
}
return result
}
function filterOptions(container, options) {
var searchQuery = container.find('.seacrh-field').val()
if (searchQuery.length == 0) return options
return $.grep( options, (n) => {
return n.label.toLowerCase().includes(searchQuery.toLowerCase());
});
}
function allOptionsSelected(selector, container){
return JSON.parse(container.find('.data-field').val()).length === selector.find('option').length && !(selector.data('ajax-url'))
}
function refreshDropdownSelection(selector, container){
container.find('.dropdown-option, .dropdown-group').removeClass('select')
$.each(JSON.parse(container.find('.data-field').val()), function(i, selectedOption) {
container.find('.dropdown-container .dropdown-option[data-value="' + selectedOption.value + '"]').addClass('select')
container.find('.dropdown-option[data-value="' + selectedOption.value + '"][data-group="' + selectedOption.group + '"]')
.addClass('select')
})
if (selector.data('select-by-group')){
$.each(container.find('.dropdown-group'), function(gi, group) {
@ -120,77 +313,18 @@ var dropdownSelector = (function() {
}
}
function saveData(selector, container) {
var oldSelect = JSON.parse(container.find('.data-field').val())
var newSelect = []
$.each(container.find('.dropdown-container .dropdown-option.select'), function(oi ,option){
newSelect.push({
label: option.dataset.label,
value: option.dataset.value
})
})
$.each(oldSelect, function(oldValue){
})
container.find('.data-field').val(JSON.stringify(selectArray))
updateTags(selector, container)
}
function updateTags(selector, container) {
selectedOptions = JSON.parse(container.find('.data-field').val())
function drawTag(label, tagId) {
var tag = $(`<div class="ds-tags" >
<div class="tag-label" data-ds-tag-id=${tagId}>${label}</div>
<i class="fas fa-times"></i>
</div>`).appendTo(container.find('.input-field'))
tag.click((e) => {e.stopPropagation()});
tag.find('.fa-times').click(function(e) {
var label = $(this).closest('.tag-label')
e.stopPropagation()
if (selector.data('combine-tags')) {
container.find('.data-field').val('[]')
$(this).parent().remove()
} else {
}
updateDropdownDirection($(selector).next())
});
updateDropdownDirection($(selector).next())
}
if (selector.data('combine-tags')){
container.find('.ds-tags').remove()
if (selectedOptions.length === 1) {
drawTag(selectedOptions[0].label, selectedOptions[0].value)
} else if (allOptionsSelected(selector, container)) {
drawTag(selector.data('select-multiple-all-selected'), 0)
} else if (selectedOptions.length > 1) {
drawTag(selectedOptions.length + ' ' + selector.data('select-multiple-name'), 0)
}
} else {
}
}
function allOptionsSelected(selector, container){
return container.find('.data-field').val().length === selector.find('option').length && !(selector.data('ajax-data'))
}
return {
init: (selector) => {
generateDropdown(selector)
init: (selector, config) => {
generateDropdown(selector, config)
},
update_dropdown_position: (selector) => {
updateDropdownDirection($(selector).next())
updateDropdownDirection($(selector), $(selector).next())
},
getValues: (selector) => {
return $.map(JSON.parse( $(selector).next().find('.data-field').val()), (v) => {
return v.value
})
}
};
}());

61
app/assets/stylesheets/shared/dropdown_selector.scss
View file

@ -14,11 +14,26 @@
display: flex;
flex-wrap: wrap;
min-height: 36px;
overflow: hidden;
padding: 3px;
position: relative;
transition: .2s;
width: 100%;
z-index: 12;
.seacrh-field {
border: 0;
flex-basis: 50px;
flex-grow: 1;
flex-shrink: 1;
line-height: 24px;
min-width: 50px;
outline: 0;
padding-left: 5px;
&::placeholder {
opacity: 0.7;
}
}
.ds-tags {
align-items: center;
@ -26,18 +41,38 @@
border-radius: 12px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
display: flex;
flex-shrink: 0;
line-height: 14px;
margin: 2px 3px;
max-width: calc(100% - 6px);
padding: 5px 7px;
user-select: none;
&.stretch {
flex-grow: 1
}
.tag-label {
margin-right: 5px
display: inline-block;
margin-bottom: 1px;
margin-right: 5px;
max-width: 500px;
overflow: hidden;
transition: .3s;
white-space: nowrap;
width: auto;
&.closing {
max-width: 0;
}
}
.fas {
cursor: pointer;
flex-grow: 1;
font-size: 14px;
opacity: 0.7;
text-align: right;
}
}
}
@ -49,7 +84,6 @@
border-top: 0;
box-shadow: 0px 0px 0px 0px rgba(0,0,0, 0.2);
display: none;
min-height: 100px;
overflow: hidden;
position: absolute;
top: calc(100% - 30px);
@ -57,6 +91,22 @@
width: 100%;
z-index: 10;
.dropdown-select-all{
background: $color-white;
border: 0;
border-bottom: 1px solid $color-alto;
border-radius: 0;
cursor: pointer;
font-weight: bold;
line-height: 20px;
padding: 5px;
position: sticky;
text-align: center;
top: 0;
width: 100%;
z-index: 5;
}
.checkbox-icon {
&::before {
content: "\f0c8";
@ -129,6 +179,7 @@
&.inverse {
.dropdown-container {
bottom: calc(100% - 30px);
margin-bottom: 0;
top: auto;
}
}
@ -137,7 +188,8 @@
.input-field {
border-radius: 4px 4px 0 0;
border-bottom: 1px solid $brand-primary
border-bottom: 1px solid $brand-primary;
z-index: 12;
}
.dropdown-container {
@ -158,6 +210,7 @@
border-radius: 4px 4px 0 0;
bottom: 100%;
box-shadow: 0px -1px 2px 0px rgba(0,0,0, 0.2);
position: fixed;
top: auto;
}
}

8
app/controllers/global_activities_controller.rb
View file

@ -111,11 +111,15 @@ class GlobalActivitiesController < ApplicationController
.pluck(:id, :name)
next if matched.length.zero?
results[subject] = matched.map { |pr| { id: pr[0], name: escape_input(pr[1]) } }
results[subject] = matched.map { |pr| { value: pr[0], label: escape_input(pr[1]) } }
end
respond_to do |format|
format.json do
render json: results
render json: results.map{|group, options| {
value: group,
label: I18n.t('global_activities.subject_name.' + group.downcase),
options: options}
}
end
end
end

2
app/models/team.rb
View file

@ -216,7 +216,7 @@ class Team < ApplicationRecord
query = query.where(id: users_team)
end
query = query.where(id: team_by_subject(filters[:subjects])) if filters[:subjects]
query.select(:id, :name).map { |i| { id: i[:id], name: ApplicationController.helpers.escape_input(i[:name]) } }
query.select(:id, :name).map { |i| { value: i[:id], label: ApplicationController.helpers.escape_input(i[:name]) } }
end
def self.search_by_object(obj)

2
app/models/user.rb
View file

@ -563,7 +563,7 @@ class User < ApplicationRecord
User.where(id: UserTeam.where(team_id: query_teams).select(:user_id))
.search(false, search_query)
.select(:full_name, :id)
.map { |i| { name: escape_input(i[:full_name]), id: i[:id] } }
.map { |i| { label: escape_input(i[:full_name]), value: i[:id] } }
end
def file_name

12
app/views/global_activities/_side_filters.html.erb
View file

@ -4,7 +4,6 @@
<div class="select-container">
<select name="team"
data-select-all-button= "<%= t('global_activities.index.all_teams_btn') %>"
data-dropdown-position = 'left'
data-placeholder = "<%= t('global_activities.index.select_teams') %>"
data-select-all = "false"
data-ajax-url = "<%= team_filter_global_activities_path %>"
@ -51,6 +50,7 @@
'data-select-multiple-all-selected': t('global_activities.index.all_activities'),
'data-select-by-group': 'true',
'data-combine-tags': 'true',
'data-container-scroll': '.ga-side',
'data-placeholder': t('global_activities.index.select_activity_types')
} %>
</div>
@ -62,9 +62,9 @@
<div class="select-container">
<select name="user"
data-select-all-button= "<%= t('global_activities.index.all_users_btn') %>"
data-dropdown-position = 'left'
data-placeholder = "<%= t('global_activities.index.select_users') %>"
data-select-all = "false"
data-combine-tags = "true"
data-ajax-url = "<%= user_filter_global_activities_path %>"
></select>
</div>
@ -74,8 +74,12 @@
<h4 class="title"><%= t('global_activities.index.object') %></h4>
<h6 class="clear"><%= t('global_activities.index.clear') %></h6>
<div class="select-container">
<select name="subject" data-select-all="false" data-dropdown-position="left" data-placeholder="<%= t('global_activities.index.select_objects') %>"
data-select-all-button= "<%= t('global_activities.index.deselect_all_objects') %>"
<select name="subject"
data-select-all="false"
data-placeholder="<%= t('global_activities.index.select_objects') %>"
data-select-all-button = "<%= t('global_activities.index.deselect_all_objects') %>"
data-select-by-group = "true"
data-ajax-url = "/global_activities/search_subjects"
></select>
</div>
</div>