scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-04 10:54:30 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add filters to experiments pages [SCI-5366] (#3119)

Browse source 
* Move filters to shared folder [SCI-5366]
This commit is contained in:
aignatov-bio 2021-01-29 13:24:02 +01:00 • committed by GitHub
parent d931ed01f2
commit 29cf9be1f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 451 additions and 379 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
app/assets/javascripts/projects/index.js
View file

@ -7,7 +7,7 @@
// - refresh project users tab after manage user modal is closed
// - refactor view handling using library, ex. backbone.js
/* global animateSpinner HelperModule dropdownSelector Sidebar Turbolinks */
/* global animateSpinner HelperModule dropdownSelector Sidebar Turbolinks filterDropdown */
(function() {
const PERMISSIONS = ['editable', 'archivable', 'restorable', 'moveable'];
@ -539,63 +539,28 @@
});
}
function appliedFiltersMark() {
let filtersEnabled = projectsViewSearch
|| createdOnFromFilter
|| createdOnToFilter
|| (membersFilter && membersFilter.length !== 0)
|| lookInsideFolders
|| archivedOnFromFilter
|| archivedOnToFilter;
if (filtersEnabled) {
$('.filter-container').addClass('filters-applied');
} else {
$('.filter-container').removeClass('filters-applied');
}
}
function initProjectsFilters() {
function applyFilters() {
let teamId = $('.projects-filters').data('team-id');
projectsViewSearch = $('#textSearchFilterInput').closest('.select-block').find('input[type=text]').val();
try {
let storagePath = `project_filters_per_team/${teamId}/recent_search_keywords`;
let recentSearchKeywords = JSON.parse(localStorage.getItem(storagePath));
if (!Array.isArray(recentSearchKeywords)) recentSearchKeywords = [];
if (recentSearchKeywords.indexOf(projectsViewSearch) !== -1) {
recentSearchKeywords.splice(recentSearchKeywords.indexOf(projectsViewSearch), 1);
}
if (recentSearchKeywords.length > 4) {
recentSearchKeywords = recentSearchKeywords.slice(0, 4);
}
recentSearchKeywords.unshift(projectsViewSearch);
localStorage.setItem(storagePath, JSON.stringify(recentSearchKeywords));
} catch (error) {
console.error(error);
}
$('#applyProjectFiltersButton').closest('.dropdown').removeClass('open');
createdOnFromFilter = $createdOnFromFilter.val();
createdOnToFilter = $createdOnToFilter.val();
membersFilter = dropdownSelector.getValues($('.members-filter'));
lookInsideFolders = $foldersCB.prop('checked') ? 'true' : '';
archivedOnFromFilter = $archivedOnFromFilter.val();
archivedOnToFilter = $archivedOnToFilter.val();
appliedFiltersMark();
refreshCurrentView();
}
var $filterDropdown = filterDropdown.init();
let $projectsFilter = $('.projects-index .projects-filters');
let $membersFilter = $('.members-filter', $projectsFilter);
let $foldersCB = $('#folder_search', $projectsFilter);
let $createdOnFromFilter = $('#createdOnFromDate', $projectsFilter);
let $createdOnToFilter = $('#createdOnToDate', $projectsFilter);
let $archivedOnFromFilter = $('#archivedOnFromDate', $projectsFilter);
let $archivedOnToFilter = $('#archivedOnToDate', $projectsFilter);
let $createdOnFromFilter = $('.created-on-filter .from-date', $projectsFilter);
let $createdOnToFilter = $('.created-on-filter .to-date', $projectsFilter);
let $archivedOnFromFilter = $('.archived-on-filter .from-date', $projectsFilter);
let $archivedOnToFilter = $('.archived-on-filter .to-date', $projectsFilter);
let $textFilter = $('#textSearchFilterInput', $projectsFilter);
function appliedFiltersMark() {
let filtersEnabled = projectsViewSearch
|| createdOnFromFilter
|| createdOnToFilter
|| (membersFilter && membersFilter.length !== 0)
|| lookInsideFolders
|| archivedOnFromFilter
|| archivedOnToFilter;
filterDropdown.toggleFilterMark($filterDropdown, filtersEnabled);
}
dropdownSelector.init($membersFilter, {
optionClass: 'checkbox-icon users-dropdown-list',
optionLabel: (data) => {
@ -608,66 +573,26 @@
tagClass: 'users-dropdown-list'
});
$textFilter.click((e) => {
e.stopPropagation();
$('#textSearchFilterHistory').toggle();
$textFilter.closest('.dropdown').toggleClass('open');
}).on('input', () => {
$('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
});
$projectsFilter.on('click', '.projects-search-keyword', function(e) {
e.stopPropagation();
e.preventDefault();
$textFilter.val($(this).data('keyword'));
$('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
});
$projectsFilter.on('click', '#folderSearchInfoBtn', function(e) {
e.stopPropagation();
$('#folderSearchInfo').toggle();
});
$('.project-filters-dropdown').on('show.bs.dropdown', function() {
let teamId = $projectsFilter.data('team-id');
$('#textSearchFilterHistory').find('li').remove();
$filterDropdown.on('filter:apply', function() {
createdOnFromFilter = $createdOnFromFilter.val();
createdOnToFilter = $createdOnToFilter.val();
membersFilter = dropdownSelector.getValues($('.members-filter'));
lookInsideFolders = $foldersCB.prop('checked') ? 'true' : '';
archivedOnFromFilter = $archivedOnFromFilter.val();
archivedOnToFilter = $archivedOnToFilter.val();
projectsViewSearch = $textFilter.val();
try {
let storagePath = `project_filters_per_team/${teamId}/recent_search_keywords`;
let recentSearchKeywords = JSON.parse(localStorage.getItem(storagePath));
$.each(recentSearchKeywords, function(i, keyword) {
$('#textSearchFilterHistory').append($(
`<li class="dropdown-item">
<a class="projects-search-keyword" href="#" data-keyword="${keyword}">
<i class="fas fa-history"></i>
<span class="keyword-text">${keyword}</span>
</a>
</li>`
));
});
} catch (error) {
console.error(error);
}
}).on('hide.bs.dropdown', function() {
$('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
$('#folderSearchInfo').hide();
applyFilters();
});
$('#applyProjectFiltersButton').click((e) => {
e.stopPropagation();
e.preventDefault();
applyFilters();
appliedFiltersMark();
refreshCurrentView();
});
// Clear filters
$('.clear-button', $projectsFilter).click((e) => {
e.stopPropagation();
e.preventDefault();
$filterDropdown.on('filter:clear', function() {
dropdownSelector.clearData($membersFilter);
if ($createdOnFromFilter.data('DateTimePicker')) $createdOnFromFilter.data('DateTimePicker').clear();
if ($createdOnToFilter.data('DateTimePicker')) $createdOnToFilter.data('DateTimePicker').clear();
@ -678,15 +603,11 @@
});
// Prevent filter window close
$($projectsFilter).click((e) => {
if (!$(e.target).is('input,a')) {
e.stopPropagation();
e.preventDefault();
$('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
dropdownSelector.closeDropdown($membersFilter);
$('#folderSearchInfo').hide();
}
$filterDropdown.on('filter:clickBody', function() {
$('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
dropdownSelector.closeDropdown($membersFilter);
$('#folderSearchInfo').hide();
});
}

59
app/assets/javascripts/projects/show.js
View file

@ -1,4 +1,61 @@
/* global filterDropdown */
(function() {
let experimentsCurrentSort;
let experimentsViewSearch;
let startedOnFromFilter;
let startedOnToFilter;
let modifiedOnFromFilter;
let modifiedOnToFilter;
let archivedOnFromFilter;
let archivedOnToFilter;
function initExperimentsFilters() {
var $filterDropdown = filterDropdown.init();
let $experimentsFilter = $('.experiments-filters');
let $startedOnFromFilter = $('.started-on-filter .from-date', $experimentsFilter);
let $startedOnToFilter = $('.started-on-filter .to-date', $experimentsFilter);
let $modifiedOnFromFilter = $('.modified-on-filter .from-date', $experimentsFilter);
let $modifiedOnToFilter = $('.modified-on-filter .to-date', $experimentsFilter);
let $archivedOnFromFilter = $('.archived-on-filter .from-date', $experimentsFilter);
let $archivedOnToFilter = $('.archived-on-filter .to-date', $experimentsFilter);
let $textFilter = $('#textSearchFilterInput', $experimentsFilter);
function appliedFiltersMark() {
let filtersEnabled = experimentsViewSearch
|| startedOnFromFilter
|| startedOnToFilter
|| modifiedOnFromFilter
|| modifiedOnToFilter
|| archivedOnFromFilter
|| archivedOnToFilter;
filterDropdown.toggleFilterMark($filterDropdown, filtersEnabled);
}
$filterDropdown.on('filter:apply', function() {
startedOnFromFilter = $startedOnFromFilter.val();
startedOnToFilter = $startedOnToFilter.val();
modifiedOnFromFilter = $modifiedOnFromFilter.val();
modifiedOnToFilter = $modifiedOnToFilter.val();
archivedOnFromFilter = $archivedOnFromFilter.val();
archivedOnToFilter = $archivedOnToFilter.val();
experimentsViewSearch = $textFilter.val();
appliedFiltersMark();
//refreshCurrentView();
});
// Clear filters
$filterDropdown.on('filter:clear', function() {
if ($startedOnFromFilter.data('DateTimePicker')) $startedOnFromFilter.data('DateTimePicker').clear();
if ($startedOnToFilter.data('DateTimePicker')) $startedOnToFilter.data('DateTimePicker').clear();
if ($modifiedOnFromFilter.data('DateTimePicker')) $modifiedOnFromFilter.data('DateTimePicker').clear();
if ($modifiedOnToFilter.data('DateTimePicker')) $modifiedOnToFilter.data('DateTimePicker').clear();
if ($archivedOnFromFilter.data('DateTimePicker')) $archivedOnFromFilter.data('DateTimePicker').clear();
if ($archivedOnToFilter.data('DateTimePicker')) $archivedOnToFilter.data('DateTimePicker').clear();
$textFilter.val('');
});
}
function init() {
$('.workflowimg-container').each(function() {
let container = $(this);
@ -18,6 +75,8 @@
});
}
});
initExperimentsFilters();
}
init();

116
app/assets/javascripts/sitewide/filter_dropdown.js Normal file
View file

@ -0,0 +1,116 @@
var filterDropdown = (function() {
var $filterContainer = '';
function initClearButton() {
$('.clear-button', $filterContainer).click(function(e) {
e.stopPropagation();
e.preventDefault();
$filterContainer.trigger('filter:clear');
});
}
function preventDropdownClose() {
$('.dropdown-menu', $filterContainer).click((e) => {
if (!$(e.target).is('input,a')) {
e.stopPropagation();
e.preventDefault();
$('#textSearchFilterHistory').hide();
$('#textSearchFilterInput', $filterContainer).closest('.dropdown').removeClass('open');
$filterContainer.trigger('filter:clickBody');
}
});
}
function initSearchField() {
var $textFilter = $('#textSearchFilterInput', $filterContainer);
$filterContainer.on('show.bs.dropdown', function() {
let $filterDropdown = $filterContainer.find('.dropdown-menu');
let teamId = $filterDropdown.data('team-id');
$('#textSearchFilterHistory').find('li').remove();
try {
let storagePath = `${$filterDropdown.data('search-field-history-key')}/${teamId}/recent_search_keywords`;
let recentSearchKeywords = JSON.parse(localStorage.getItem(storagePath));
$.each(recentSearchKeywords, function(i, keyword) {
$('#textSearchFilterHistory').append(
$(`<li class="dropdown-item">
<a class="projects-search-keyword" href="#" data-keyword="${keyword}">
<i class="fas fa-history"></i>
<span class="keyword-text">${keyword}</span>
</a>
</li>`)
);
});
} catch (error) {
console.error(error);
}
}).on('hide.bs.dropdown', function() {
$('#textSearchFilterHistory').hide();
$('.apply-filters', $filterContainer).click();
});
$textFilter.click(function(e) {
e.stopPropagation();
$('#textSearchFilterHistory').toggle();
$(this).closest('.dropdown').toggleClass('open');
}).on('input', () => {
$('#textSearchFilterHistory').hide();
$(this).closest('.dropdown').removeClass('open');
});
$filterContainer.on('click', '.projects-search-keyword', function(e) {
e.stopPropagation();
e.preventDefault();
$textFilter.val($(this).data('keyword'));
$('#textSearchFilterHistory').hide();
$textFilter.closest('.dropdown').removeClass('open');
});
}
function initApplyButton() {
$('.apply-filters', $filterContainer).click(function(e) {
e.stopPropagation();
e.preventDefault();
let $filterDropdown = $filterContainer.find('.dropdown-menu');
let teamId = $filterDropdown.data('team-id');
let projectsViewSearch = $('#textSearchFilterInput').val();
try {
let storagePath = `${$filterDropdown.data('search-field-history-key')}/${teamId}/recent_search_keywords`;
let recentSearchKeywords = JSON.parse(localStorage.getItem(storagePath));
if (!Array.isArray(recentSearchKeywords)) recentSearchKeywords = [];
if (recentSearchKeywords.indexOf(projectsViewSearch) !== -1) {
recentSearchKeywords.splice(recentSearchKeywords.indexOf(projectsViewSearch), 1);
}
if (recentSearchKeywords.length > 4) {
recentSearchKeywords = recentSearchKeywords.slice(0, 4);
}
recentSearchKeywords.unshift(projectsViewSearch);
localStorage.setItem(storagePath, JSON.stringify(recentSearchKeywords));
} catch (error) {
console.error(error);
}
$filterContainer.trigger('filter:apply');
$(this).closest('.dropdown').removeClass('open');
});
}
return {
init: function() {
$filterContainer = $('.filter-container');
initClearButton();
preventDropdownClose();
initApplyButton();
initSearchField();
return $filterContainer;
},
toggleFilterMark: function(filterContainer, filtersEnabled) {
if (filtersEnabled) {
filterContainer.addClass('filters-applied');
} else {
filterContainer.removeClass('filters-applied');
}
}
};
}());

121
app/assets/stylesheets/projects.scss
View file

@ -461,41 +461,9 @@ li.module-hover {
.projects-index {
.filter-container {
position: initial;
.projects-filters {
padding: 0;
width: 230px;
.header {
align-items: center;
border-bottom: $border-default;
display: flex;
height: 2.75em;
margin-bottom: 1em;
padding: 0 .3em 0 1em;
.title {
@include font-h2;
flex-grow: 1;
user-select: none;
}
}
.select-block {
display: inline-block;
padding: 0 1em 1em;
position: relative;
width: 100%;
label {
@include font-small;
font-weight: bold;
margin-bottom: .3em;
user-select: none;
}
&.folders {
align-items: center;
display: flex;
@ -519,96 +487,7 @@ li.module-hover {
}
}
}
.text-search-filter {
&.open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.recent-searches {
border-top-left-radius: 0;
border-top-right-radius: 0;
left: auto;
margin-top: -1px;
top: auto;
width: calc(100% - 2em);
label {
@include font-small;
color: $color-silver-chalice;
font-weight: bold;
margin-bottom: .3em;
padding: 0 1.5em;
user-select: none;
}
.projects-search-keyword {
@include font-button;
padding: .5em 1.25em;
.keyword-text {
margin-left: .25em;
}
}
}
.footer {
align-items: center;
border-top: $border-default;
display: flex;
height: 4.25em;
justify-content: center;
padding: 0 1em;
position: relative;
width: 100%;
}
}
&.filters-applied .filter-button::after {
@include red-dot;
right: .35em;
top: .3em;
}
.connect-line {
background: $input-border;
height: 10px;
margin: 5px auto;
width: 2px;
}
@media (min-width: 768px) {
.projects-filters {
width: 460px;
}
.footer {
.btn:last-child {
margin-left: auto;
}
}
.datetime-picker-container {
display: inline-block;
width: 46%;
}
.connect-line {
display: inline-block;
margin: 0 11px;
position: relative;
top: 2px;
transform: rotate(90deg);
}
.created-on-label {
display: block;
}
}
.users-dropdown-list {
.item-avatar {
border-radius: 50%;

2
app/assets/stylesheets/shared/content_pane.scss
View file

@ -27,7 +27,7 @@
display: flex;
height: 5em;
margin-left: -2em;
padding-left: 2em;
padding: 0 2em;
width: calc(100% + 4em);
h1 {

124
app/assets/stylesheets/shared/filter_dropdown.scss Normal file
View file

@ -0,0 +1,124 @@
// scss-lint:disable NestingDepth SelectorDepth
.filter-container {
position: initial;
.filter-dropdown {
padding: 0;
width: 230px;
.header {
align-items: center;
border-bottom: $border-default;
display: flex;
height: 2.75em;
margin-bottom: 1em;
padding: 0 .3em 0 1em;
.title {
@include font-h2;
flex-grow: 1;
user-select: none;
}
}
.select-block {
display: inline-block;
padding: 0 1em 1em;
position: relative;
width: 100%;
label {
@include font-small;
font-weight: bold;
margin-bottom: .3em;
user-select: none;
}
}
.text-search-filter {
&.open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.recent-searches {
border-top-left-radius: 0;
border-top-right-radius: 0;
left: auto;
margin-top: -1px;
top: auto;
width: calc(100% - 2em);
label {
@include font-small;
color: $color-silver-chalice;
font-weight: bold;
margin-bottom: .3em;
padding: 0 1.5em;
user-select: none;
}
.projects-search-keyword {
@include font-button;
padding: .5em 1.25em;
.keyword-text {
margin-left: .25em;
}
}
}
.footer {
align-items: center;
border-top: $border-default;
display: flex;
height: 4.25em;
justify-content: center;
padding: 0 1em;
position: relative;
width: 100%;
}
}
&.filters-applied .filter-button::after {
@include red-dot;
right: .35em;
top: .3em;
}
.connect-line {
background: $input-border;
height: 10px;
margin: 5px auto;
width: 2px;
}
@media (min-width: 768px) {
.filter-dropdown {
width: 460px;
}
.footer {
.btn:last-child {
margin-left: auto;
}
}
.datetime-picker-container {
display: inline-block;
width: 46%;
}
.connect-line {
display: inline-block;
margin: 0 11px;
position: relative;
top: 2px;
transform: rotate(90deg);
}
}
}

148
app/views/projects/index/_header.html.erb
View file

@ -12,7 +12,6 @@
<li class="view-switch-list cards-switch ">
<i class="fas fa-list button-icon"></i> <%= t('projects.index.header.table') %>
</li>
<div role="separator" class="divider"></div>
<li class="view-switch-active archive-switch" data-view-mode="archived" data-url="<%= projects_path %>">
<i class="fas fa-rocket button-icon"></i> <%= t('projects.index.header.active_projects') %>
@ -22,130 +21,33 @@
<i class="fas fa-archive button-icon"></i> <%= t('projects.index.header.archived_projects') %>
</li>
<% end %>
<div class="filter-container dropdown project-filters-dropdown">
<button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
<div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
<div class="header">
<div class="title"><%= t("projects.index.filters_modal.title") %></div>
<div class="btn btn-light clear-button">
<i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
</div>
<div class="select-block dropdown-selector-container">
<label><%= t('projects.index.filters_modal.text.label') %></label>
<div class="input-field dropdown text-search-filter">
<input id="textSearchFilterInput"
class="dropdown-toggle search-field"
type="text"
name="search"
autocomplete="off"
data-toggle="dropdown"
placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
</div>
<div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput">
<label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
</div>
</div>
<div class="select-block">
<div class="created-on-label">
<label><%= t("projects.index.filters_modal.created_on.label") %></label>
</div>
<div class="datetime-picker-container" id="from-date">
<span class="fas fa-calendar-alt"></span>
<input id="createdOnFromDate"
type="datetime"
data-toggle='date-time-picker'
class="form-control calendar-input"
readonly
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
data-date-format="<%= datetime_picker_format_full %>"
data-date-locale="<%= I18n.locale %>"
data-date-use-current="false"
value=""/>
</div>
<div class="connect-line"></div>
<div class="datetime-picker-container" id="to-date">
<span class="fas fa-calendar-alt"></span>
<input id="createdOnToDate"
type="datetime"
data-toggle='date-time-picker'
class="form-control calendar-input"
readonly
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
data-date-format="<%= datetime_picker_format_full %>"
data-date-locale="<%= I18n.locale %>"
data-date-use-current="false"
data-date-orientation="left"
value=""/>
</div>
</div>
<div class="select-block">
<label><%= t("projects.index.filters_modal.members.label") %></label>
<select class="members-filter"
data-ajax-url="<%= users_filter_projects_path %>"
data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
</select>
</div>
<div class="select-block" data-view-mode="archived">
<div class="created-on-label">
<label><%= t("projects.index.filters_modal.archived_on.label") %></label>
</div>
<div class="datetime-picker-container" id="from-date">
<span class="fas fa-calendar-alt"></span>
<input id="archivedOnFromDate"
type="datetime"
data-toggle='date-time-picker'
class="form-control calendar-input"
readonly
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
data-date-format="<%= datetime_picker_format_full %>"
data-date-locale="<%= I18n.locale %>"
data-date-use-current="false"
value=""/>
</div>
<div class="connect-line"></div>
<div class="datetime-picker-container" id="to-date">
<span class="fas fa-calendar-alt"></span>
<input id="archivedOnToDate"
type="datetime"
data-toggle='date-time-picker'
class="form-control calendar-input"
readonly
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
data-date-format="<%= datetime_picker_format_full %>"
data-date-locale="<%= I18n.locale %>"
data-date-use-current="false"
data-date-orientation="left"
value=""/>
</div>
</div>
<div class="select-block folders">
<span class="sci-checkbox-container">
<%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
<span class="sci-checkbox-label"></span>
</span>
<span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
<div class="dropdown folder-search-info">
<a class="fas fa-info-circle" id="folderSearchInfoBtn" data-toggle="dropdown"></a>
<div id="folderSearchInfo" class="dropdown-menu folder-search-popover" aria-labelledby="folderSearchInfo">
<%= t("projects.index.filters_modal.folders.popover_html") %>
</div>
</div>
</div>
<div class="footer">
<div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
<%= render layout: 'shared/filter_dropdown', locals: {
container_class: 'projects-filters',
dropdown_title: t("filters_modal.title"),
search_field_history_key: 'project_filters_per_team'
} do %>
<%= render partial: 'shared/filter_dropdown/text_search', locals: {container_class: ''} %>
<%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'created-on-filter', label: t("filters_modal.created_on.label"), view_mode: nil } %>
<div class="select-block">
<label><%= t("projects.index.filters_modal.members.label") %></label>
<select class="members-filter"
data-ajax-url="<%= users_filter_projects_path %>"
data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
</select>
</div>
<%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'archived-on-filter', label: t("filters_modal.archived_on.label"), view_mode: 'archived' } %>
<div class="select-block folders">
<span class="sci-checkbox-container">
<%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
<span class="sci-checkbox-label"></span>
</span>
<span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
<div class="dropdown folder-search-info">
<a class="fas fa-info-circle" id="folderSearchInfoBtn" data-toggle="dropdown"></a>
<div id="folderSearchInfo" class="dropdown-menu folder-search-popover" aria-labelledby="folderSearchInfo">
<%= t("projects.index.filters_modal.folders.popover_html") %>
</div>
</div>
</div>
<div class="dropdown sort-menu">
<button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

15
app/views/projects/show/_header.html.erb
View file

@ -34,10 +34,17 @@
<i class="fas fa-archive button-icon"></i> <%= t('experiments.header.archived_experiments') %>
</li>
<% end %>
<!-- TODO: add filters dropdown -->
<div class="filter-container dropdown">
<button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
</div>
<%= render layout: 'shared/filter_dropdown', locals: {
container_class: 'experiments-filters',
dropdown_title: t("filters_modal.title"),
search_field_history_key: 'experiment_filters_per_team'
} do %>
<%= render partial: 'shared/filter_dropdown/text_search', locals: {container_class: ''} %>
<%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'started-on-filter', label: t("filters_modal.created_on.label"), view_mode: nil } %>
<%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'modified-on-filter', label: t("filters_modal.updated_on.label"), view_mode: nil } %>
<%= render partial: 'shared/filter_dropdown/datetime_search', locals: {container_class: 'archived-on-filter', label: t("filters_modal.archived_on.label"), view_mode: 'archived' } %>
<% end %>
<!-- Sort menu dropdown -->
<div class="dropdown sort-menu">
<button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

16
app/views/shared/_filter_dropdown.html.erb Normal file
View file

@ -0,0 +1,16 @@
<div class="filter-container dropdown <%= container_class + '-dropdown' %>">
<button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
<div class="dropdown-menu dropdown-menu-right filter-dropdown <%= container_class %>" role="menu" data-team-id="<%= current_team.id %>" data-search-field-history-key="<%= search_field_history_key %>">
<div class="header">
<div class="title"><%= dropdown_title %></div>
<div class="btn btn-light clear-button">
<i class="fas fa-times-circle"></i><%= t("filters_modal.clear_btn") %></div>
</div>
<div class="body">
<%= yield %>
</div>
<div class="footer">
<div class="btn btn-primary apply-filters"><%= t("filters_modal.show_btn.one") %></div>
</div>
</div>
</div>

33
app/views/shared/filter_dropdown/_datetime_search.html.erb Normal file
View file

@ -0,0 +1,33 @@
<div class="select-block <%= container_class %>" <%= "data-view-mode=#{view_mode}" if view_mode %>>
<div class="created-on-label">
<label><%= label %></label>
</div>
<div class="datetime-picker-container">
<span class="fas fa-calendar-alt"></span>
<input type="datetime"
data-toggle='date-time-picker'
class="form-control calendar-input from-date"
readonly
placeholder="<%= t('filters_modal.from_placeholder') %>"
data-date-format="<%= datetime_picker_format_full %>"
data-date-locale="<%= I18n.locale %>"
data-date-use-current="false"
value=""/>
</div>
<div class="connect-line"></div>
<div class="datetime-picker-container">
<span class="fas fa-calendar-alt"></span>
<input type="datetime"
data-toggle='date-time-picker'
class="form-control calendar-input to-date"
readonly
placeholder="<%= t('filters_modal.to_placeholder') %>"
data-date-format="<%= datetime_picker_format_full %>"
data-date-locale="<%= I18n.locale %>"
data-date-use-current="false"
data-date-orientation="left"
value=""/>
</div>
</div>

15
app/views/shared/filter_dropdown/_text_search.html.erb Normal file
View file

@ -0,0 +1,15 @@
<div class="select-block dropdown-selector-container">
<label><%= t('filters_modal.text.label') %></label>
<div class="input-field dropdown text-search-filter">
<input id="textSearchFilterInput"
class="dropdown-toggle search-field"
type="text"
name="search"
autocomplete="off"
data-toggle="dropdown"
placeholder="<%= t('filters_modal.text.placeholder') %>">
</div>
<div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput">
<label><%= t("filters_modal.recent_searches_label") %></label>
</div>
</div>

36
config/locales/en.yml
View file

@ -425,30 +425,12 @@ en:
invite_users_details: "to team %{team}."
contact_admins: "To invite additional users to team %{team}, contact its administrator/s."
filters_modal:
title: "Filters"
text:
label: "Contains text"
placeholder: "Enter search terms..."
created_on:
label: "Start date"
from_placeholder: "From"
to_placeholder: "To"
archived_on:
label: "Archived date"
from_placeholder: "From"
to_placeholder: "To"
members:
label: "Members"
placeholder: "Select members of a project"
folders:
label: "Look inside folders"
popover_html: "When <strong>“Look inside folders”</strong> is active, the filters will also take all folders and their content into account."
recent_searches_label: "Recent searches"
show_btn:
many: "Show %{num} projects"
none: "No projects"
one: "Show project"
clear_btn: "Clear"
export_projects:
export_button: "Export"
@ -2501,3 +2483,21 @@ en:
previous: "Previous"
next: "Next"
truncate: "&hellip;"
filters_modal:
title: "Filters"
text:
label: "Contains text"
placeholder: "Enter search terms..."
from_placeholder: "From"
to_placeholder: "To"
created_on:
label: "Start date"
updated_on:
label: "Modified date"
archived_on:
label: "Archived date"
recent_searches_label: "Recent searches"
show_btn:
one: "Show results"
clear_btn: "Clear"