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

Replace datepicker in filters [SCI-9626]

Browse source
This commit is contained in:
Anton 2023-11-06 10:09:18 +01:00
parent 71cb370db1
commit d4f555da40
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) {
var datePicker = $field.data('DateTimePicker');
if (datePicker && datePicker.date()) {
return datePicker.date()._d.toUTCString();
var datePicker = $field.data('dateTimePicker');
if (datePicker && datePicker.date) {
return datePicker.date.toString();
}
return null;
},
@ -733,9 +733,7 @@ ExperimnetTable.filters.push({
},
active: (value) => { return value; },
clearFilter: ($container) => {
if ($('.due-date-filter .from-date', $container).data('DateTimePicker')) {
$('.due-date-filter .from-date', $container).data('DateTimePicker').clear();
}
$('.due-date-filter .from-date', $container).data('dateTimePicker')?.clearDate();
}
});
@ -748,9 +746,7 @@ ExperimnetTable.filters.push({
},
active: (value) => { return value; },
clearFilter: ($container) => {
if ($('.due-date-filter .to-date', $container).data('DateTimePicker')) {
$('.due-date-filter .to-date', $container).data('DateTimePicker').clear();
}
$('.due-date-filter .to-date', $container).data('dateTimePicker')?.clearDate();
}
});
@ -763,9 +759,7 @@ ExperimnetTable.filters.push({
},
active: (value) => { return value; },
clearFilter: ($container) => {
if ($('.archived-on-filter .from-date', $container).data('DateTimePicker')) {
$('.archived-on-filter .from-date', $container).data('DateTimePicker').clear();
}
$('.archived-on-filter .from-date', $container).data('dateTimePicker')?.clearDate();
}
});
@ -778,9 +772,7 @@ ExperimnetTable.filters.push({
},
active: (value) => { return value; },
clearFilter: ($container) => {
if ($('.archived-on-filter .to-date', $container).data('DateTimePicker')) {
$('.archived-on-filter .to-date', $container).data('DateTimePicker').clear();
}
$('.archived-on-filter .to-date', $container).data('dateTimePicker')?.clearDate();
}
});

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

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

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

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

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

@ -47,9 +47,9 @@ var ProtocolsIndex = (function() {
}
function selectDate($field) {
var datePicker = $field.data('DateTimePicker');
if (datePicker && datePicker.date()) {
return datePicker.date()._d.toUTCString();
var datePicker = $field.data('dateTimePicker');
if (datePicker && datePicker.date) {
return datePicker.date.toString();
}
return null;
}
@ -129,12 +129,12 @@ var ProtocolsIndex = (function() {
dropdownSelector.clearData($accessByFilter);
$(this).find('input').val('');
if ($publishedOnFromFilter.data('DateTimePicker')) $publishedOnFromFilter.data('DateTimePicker').clear();
if ($publishedOnToFilter.data('DateTimePicker')) $publishedOnToFilter.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();
$publishedOnFromFilter.data('dateTimePicker')?.clearDate();
$publishedOnToFilter.data('dateTimePicker')?.clearDate();
$modifiedOnFromFilter.data('dateTimePicker')?.clearDate();
$modifiedOnToFilter.data('dateTimePicker')?.clearDate();
$archivedOnFromFilter.data('dateTimePicker')?.clearDate();
$archivedOnToFilter.data('dateTimePicker')?.clearDate();
$hasDraft.prop('checked', false);
$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 {
init: function(filtersEnabledFunction) {
$filterContainer = $('.filter-container');
@ -138,6 +146,7 @@ var filterDropdown = (function() {
preventDropdownClose();
initApplyButton();
initCloseButton();
initDateTimePickerComponent();
initSearchField(filtersEnabledFunction);
this.toggleFilterMark($filterContainer, filtersEnabled)
return $filterContainer;

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

@ -63,7 +63,7 @@
--dp-menu-padding: .5rem; /*Menu padding*/
/*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-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 {
display: inline-block;
margin: 0 11px;

1
app/controllers/projects_controller.rb
View file

@ -69,7 +69,6 @@ class ProjectsController < ApplicationController
projects_cards_url: projects_cards_url,
title_html: title_html,
next_page: cards.next_page,
toolbar_html: render_to_string(partial: 'projects/index/toolbar'),
cards_html: render_to_string(
partial: 'projects/index/team_projects',
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);
this.date = defaultDate.toISOString();
this.$refs.vueDateTime.datetime = defaultDate;
} else if (this.date) {
this.$refs.vueDateTime.datetime = new Date(this.date);
}
$(this.$refs.input).data('dateTimePicker', this);
$(this.$el.parentElement).parent().trigger('dp:ready');
},

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

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

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

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