From dfe3c5292e51e3e60d30c422aac4360bf6543862 Mon Sep 17 00:00:00 2001 From: Urban Rotnik Date: Tue, 17 Dec 2019 13:42:25 +0100 Subject: [PATCH] Add TimeRange and DateRange renderer --- .../renderers/columns/date_time_helper.js | 77 ++++++++++++++++--- .../repositories/renderers/edit_renderers.js | 20 ++++- .../repositories/renderers/new_renderers.js | 18 ++--- .../repositories/renderers/view_renderers.js | 10 ++- app/models/repository_date_range_value.rb | 11 ++- app/models/repository_time_range_value.rb | 12 ++- .../repository_date_range_value_serializer.rb | 11 ++- .../repository_time_range_value_serializer.rb | 11 ++- 8 files changed, 137 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js b/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js index 894abe365..7c1712ca2 100644 --- a/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js +++ b/app/assets/javascripts/repositories/renderers/columns/date_time_helper.js @@ -2,7 +2,6 @@ /* eslint-disable no-unused-vars */ var DateTimeHelper = (function() { - function isValidTimeStr(timeStr) { return /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/.test(timeStr); } @@ -53,8 +52,8 @@ var DateTimeHelper = (function() { } function replaceForRangeHiddenField($container) { - let startTimeContainer = $container.find('.start-time') - let endTimeContainer = $container.find('.end-time') + 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'); @@ -73,9 +72,9 @@ var DateTimeHelper = (function() { } hiddenField = ` - `; $container.find('.cell-range-container').html(hiddenField); @@ -84,7 +83,7 @@ var DateTimeHelper = (function() { } function insertHiddenField($input) { - let fieldType = $input.data('datetime-part') + 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'); @@ -144,7 +143,7 @@ var DateTimeHelper = (function() { }); $cell.find('.calendar-input').on('dp.change', function(e) { - let $input = $(this) + let $input = $(this); let date = e.date._d; let $container = $input.parent().find('.cell-timestamp-container'); @@ -287,10 +286,70 @@ var DateTimeHelper = (function() { initChangeEvents($cell); } + function initDateRangeEditMode(formId, columnId, $cell, startDate, startDatetime, endDate, endDatetime) { + let inputFields = ` +
+
+
+
+ ${dateInputField(formId, columnId, startDate)} +
+
+
+ ${dateInputField(formId, columnId, endDate)} +
+
+ `; + + $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 = ` +
+
+
+
+ ${timeInputField(formId, columnId, startTime)} +
+
+
+ ${timeInputField(formId, columnId, endTime)} +
+
+ `; + + $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 + initDateTimeRangeEditMode: initDateTimeRangeEditMode, + initDateRangeEditMode: initDateRangeEditMode, + initTimeRangeEditMode: initTimeRangeEditMode }; }()); diff --git a/app/assets/javascripts/repositories/renderers/edit_renderers.js b/app/assets/javascripts/repositories/renderers/edit_renderers.js index 3094a6f1f..7e52681de 100644 --- a/app/assets/javascripts/repositories/renderers/edit_renderers.js +++ b/app/assets/javascripts/repositories/renderers/edit_renderers.js @@ -131,11 +131,27 @@ $.fn.dataTable.render.editRepositoryDateTimeRangeValue = function(formId, column }; $.fn.dataTable.render.editRepositoryDateRangeValue = function(formId, columnId, cell) { - return ''; + 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); }; $.fn.dataTable.render.editRepositoryTimeRangeValue = function(formId, columnId, cell) { - return ''; + 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); }; $.fn.dataTable.render.editRepositoryChecklistValue = function(formId, columnId, cell) { diff --git a/app/assets/javascripts/repositories/renderers/new_renderers.js b/app/assets/javascripts/repositories/renderers/new_renderers.js index fdc0833db..b4c430d29 100644 --- a/app/assets/javascripts/repositories/renderers/new_renderers.js +++ b/app/assets/javascripts/repositories/renderers/new_renderers.js @@ -99,19 +99,17 @@ $.fn.dataTable.render.newRepositoryDateValue = function(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.newRepositoryDateRangeValue = function(formId, columnId, $cell) { + DateTimeHelper.initDateRangeEditMode(formId, columnId, $cell, '', '', '', ''); +}; + +$.fn.dataTable.render.newRepositoryTimeRangeValue = function(formId, columnId, $cell) { + DateTimeHelper.initTimeRangeEditMode(formId, columnId, $cell, '', '', '', ''); +}; + $.fn.dataTable.render.newRepositoryCheckboxValue = function(formId, columnId) { return ''; }; diff --git a/app/assets/javascripts/repositories/renderers/view_renderers.js b/app/assets/javascripts/repositories/renderers/view_renderers.js index ce1d72043..ec0bf291a 100644 --- a/app/assets/javascripts/repositories/renderers/view_renderers.js +++ b/app/assets/javascripts/repositories/renderers/view_renderers.js @@ -82,7 +82,10 @@ $.fn.dataTable.render.defaultRepositoryTimeRangeValue = function() { }; $.fn.dataTable.render.RepositoryTimeRangeValue = function(data) { - return `${data.value.formatted}`; + return `${data.value.start_time.formatted} - + ${data.value.end_time.formatted}`; }; $.fn.dataTable.render.defaultRepositoryDateTimeRangeValue = function() { @@ -103,7 +106,10 @@ $.fn.dataTable.render.defaultRepositoryDateRangeValue = function() { }; $.fn.dataTable.render.RepositoryDateRangeValue = function(data) { - return data.value; + return `${data.value.start_time.formatted} - + ${data.value.end_time.formatted}`; }; $.fn.dataTable.render.RepositoryChecklistValue = function(data) { diff --git a/app/models/repository_date_range_value.rb b/app/models/repository_date_range_value.rb index 3195cb257..e1429a24c 100644 --- a/app/models/repository_date_range_value.rb +++ b/app/models/repository_date_range_value.rb @@ -2,8 +2,9 @@ class RepositoryDateRangeValue < 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_date != start_time.to_date || et.to_date != end_time.to_date end @@ -12,9 +13,11 @@ class RepositoryDateRangeValue < 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 diff --git a/app/models/repository_time_range_value.rb b/app/models/repository_time_range_value.rb index 16a8b25f8..9224fad90 100644 --- a/app/models/repository_time_range_value.rb +++ b/app/models/repository_time_range_value.rb @@ -2,8 +2,10 @@ class RepositoryTimeRangeValue < 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.hour != start_time.hour || et.hour != end_time.hour || st.min != start_time.min || et.min != end_time.min end @@ -12,9 +14,11 @@ class RepositoryTimeRangeValue < 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 diff --git a/app/serializers/repository_datatable/repository_date_range_value_serializer.rb b/app/serializers/repository_datatable/repository_date_range_value_serializer.rb index 6c6817155..43739c914 100644 --- a/app/serializers/repository_datatable/repository_date_range_value_serializer.rb +++ b/app/serializers/repository_datatable/repository_date_range_value_serializer.rb @@ -3,7 +3,16 @@ module RepositoryDatatable class RepositoryDateRangeValueSerializer < RepositoryBaseValueSerializer def value - I18n.l(object.start_time, format: :full_date) + ' - ' + I18n.l(object.end_time, format: :full_date) + { + start_time: { + formatted: I18n.l(object.start_time, format: :full_date), + datetime: object.start_time.strftime('%Y/%m/%d %H:%M') + }, + end_time: { + formatted: I18n.l(object.end_time, format: :full_date), + datetime: object.end_time.strftime('%Y/%m/%d %H:%M') + } + } end end end diff --git a/app/serializers/repository_datatable/repository_time_range_value_serializer.rb b/app/serializers/repository_datatable/repository_time_range_value_serializer.rb index 5bbfb700d..d7e8cbd96 100644 --- a/app/serializers/repository_datatable/repository_time_range_value_serializer.rb +++ b/app/serializers/repository_datatable/repository_time_range_value_serializer.rb @@ -3,7 +3,16 @@ module RepositoryDatatable class RepositoryTimeRangeValueSerializer < RepositoryBaseValueSerializer def value - I18n.l(object.start_time, format: :time) + ' - ' + I18n.l(object.end_time, format: :time) + { + start_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: :time), + datetime: object.end_time.strftime('%Y/%m/%d %H:%M') + } + } end end end