mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 14:45:56 +08:00
Update/refactor JS for handling Dates and Times
This commit is contained in:
Urban Rotnik
parent
f3bc6386c3
commit
181d637ff3
|
|
@ -7,7 +7,7 @@ var DateTimeHelper = (function() {
|
|||
}
|
||||
|
||||
function isValidDate(date) {
|
||||
return (Object.prototype.toString.call(date) === '[object Date]') && !isNaN(date.getTime());
|
||||
return (date instanceof Date) && !isNaN(date.getTime());
|
||||
}
|
||||
|
||||
function addLeadingZero(value) {
|
||||
|
|
@ -20,10 +20,9 @@ var DateTimeHelper = (function() {
|
|||
date.setMinutes(0);
|
||||
return date;
|
||||
}
|
||||
let hours = timeStr.split(':')[0];
|
||||
let mins = timeStr.split(':')[1];
|
||||
date.setHours(hours);
|
||||
date.setMinutes(mins);
|
||||
|
||||
date.setHours(timeStr.split(':')[0]);
|
||||
date.setMinutes(timeStr.split(':')[1]);
|
||||
return date;
|
||||
}
|
||||
|
||||
|
|
@ -40,199 +39,159 @@ var DateTimeHelper = (function() {
|
|||
return `${y}/${m}/${d} ${hours}:${mins}`;
|
||||
}
|
||||
|
||||
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 dataType = $container.find('.cell-range-container').data('type');
|
||||
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}'
|
||||
data-type="${dataType}"/>`;
|
||||
|
||||
$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');
|
||||
}
|
||||
function insertHiddenField($container) {
|
||||
let formId = $container.data('form-id');
|
||||
let columnId = $container.data('column-id');
|
||||
let dateStr = $container.find('input.date-part').data('selected-date');
|
||||
let timeStr = $container.find('input.time-part').val();
|
||||
let columnType = $container.data('type');
|
||||
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');
|
||||
let hasTime = isValidTimeStr(timeStr);
|
||||
let hasDate = isValidDate(date);
|
||||
let dataType = $container.data('type');
|
||||
let value;
|
||||
let hiddenField;
|
||||
|
||||
if (!hasDate) { // Date needs to be presence
|
||||
value = '';
|
||||
} else if (columnType === 'time' && !hasTime) { // Delete time value
|
||||
value = '';
|
||||
} else if (columnType === 'datetime' && !hasTime) { // Delete date time value
|
||||
value = '';
|
||||
} else {
|
||||
// create date time format
|
||||
if (isValidDate(date) && isValidTimeStr(timeStr)) {
|
||||
value = stringDateTimeFormat(recalcTimestamp(date, timeStr), 'full');
|
||||
} else {
|
||||
value = '';
|
||||
}
|
||||
|
||||
hiddenField = `
|
||||
<input type="hidden"
|
||||
<input class="repository-cell-value"
|
||||
type="hidden"
|
||||
form="${formId}"
|
||||
name="repository_cells[${columnId}]"
|
||||
value="${value}"
|
||||
data-type="${dataType}"/>`;
|
||||
data-type="${columnType}"/>`;
|
||||
|
||||
hiddenFieldContainer.html(hiddenField);
|
||||
$container.find('input.repository-cell-value').remove('input.repository-cell-value');
|
||||
$container.prepend(hiddenField);
|
||||
}
|
||||
|
||||
|
||||
function insertRangeHiddenField($container) {
|
||||
let formId = $container.data('form-id');
|
||||
let columnId = $container.data('column-id');
|
||||
let columnType = $container.data('type');
|
||||
let $startContainer = $container.find('.start-time');
|
||||
let $endContainer = $container.find('.end-time');
|
||||
let startDate = new Date($startContainer.find('input.date-part').data('selected-date'));
|
||||
let startTimeStr = $startContainer.find('input.time-part').val();
|
||||
let endDate = new Date($endContainer.find('input.date-part').data('selected-date'));
|
||||
let endTimeStr = $endContainer.find('input.time-part').val();
|
||||
let hiddenField;
|
||||
let value = '';
|
||||
|
||||
if (isValidDate(startDate)
|
||||
&& isValidTimeStr(startTimeStr)
|
||||
&& isValidDate(endDate)
|
||||
&& isValidTimeStr(endTimeStr)) {
|
||||
let start = stringDateTimeFormat(recalcTimestamp(startDate, startTimeStr), 'full');
|
||||
let end = stringDateTimeFormat(recalcTimestamp(endDate, endTimeStr), 'full');
|
||||
value = JSON.stringify({ start_time: start, end_time: end });
|
||||
}
|
||||
|
||||
hiddenField = `
|
||||
<input class="repository-cell-value"
|
||||
type="hidden"
|
||||
form="${formId}"
|
||||
name="repository_cells[${columnId}]"
|
||||
value='${value}'
|
||||
data-type="${columnType}"/>`;
|
||||
|
||||
$container.find('input.repository-cell-value').remove('input.repository-cell-value');
|
||||
$container.prepend(hiddenField);
|
||||
}
|
||||
|
||||
function initChangeEvents($cell) {
|
||||
$cell.find('input[data-mask-type=time]').on('change', function() {
|
||||
$cell.find('input.time-part').on('change', function() {
|
||||
let $input = $(this);
|
||||
insertHiddenField($input);
|
||||
let $container = $input.closest('.datetime-container');
|
||||
|
||||
if ($input.parent('.range-type').length) {
|
||||
let $secondInput = findSecondRangeInput($input);
|
||||
|
||||
insertHiddenField($secondInput);
|
||||
replaceForRangeHiddenField($input.parent().parent());
|
||||
if ($container.hasClass('range-type')) {
|
||||
insertRangeHiddenField($container);
|
||||
} else {
|
||||
insertHiddenField($container);
|
||||
}
|
||||
});
|
||||
|
||||
$cell.find('.calendar-input').on('dp.change', function(e) {
|
||||
$cell.find('input.date-part').on('dp.change', function(e) {
|
||||
let $input = $(this);
|
||||
let date = e.date._d;
|
||||
let $container = $input.parent().find('.cell-timestamp-container');
|
||||
let $container = $input.closest('.datetime-container');
|
||||
|
||||
if (date !== undefined) {
|
||||
$container.data('current-date', stringDateTimeFormat(date, 'dateonly'));
|
||||
$input.data('selected-date', stringDateTimeFormat(date, 'dateonly'));
|
||||
} else {
|
||||
$container.data('current-date', '');
|
||||
$input.data('selected-date', '');
|
||||
}
|
||||
|
||||
insertHiddenField($input);
|
||||
|
||||
if ($input.parent('.range-type').length) {
|
||||
let $secondInput = findSecondRangeInput($input);
|
||||
|
||||
insertHiddenField($secondInput);
|
||||
replaceForRangeHiddenField($input.parent().parent());
|
||||
if ($container.hasClass('range-type')) {
|
||||
insertRangeHiddenField($container);
|
||||
} else {
|
||||
insertHiddenField($container);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dateInputField(formId, columnId, value) {
|
||||
|
||||
function dateInputField(value, dateDataValue) {
|
||||
return `
|
||||
<input class="form-control editing calendar-input"
|
||||
type="datetime"
|
||||
data-datetime-part="date"
|
||||
data-form-id="${formId}"
|
||||
data-column-id="${columnId}"
|
||||
value='${value}'/>
|
||||
<input class="form-control editing calendar-input date-part"
|
||||
type="datetime"
|
||||
data-datetime-part="date"
|
||||
data-selected-date="${dateDataValue}"
|
||||
value='${value}'/>
|
||||
`;
|
||||
}
|
||||
|
||||
function timeInputField(formId, columnId, value) {
|
||||
function timeInputField(value) {
|
||||
return `
|
||||
<input class="form-control editing"
|
||||
<input class="form-control editing time-part"
|
||||
type="text"
|
||||
data-datetime-part="time"
|
||||
data-mask-type="time"
|
||||
data-form-id="${formId}"
|
||||
data-column-id="${columnId}"
|
||||
value='${value}'
|
||||
placeholder="HH:mm"/>
|
||||
`;
|
||||
}
|
||||
|
||||
function initDateEditMode(formId, columnId, $cell, date, datetime) {
|
||||
let inputFields = `
|
||||
<div class="form-group">
|
||||
<div class="cell-timestamp-container" data-current-date="${datetime}" data-datetime-type="date" data-type="RepositoryDateValue"></div>
|
||||
${dateInputField(formId, columnId, date)}
|
||||
</div>
|
||||
`;
|
||||
|
||||
$cell.html(inputFields);
|
||||
|
||||
$cell.find('.calendar-input').datetimepicker({ ignoreReadonly: true, locale: 'en', format: formatJS });
|
||||
initChangeEvents($cell);
|
||||
function getDateOrDefault($span, mode) {
|
||||
let dateStr = $span.data('date');
|
||||
let date;
|
||||
if (mode === 'timeonly') {
|
||||
// Set default date if no data in span
|
||||
date = new Date(dateStr);
|
||||
if (isValidDate(date)) {
|
||||
dateStr = stringDateTimeFormat(new Date(date), 'dateonly');
|
||||
} else {
|
||||
dateStr = stringDateTimeFormat(new Date(), 'dateonly');
|
||||
}
|
||||
}
|
||||
return dateStr;
|
||||
}
|
||||
|
||||
function initTimeEditMode(formId, columnId, $cell, time, datetime) {
|
||||
let inputFields = `
|
||||
<div class="form-group">
|
||||
<div class="cell-timestamp-container" data-current-date="${datetime}" data-datetime-type="time" data-type="RepositoryTimeValue"></div>
|
||||
${timeInputField(formId, columnId, time)}
|
||||
</div>
|
||||
`;
|
||||
function getTimeOrDefault($span, mode) {
|
||||
let timeStr = $span.data('time');
|
||||
|
||||
$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"]'));
|
||||
|
||||
initChangeEvents($cell);
|
||||
if ((mode === 'dateonly') && (!isValidTimeStr(timeStr))) {
|
||||
timeStr = '00:00';
|
||||
}
|
||||
return timeStr;
|
||||
}
|
||||
|
||||
function initDateTimeEditMode(formId, columnId, $cell, date, time, datetime) {
|
||||
function initDateTimeEditMode(formId, columnId, $cell, mode, columnType) {
|
||||
let $span = $cell.find('span').first();
|
||||
let date = $span.data('date');
|
||||
let dateDataValue = getDateOrDefault($span, mode);
|
||||
let time = getTimeOrDefault($span, mode);
|
||||
let datetime = $span.data('datetime');
|
||||
let inputFields = `
|
||||
<div class="form-group">
|
||||
<div class="cell-timestamp-container" data-current-date="${datetime}" data-datetime-type="datetime" data-type="RepositoryDateTimeValue"></div>
|
||||
${dateInputField(formId, columnId, date)}
|
||||
${timeInputField(formId, columnId, time)}
|
||||
<div class="form-group datetime-container ${mode}"
|
||||
data-form-id="${formId}"
|
||||
data-column-id="${columnId}"
|
||||
data-type="${columnType}"
|
||||
data-current-datetime="${datetime}">
|
||||
${dateInputField(date, dateDataValue)}
|
||||
${timeInputField(time)}
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -250,19 +209,33 @@ var DateTimeHelper = (function() {
|
|||
initChangeEvents($cell);
|
||||
}
|
||||
|
||||
function initDateTimeRangeEditMode(formId, columnId, $cell, startDate, startTime, startDatetime, endDate, endTime, endDatetime) {
|
||||
function initDateTimeRangeEditMode(formId, columnId, $cell, mode, columnType) {
|
||||
let $startSpan = $cell.find('span').first();
|
||||
let startDate = $startSpan.data('date');
|
||||
let startTime = getTimeOrDefault($startSpan, mode);
|
||||
let startDatetime = $startSpan.data('datetime');
|
||||
let startDateDataValue = getDateOrDefault($startSpan, mode);
|
||||
let $endSpan = $cell.find('span').last();
|
||||
let endDate = $endSpan.data('date');
|
||||
let endTime = getTimeOrDefault($endSpan, mode);
|
||||
let endDatetime = $endSpan.data('datetime');
|
||||
let endDateDataValue = getDateOrDefault($endSpan, mode);
|
||||
|
||||
let inputFields = `
|
||||
<div class="form-group">
|
||||
<div class="cell-range-container" data-type="RepositoryDateTimeRangeValue"></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 class="form-group datetime-container range-type"
|
||||
data-form-id="${formId}"
|
||||
data-column-id="${columnId}"
|
||||
data-type="${columnType}"
|
||||
>
|
||||
<div class="start-time ${mode}"
|
||||
data-current-datetime="${startDatetime}">
|
||||
${dateInputField(startDate, startDateDataValue)}
|
||||
${timeInputField(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 class="end-time ${mode}"
|
||||
data-current-datetime="${endDatetime}">
|
||||
${dateInputField(endDate, endDateDataValue)}
|
||||
${timeInputField(endTime)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -290,70 +263,8 @@ var DateTimeHelper = (function() {
|
|||
initChangeEvents($cell);
|
||||
}
|
||||
|
||||
function initDateRangeEditMode(formId, columnId, $cell, startDate, startDatetime, endDate, endDatetime) {
|
||||
let inputFields = `
|
||||
<div class="form-group">
|
||||
<div class="cell-range-container" data-type="RepositoryDateRangeValue"></div>
|
||||
<div class="start-time range-type">
|
||||
<div class="cell-timestamp-container" data-current-date="${startDatetime}" data-datetime-type="date"></div>
|
||||
${dateInputField(formId, columnId, startDate)}
|
||||
</div>
|
||||
<div class="end-time range-type">
|
||||
<div class="cell-timestamp-container" data-current-date="${endDatetime}" data-datetime-type="date"></div>
|
||||
${dateInputField(formId, columnId, endDate)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
$cell.html(inputFields);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
function initTimeRangeEditMode(formId, columnId, $cell, startTime, startDatetime, endTime, endDatetime) {
|
||||
let inputFields = `
|
||||
<div class="form-group">
|
||||
<div class="cell-range-container" data-type="RepositoryTimeRangeValue"></div>
|
||||
<div class="start-time range-type">
|
||||
<div class="cell-timestamp-container" data-current-date="${startDatetime}" data-datetime-type="time"></div>
|
||||
${timeInputField(formId, columnId, startTime)}
|
||||
</div>
|
||||
<div class="end-time range-type">
|
||||
<div class="cell-timestamp-container" data-current-date="${endDatetime}" data-datetime-type="time"></div>
|
||||
${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"]'));
|
||||
|
||||
initChangeEvents($cell);
|
||||
}
|
||||
|
||||
return {
|
||||
initDateEditMode: initDateEditMode,
|
||||
initTimeEditMode: initTimeEditMode,
|
||||
initDateTimeEditMode: initDateTimeEditMode,
|
||||
initDateTimeRangeEditMode: initDateTimeRangeEditMode,
|
||||
initDateRangeEditMode: initDateRangeEditMode,
|
||||
initTimeRangeEditMode: initTimeRangeEditMode
|
||||
initDateTimeRangeEditMode: initDateTimeRangeEditMode
|
||||
};
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
/* global ListColumnHelper ChecklistColumnHelper Status SmartAnnotation I18n GLOBAL_CONSTANTS DateTimeHelper*/
|
||||
/*
|
||||
global ListColumnHelper ChecklistColumnHelper Status SmartAnnotation I18n
|
||||
GLOBAL_CONSTANTS DateTimeHelper
|
||||
*/
|
||||
|
||||
$.fn.dataTable.render.editRowName = function(formId, cell) {
|
||||
let $cell = $(cell.node());
|
||||
|
|
@ -90,68 +93,38 @@ $.fn.dataTable.render.editRepositoryStatusValue = function(formId, columnId, cel
|
|||
|
||||
$.fn.dataTable.render.editRepositoryDateTimeValue = function(formId, columnId, cell) {
|
||||
let $cell = $(cell.node());
|
||||
let $span = $cell.find('span').first();
|
||||
let date = $span.data('date');
|
||||
let time = $span.data('time');
|
||||
let datetime = $span.data('datetime');
|
||||
|
||||
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, date, time, datetime);
|
||||
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.editRepositoryDateValue = function(formId, columnId, cell) {
|
||||
let $cell = $(cell.node());
|
||||
let $span = $cell.find('span').first();
|
||||
let date = $span.data('date');
|
||||
let datetime = $span.data('datetime');
|
||||
|
||||
DateTimeHelper.initDateEditMode(formId, columnId, $cell, date, datetime);
|
||||
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.editRepositoryTimeValue = function(formId, columnId, cell) {
|
||||
let $cell = $(cell.node());
|
||||
let $span = $cell.find('span').first();
|
||||
let time = $span.data('time');
|
||||
let datetime = $span.data('datetime');
|
||||
|
||||
DateTimeHelper.initTimeEditMode(formId, columnId, $cell, time, datetime);
|
||||
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.editRepositoryDateTimeRangeValue = 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, startDate, startTime, startDatetime, endDate, endTime, endDatetime);
|
||||
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeRangeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.editRepositoryDateRangeValue = function(formId, columnId, cell) {
|
||||
let $cell = $(cell.node());
|
||||
let $startSpan = $cell.find('span').first();
|
||||
let startDate = $startSpan.data('date');
|
||||
let startDatetime = $startSpan.data('datetime');
|
||||
let $endSpan = $cell.find('span').last();
|
||||
let endDate = $endSpan.data('date');
|
||||
let endDatetime = $endSpan.data('datetime');
|
||||
|
||||
DateTimeHelper.initDateRangeEditMode(formId, columnId, $cell, startDate, startDatetime, endDate, endDatetime);
|
||||
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateRangeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.editRepositoryTimeRangeValue = function(formId, columnId, cell) {
|
||||
let $cell = $(cell.node());
|
||||
let $startSpan = $cell.find('span').first();
|
||||
let startTime = $startSpan.data('time');
|
||||
let startDatetime = $startSpan.data('datetime');
|
||||
let $endSpan = $cell.find('span').last();
|
||||
let endTime = $endSpan.data('time');
|
||||
let endDatetime = $endSpan.data('datetime');
|
||||
|
||||
DateTimeHelper.initTimeRangeEditMode(formId, columnId, $cell, startTime, startDatetime, endTime, endDatetime);
|
||||
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeRangeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.editRepositoryChecklistValue = function(formId, columnId, cell) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
/* global ListColumnHelper ChecklistColumnHelper Status SmartAnnotation I18n GLOBAL_CONSTANTS DateTimeHelper */
|
||||
/*
|
||||
global ListColumnHelper ChecklistColumnHelper Status SmartAnnotation I18n
|
||||
GLOBAL_CONSTANTS DateTimeHelper
|
||||
*/
|
||||
|
||||
$.fn.dataTable.render.newRowName = function(formId, $cell) {
|
||||
$cell.html(`
|
||||
|
|
@ -87,27 +90,27 @@ $.fn.dataTable.render.newRepositoryNumberValue = function(formId, columnId, $cel
|
|||
};
|
||||
|
||||
$.fn.dataTable.render.newRepositoryDateTimeValue = function(formId, columnId, $cell) {
|
||||
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, '', '', '');
|
||||
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.newRepositoryTimeValue = function(formId, columnId, $cell) {
|
||||
DateTimeHelper.initTimeEditMode(formId, columnId, $cell, '', '');
|
||||
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.newRepositoryDateValue = function(formId, columnId, $cell) {
|
||||
DateTimeHelper.initDateEditMode(formId, columnId, $cell, '', '');
|
||||
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.newRepositoryDateTimeRangeValue = function(formId, columnId, $cell) {
|
||||
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', '', '', '', '', '');
|
||||
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeRangeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.newRepositoryDateRangeValue = function(formId, columnId, $cell) {
|
||||
DateTimeHelper.initDateRangeEditMode(formId, columnId, $cell, '', '', '', '');
|
||||
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateRangeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.newRepositoryTimeRangeValue = function(formId, columnId, $cell) {
|
||||
DateTimeHelper.initTimeRangeEditMode(formId, columnId, $cell, '', '', '', '');
|
||||
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeRangeValue');
|
||||
};
|
||||
|
||||
$.fn.dataTable.render.newRepositoryCheckboxValue = function(formId, columnId) {
|
||||
|
|
|
|||
|
|
@ -39,15 +39,14 @@ $.fn.dataTable.render.RepositoryNumberValueValidator = function() {
|
|||
};
|
||||
|
||||
$.fn.dataTable.render.RepositoryDateTimeValueValidator = function($input) {
|
||||
let $container = $input.parents().eq(1);
|
||||
let $date = $container.find('input[data-datetime-part=date]');
|
||||
let $time = $container.find('input[data-datetime-part=time]');
|
||||
let $container = $input.parents('.datetime-container');
|
||||
let $date = $container.find('input.date-part');
|
||||
let $time = $container.find('input.time-part');
|
||||
|
||||
if (($date.val() === '') === ($time.val() === '')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// will be refactored
|
||||
$container.addClass('has-error');
|
||||
$container.append('<span class="help-block">Set both or none</span>');
|
||||
return false;
|
||||
|
|
@ -62,12 +61,11 @@ $.fn.dataTable.render.RepositoryTimeValueValidator = function() {
|
|||
};
|
||||
|
||||
$.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
|
||||
// will be refactored
|
||||
let $container = $input.parents().eq(1);
|
||||
let $dateS = $container.find('.start-time input[data-datetime-part=date]');
|
||||
let $timeS = $container.find('.start-time input[data-datetime-part=time]');
|
||||
let $dateE = $container.find('.end-time input[data-datetime-part=date]');
|
||||
let $timeE = $container.find('.end-time input[data-datetime-part=time]');
|
||||
let $container = $input.parents('.datetime-container');
|
||||
let $dateS = $container.find('.start-time input.date-part');
|
||||
let $timeS = $container.find('.start-time input.time-part');
|
||||
let $dateE = $container.find('.end-time input.date-part');
|
||||
let $timeE = $container.find('.end-time input.time-part');
|
||||
let isValid = true;
|
||||
let errorMessage;
|
||||
let startTime;
|
||||
|
|
@ -86,10 +84,10 @@ $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
|
|||
|
||||
if (a.filter((v, i, arr) => arr.indexOf(v) === i).length > 1) {
|
||||
isValid = false;
|
||||
errorMessage = 'Needs to set all or none';
|
||||
errorMessage = I18n.t('repositories.table.date_time.errors.set_all_or_none');
|
||||
} else if (($input.val()) && (startTime > endTime)) {
|
||||
isValid = false;
|
||||
errorMessage = 'End time is before start time';
|
||||
errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range');
|
||||
}
|
||||
|
||||
if (isValid) {
|
||||
|
|
@ -102,11 +100,9 @@ $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
|
|||
};
|
||||
|
||||
$.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
|
||||
// will be refactored
|
||||
|
||||
let $container = $input.parents().eq(1);
|
||||
let $dateS = $container.find('.start-time input[data-datetime-part=date]');
|
||||
let $dateE = $container.find('.end-time input[data-datetime-part=date]');
|
||||
let $container = $input.parents('.datetime-container');
|
||||
let $dateS = $container.find('.start-time input.date-part');
|
||||
let $dateE = $container.find('.end-time input.date-part');
|
||||
let isValid = true;
|
||||
let errorMessage;
|
||||
let endTime;
|
||||
|
|
@ -118,10 +114,10 @@ $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
|
|||
|
||||
if (!($dateS.val() === '') === ($dateE.val() === '')) {
|
||||
isValid = false;
|
||||
errorMessage = 'Needs to set all or none';
|
||||
errorMessage = I18n.t('repositories.table.date_time.errors.set_all_or_none');
|
||||
} else if (($input.val()) && (startTime > endTime)) {
|
||||
isValid = false;
|
||||
errorMessage = 'End date is before start date';
|
||||
errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range');
|
||||
}
|
||||
|
||||
if (isValid) {
|
||||
|
|
@ -134,26 +130,22 @@ $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
|
|||
};
|
||||
|
||||
$.fn.dataTable.render.RepositoryTimeRangeValueValidator = function($input) {
|
||||
// will be refactored
|
||||
|
||||
let $container = $input.parents().eq(1);
|
||||
let $timeS = $container.find('.start-time input[data-datetime-part=time]');
|
||||
let $timeE = $container.find('.end-time input[data-datetime-part=time]');
|
||||
let $container = $input.parents('.datetime-container');
|
||||
let $timeS = $container.find('.start-time input.time-part');
|
||||
let $timeE = $container.find('.end-time input.time-part');
|
||||
let isValid = true;
|
||||
let errorMessage;
|
||||
|
||||
if (!($timeS.val() === '') === ($timeE.val() === '')) {
|
||||
isValid = false;
|
||||
errorMessage = 'Needs to set both or none';
|
||||
errorMessage = I18n.t('repositories.table.date_time.errors.set_all_or_none');
|
||||
} else if ($timeS.val() > $timeE.val()) {
|
||||
isValid = false;
|
||||
errorMessage = 'Needs to set both or none';
|
||||
errorMessage = 'End time is before start time';
|
||||
errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range');
|
||||
}
|
||||
if (isValid) {
|
||||
return true;
|
||||
}
|
||||
// will be refactored
|
||||
$container.addClass('has-error');
|
||||
$container.append(`<span class="help-block">${errorMessage}</span>`);
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -14,4 +14,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DateTime
|
||||
.dateonly {
|
||||
input.time-part {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.timeonly {
|
||||
input.date-part {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1049,6 +1049,10 @@ en:
|
|||
added_by: "Added by"
|
||||
assets:
|
||||
select_file_btn: "Select File (Max %{max_size} MB)..."
|
||||
date_time:
|
||||
errors:
|
||||
set_all_or_none: 'Needs to set both or none'
|
||||
not_valid_range: 'Range is not valid.'
|
||||
add_new_record: "New item"
|
||||
import_records:
|
||||
import: 'Import'
|
||||
|
|
|
|||
Loading…
Reference in a new issue