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

Replace datetime pickers in repositories [SCI-9629]

Browse source
This commit is contained in:
Anton 2023-11-07 11:34:34 +01:00
parent e6f82e61e5
commit 688538aa39
7 changed files with 187 additions and 360 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,316 +2,84 @@
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
var DateTimeHelper = (function() { var DateTimeHelper = (function() {
function isValidTimeStr(timeStr) { function placeholder(mode) {
return /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(timeStr); if (mode === 'date') return formatJS;
} if (mode === 'time') return 'HH:mm';
return `${formatJS} HH:mm`;
function isValidDate(date) {
return (date instanceof Date) && !isNaN(date.getTime());
}
function addLeadingZero(value) {
return ('0' + value).slice(-2);
}
function setDateTimePickerOpeningDirection(event) {
const element = $(event.target);
const dateTimePickerWidget = $('.bootstrap-datetimepicker-widget');
const windowHeight = element.closest('table').offset().top;
const inputTop = element.offset().top;
const pickerHeight = $('.bootstrap-datetimepicker-widget').outerHeight();
if (inputTop - windowHeight > pickerHeight) {
dateTimePickerWidget.addClass('top')
.removeClass('bottom')
.css({
top: 'auto',
bottom: '36px',
});
} else {
dateTimePickerWidget.addClass('bottom')
.removeClass('top')
.css({
top: '36px',
bottom: 'auto',
});
}
}
function recalcTimestamp(date, timeStr) {
if (!isValidTimeStr(timeStr)) {
date.setHours(0);
date.setMinutes(0);
return date;
}
date.setHours(timeStr.split(':')[0]);
date.setMinutes(timeStr.split(':')[1]);
return date;
}
function stringDateTimeFormat(date, format) {
let y = date.getFullYear();
let m = addLeadingZero(date.getMonth() + 1);
let d = addLeadingZero(date.getDate());
let hours = addLeadingZero(date.getHours());
let mins = addLeadingZero(date.getMinutes());
if (format === 'dateonly') {
return `${y}/${m}/${d}`;
}
return `${y}/${m}/${d} ${hours}:${mins}`;
}
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 value = '';
let hiddenField;
if (isValidDate(date) && isValidTimeStr(timeStr)) {
value = stringDateTimeFormat(recalcTimestamp(date, timeStr), 'full');
}
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();
$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();
$container.prepend(hiddenField);
}
function initChangeEvents($cell) {
$cell.find('input.time-part').on('change', function() {
let $input = $(this);
let $container = $input.closest('.datetime-container');
if ($container.hasClass('range-type')) {
insertRangeHiddenField($container);
} else {
insertHiddenField($container);
}
});
$cell.find('input.date-part').on('dp.change', function(e) {
let $input = $(this);
let date = e.date._d;
let $container = $input.closest('.datetime-container');
if (date !== undefined) {
$input.data('selected-date', stringDateTimeFormat(date, 'dateonly'));
} else {
$input.data('selected-date', '');
}
if ($container.hasClass('range-type')) {
insertRangeHiddenField($container);
} else {
insertHiddenField($container);
}
});
}
function dateInputField(value, dateDataValue) {
return `
<div class="sci-input-container date-container right-icon">
<input class="calendar-input date-part sci-input-field"
type="datetime"
placeholder="${formatJS}"
data-datetime-part="date"
data-selected-date="${dateDataValue}"
value='${value}'/>
<i class="sn-icon sn-icon-calendar"></i>
</div>
`;
}
function timeInputField(value) {
return `
<div class="sci-input-container time-container right-icon">
<input class="time-part sci-input-field"
type="text"
data-mask-type="time"
value='${value}'
placeholder="HH:mm"/>
<i class="sn-icon sn-icon-created"></i>
</div>
`;
}
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 getTimeOrDefault($span, mode) {
let timeStr = $span.data('time');
if ((mode === 'dateonly') && (!isValidTimeStr(timeStr))) {
timeStr = '00:00';
}
return timeStr;
}
function initCurrentTimeSelector($cell) {
$cell.find('.time-container .fa-clock').click(function() {
var inputField = $(this).prev();
var d = new Date();
var h = addLeadingZero(d.getHours());
var m = addLeadingZero(d.getMinutes());
inputField.val(h + ':' + m).change();
});
} }
function initDateTimeEditMode(formId, columnId, $cell, mode, columnType) { function initDateTimeEditMode(formId, columnId, $cell, mode, columnType) {
let $span = $cell.find('span').first(); const $span = $cell.find('span').first();
let date = $span.data('date'); const dateTime = $span.data('datetime') || '';
let dateDataValue = getDateOrDefault($span, mode); const inputFields = `
let time = getTimeOrDefault($span, mode); <div class="datetime-container">
let datetime = $span.data('datetime'); <div id="datetimePickerContainer${formId}${columnId}"
let inputFields = ` class="date-container ${mode} vue-date-time-picker-filter min-w-[160px]">
<div class="form-group datetime-container ${mode}" <input ref="input"
data-form-id="${formId}"
data-column-id="${columnId}"
data-type="${columnType}" data-type="${columnType}"
data-current-datetime="${datetime}"> data-simple-format="true"
${dateInputField(date, dateDataValue)} form="${formId}"
${timeInputField(time)} name="repository_cells[${columnId}]"
</div> class="datetime" type="hidden"
`; data-default="${dateTime}"
v-model="date"
id="datetimePicker${formId}${columnId}" />
<date-time-picker class="w-full" @cleared="clearDate"
ref="vueDateTime" @change="updateDate" mode="${mode}"
placeholder="${placeholder(mode)}"></date-time-picker>
</div>
</div>
`;
$cell.html(inputFields); $cell.html(inputFields);
initCurrentTimeSelector($cell);
Inputmask('datetime', { window.initDateTimePickerComponent(`#datetimePickerContainer${formId}${columnId}`);
inputFormat: 'HH:MM',
placeholder: 'HH:mm',
clearIncomplete: true,
showMaskOnHover: true,
hourFormat: 24
}).mask($cell.find('input[data-mask-type="time"]'));
$cell.find('.calendar-input')
.datetimepicker({ ignoreReadonly: true, locale: 'en', format: formatJS })
.on('dp.show', (e) => {
setDateTimePickerOpeningDirection(e);
});
initChangeEvents($cell);
} }
function initDateTimeRangeEditMode(formId, columnId, $cell, mode, columnType) { function initDateTimeRangeEditMode(formId, columnId, $cell, mode, columnType) {
let $startSpan = $cell.find('span').first(); const $startSpan = $cell.find('span').first();
let startDate = $startSpan.data('date'); const startDateTime = $startSpan.data('datetime') || '';
let startTime = getTimeOrDefault($startSpan, mode); const $endSpan = $cell.find('span').last();
let startDatetime = getDateOrDefault($startSpan, mode); const endDateTime = $endSpan.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 = getDateOrDefault($endSpan, mode);
let endDateDataValue = getDateOrDefault($endSpan, mode);
let inputFields = `
<div class="form-group datetime-container range-type ${mode}"
data-form-id="${formId}"
data-column-id="${columnId}"
data-type="${columnType}"
>
<div class="start-time ${mode}"
data-current-datetime="${startDatetime}">
${dateInputField(startDate, startDatetime)}
${timeInputField(startTime)}
</div>
<div class="separator">—</div>
<div class="end-time ${mode}"
data-current-datetime="${endDatetime}">
${dateInputField(endDate, endDatetime)}
${timeInputField(endTime)}
</div>
</div>
`;
const inputFields = `
<div class="datetime-container range-type ${mode}">
<div id="datetimeStartPickerComtainer${formId}${columnId}"
class="date-container ${mode} vue-date-time-picker-filter min-w-[160px]">
<input ref="input"
data-type="${columnType}"
data-simple-format="true"
form="${formId}"
name="repository_cells[${columnId}][start_time]"
class="datetime start" type="hidden"
data-default="${startDateTime}"
v-model="date"
id="datetimeStartPicker${formId}${columnId}" />
<date-time-picker class="w-full" @cleared="clearDate"
ref="vueDateTime" @change="updateDate"
mode="${mode}" placeholder="${placeholder(mode)}"></date-time-picker>
</div>
<div class="separator">—</div>
<div id="datetimeEndPickerComtainer${formId}${columnId}"
class="date-container ${mode} vue-date-time-picker-filter min-w-[160px]">
<input ref="input"
data-type="${columnType}"
data-simple-format="true"
form="${formId}"
name="repository_cells[${columnId}][end_time]"
class="datetime end" type="hidden"
data-default="${endDateTime}"
v-model="date"
id="datetimeEndPicker${formId}${columnId}" />
<date-time-picker class="w-full" @cleared="clearDate"
ref="vueDateTime" @change="updateDate" mode="${mode}"
placeholder="${placeholder(mode)}"></date-time-picker>
</div>
</div>`;
$cell.html(inputFields); $cell.html(inputFields);
initCurrentTimeSelector($cell); window.initDateTimePickerComponent(`#datetimeStartPickerComtainer${formId}${columnId}`);
window.initDateTimePickerComponent(`#datetimeEndPickerComtainer${formId}${columnId}`);
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);
}).on('dp.show', (e) => {
setDateTimePickerOpeningDirection(e);
});
$cal2.on('dp.change', function(e) {
$cal1.data('DateTimePicker').maxDate(e.date);
}).on('dp.show', (e) => {
setDateTimePickerOpeningDirection(e);
});
initChangeEvents($cell);
} }
return { return {

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

@ -75,37 +75,37 @@ $.fn.dataTable.render.editRepositoryStatusValue = function(formId, columnId, cel
$.fn.dataTable.render.editRepositoryDateTimeValue = function(formId, columnId, cell) { $.fn.dataTable.render.editRepositoryDateTimeValue = function(formId, columnId, cell) {
let $cell = $(cell.node()); let $cell = $(cell.node());
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeValue'); DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'datetime', 'RepositoryDateTimeValue');
}; };
$.fn.dataTable.render.editRepositoryDateValue = function(formId, columnId, cell) { $.fn.dataTable.render.editRepositoryDateValue = function(formId, columnId, cell) {
let $cell = $(cell.node()); let $cell = $(cell.node());
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateValue'); DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'date', 'RepositoryDateValue');
}; };
$.fn.dataTable.render.editRepositoryTimeValue = function(formId, columnId, cell) { $.fn.dataTable.render.editRepositoryTimeValue = function(formId, columnId, cell) {
let $cell = $(cell.node()); let $cell = $(cell.node());
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeValue'); DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'time', 'RepositoryTimeValue');
}; };
$.fn.dataTable.render.editRepositoryDateTimeRangeValue = function(formId, columnId, cell) { $.fn.dataTable.render.editRepositoryDateTimeRangeValue = function(formId, columnId, cell) {
let $cell = $(cell.node()); let $cell = $(cell.node());
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeRangeValue'); DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'datetime', 'RepositoryDateTimeRangeValue');
}; };
$.fn.dataTable.render.editRepositoryDateRangeValue = function(formId, columnId, cell) { $.fn.dataTable.render.editRepositoryDateRangeValue = function(formId, columnId, cell) {
let $cell = $(cell.node()); let $cell = $(cell.node());
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateRangeValue'); DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'date', 'RepositoryDateRangeValue');
}; };
$.fn.dataTable.render.editRepositoryTimeRangeValue = function(formId, columnId, cell) { $.fn.dataTable.render.editRepositoryTimeRangeValue = function(formId, columnId, cell) {
let $cell = $(cell.node()); let $cell = $(cell.node());
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeRangeValue'); DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'time', 'RepositoryTimeRangeValue');
}; };
$.fn.dataTable.render.editRepositoryChecklistValue = function(formId, columnId, cell) { $.fn.dataTable.render.editRepositoryChecklistValue = function(formId, columnId, cell) {

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

@ -78,27 +78,27 @@ $.fn.dataTable.render.newRepositoryNumberValue = function(formId, columnId, $cel
}; };
$.fn.dataTable.render.newRepositoryDateTimeValue = function(formId, columnId, $cell) { $.fn.dataTable.render.newRepositoryDateTimeValue = function(formId, columnId, $cell) {
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeValue'); DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'datetime', 'RepositoryDateTimeValue');
}; };
$.fn.dataTable.render.newRepositoryTimeValue = function(formId, columnId, $cell) { $.fn.dataTable.render.newRepositoryTimeValue = function(formId, columnId, $cell) {
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeValue'); DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'time', 'RepositoryTimeValue');
}; };
$.fn.dataTable.render.newRepositoryDateValue = function(formId, columnId, $cell) { $.fn.dataTable.render.newRepositoryDateValue = function(formId, columnId, $cell) {
DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateValue'); DateTimeHelper.initDateTimeEditMode(formId, columnId, $cell, 'date', 'RepositoryDateValue');
}; };
$.fn.dataTable.render.newRepositoryDateTimeRangeValue = function(formId, columnId, $cell) { $.fn.dataTable.render.newRepositoryDateTimeRangeValue = function(formId, columnId, $cell) {
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, '', 'RepositoryDateTimeRangeValue'); DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'datetime', 'RepositoryDateTimeRangeValue');
}; };
$.fn.dataTable.render.newRepositoryDateRangeValue = function(formId, columnId, $cell) { $.fn.dataTable.render.newRepositoryDateRangeValue = function(formId, columnId, $cell) {
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'dateonly', 'RepositoryDateRangeValue'); DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'date', 'RepositoryDateRangeValue');
}; };
$.fn.dataTable.render.newRepositoryTimeRangeValue = function(formId, columnId, $cell) { $.fn.dataTable.render.newRepositoryTimeRangeValue = function(formId, columnId, $cell) {
DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'timeonly', 'RepositoryTimeRangeValue'); DateTimeHelper.initDateTimeRangeEditMode(formId, columnId, $cell, 'time', 'RepositoryTimeRangeValue');
}; };
$.fn.dataTable.render.newRepositoryStockValue = function() { $.fn.dataTable.render.newRepositoryStockValue = function() {

62
app/assets/javascripts/repositories/validators/base_validator.js
View file

@ -76,18 +76,7 @@ $.fn.dataTable.render.RepositoryNumberValueValidator = function($input) {
}; };
$.fn.dataTable.render.RepositoryDateTimeValueValidator = function($input) { $.fn.dataTable.render.RepositoryDateTimeValueValidator = function($input) {
let $container = $input.parents('.datetime-container'); return true;
let $date = $container.find('input.date-part');
let $time = $container.find('input.time-part');
if (($date.val() === '') === ($time.val() === '')) {
return true;
}
$container.find('.date-container')
.addClass('error')
.attr('data-error-text', I18n.t('repositories.table.date_time.errors.set_all_or_none'));
$container.find('.time-container').addClass('error');
return false;
}; };
$.fn.dataTable.render.RepositoryDateValueValidator = function() { $.fn.dataTable.render.RepositoryDateValueValidator = function() {
@ -99,11 +88,9 @@ $.fn.dataTable.render.RepositoryTimeValueValidator = function() {
}; };
$.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) { $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
let $container = $input.parents('.datetime-container'); const $container = $input.parents('.datetime-container');
let $dateS = $container.find('.start-time input.date-part'); const $dateS = $container.find('.datetime.start');
let $timeS = $container.find('.start-time input.time-part'); const $dateE = $container.find('.datetime.end');
let $dateE = $container.find('.end-time input.date-part');
let $timeE = $container.find('.end-time input.time-part');
let isValid = true; let isValid = true;
let errorMessage; let errorMessage;
let startTime; let startTime;
@ -111,14 +98,12 @@ $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
let a = []; let a = [];
if ($input.val()) { if ($input.val()) {
startTime = new Date(JSON.parse($input.val()).start_time); startTime = new Date($dateS.val());
endTime = new Date(JSON.parse($input.val()).end_time); endTime = new Date($dateE.val());
} }
a.push($dateS.val() === ''); a.push($dateS.val() === '');
a.push($timeS.val() === '');
a.push($dateE.val() === ''); a.push($dateE.val() === '');
a.push($timeE.val() === '');
if (a.filter((v, i, arr) => arr.indexOf(v) === i).length > 1) { if (a.filter((v, i, arr) => arr.indexOf(v) === i).length > 1) {
isValid = false; isValid = false;
@ -133,22 +118,22 @@ $.fn.dataTable.render.RepositoryDateTimeRangeValueValidator = function($input) {
} }
$container.find('.date-container').addClass('error'); $container.find('.date-container').addClass('error');
$container.find('.time-container').addClass('error');
$container.find('.date-container').first().attr('data-error-text', errorMessage); $container.find('.date-container').first().attr('data-error-text', errorMessage);
return false; return false;
}; };
$.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) { $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
let $container = $input.parents('.datetime-container'); const $container = $input.parents('.datetime-container');
let $dateS = $container.find('.start-time input.date-part'); const $dateS = $container.find('.datetime.start');
let $dateE = $container.find('.end-time input.date-part'); const $dateE = $container.find('.datetime.end');
let isValid = true; let isValid = true;
let errorMessage; let errorMessage;
let endTime;
let startTime; let startTime;
let endTime;
if ($input.val()) { if ($input.val()) {
startTime = new Date(JSON.parse($input.val()).start_time); startTime = new Date($dateS.val());
endTime = new Date(JSON.parse($input.val()).end_time); endTime = new Date($dateE.val());
} }
if (($dateS.val() === '') !== ($dateE.val() === '')) { if (($dateS.val() === '') !== ($dateE.val() === '')) {
@ -169,16 +154,23 @@ $.fn.dataTable.render.RepositoryDateRangeValueValidator = function($input) {
}; };
$.fn.dataTable.render.RepositoryTimeRangeValueValidator = function($input) { $.fn.dataTable.render.RepositoryTimeRangeValueValidator = function($input) {
let $container = $input.parents('.datetime-container'); const $container = $input.parents('.datetime-container');
let $timeS = $container.find('.start-time input.time-part'); const $dateS = $container.find('.datetime.start');
let $timeE = $container.find('.end-time input.time-part'); const $dateE = $container.find('.datetime.end');
let isValid = true; let isValid = true;
let errorMessage; let errorMessage;
let startTime;
let endTime;
if (($timeS.val() === '') !== ($timeE.val() === '')) { if ($input.val()) {
startTime = new Date($dateS.val());
endTime = new Date($dateE.val());
}
if (($dateS.val() === '') !== ($dateE.val() === '')) {
isValid = false; isValid = false;
errorMessage = I18n.t('repositories.table.date_time.errors.set_all_or_none'); errorMessage = I18n.t('repositories.table.date_time.errors.set_all_or_none');
} else if ($timeS.val() > $timeE.val()) { } else if (endTime < startTime) {
isValid = false; isValid = false;
errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range'); errorMessage = I18n.t('repositories.table.date_time.errors.not_valid_range');
} }
@ -186,7 +178,7 @@ $.fn.dataTable.render.RepositoryTimeRangeValueValidator = function($input) {
return true; return true;
} }
$container.find('.time-container').addClass('error'); $container.find('.date-container').addClass('error');
$container.find('.time-container').first().attr('data-error-text', errorMessage); $container.find('.date-container').first().attr('data-error-text', errorMessage);
return false; return false;
}; };

23
app/assets/stylesheets/repository/repository_table.scss
View file

@ -349,7 +349,28 @@
} }
.date-container { .date-container {
width: 160px; &.datetime {
width: 240px;
}
&.time {
width: 120px;
}
&.date {
width: 200px;
}
&.error {
&::after {
color: $brand-danger;
content: attr(data-error-text);
font-size: 12px;
margin-top: -4px;
position: absolute;
top: 100%;
}
}
} }
.time-container { .time-container {

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

@ -20,7 +20,7 @@ window.initDateTimePickerComponent = (id) => {
mounted() { mounted() {
if (this.$refs.input.dataset.default) { if (this.$refs.input.dataset.default) {
let defaultDate = new Date(this.$refs.input.dataset.default); let defaultDate = new Date(this.$refs.input.dataset.default);
this.date = defaultDate.toISOString(); this.date = this.formatDate(defaultDate);
this.$refs.vueDateTime.datetime = defaultDate; this.$refs.vueDateTime.datetime = defaultDate;
} else if (this.date) { } else if (this.date) {
this.$refs.vueDateTime.datetime = new Date(this.date); this.$refs.vueDateTime.datetime = new Date(this.date);
@ -31,15 +31,26 @@ window.initDateTimePickerComponent = (id) => {
$(this.$el.parentElement).parent().trigger('dp:ready'); $(this.$el.parentElement).parent().trigger('dp:ready');
}, },
methods: { methods: {
formatDate(date) {
if (this.$refs.input.dataset.simpleFormat) {
const y = date.getFullYear();
const m = date.getMonth() + 1;
const d = date.getDate();
const hours = date.getHours();
const mins = date.getMinutes();
return `${y}/${m}/${d} ${hours}:${mins}`;
}
return date.toISOString();
},
updateDate(date) { updateDate(date) {
this.date = date.toISOString(); this.date = this.formatDate(date);
this.$nextTick(() => { this.$nextTick(() => {
if (this.onChange) this.onChange(date); if (this.onChange) this.onChange(date);
}); });
}, },
setDate(date) { setDate(date) {
this.date = date.toISOString(); this.date = this.formatDate(date);
this.$refs.vueDateTime.datetime = date; this.$refs.vueDateTime.datetime = date;
this.$nextTick(() => { this.$nextTick(() => {
if (this.onChange) this.onChange(date); if (this.onChange) this.onChange(date);

59
app/javascript/vue/shared/date_time_picker.vue
View file

@ -4,6 +4,8 @@
v-if="mode == 'datetime'" v-if="mode == 'datetime'"
v-model="datetime" v-model="datetime"
:teleport="true" :teleport="true"
text-input
time-picker-inline
:format="dateTimeFormat" :format="dateTimeFormat"
:placeholder="placeholder" ></VueDatePicker> :placeholder="placeholder" ></VueDatePicker>
@ -11,14 +13,16 @@
v-if="mode == 'date'" v-if="mode == 'date'"
v-model="datetime" v-model="datetime"
:teleport="true" :teleport="true"
text-input
:format="dateFormat" :format="dateFormat"
:enable-time-picker="false" :enable-time-picker="false"
:placeholder="placeholder" ></VueDatePicker> :placeholder="placeholder" ></VueDatePicker>
<VueDatePicker <VueDatePicker
v-if="mode == 'time'" v-if="mode == 'time'"
v-model="datetime" v-model="time"
:teleport="true" :teleport="true"
text-input
:format="timeFormat" :format="timeFormat"
time-picker time-picker
:placeholder="placeholder" ></VueDatePicker> :placeholder="placeholder" ></VueDatePicker>
@ -37,30 +41,61 @@
}, },
data() { data() {
return { return {
datetime: this.defaultValue datetime: this.defaultValue,
time: null
} }
}, },
watch: { created() {
defaultValue: function () { if (this.defaultValue) {
this.datetime = this.defaultValue; this.time = {
hours: this.defaultValue.getHours(),
minutes:this.defaultValue.getMinutes(),
}
} }
}, },
components: { components: {
VueDatePicker VueDatePicker
}, },
watch: { watch: {
defaultValue: function () {
this.datetime = this.defaultValue;
this.time = {
hours: this.defaultValue ? this.defaultValue.getHours() : 0,
minutes: this.defaultValue ? this.defaultValue.getMinutes() : 0
}
},
datetime: function () { datetime: function () {
if (this.mode == 'time') {
this.time = {
hours: this.datetime ? this.datetime.getHours() : 0,
minutes: this.datetime ? this.datetime.getMinutes() : 0
}
return
}
if ( this.datetime == null) { if ( this.datetime == null) {
this.$emit('cleared'); this.$emit('cleared');
} }
if (this.defaultValue != this.datetime) { if (this.defaultValue != this.datetime) {
let newDate = this.datetime; this.$emit('change', this.datetime);
if (this.mode == 'time') { }
newDate = new Date(); },
newDate.setHours(this.datetime.hours); time: function () {
newDate.setMinutes(this.datetime.minutes); if (this.mode != 'time') return;
}
let newDate;
if (this.time) {
newDate = new Date();
newDate.setHours(this.time.hours);
newDate.setMinutes(this.time.minutes);
} else {
newDate = null;
this.$emit('cleared');
}
if (this.defaultValue != newDate) {
this.$emit('change', newDate); this.$emit('change', newDate);
} }
} }
@ -74,7 +109,7 @@
}, },
timeFormat() { timeFormat() {
return 'HH:mm' return 'HH:mm'
} },
} }
} }
</script> </script>