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

Merge pull request #6581 from aignatov-bio/ai-sci-9626-replace-datepicker-in-filters

Browse source 
Replace datepicker in filters [SCI-9626]
This commit is contained in:
aignatov-bio 2023-11-06 14:18:18 +01:00 • committed by GitHub
commit e6f82e61e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 61 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/javascripts/experiments/table.js
View file

@ -494,9 +494,9 @@ var ExperimnetTable = {
} }
}, },
selectDate: function($field) { selectDate: function($field) {
var datePicker = $field.data('DateTimePicker'); var datePicker = $field.data('dateTimePicker');
if (datePicker && datePicker.date()) { if (datePicker && datePicker.date) {
return datePicker.date()._d.toUTCString(); return datePicker.date.toString();
} }
return null; return null;
}, },
@ -733,9 +733,7 @@ ExperimnetTable.filters.push({
}, },
active: (value) => { return value; }, active: (value) => { return value; },
clearFilter: ($container) => { clearFilter: ($container) => {
if ($('.due-date-filter .from-date', $container).data('DateTimePicker')) { $('.due-date-filter .from-date', $container).data('dateTimePicker')?.clearDate();
$('.due-date-filter .from-date', $container).data('DateTimePicker').clear();
}
} }
}); });
@ -748,9 +746,7 @@ ExperimnetTable.filters.push({
}, },
active: (value) => { return value; }, active: (value) => { return value; },
clearFilter: ($container) => { clearFilter: ($container) => {
if ($('.due-date-filter .to-date', $container).data('DateTimePicker')) { $('.due-date-filter .to-date', $container).data('dateTimePicker')?.clearDate();
$('.due-date-filter .to-date', $container).data('DateTimePicker').clear();
}
} }
}); });
@ -763,9 +759,7 @@ ExperimnetTable.filters.push({
}, },
active: (value) => { return value; }, active: (value) => { return value; },
clearFilter: ($container) => { clearFilter: ($container) => {
if ($('.archived-on-filter .from-date', $container).data('DateTimePicker')) { $('.archived-on-filter .from-date', $container).data('dateTimePicker')?.clearDate();
$('.archived-on-filter .from-date', $container).data('DateTimePicker').clear();
}
} }
}); });
@ -778,9 +772,7 @@ ExperimnetTable.filters.push({
}, },
active: (value) => { return value; }, active: (value) => { return value; },
clearFilter: ($container) => { clearFilter: ($container) => {
if ($('.archived-on-filter .to-date', $container).data('DateTimePicker')) { $('.archived-on-filter .to-date', $container).data('dateTimePicker')?.clearDate();
$('.archived-on-filter .to-date', $container).data('DateTimePicker').clear();
}
} }
}); });

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

@ -13,7 +13,6 @@
var ProjectsIndex = (function() { var ProjectsIndex = (function() {
var projectsWrapper = '#projectsWrapper'; var projectsWrapper = '#projectsWrapper';
var toolbarWrapper = '#toolbarWrapper';
var cardsWrapper = '#cardsWrapper'; var cardsWrapper = '#cardsWrapper';
var editProjectModal = '#edit-modal'; var editProjectModal = '#edit-modal';
var moveToModal = '#move-to-modal'; var moveToModal = '#move-to-modal';
@ -448,22 +447,13 @@ var ProjectsIndex = (function() {
data: { ...requestParams, ...{ page: 1 } }, data: { ...requestParams, ...{ page: 1 } },
success: function(data) { success: function(data) {
$(projectsWrapper).find('.projects-title').html(data.title_html); $(projectsWrapper).find('.projects-title').html(data.title_html);
$(toolbarWrapper).html(data.toolbar_html);
initProjectsViewModeSwitch();
initCardData(viewContainer, data); initCardData(viewContainer, data);
selectedProjects.length = 0; selectedProjects.length = 0;
selectedProjectFolders.length = 0; selectedProjectFolders.length = 0;
updateProjectsToolbar(); updateProjectsToolbar();
initProjectsFilters();
initSorting();
// set current sort item
if (projectsCurrentSort) {
$('#sortMenuDropdown a').removeClass('selected');
$(`#sortMenuDropdown a[data-sort="${projectsCurrentSort}"]`).addClass('selected');
}
if (data.filtered) { if (data.filtered) {
$(projectsWrapper).find('.project-list-end-placeholder').remove(); $(projectsWrapper).find('.project-list-end-placeholder').remove();
@ -546,9 +536,9 @@ var ProjectsIndex = (function() {
} }
function selectDate($field) { function selectDate($field) {
var datePicker = $field.data('DateTimePicker'); let datePicker = $field.data('dateTimePicker');
if (datePicker && datePicker.date()) { if (datePicker && datePicker.date) {
return datePicker.date()._d.toUTCString(); return datePicker.date.toString();
} }
return null; return null;
} }
@ -574,32 +564,6 @@ var ProjectsIndex = (function() {
projectsViewSearch = $textFilter.val(); projectsViewSearch = $textFilter.val();
} }
function saveCurrentFilters() {
getFilterValues();
currentFilters = {
createdOnFromFilter: $createdOnFromFilter.val(),
createdOnToFilter: $createdOnToFilter.val(),
membersFilter: membersFilter,
lookInsideFolders: lookInsideFolders,
archivedOnFromFilter: $archivedOnFromFilter.val(),
archivedOnToFilter: $archivedOnToFilter.val(),
projectsViewSearch: projectsViewSearch
};
}
function loadCurrentFilters() {
if (!currentFilters) return;
$createdOnFromFilter.val(currentFilters.createdOnFromFilter);
$createdOnToFilter.val(currentFilters.createdOnToFilter);
$foldersCB.attr('checked', !!currentFilters.lookInsideFolders);
dropdownSelector.setData($('.members-filter'), currentFilters.membersFilter);
$archivedOnFromFilter.val(currentFilters.archivedOnFromFilter);
$archivedOnToFilter.val(currentFilters.archivedOnToFilter);
$textFilter.val(currentFilters.projectsViewSearch);
}
function filtersEnabled() { function filtersEnabled() {
getFilterValues(); getFilterValues();
@ -638,7 +602,6 @@ var ProjectsIndex = (function() {
}); });
$filterDropdown.on('filter:apply', function() { $filterDropdown.on('filter:apply', function() {
saveCurrentFilters();
appliedFiltersMark(); appliedFiltersMark();
loadCardsView(); loadCardsView();
}); });
@ -648,12 +611,11 @@ var ProjectsIndex = (function() {
currentFilters = null; currentFilters = null;
dropdownSelector.clearData($membersFilter); dropdownSelector.clearData($membersFilter);
$createdOnFromFilter.val('');
$createdOnToFilter.val(''); $createdOnFromFilter.data('dateTimePicker').clearDate();
$createdOnFromFilter.val(''); $createdOnToFilter.data('dateTimePicker').clearDate();
$createdOnToFilter.val(''); $archivedOnFromFilter.data('dateTimePicker').clearDate();
$archivedOnFromFilter.val(''); $archivedOnToFilter.data('dateTimePicker').clearDate();
$archivedOnToFilter.val('');
$foldersCB.prop('checked', false); $foldersCB.prop('checked', false);
$textFilter.val(''); $textFilter.val('');
}); });
@ -666,7 +628,6 @@ var ProjectsIndex = (function() {
$('#folderSearchInfo').hide(); $('#folderSearchInfo').hide();
}); });
loadCurrentFilters();
appliedFiltersMark(); appliedFiltersMark();
} }
@ -708,10 +669,12 @@ var ProjectsIndex = (function() {
initArchiveRestoreToolbarButtons(); initArchiveRestoreToolbarButtons();
initEditButton(); initEditButton();
initMoveButton(); initMoveButton();
initProjectsViewModeSwitch();
initSelectAllCheckbox(); initSelectAllCheckbox();
initArchiveRestoreButton(); initArchiveRestoreButton();
loadCardsView(); loadCardsView();
initProjectsViewModeSwitch();
initProjectsFilters();
initSorting();
AsyncDropdown.init($(projectsWrapper)); AsyncDropdown.init($(projectsWrapper));
$(projectsWrapper).on('click', '.folder-card-selector', function() { $(projectsWrapper).on('click', '.folder-card-selector', function() {

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

@ -132,9 +132,9 @@
} }
function selectDate($field) { function selectDate($field) {
var datePicker = $field.data('DateTimePicker'); let datePicker = $field.data('dateTimePicker');
if (datePicker && datePicker.date()) { if (datePicker && datePicker.date) {
return datePicker.date()._d.toUTCString(); return datePicker.date.toString();
} }
return null; return null;
} }
@ -186,12 +186,12 @@
// Clear filters // Clear filters
$filterDropdown.on('filter:clear', function() { $filterDropdown.on('filter:clear', function() {
$(this).find('input').val(''); $(this).find('input').val('');
if ($startedOnFromFilter.data('DateTimePicker')) $startedOnFromFilter.data('DateTimePicker').clear(); $startedOnFromFilter.data('dateTimePicker').clearDate();
if ($startedOnToFilter.data('DateTimePicker')) $startedOnToFilter.data('DateTimePicker').clear(); $startedOnToFilter.data('dateTimePicker').clearDate();
if ($modifiedOnFromFilter.data('DateTimePicker')) $modifiedOnFromFilter.data('DateTimePicker').clear(); $modifiedOnFromFilter.data('dateTimePicker').clearDate();
if ($modifiedOnToFilter.data('DateTimePicker')) $modifiedOnToFilter.data('DateTimePicker').clear(); $modifiedOnToFilter.data('dateTimePicker').clearDate();
if ($archivedOnFromFilter.data('DateTimePicker')) $archivedOnFromFilter.data('DateTimePicker').clear(); $archivedOnFromFilter.data('dateTimePicker').clearDate();
if ($archivedOnToFilter.data('DateTimePicker')) $archivedOnToFilter.data('DateTimePicker').clear(); $archivedOnToFilter.data('dateTimePicker').clearDate();
}); });
} }

18
app/assets/javascripts/protocols/index.js
View file

@ -47,9 +47,9 @@ var ProtocolsIndex = (function() {
} }
function selectDate($field) { function selectDate($field) {
var datePicker = $field.data('DateTimePicker'); var datePicker = $field.data('dateTimePicker');
if (datePicker && datePicker.date()) { if (datePicker && datePicker.date) {
return datePicker.date()._d.toUTCString(); return datePicker.date.toString();
} }
return null; return null;
} }
@ -129,12 +129,12 @@ var ProtocolsIndex = (function() {
dropdownSelector.clearData($accessByFilter); dropdownSelector.clearData($accessByFilter);
$(this).find('input').val(''); $(this).find('input').val('');
if ($publishedOnFromFilter.data('DateTimePicker')) $publishedOnFromFilter.data('DateTimePicker').clear(); $publishedOnFromFilter.data('dateTimePicker')?.clearDate();
if ($publishedOnToFilter.data('DateTimePicker')) $publishedOnToFilter.data('DateTimePicker').clear(); $publishedOnToFilter.data('dateTimePicker')?.clearDate();
if ($modifiedOnFromFilter.data('DateTimePicker')) $modifiedOnFromFilter.data('DateTimePicker').clear(); $modifiedOnFromFilter.data('dateTimePicker')?.clearDate();
if ($modifiedOnToFilter.data('DateTimePicker')) $modifiedOnToFilter.data('DateTimePicker').clear(); $modifiedOnToFilter.data('dateTimePicker')?.clearDate();
if ($archivedOnFromFilter.data('DateTimePicker')) $archivedOnFromFilter.data('DateTimePicker').clear(); $archivedOnFromFilter.data('dateTimePicker')?.clearDate();
if ($archivedOnToFilter.data('DateTimePicker')) $archivedOnToFilter.data('DateTimePicker').clear(); $archivedOnToFilter.data('dateTimePicker')?.clearDate();
$hasDraft.prop('checked', false); $hasDraft.prop('checked', false);
$textFilter.val(''); $textFilter.val('');
}); });

9
app/assets/javascripts/sitewide/filter_dropdown.js
View file

@ -131,6 +131,14 @@ var filterDropdown = (function() {
}); });
} }
function initDateTimePickerComponent() {
const dateTimePickers = document.querySelectorAll('.vue-date-time-picker-filter');
dateTimePickers.forEach((dateTimePicker) => {
$((`#${dateTimePicker.id}`)).removeClass('vue-date-time-picker-filter');
window.initDateTimePickerComponent(`#${dateTimePicker.id}`);
});
}
return { return {
init: function(filtersEnabledFunction) { init: function(filtersEnabledFunction) {
$filterContainer = $('.filter-container'); $filterContainer = $('.filter-container');
@ -138,6 +146,7 @@ var filterDropdown = (function() {
preventDropdownClose(); preventDropdownClose();
initApplyButton(); initApplyButton();
initCloseButton(); initCloseButton();
initDateTimePickerComponent();
initSearchField(filtersEnabledFunction); initSearchField(filtersEnabledFunction);
this.toggleFilterMark($filterContainer, filtersEnabled) this.toggleFilterMark($filterContainer, filtersEnabled)
return $filterContainer; return $filterContainer;

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

@ -63,7 +63,7 @@
--dp-menu-padding: .5rem; /*Menu padding*/ --dp-menu-padding: .5rem; /*Menu padding*/
/*Font sizes*/ /*Font sizes*/
--dp-font-size: 1rem; /*Default font-size*/ --dp-font-size: .875rem; /*Default font-size*/
--dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/ --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
--dp-time-font-size: 3rem; /*Font size in the time picker*/ --dp-time-font-size: 3rem; /*Font size in the time picker*/

5
app/assets/stylesheets/shared/filter_dropdown.scss
View file

@ -79,11 +79,6 @@
} }
} }
.datetime-picker-container {
display: inline-block;
width: 46%;
}
.connect-line { .connect-line {
display: inline-block; display: inline-block;
margin: 0 11px; margin: 0 11px;

1
app/controllers/projects_controller.rb
View file

@ -69,7 +69,6 @@ class ProjectsController < ApplicationController
projects_cards_url: projects_cards_url, projects_cards_url: projects_cards_url,
title_html: title_html, title_html: title_html,
next_page: cards.next_page, next_page: cards.next_page,
toolbar_html: render_to_string(partial: 'projects/index/toolbar'),
cards_html: render_to_string( cards_html: render_to_string(
partial: 'projects/index/team_projects', partial: 'projects/index/team_projects',
locals: { cards: cards, view_mode: params[:view_mode] } locals: { cards: cards, view_mode: params[:view_mode] }

4
app/javascript/packs/vue/legacy/datetime_picker.js
View file

@ -22,7 +22,11 @@ window.initDateTimePickerComponent = (id) => {
let defaultDate = new Date(this.$refs.input.dataset.default); let defaultDate = new Date(this.$refs.input.dataset.default);
this.date = defaultDate.toISOString(); this.date = defaultDate.toISOString();
this.$refs.vueDateTime.datetime = defaultDate; this.$refs.vueDateTime.datetime = defaultDate;
} else if (this.date) {
this.$refs.vueDateTime.datetime = new Date(this.date);
} }
$(this.$refs.input).data('dateTimePicker', this); $(this.$refs.input).data('dateTimePicker', this);
$(this.$el.parentElement).parent().trigger('dp:ready'); $(this.$el.parentElement).parent().trigger('dp:ready');
}, },

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

@ -20,5 +20,6 @@
</h1> </h1>
</div> </div>
<div id="toolbarWrapper" class="toolbar-row" data-width-breakpoint="750"> <div id="toolbarWrapper" class="toolbar-row" data-width-breakpoint="750">
<%= render partial: 'projects/index/toolbar' %>
</div> </div>
</div> </div>

35
app/views/shared/filter_dropdown/_datetime_search.html.erb
View file

@ -2,35 +2,18 @@
<div class="created-on-label"> <div class="created-on-label">
<label class="sci-label"><%= label %></label> <label class="sci-label"><%= label %></label>
</div> </div>
<div class="flex items-center gap-5"> <div class="flex items-center gap-4">
<div class="datetime-picker-container flex"> <div class="datetime-picker-container flex">
<span class="sn-icon sn-icon-calendar"></span> <div id="<%= "#{container_class}_from_container" %>" class="vue-date-time-picker-filter grow">
<input type="datetime" <input ref="input" class="from-date" type="hidden" v-model="date" id="<%= "#{container_class}_from" %>" />
id="<%= "#{container_class}_from" %>" <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('filters_modal.from_placeholder') %>"></date-time-picker>
data-linked-max="#<%= "#{container_class}_to" %>" </div>
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>
<div class="datetime-picker-container flex"> <div class="datetime-picker-container flex">
<span class="sn-icon sn-icon-calendar"></span> <div id="<%= "#{container_class}_to_container" %>" class="vue-date-time-picker-filter grow">
<input type="datetime" <input ref="input" class="to-date" type="hidden" v-model="date" id="<%= "#{container_class}_to" %>" />
data-toggle='date-time-picker' <date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" @change="updateDate" mode="datetime" placeholder="<%= t('filters_modal.to_placeholder') %>"></date-time-picker>
id="<%= "#{container_class}_to" %>" </div>
data-linked-min="#<%= "#{container_class}_from" %>"
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>
</div> </div>
</div> </div>