mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 23:16:15 +08:00
Replace datetime picker in activties and create task
This commit is contained in:
Anton
parent
eb6ad1ac61
commit
2ab479950a
|
|
@ -37,6 +37,7 @@
|
|||
// Add and show modal
|
||||
$(experimentWrapper).append($.parseHTML(result.html));
|
||||
$(newMyModuleModal).modal('show');
|
||||
window.initDateTimePickerComponent(`#date-time-picker-my-module`);
|
||||
$(newMyModuleModal).find("input[type='text']").focus();
|
||||
|
||||
// Remove modal when it gets closed
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@ var globalActivities = (function() {
|
|||
};
|
||||
|
||||
function GlobalActivitiesFiltersGetDates() {
|
||||
var fromDate = $('#calendar-from-date').data('DateTimePicker').date();
|
||||
var toDate = $('#calendar-to-date').data('DateTimePicker').date();
|
||||
var fromDate = $('#calendar-from-date').data('dateTimePicker').$refs.vueDateTime.datetime;
|
||||
var toDate = $('#calendar-to-date').data('dateTimePicker').$refs.vueDateTime.datetime;
|
||||
if (fromDate) {
|
||||
fromDate = fromDate._d.date_to_string();
|
||||
fromDate = fromDate.date_to_string();
|
||||
}
|
||||
if (toDate) {
|
||||
toDate = toDate._d.date_to_string();
|
||||
toDate = toDate.date_to_string();
|
||||
}
|
||||
return { from: fromDate, to: toDate };
|
||||
}
|
||||
|
|
@ -108,8 +108,8 @@ var globalActivities = (function() {
|
|||
|
||||
$('.date-selector .date.clear').click(() => {
|
||||
updateRunning = true;
|
||||
$('#calendar-from-date').data('DateTimePicker').clear();
|
||||
$('#calendar-to-date').data('DateTimePicker').clear();
|
||||
$('#calendar-from-date').data('dateTimePicker').clearDate();
|
||||
$('#calendar-to-date').data('dateTimePicker').clearDate();
|
||||
$('.ga-side .date-selector.filter-block')[0].dataset.periodSelect = '';
|
||||
resetHotButtonsBackgroundColor();
|
||||
updateRunning = false;
|
||||
|
|
@ -205,8 +205,8 @@ var globalActivities = (function() {
|
|||
var selectorsCount = $(projectFilter).length === 1 ? clearSelectors.length - 1 : 1;
|
||||
updateRunning = true;
|
||||
|
||||
$('#calendar-from-date').data('DateTimePicker').clear();
|
||||
$('#calendar-to-date').data('DateTimePicker').clear();
|
||||
$('#calendar-from-date').data('dateTimePicker').clearDate();
|
||||
$('#calendar-to-date').data('dateTimePicker').clearDate();
|
||||
$('.ga-side .date-selector.filter-block')[0].dataset.periodSelect = '';
|
||||
|
||||
|
||||
|
|
@ -331,27 +331,18 @@ var globalActivities = (function() {
|
|||
});
|
||||
});
|
||||
|
||||
$('#calendar-to-date').on('dp.change', function(e) {
|
||||
var dateContainer = $('.ga-side .date-selector.filter-block');
|
||||
if (!updateRunning) {
|
||||
$('#calendar-from-date').data('DateTimePicker').minDate(e.date);
|
||||
dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
|
||||
GlobalActivitiesUpdateTopPaneTags();
|
||||
reloadActivities();
|
||||
toggleClearButtons();
|
||||
resetHotButtonsBackgroundColor();
|
||||
}
|
||||
});
|
||||
|
||||
$('#calendar-from-date').on('dp.change', function(e) {
|
||||
var dateContainer = $('.ga-side .date-selector.filter-block');
|
||||
if (!updateRunning) {
|
||||
$('#calendar-to-date').data('DateTimePicker').maxDate(e.date);
|
||||
dateContainer[0].dataset.periodSelect = $('#calendar-to-date').val() + ' - ' + $('#calendar-from-date').val();
|
||||
GlobalActivitiesUpdateTopPaneTags();
|
||||
reloadActivities();
|
||||
toggleClearButtons();
|
||||
resetHotButtonsBackgroundColor();
|
||||
$('.datetime-picker-container').on('dp:ready', function() {
|
||||
$(this).find('.calendar-input').data('dateTimePicker').onChange = () => {
|
||||
let dateContainer = $('.ga-side .date-selector.filter-block');
|
||||
if (!updateRunning) {
|
||||
let toDate = $('#calendar-to-date').data('dateTimePicker').$refs.vueDateTime.datetime;
|
||||
let fromDate = $('#calendar-from-date').data('dateTimePicker').$refs.vueDateTime.datetime;
|
||||
dateContainer[0].dataset.periodSelect = (toDate ? toDate?.date_to_string() : '') + ' - ' + (fromDate ? fromDate.date_to_string() : '');
|
||||
GlobalActivitiesUpdateTopPaneTags();
|
||||
reloadActivities();
|
||||
toggleClearButtons();
|
||||
resetHotButtonsBackgroundColor();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -362,8 +353,8 @@ var globalActivities = (function() {
|
|||
$('.date-selector .hot-button').click(function() {
|
||||
var selectPeriod = this.dataset.period;
|
||||
var dateContainer = $('.ga-side .date-selector.filter-block');
|
||||
var fromDate = $('#calendar-from-date').data('DateTimePicker');
|
||||
var toDate = $('#calendar-to-date').data('DateTimePicker');
|
||||
var fromDate = $('#calendar-from-date').data('dateTimePicker');
|
||||
var toDate = $('#calendar-to-date').data('dateTimePicker');
|
||||
var today = new Date();
|
||||
var yesterday = new Date(new Date().setDate(today.getDate() - 1));
|
||||
var weekDay = today.getDay();
|
||||
|
|
@ -375,26 +366,24 @@ var globalActivities = (function() {
|
|||
var lastMonthEnd = new Date(new Date().setDate(firstDay.getDate() - 1));
|
||||
var lastMonthStart = new Date(lastMonthEnd.getFullYear(), lastMonthEnd.getMonth(), 1);
|
||||
updateRunning = true;
|
||||
fromDate.minDate(new Date(1900, 1, 1));
|
||||
toDate.maxDate(new Date(3000, 1, 1));
|
||||
if (selectPeriod === 'today') {
|
||||
fromDate.date(today);
|
||||
toDate.date(today);
|
||||
fromDate.$refs.vueDateTime.datetime = today;
|
||||
toDate.$refs.vueDateTime.datetime = today;
|
||||
} else if (selectPeriod === 'yesterday') {
|
||||
fromDate.date(yesterday);
|
||||
toDate.date(yesterday);
|
||||
fromDate.$refs.vueDateTime.datetime = yesterday;
|
||||
toDate.$refs.vueDateTime.datetime = yesterday;
|
||||
} else if (selectPeriod === 'this_week') {
|
||||
fromDate.date(today);
|
||||
toDate.date(monday);
|
||||
fromDate.$refs.vueDateTime.datetime = today;
|
||||
toDate.$refs.vueDateTime.datetime = monday;
|
||||
} else if (selectPeriod === 'last_week') {
|
||||
fromDate.date(lastWeekEnd);
|
||||
toDate.date(lastWeekStart);
|
||||
fromDate.$refs.vueDateTime.datetime = lastWeekEnd;
|
||||
toDate.$refs.vueDateTime.datetime = lastWeekStart;
|
||||
} else if (selectPeriod === 'this_month') {
|
||||
fromDate.date(today);
|
||||
toDate.date(firstDay);
|
||||
fromDate.$refs.vueDateTime.datetime = today;
|
||||
toDate.$refs.vueDateTime.datetime = firstDay;
|
||||
} else if (selectPeriod === 'last_month') {
|
||||
fromDate.date(lastMonthEnd);
|
||||
toDate.date(lastMonthStart);
|
||||
fromDate.$refs.vueDateTime.datetime = lastMonthEnd;
|
||||
toDate.$refs.vueDateTime.datetime = lastMonthStart;
|
||||
}
|
||||
updateRunning = false;
|
||||
dateContainer[0].dataset.periodSelect = this.innerHTML;
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ var DateTimeHelper = (function() {
|
|||
v-model="date"
|
||||
id="datetimePicker${formId}${columnId}" />
|
||||
<date-time-picker class="w-full" @cleared="clearDate"
|
||||
:teleport="false"
|
||||
ref="vueDateTime" @change="updateDate" mode="${mode}"
|
||||
placeholder="${placeholder(mode)}"></date-time-picker>
|
||||
</div>
|
||||
|
|
@ -57,6 +58,7 @@ var DateTimeHelper = (function() {
|
|||
v-model="date"
|
||||
id="datetimeStartPicker${formId}${columnId}" />
|
||||
<date-time-picker class="w-full" @cleared="clearDate"
|
||||
:teleport="false"
|
||||
ref="vueDateTime" @change="updateDate"
|
||||
mode="${mode}" placeholder="${placeholder(mode)}"></date-time-picker>
|
||||
</div>
|
||||
|
|
@ -73,6 +75,7 @@ var DateTimeHelper = (function() {
|
|||
v-model="date"
|
||||
id="datetimeEndPicker${formId}${columnId}" />
|
||||
<date-time-picker class="w-full" @cleared="clearDate"
|
||||
:teleport="false"
|
||||
ref="vueDateTime" @change="updateDate" mode="${mode}"
|
||||
placeholder="${placeholder(mode)}"></date-time-picker>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -495,7 +495,7 @@
|
|||
}
|
||||
|
||||
.repository-edit-overlay--pagination {
|
||||
bottom: 0;
|
||||
bottom: .5rem;
|
||||
height: 5em;
|
||||
line-height: 5em;
|
||||
padding: .5em;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@
|
|||
<VueDatePicker
|
||||
v-if="mode == 'datetime'"
|
||||
v-model="datetime"
|
||||
:teleport="true"
|
||||
:teleport="teleport"
|
||||
text-input
|
||||
:clearable="clearable"
|
||||
time-picker-inline
|
||||
:format="dateTimeFormat"
|
||||
:placeholder="placeholder" ></VueDatePicker>
|
||||
|
|
@ -12,7 +13,8 @@
|
|||
<VueDatePicker
|
||||
v-if="mode == 'date'"
|
||||
v-model="datetime"
|
||||
:teleport="true"
|
||||
:teleport="teleport"
|
||||
:clearable="clearable"
|
||||
text-input
|
||||
:format="dateFormat"
|
||||
:enable-time-picker="false"
|
||||
|
|
@ -21,7 +23,8 @@
|
|||
<VueDatePicker
|
||||
v-if="mode == 'time'"
|
||||
v-model="time"
|
||||
:teleport="true"
|
||||
:teleport="teleport"
|
||||
:clearable="clearable"
|
||||
text-input
|
||||
:format="timeFormat"
|
||||
time-picker
|
||||
|
|
@ -36,6 +39,8 @@
|
|||
name: 'DateTimePicker',
|
||||
props: {
|
||||
mode: { type: String, default: 'datetime' },
|
||||
clearable: { type: Boolean, default: false },
|
||||
teleport: { type: Boolean, default: true },
|
||||
defaultValue: { type: Date, required: false },
|
||||
placeholder: { type: String }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
<div class="datetime-picker-container"
|
||||
id="<%= id %>"
|
||||
data-id="<%= id %>"
|
||||
data-use-current="<%= use_current %>"
|
||||
data-datetime-picker-format="<%= datetime_picker_format_date_only %>">
|
||||
<% if label %>
|
||||
<label class="control-label required" for="calendar-<%= id %>"><%= label %></label>
|
||||
<% end %>
|
||||
<span class="sn-icon sn-icon-calendar"></span>
|
||||
<input type="datetime" class="form-control calendar-input" name="calendar[<%= id %>]" id="calendar-<%= id %>" readonly="" data-ts="" placeholder="<%= placeholder %>" value="<%= defined?(setDate) ? setDate : '' %>"/>
|
||||
|
||||
<%= javascript_include_tag 'global_activities/date_picker' %>
|
||||
|
||||
<div class="datetime-picker-container">
|
||||
<div id="date-time-picker-<%= id %>" class="vue-date-time-picker w-full">
|
||||
<% selected_date = '' %>
|
||||
<% selected_date = setDate if defined?(setDate) %>
|
||||
<% selected_date = use_current %>
|
||||
<% if label %>
|
||||
<label class="sci-label" for="calendar-<%= id %>"><%= label %></label>
|
||||
<% end %>
|
||||
<input ref="input" type="hidden" class="calendar-input" id="calendar-<%= id %>" v-model="date" name="calendar[<%= id %>]" data-default="<%= defined?(setDate) ? setDate : '' %>" />
|
||||
<date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" placeholder="<%= placeholder %>" @change="updateDate" mode="date"></date-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
<%= f.hidden_field :view_mode, value: view_mode%>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<label class="sci-label"><%= t('experiments.canvas.new_my_module_modal.name') %></label>
|
||||
<div class="sci-input-container form-group">
|
||||
<label><%= t('experiments.canvas.new_my_module_modal.name') %></label>
|
||||
<%= text_field_tag 'my_module[name]', '', placeholder: t('experiments.canvas.new_my_module_modal.name_placeholder'), class: "sci-input-field" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,21 +20,12 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<div class="form-group">
|
||||
<div class="sci-input-container right-icon my-module-due-date-container">
|
||||
<label for="my_module_due_date"><%= t('experiments.canvas.new_my_module_modal.due_date') %></label>
|
||||
<i class="sn-icon sn-icon-calendar"></i>
|
||||
<input id="my_module_due_date"
|
||||
type="datetime"
|
||||
name="my_module[due_date]"
|
||||
data-toggle='date-time-picker'
|
||||
class="sci-input-field calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('experiments.canvas.new_my_module_modal.due_date_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
value=""/>
|
||||
<div class="my-module-due-date-container">
|
||||
<label class="sci-label" for="my_module_due_date"><%= t('experiments.canvas.new_my_module_modal.due_date') %></label>
|
||||
<div id="date-time-picker-my-module" class="vue-date-time-picker w-full">
|
||||
<input ref="input" type="hidden" class="calendar-input" id="date-time-picker-input" v-model="date" name="my_module[due_date]" />
|
||||
<date-time-picker class="w-full" @cleared="clearDate" ref="vueDateTime" placeholder="<%= t('experiments.canvas.new_my_module_modal.due_date_placeholder') %>" @change="updateDate" mode="datetime"></date-time-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,7 +35,7 @@
|
|||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<%= f.hidden_field :tag_ids%>
|
||||
<div class="form-group">
|
||||
<label><%= t('experiments.canvas.new_my_module_modal.assigned_tags_label') %></label>
|
||||
<label class="sci-label"><%= t('experiments.canvas.new_my_module_modal.assigned_tags_label') %></label>
|
||||
<%= select_tag 'module-tags-selector', options_for_select([]),
|
||||
data: {
|
||||
'tags-create-url': project_create_tag_path(project_id: @experiment.project_id),
|
||||
|
|
@ -58,7 +49,7 @@
|
|||
<% if can_designate_users_to_new_task?(@experiment) %>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<label><%= t('experiments.canvas.new_my_module_modal.assigned_users') %></label>
|
||||
<label class="sci-label"><%= t('experiments.canvas.new_my_module_modal.assigned_users') %></label>
|
||||
<%= select_tag 'my_module[user_ids]',
|
||||
options_for_select(users.map{ |user|
|
||||
[
|
||||
|
|
|
|||
Loading…
Reference in a new issue