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

Add DateTimeRange renderer

Browse source
This commit is contained in:
Urban Rotnik 2019-12-17 11:27:07 +01:00
parent 2a63854123
commit 5d4453470a
8 changed files with 184 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
app/assets/javascripts/repositories/renderers/columns/date_time_helper.js
View file

@ -41,7 +41,67 @@ var DateTimeHelper = (function() {
return `${y}/${m}/${d} ${hours}:${mins}`;
}
function insertHiddenField($input, date, timeStr, format) {
function findSecondRangeInput($input) {
let $container = $input.parent().parent();
let $secondInput;
if ($input.parent().hasClass('start-time')) {
$secondInput = $container.find('.end-time input').first();
} else {
$secondInput = $container.find('.start-time input').first();
}
return $secondInput;
}
function replaceForRangeHiddenField($container) {
let startTimeContainer = $container.find('.start-time')
let endTimeContainer = $container.find('.end-time')
let startTime = startTimeContainer.find('input[type=hidden]').val();
let endTime = endTimeContainer.find('input[type=hidden]').val();
let formId = startTimeContainer.find('input[type!=hidden]').data('form-id');
let columnId = startTimeContainer.find('input[type!=hidden]').data('column-id');
let json = {};
let hiddenField;
let value;
json.start_time = startTime;
json.end_time = endTime;
if (startTime && endTime) {
value = JSON.stringify(json);
} else {
value = '';
}
hiddenField = `
<input type="hidden"
form="${formId}"
name="repository_cells[${columnId}]"
value='${value}' />`;
$container.find('.cell-range-container').html(hiddenField);
startTimeContainer.find('.cell-timestamp-container').html('');
endTimeContainer.find('.cell-timestamp-container').html('');
}
function insertHiddenField($input) {
let fieldType = $input.data('datetime-part')
let $container = $input.parent().find('.cell-timestamp-container');
let dateStr = $container.data('current-date');
let columnType = $container.data('datetime-type');
let timeStr;
if (fieldType === 'time') {
timeStr = $input.val();
} else if (fieldType === 'date') {
timeStr = $input.parent().find('input[data-mask-type=time]').val();
}
if (columnType === 'time' && !isValidDate(dateStr)) {
// new time without value for date
dateStr = stringDateTimeFormat(new Date(), 'dateonly');
}
let date = new Date(dateStr);
let formId = $input.data('form-id');
let columnId = $input.data('column-id');
let hiddenFieldContainer = $input.parent().find('.cell-timestamp-container');
@ -52,9 +112,9 @@ var DateTimeHelper = (function() {
if (!hasDate) { // Date needs to be presence
value = '';
} else if (format === 'time' && !hasTime) { // Delete time value
} else if (columnType === 'time' && !hasTime) { // Delete time value
value = '';
} else if (format === 'datetime' && !hasTime) { // Delete date time value
} else if (columnType === 'datetime' && !hasTime) { // Delete date time value
value = '';
} else {
// create date time format
@ -72,29 +132,36 @@ var DateTimeHelper = (function() {
function initChangeEvents($cell) {
$cell.find('input[data-mask-type=time]').on('change', function() {
let timeStr = $(this).val();
let $container = $(this).parent().find('.cell-timestamp-container');
let dateStr = $container.data('current-date');
let columnType = $container.data('datetime-type');
if (columnType === 'time' && !isValidDate(dateStr)) {
// new time without value for date
dateStr = stringDateTimeFormat(new Date(), 'dateonly');
}
let $input = $(this);
insertHiddenField($input);
insertHiddenField($(this), new Date(dateStr), timeStr, columnType);
if ($input.parent('.range-type').length) {
let $secondInput = findSecondRangeInput($input);
insertHiddenField($secondInput);
replaceForRangeHiddenField($input.parent().parent());
}
});
$cell.find('.calendar-input').on('dp.change', function(e) {
let $input = $(this)
let date = e.date._d;
let timeStr = $(this).parent().find('input[data-mask-type=time]').val();
let $container = $(this).parent().find('.cell-timestamp-container');
let $container = $input.parent().find('.cell-timestamp-container');
if (date !== undefined) {
$container.data('current-date', stringDateTimeFormat(date, 'dateonly'));
} else {
$container.data('current-date', '');
}
insertHiddenField($(this), date, timeStr, $container.data('datetime-type'));
insertHiddenField($input);
if ($input.parent('.range-type').length) {
let $secondInput = findSecondRangeInput($input);
insertHiddenField($secondInput);
replaceForRangeHiddenField($input.parent().parent());
}
});
}
@ -102,6 +169,7 @@ var DateTimeHelper = (function() {
return `
<input class="form-control editing calendar-input"
type="datetime"
data-datetime-part="date"
data-form-id="${formId}"
data-column-id="${columnId}"
value='${value}'/>
@ -111,7 +179,8 @@ var DateTimeHelper = (function() {
function timeInputField(formId, columnId, value) {
return `
<input class="form-control editing"
type="text"
type="text"
data-datetime-part="time"
data-mask-type="time"
data-form-id="${formId}"
data-column-id="${columnId}"
@ -178,9 +247,50 @@ var DateTimeHelper = (function() {
initChangeEvents($cell);
}
function initDateTimeRangeEditMode(formId, columnId, $cell, startDate, startTime, startDatetime, endDate, endTime, endDatetime) {
let inputFields = `
<div class="form-group">
<div class="cell-range-container"></div>
<div class="start-time range-type">
<div class="cell-timestamp-container" data-current-date="${startDatetime}" data-datetime-type="datetime"></div>
${dateInputField(formId, columnId, startDate)}
${timeInputField(formId, columnId, startTime)}
</div>
<div class="end-time range-type">
<div class="cell-timestamp-container" data-current-date="${endDatetime}" data-datetime-type="datetime"></div>
${dateInputField(formId, columnId, endDate)}
${timeInputField(formId, columnId, endTime)}
</div>
</div>
`;
$cell.html(inputFields);
Inputmask('datetime', {
inputFormat: 'HH:MM',
placeholder: 'HH:mm',
clearIncomplete: true,
showMaskOnHover: true,
hourFormat: 24
}).mask($cell.find('input[data-mask-type="time"]'));
let $cal1 = $cell.find('.calendar-input').first().datetimepicker({ ignoreReadonly: true, locale: 'en', format: formatJS });
let $cal2 = $cell.find('.calendar-input').last().datetimepicker({ ignoreReadonly: true, locale: 'en', format: formatJS });
$cal1.on('dp.change', function(e) {
$cal2.data('DateTimePicker').minDate(e.date);
});
$cal2.on('dp.change', function(e) {
$cal1.data('DateTimePicker').maxDate(e.date);
});
initChangeEvents($cell);
}
return {
initDateEditMode: initDateEditMode,
initTimeEditMode: initTimeEditMode,
initDateTimeEditMode: initDateTimeEditMode,
initDateTimeRangeEditMode: initDateTimeRangeEditMode
};
}());

12
app/assets/javascripts/repositories/renderers/edit_renderers.js
View file

@ -117,7 +117,17 @@ $.fn.dataTable.render.editRepositoryTimeValue = function(formId, columnId, cell)
};
$.fn.dataTable.render.editRepositoryDateTimeRangeValue = function(formId, columnId, cell) {
return '';
let $cell = $(cell.node());
let $startSpan = $cell.find('span').first();
let startDate = $startSpan.data('date');
let startTime = $startSpan.data('time');
let startDatetime = $startSpan.data('datetime');
let $endSpan = $cell.find('span').last();
let endDate = $endSpan.data('date');
let endTime = $endSpan.data('time');
let endDatetime = $endSpan.data('datetime');
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, startDate, startTime, startDatetime, endDate, endTime, endDatetime);
};
$.fn.dataTable.render.editRepositoryDateRangeValue = function(formId, columnId, cell) {

14
app/assets/javascripts/repositories/renderers/new_renderers.js
View file

@ -98,6 +98,20 @@ $.fn.dataTable.render.newRepositoryDateValue = function(formId, columnId, $cell)
DateTimeHelper.initDateEditMode(formId, columnId, $cell, '', '');
};
$.fn.dataTable.render.newRepositoryDateTimeRangeValue = function(formId, columnId, $cell) {
// let $cell = $(cell.node());
// let $startSpan = $cell.find('span').first();
// let startDate = $startSpan.data('date');
// let startTime = $startSpan.data('time');
// let startDatetime = $startSpan.data('datetime');
// let $endSpan = $cell.find('span').last();
// let endDate = $endSpan.data('date');
// let endTime = $endSpan.data('time');
// let endDatetime = $endSpan.data('datetime');
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', '', '', '', '', '');
};
$.fn.dataTable.render.newRepositoryCheckboxValue = function(formId, columnId) {
return '';
};

7
app/assets/javascripts/repositories/renderers/view_renderers.js
View file

@ -90,7 +90,12 @@ $.fn.dataTable.render.defaultRepositoryDateTimeRangeValue = function() {
};
$.fn.dataTable.render.RepositoryDateTimeRangeValue = function(data) {
return data.value;
return `<span data-time="${data.value.start_time.time_formatted}"
data-datetime="${data.value.start_time.datetime}"
data-date="${data.value.start_time.date_formatted}">${data.value.start_time.formatted}</span> -
<span data-time="${data.value.end_time.time_formatted}"
data-datetime="${data.value.end_time.datetime}"
data-date="${data.value.end_time.date_formatted}">${data.value.end_time.formatted}</span>`;
};
$.fn.dataTable.render.defaultRepositoryDateRangeValue = function() {

6
app/models/repository_cell.rb
View file

@ -70,21 +70,21 @@ class RepositoryCell < ApplicationRecord
belongs_to :repository_date_time_range_value,
(lambda do
includes(:repository_cell)
.where(repository_cells: { value_type: 'RepositoryDateTimeRangeValue' })
.where(repository_cells: { value_type: 'RepositoryDateTimeRangeValueBase' })
end),
optional: true, foreign_key: :value_id, inverse_of: :repository_cell
belongs_to :repository_date_range_value,
(lambda do
includes(:repository_cell)
.where(repository_cells: { value_type: 'RepositoryDateRangeValue' })
.where(repository_cells: { value_type: 'RepositoryDateTimeRangeValueBase' })
end),
optional: true, foreign_key: :value_id, inverse_of: :repository_cell
belongs_to :repository_time_range_value,
(lambda do
includes(:repository_cell)
.where(repository_cells: { value_type: 'RepositoryTimeRangeValue' })
.where(repository_cells: { value_type: 'RepositoryDateTimeRangeValueBase' })
end),
optional: true, foreign_key: :value_id, inverse_of: :repository_cell

11
app/models/repository_date_time_range_value.rb
View file

@ -2,8 +2,9 @@
class RepositoryDateTimeRangeValue < RepositoryDateTimeRangeValueBase
def data_changed?(new_data)
st = Time.zone.parse(new_data[:start_time])
et = Time.zone.parse(new_data[:end_time])
data = JSON.parse(new_data).symbolize_keys
st = Time.zone.parse(data[:start_time])
et = Time.zone.parse(data[:end_time])
st.to_i != start_time.to_i || et.to_i != end_time.to_i
end
@ -12,9 +13,11 @@ class RepositoryDateTimeRangeValue < RepositoryDateTimeRangeValueBase
end
def self.new_with_payload(payload, attributes)
data = JSON.parse(payload).symbolize_keys
value = new(attributes)
value.start_time = Time.zone.parse(payload[:start_time])
value.end_time = Time.zone.parse(payload[:end_time])
value.start_time = Time.zone.parse(data[:start_time])
value.end_time = Time.zone.parse(data[:end_time])
value
end
end

5
app/models/repository_date_time_range_value_base.rb
View file

@ -16,8 +16,9 @@ class RepositoryDateTimeRangeValueBase < ApplicationRecord
SORTABLE_VALUE_INCLUDE = :repository_date_time_range_value
def update_data!(new_data, user)
self.start_time = Time.zone.parse(new_data[:start_time])
self.end_time = Time.zone.parse(new_data[:end_time])
data = JSON.parse(new_data).symbolize_keys
self.start_time = Time.zone.parse(data[:start_time])
self.end_time = Time.zone.parse(data[:end_time])
self.last_modified_by = user
save!
end

15
app/serializers/repository_datatable/repository_date_time_range_value_serializer.rb
View file

@ -3,7 +3,20 @@
module RepositoryDatatable
class RepositoryDateTimeRangeValueSerializer < RepositoryBaseValueSerializer
def value
I18n.l(object.start_time, format: :full_with_comma) + ' - ' + I18n.l(object.end_time, format: :full_with_comma)
{
start_time: {
formatted: I18n.l(object.start_time, format: :full_with_comma),
date_formatted: I18n.l(object.start_time, format: :full_date),
time_formatted: I18n.l(object.start_time, format: :time),
datetime: object.start_time.strftime('%Y/%m/%d %H:%M')
},
end_time: {
formatted: I18n.l(object.end_time, format: :full_with_comma),
date_formatted: I18n.l(object.end_time, format: :full_date),
time_formatted: I18n.l(object.end_time, format: :time),
datetime: object.end_time.strftime('%Y/%m/%d %H:%M')
}
}
end
end
end