Finished filters

This commit is contained in:
aignatov-bio 2020-02-17 10:47:10 +01:00
parent 485597a9ef
commit a438f6b4f0
7 changed files with 108 additions and 19 deletions

View file

@ -1,31 +1,71 @@
/* global dropdownSelector */
/* eslint-disable no-param-reassign */
var DasboardCurrentTasksWidget = (function() {
function initFilters() {
dropdownSelector.init('.curent-tasks-filters .sort-filter', {
var sortFilter = '.curent-tasks-filters .sort-filter';
var viewFilter = '.curent-tasks-filters .view-filter';
var projectFilter = '.curent-tasks-filters .project-filter';
var experimentFilter = '.curent-tasks-filters .experiment-filter';
$('.curent-tasks-filters .clear-button').click(() => {
dropdownSelector.clearData(projectFilter);
dropdownSelector.clearData(experimentFilter);
});
dropdownSelector.init(sortFilter, {
noEmptyOption: true,
singleSelect: true,
closeOnSelect: true,
selectAppearance: 'simple'
});
dropdownSelector.init('.curent-tasks-filters .view-filter', {
dropdownSelector.init(viewFilter, {
noEmptyOption: true,
singleSelect: true,
closeOnSelect: true,
selectAppearance: 'simple'
});
dropdownSelector.init('.curent-tasks-filters .project-filter');
dropdownSelector.init('.curent-tasks-filters .experiment-filter');
dropdownSelector.init(projectFilter, {
singleSelect: true,
closeOnSelect: true,
emptyOptionAjax: true,
selectAppearance: 'simple',
ajaxParams: (params) => {
params.mode = 'team';
return params;
},
onChange: () => {
var selectedValue = dropdownSelector.getValues(projectFilter);
if (selectedValue > 0) {
dropdownSelector.enableSelector(experimentFilter);
} else {
dropdownSelector.disableSelector(experimentFilter);
}
dropdownSelector.clearData(experimentFilter);
}
});
dropdownSelector.init(experimentFilter, {
singleSelect: true,
closeOnSelect: true,
emptyOptionAjax: true,
selectAppearance: 'simple',
ajaxParams: (params) => {
params.mode = 'team';
params.project_id = dropdownSelector.getValues(projectFilter);
return params;
}
});
$('.curent-tasks-filters').click((e) => {
// Prevent filter window close
e.stopPropagation();
e.preventDefault();
dropdownSelector.closeDropdown('.curent-tasks-filters .sort-filter');
dropdownSelector.closeDropdown('.curent-tasks-filters .view-filter');
dropdownSelector.closeDropdown('.curent-tasks-filters .project-filter');
dropdownSelector.closeDropdown('.curent-tasks-filters .experiment-filter');
dropdownSelector.closeDropdown(sortFilter);
dropdownSelector.closeDropdown(viewFilter);
dropdownSelector.closeDropdown(projectFilter);
dropdownSelector.closeDropdown(experimentFilter);
});
}

View file

@ -506,7 +506,7 @@ var dropdownSelector = (function() {
container.find('.dropdown-group, .dropdown-option, .empty-dropdown, .delimiter').remove();
if (!data) return;
if (data.length > 0) {
if (data.length > 0 && !(data.length === 1 && data[0].value === '')) {
// If we use select-by-group option we need first draw groups
if (selector.data('select-by-group')) {
$.each(data, function(gi, group) {
@ -681,7 +681,7 @@ var dropdownSelector = (function() {
// If we have alteast one tag, we need to remove placeholder from search field
if (selector.data('config').selectAppearance === 'simple') {
let selectedLabel = container.find('.tag-label');
container.find('.search-field').attr('placeholder',
container.find('.search-field').prop('placeholder',
selectedLabel.length && selectedLabel.text().trim() !== '' ? selectedLabel.text().trim() : selector.data('placeholder'));
} else {
searchFieldValue.attr('placeholder',
@ -741,14 +741,14 @@ var dropdownSelector = (function() {
ajaxParams = customParams ? customParams(defaultParams) : defaultParams;
$.get(selector.data('ajax-url'), ajaxParams, (data) => {
var optionsAjax = data;
var optionsAjax = data.constructor === Array ? data : [];
if (selector.data('config').emptyOptionAjax) {
optionsAjax = [{
label: '',
label: selector.data('placeholder') || '',
value: '',
group: null,
params: {}
}].concat(data);
}].concat(optionsAjax);
}
loadData(selector, container, optionsAjax);
PerfectSb().update_all();

View file

@ -1,3 +1,6 @@
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
.dashboard-container .current-tasks-widget {
grid-column: 1 / span 9;
grid-row: 1 / span 6;
@ -5,8 +8,8 @@
.filter-container {
align-items: center;
display: flex;
justify-content: center;
height: 30px;
justify-content: center;
width: 30px;
.fa-filter {
@ -53,8 +56,8 @@
align-items: center;
border-top: $border-default;
display: flex;
justify-content: center;
height: 68px;
justify-content: center;
position: relative;
width: 100%;
}

View file

@ -96,6 +96,10 @@
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
&[data-ds-tag-id=""] {
opacity: .7;
}
}
.fas {
@ -165,11 +169,18 @@
background: $color-concrete;
}
&[data-value=""] {
opacity: .7;
}
&.select {
background: $brand-primary;
color: $color-white;
opacity: 1;
}
}
.checkbox-icon {
@ -269,6 +280,10 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&[data-ds-tag-id=""] {
opacity: .7;
}
}
.fa-times {

View file

@ -2,7 +2,31 @@
module Dashboard
class CurrentTasksController < ApplicationController
def show
include InputSanitizeHelper
def show; end
def project_filter
result = current_team.projects.search(current_user, false, params[:query], 1, current_team).select(:id, :name)
unless params[:mode] == 'team'
result = result.where(id: current_user.my_modules.joins(:experiment)
.group(:project_id).select(:project_id).pluck(:project_id))
end
render json: result.map { |i| { value: i.id, label: escape_input(i.name) } }, status: :ok
end
def experiment_filter
project = current_team.projects.find_by(id: params[:project_id])
unless project
render json: []
return false
end
result = project.experiments.search(current_user, false, params[:query], 1, current_team).select(:id, :name)
unless params[:mode] == 'team'
result = result.where(id: current_user.my_modules
.group(:experiment_id).select(:experiment_id).pluck(:experiment_id))
end
render json: result.map { |i| { value: i.id, label: escape_input(i.name) } }, status: :ok
end
end
end

View file

@ -4,7 +4,7 @@
<div class="dropdown-menu curent-tasks-filters" role="menu">
<div class="header">
<div class="title">Filters</div>
<div class="btn btn-light"><i class="fas fa-times-circle"></i>Clear</div>
<div class="btn btn-light clear-button"><i class="fas fa-times-circle"></i>Clear</div>
</div>
<div class="select-block">
<label>Sort by</label>
@ -24,11 +24,16 @@
</div>
<div class="select-block">
<label>Project</label>
<select class="project-filter"></select>
<select class="project-filter"
data-ajax-url="<%= project_filter_dashboard_current_tasks_path %>"
data-placeholder="Select Project"></select>
</div>
<div class="select-block">
<label>Experiment</label>
<select class="experiment-filter"></select>
<select class="experiment-filter"
data-ajax-url="<%= experiment_filter_dashboard_current_tasks_path %>"
data-disable-on-load="true"
data-placeholder="Select Experiment"></select>
</div>
<div class="footer">
<div class="btn btn-primary">Apply</div>

View file

@ -242,6 +242,8 @@ Rails.application.routes.draw do
resource :dashboard, only: :show do
resource :current_tasks, module: 'dashboard', only: :show do
get :project_filter
get :experiment_filter
end
end