Add of posibility to select end date before start date, and vice-versa.

Add of highlighing of changed field.
pull/2973/head
mhirtie 10 years ago
parent 44d73a7d5b
commit 2124e98622
  1. 3
      app/assets/stylesheets/content/_in_place_editing.sass
  2. 6
      frontend/app/services/timezone-service.js
  3. 8
      frontend/app/templates/components/inplace_editor/date/date_range_picker.html
  4. 2
      frontend/app/templates/work_packages/inplace_editor/custom/editable/date.html
  5. 232
      frontend/app/ui_components/date/date-range-picker-directive.js
  6. 2
      frontend/app/ui_components/index.js
  7. 106
      frontend/app/work_packages/directives/inplace_editor/custom/editable/inplace-editor-date-directive.js
  8. 133
      frontend/app/work_packages/models/datepicker.js
  9. 3
      frontend/app/work_packages/models/index.js
  10. 12
      frontend/tests/integration/specs/work-packages/details-pane/custom-fields/date-editable-spec.js
  11. 166
      frontend/tests/integration/specs/work-packages/details-pane/date-range-picker-spec.js
  12. 17
      frontend/tests/integration/specs/work-packages/details-pane/details-pane-helper.js

@ -30,6 +30,7 @@ $inplace-edit--border-color: #ddd
$inplace-edit--dark-background: #f8f8f8
$inplace-edit--color--very-dark: #cacaca
$inplace-edit--selected-date-border-color: #008bd0
$inplace-edit--color-highlight: #0a97dd
%inline-date-picker-container-position-absolute
@ -265,3 +266,5 @@ a.inplace-editing--trigger-link,
.work-packages--details--title
margin-left: -0.375rem
.inplace-edit--highlight
border-color: $inplace-edit--color-highlight !important

@ -62,9 +62,9 @@ module.exports = function(ConfigurationService, I18n) {
return TimezoneService.parseDate(date).format('YYYY-MM-DD');
},
isValid: function(date) {
var format = ConfigurationService.dateFormatPresent() ?
ConfigurationService.dateFormat() : 'L';
isValid: function(date, dateFormat) {
var format = dateFormat || (ConfigurationService.dateFormatPresent() ?
ConfigurationService.dateFormat() : 'L');
return moment(date, [format]).isValid();
}
};

@ -1,7 +1,11 @@
<div class="inplace-edit--date-range">
<input type="text" class="inplace-edit--date-range-start-date" execute-on-enter="execute()" ng-model="startDate" />
<input type="text" class="inplace-edit--date-range-start-date"
execute-on-enter="execute()" ng-change="onStartEdit()"
ng-model="startDate" ng-class="{'inplace-edit--highlight': startDateIsChanged}" />
<div class="inplace-edit--date-range-start-date-picker"></div>
<span class="delimeter">-</span>
<input type="text" class="inplace-edit--date-range-end-date" execute-on-enter="execute()" ng-model="endDate"/>
<input type="text" class="inplace-edit--date-range-end-date"
execute-on-enter="execute()" ng-change="onEndEdit()"
ng-model="endDate" ng-class="{'inplace-edit--highlight': endDateIsChanged}" />
<div class="inplace-edit--date-range-end-date-picker"></div>
</div>

@ -1,6 +1,8 @@
<div class="inplace-edit--date">
<input execute-on-enter="execute()"
ng-model="fieldController.writeValue"
ng-change="onEdit()"
ng-click="showDatepicker()"
title="{{ fieldController.editTitle }}"
class="inplace-edit--date"
type="text" />

@ -27,22 +27,18 @@
//++
module.exports = function(TimezoneService, ConfigurationService,
I18n, $timeout, WorkPackageFieldService,
EditableFieldsState) {
var parseDate = TimezoneService.parseDate,
parseISODate = TimezoneService.parseISODate,
formattedDate = function(date) {
return TimezoneService.parseDate(date).format('L');
},
formattedISODate = TimezoneService.formattedISODate,
I18n, $timeout, WorkPackageFieldService,
EditableFieldsState, Datepicker) {
var parseISODate = TimezoneService.parseISODate,
customDateFormat = 'YYYY-MM-DD',
datepickerFormat = 'yy-mm-dd',
customFormattedDate = function(date) {
return parseISODate(date).format(customDateFormat);
},
getLabel = WorkPackageFieldService.getLabel.bind(null, EditableFieldsState.workPackage),
getTitle = function(labelName) {
return I18n.t('js.inplace.button_edit', {attribute: getLabel(labelName)});
return I18n.t('js.inplace.button_edit', {
attribute: getLabel(labelName)
});
};
return {
restrict: 'EA',
@ -53,189 +49,91 @@ module.exports = function(TimezoneService, ConfigurationService,
},
templateUrl: '/templates/components/inplace_editor/date/date_range_picker.html',
link: function(scope, element) {
var startTimerId = 0,
endTimerId = 0,
form = element.parents('.inplace-edit--form'),
var form = element.parents('.inplace-edit--form'),
inputStart = element.find('.inplace-edit--date-range-start-date'),
inputEnd = element.find('.inplace-edit--date-range-end-date'),
divStart = element.find('.inplace-edit--date-range-start-date-picker'),
divEnd = element.find('.inplace-edit--date-range-end-date-picker'),
prevStartDate = '',
prevEndDate = '',
setDate = function(div, input, date) {
if(date) {
div.datepicker('option', 'defaultDate', customFormattedDate(date));
div.datepicker('option', 'setDate', customFormattedDate(date));
input.val(customFormattedDate(date));
} else {
div.datepicker('option', 'defaultDate', null);
div.datepicker('option', 'setDate', null);
input.val('');
input.change();
date = null;
}
};
startDatepicker, endDatepicker;
scope.startDateIsChanged = scope.endDateIsChanged = false;
if (scope.endDate) {
scope.endDate = customFormattedDate(scope.endDate);
}
if (scope.startDate) {
scope.startDate = customFormattedDate(scope.startDate);
}
scope.execute = function() {
form.scope().editPaneController.submit(false);
};
inputStart.attr({
'placeholder': customDateFormat,
'aria-label': customDateFormat,
'title': getTitle('startDate')
});
inputEnd.attr({
'placeholder': customDateFormat,
'aria-label': customDateFormat,
'title': getTitle('dueDate')
});
inputStart.on('change', function() {
if(inputStart.val().trim() === '') {
$timeout(function() {
scope.startDate = null;
});
inputStart.val('');
divEnd.datepicker('option', 'minDate', null);
$timeout.cancel(startTimerId);
return;
}
$timeout.cancel(startTimerId);
startTimerId = $timeout(function() {
var date = inputStart.val(),
isValid = TimezoneService.isValid(date, customDateFormat);
if(isValid){
scope.startDate = formattedISODate(parseDate(date, customDateFormat));
}
}, 1000);
});
inputEnd.on('change', function() {
if(inputEnd.val().trim() === '') {
$timeout(function() {
scope.endDate = null;
});
inputEnd.val('');
divStart.datepicker('option', 'maxDate', null);
$timeout.cancel(endTimerId);
return;
}
$timeout.cancel(endTimerId);
endTimerId = $timeout(function() {
var date = inputEnd.val(),
isValid = TimezoneService.isValid(date, customDateFormat);
if(isValid){
scope.endDate = formattedISODate(parseDate(date, customDateFormat));
}
}, 1000);
});
divStart.datepicker({
firstDay: ConfigurationService.startOfWeek(),
showWeeks: true,
changeMonth: true,
dateFormat: datepickerFormat,
defaultDate: customFormattedDate(scope.startDate),
inline: true,
showButtonPanel: false,
alterOffset: function(offset) {
var wHeight = angular.element(window).height(),
dpHeight = angular.element('#ui-datepicker-div').height(),
inputTop = divStart.offset().top,
inputHeight = divStart.innerHeight();
if((inputTop + inputHeight + dpHeight) > wHeight) {
offset.top -= inputHeight - 4;
}
return offset;
},
onSelect: function(selectedDate) {
if(!selectedDate || selectedDate === '' || selectedDate === prevStartDate) {
return;
}
prevStartDate = parseDate(selectedDate, customDateFormat);
$timeout(function() {
scope.startDate = formattedISODate(prevStartDate);
});
divEnd.datepicker('option', 'minDate', selectedDate ? selectedDate : null);
inputStart.focus();
divStart.hide();
startDatepicker = new Datepicker(divStart, inputStart, scope.startDate);
endDatepicker = new Datepicker(divEnd, inputEnd, scope.endDate);
startDatepicker.onChange = function(date) {
scope.startDate = date;
if (startDatepicker.prevDate.isAfter(endDatepicker.prevDate)) {
scope.startDateIsChanged = true;
scope.endDate = scope.startDate;
endDatepicker.setDate(scope.endDate);
}
});
divEnd.datepicker({
firstDay: ConfigurationService.startOfWeek(),
showWeeks: true,
changeMonth: true,
dateFormat: datepickerFormat,
defaultDate: customFormattedDate(scope.endDate),
inline: true,
showButtonPanel: false,
alterOffset: function(offset) {
var wHeight = angular.element(window).height(),
dpHeight = angular.element('#ui-datepicker-div').height(),
inputTop = divEnd.offset().top,
inputHeight = divEnd.innerHeight();
if((inputTop + inputHeight + dpHeight) > wHeight) {
offset.top -= inputHeight - 4;
}
return offset;
},
onSelect: function(selectedDate) {
if(!selectedDate || selectedDate === '' || selectedDate === prevEndDate) {
return;
}
prevEndDate = parseDate(selectedDate, customDateFormat);
$timeout(function() {
scope.endDate = formattedISODate(prevEndDate);
});
divStart.datepicker('option', 'maxDate', selectedDate ? selectedDate : null);
inputEnd.focus();
divEnd.hide();
};
scope.onStartEdit = function() {
scope.startDateIsChanged = scope.endDateIsChanged = false;
startDatepicker.onEdit();
};
endDatepicker.onChange = function(date) {
scope.endDate = date;
if (endDatepicker.prevDate.isBefore(startDatepicker.prevDate)) {
scope.endDateIsChanged = true;
scope.startDate = scope.endDate;
startDatepicker.setDate(scope.startDate);
}
});
if(scope.endDate) {
prevEndDate = formattedDate(scope.endDate);
divStart.datepicker('option', 'maxDate', customFormattedDate(scope.endDate));
}
if(scope.startDate) {
prevStartDate = formattedDate(scope.startDate);
divEnd.datepicker('option', 'minDate', customFormattedDate(scope.startDate));
};
scope.onEndEdit = function() {
scope.startDateIsChanged = scope.endDateIsChanged = false;
endDatepicker.onEdit();
}
setDate(divStart, inputStart, scope.startDate);
setDate(divEnd, inputEnd, scope.endDate);
$timeout(function() {
inputStart.click().focus();
startDatepicker.focus();
});
inputStart.on('click focusin', function() {
if(divStart.is(':hidden') || divEnd.is(':visible')) {
divEnd.hide();
divStart.show();
startDatepicker.textbox.on('click focusin', function() {
if (divStart.is(':hidden') || divEnd.is(':visible')) {
endDatepicker.hide();
startDatepicker.show();
}
scope.startDateIsChanged = scope.endDateIsChanged = false;
}).attr({
'placeholder': customDateFormat,
'aria-label': customDateFormat,
'title': getTitle('startDate')
});
inputEnd.on('click focusin', function() {
if(divEnd.is(':hidden') || divStart.is(':visible')) {
divEnd.show();
divStart.hide();
endDatepicker.textbox.on('click focusin', function() {
if (divEnd.is(':hidden') || divStart.is(':visible')) {
endDatepicker.show();
startDatepicker.hide();
}
scope.startDateIsChanged = scope.endDateIsChanged = false;
}).attr({
'placeholder': customDateFormat,
'aria-label': customDateFormat,
'title': getTitle('dueDate')
});
angular.element('.work-packages--details-content').on('click', function(e) {
var target = angular.element(e.target);
if(!target.is('.inplace-edit--date-range input') &&
target.parents('.hasDatepicker').length <= 0 &&
target.parents('.ui-datepicker-header').length <= 0) {
divStart.hide();
divEnd.hide();
if (!target.is('.inplace-edit--date-range input') &&
target.parents('.hasDatepicker').length <= 0 &&
target.parents('.ui-datepicker-header').length <= 0) {
startDatepicker.hide();
endDatepicker.hide();
}
});
}
};
};

@ -48,7 +48,7 @@ angular.module('openproject.uiComponents')
.directive('emptyElement', [require('./empty-element-directive')])
.directive('opDateRangePicker', ['TimezoneService', 'ConfigurationService',
'I18n', '$timeout', 'WorkPackageFieldService',
'EditableFieldsState', require('./date/date-range-picker-directive')])
'EditableFieldsState', 'Datepicker', require('./date/date-range-picker-directive')])
.constant('ENTER_KEY', 13)
.directive('executeOnEnter', ['ENTER_KEY', require(
'./execute-on-enter-directive')])

@ -28,15 +28,9 @@
module.exports = function(WorkPackageFieldService, EditableFieldsState,
TimezoneService, ConfigurationService, I18n,
$timeout) {
var parseDate = TimezoneService.parseDate,
parseISODate = TimezoneService.parseISODate,
formattedDate = function(date) {
return TimezoneService.parseDate(date).format('L');
},
formattedISODate = TimezoneService.formattedISODate,
$timeout, Datepicker) {
var parseISODate = TimezoneService.parseISODate,
customDateFormat = 'YYYY-MM-DD',
datepickerFormat = 'yy-mm-dd',
customFormattedDate = function(date) {
return parseISODate(date).format(customDateFormat);
};
@ -52,94 +46,38 @@ module.exports = function(WorkPackageFieldService, EditableFieldsState,
controllerAs: 'customEditorController',
link: function(scope, element, attrs, fieldController) {
scope.fieldController = fieldController;
var timerId = 0,
prevDate = '',
form = element.parents('.inplace-edit--form'),
var form = element.parents('.inplace-edit--form'),
input = element.find('.inplace-edit--date'),
datepickerContainer = element.find('.inplace-edit--date-picker'),
setDate = function(div, inp, date) {
if(date) {
div.datepicker('option', 'defaultDate', formattedDate(date));
div.datepicker('option', 'setDate', formattedDate(date));
inp.val(customFormattedDate(date));
} else {
div.datepicker('option', 'defaultDate', null);
div.datepicker('option', 'setDate', null);
inp.val('');
inp.change();
date = null;
}
};
datepicker;
scope.execute = function() {
form.scope().editPaneController.submit(false);
};
input.attr({
'placeholder': '-',
'aria-label': customDateFormat
});
input.on('change', function() {
if(input.val().trim() === '') {
$timeout(function() {
scope.fieldController.writeValue = null;
});
input.val('');
$timeout.cancel(timerId);
return;
}
$timeout.cancel(timerId);
timerId = $timeout(function() {
var date = input.val(),
isValid = TimezoneService.isValid(date, customDateFormat);
if(isValid){
scope.fieldController.writeValue = formattedISODate(parseDate(date, customDateFormat));
}
}, 1000);
}).on('click', function() {
datepickerContainer.show();
});
if(scope.fieldController.writeValue) {
scope.fieldController.writeValue = customFormattedDate(scope.fieldController.writeValue);
}
datepickerContainer.datepicker({
firstDay: ConfigurationService.startOfWeek(),
showWeeks: true,
changeMonth: true,
numberOfMonths: 1,
dateFormat: datepickerFormat,
alterOffset: function(offset) {
var wHeight = angular.element(window).height(),
dpHeight = angular.element('#ui-datepicker-div').height(),
inputTop = input.offset().top,
inputHeight = input.innerHeight();
datepicker = new Datepicker(datepickerContainer, input, scope.fieldController.writeValue);
datepicker.onChange = function(date) {
scope.fieldController.writeValue = date;
};
scope.onEdit = function() {
datepicker.onEdit();
};
if((inputTop + inputHeight + dpHeight) > wHeight) {
offset.top -= inputHeight - 4;
}
return offset;
},
onSelect: function(selectedDate) {
if(!selectedDate || selectedDate === '' || selectedDate === prevDate) {
return;
}
prevDate = parseDate(selectedDate, customDateFormat);
$timeout(function() {
scope.fieldController.writeValue = formattedISODate(prevDate);
});
input.focus();
datepickerContainer.hide();
}
datepicker.textbox.attr({
'placeholder': '-',
'aria-label': customDateFormat
});
if(scope.fieldController.writeValue) {
prevDate = formattedDate(scope.fieldController.writeValue);
}
setDate(datepickerContainer, input, scope.fieldController.writeValue);
scope.showDatepicker = function() {
datepicker.show();
};
$timeout(function() {
input.click().focus();
datepicker.focus();
});
angular.element('.work-packages--details-content').on('click', function(e) {
@ -147,7 +85,7 @@ module.exports = function(WorkPackageFieldService, EditableFieldsState,
if(!target.is('.inplace-edit--date input') &&
target.parents('.inplace-edit--date .hasDatepicker').length <= 0 &&
target.parents('.ui-datepicker-header').length <= 0) {
datepickerContainer.hide();
datepicker.hide();
}
});
}

@ -0,0 +1,133 @@
//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
//++
module.exports = function(TimezoneService, ConfigurationService, $timeout) {
var parseDate = TimezoneService.parseDate,
parseISODate = TimezoneService.parseISODate,
formattedISODate = TimezoneService.formattedISODate,
customDateFormat = 'YYYY-MM-DD',
datepickerFormat = 'yy-mm-dd',
customFormattedDate = function(date) {
return parseISODate(date).format(customDateFormat);
};
function Datepicker(datepickerElem, textboxElem, date) {
this.date = date;
this.prevDate = customFormattedDate(this.date);
this.datepickerCont = angular.element(datepickerElem);
this.textbox = angular.element(textboxElem);
this.editTimerId = 0;
this.initialize();
this.setDate(this.date);
}
Datepicker.prototype.setDate = function(date) {
if (date) {
this.datepickerCont.datepicker('option', 'defaultDate', customFormattedDate(date));
this.datepickerCont.datepicker('option', 'setDate', customFormattedDate(date));
this.textbox.val(customFormattedDate(date));
} else {
this.datepickerCont.datepicker('option', 'defaultDate', null);
this.datepickerCont.datepicker('option', 'setDate', null);
this.textbox.val('');
this.textbox.change();
}
};
Datepicker.prototype.initialize = function() {
var self = this;
this.datepickerCont.datepicker({
firstDay: ConfigurationService.startOfWeek(),
showWeeks: true,
changeMonth: true,
dateFormat: datepickerFormat,
defaultDate: customFormattedDate(self.date),
inline: true,
showButtonPanel: false,
alterOffset: function(offset) {
var wHeight = angular.element(window).height(),
dpHeight = angular.element('#ui-datepicker-div').height(),
inputTop = self.datepickerCont.offset().top,
inputHeight = self.datepickerCont.innerHeight();
if ((inputTop + inputHeight + dpHeight) > wHeight) {
offset.top -= inputHeight - 4;
}
return offset;
},
onSelect: function(selectedDate) {
if (!selectedDate || selectedDate === '' || selectedDate === self.prevDate) {
return;
}
self.prevDate = parseDate(selectedDate, customDateFormat);
$timeout(function() {
self.onChange(formattedISODate(self.prevDate));
});
self.textbox.focus();
self.datepickerCont.hide();
}
});
};
Datepicker.prototype.hide = function() {
this.datepickerCont.hide();
};
Datepicker.prototype.show = function() {
this.datepickerCont.show();
};
Datepicker.prototype.focus = function() {
this.textbox.click().focus();
};
Datepicker.prototype.onChange = angular.noop;
Datepicker.prototype.onEdit = function() {
var self = this;
if (self.textbox.val().trim() === '') {
self.onChange(null);
self.textbox.val('');
$timeout.cancel(self.editTimerId);
return;
}
$timeout.cancel(self.editTimerId);
self.editTimerId = $timeout(function() {
var date = self.textbox.val(),
isValid = TimezoneService.isValid(date, customDateFormat);
if (isValid) {
self.prevDate = parseDate(date, customDateFormat);
self.onChange(formattedISODate(self.prevDate));
} else {
self.textbox.val(customFormattedDate(self.prevDate));
}
}, 1000);
};
return Datepicker;
};

@ -27,4 +27,5 @@
//++
angular.module('openproject.workPackages.models')
.factory('WorkPackageAuthorization', require('./work-package-authorization'));
.factory('WorkPackageAuthorization', require('./work-package-authorization'))
.factory('Datepicker', ['TimezoneService', 'ConfigurationService', '$timeout', require('./datepicker.js')])

@ -72,7 +72,7 @@ describe('details pane', function() {
});
it('shows date in input', function() {
datepicker.expectedDate(date, '04/12/2015');
datepicker.expectedDate(date, '2015-04-12');
});
it('contains week days displayed', function() {
@ -89,11 +89,11 @@ describe('details pane', function() {
describe('validation', function() {
it('validates valid date', function() {
datepicker.validation(date, '04/12/2015', '04/12/2015');
datepicker.validation(date, '2015-04-12', '2015-04-12');
});
it('doesn\'t validate invalid date', function() {
datepicker.validation(date, '13/24/2014', '04/12/2015');
datepicker.validation(date, '2014-13-24', '2015-04-12');
});
it('validates empty date', function() {
@ -103,8 +103,10 @@ describe('details pane', function() {
describe('date selection', function() {
it('changes date by clicking on calendar', function() {
datepicker.clickingDate(dateInput, date, '9').then(function() {
datepicker.expectedDate(date, '04/09/2015');
dateInput.click();
datepicker.selectMonthAndYear(dateInput, 4, 2015);
datepicker.clickDate(dateInput, date, '9').then(function() {
datepicker.expectedDate(date, '2015-04-09');
});
});
});

@ -124,48 +124,144 @@ describe('details pane', function() {
});
it('shows date range in input', function() {
datepicker.expectedDate(startDate, '10/23/2014');
datepicker.expectedDate(endDate, '12/27/2014');
datepicker.expectedDate(startDate, '2015-02-17');
datepicker.expectedDate(endDate, '2015-04-29');
});
describe('switching date', function() {
describe('end date',function() {
it('changes when typed start date is greater', function() {
datepicker.validation(startDate, '2015-05-30', '2015-05-30');
datepicker.expectedDate(endDate, '2015-05-30');
});
it('does not change when typed start date is lower', function() {
datepicker.validation(startDate, '2015-04-28', '2015-04-28');
datepicker.expectedDate(endDate, '2015-04-29');
});
it('does not change when typed start date is equal', function() {
datepicker.validation(startDate, '2015-04-29', '2015-04-29');
datepicker.expectedDate(endDate, '2015-04-29');
});
it('changes when selected start date is greater', function() {
datepicker.selectMonth(startDateDatepicker, 5, 2015).then(function() {
datepicker.clickDate(startDateDatepicker, startDate, '30').then(function() {
datepicker.expectedDate(startDate, '2015-05-30');
datepicker.expectedDate(endDate, '2015-05-30');
});
});
});
it('does not change when selected start date is lower', function() {
datepicker.selectMonth(startDateDatepicker, 4).then(function() {
datepicker.clickDate(startDateDatepicker, startDate, '28').then(function() {
datepicker.expectedDate(startDate, '2015-04-28');
datepicker.expectedDate(endDate, '2015-04-29');
});
});
});
it('does not change when selected start date is equal', function() {
datepicker.selectMonth(startDateDatepicker, 5).then(function() {
datepicker.clickDate(startDateDatepicker, startDate, '29').then(function() {
datepicker.expectedDate(startDate, '2015-05-29');
datepicker.expectedDate(endDate, '2015-05-29');
});
});
});
});
describe('start date',function() {
beforeEach(function() {
endDate.click();
});
it('does not change when typed end date is greater', function() {
datepicker.validation(endDate, '2015-05-30', '2015-05-30');
datepicker.expectedDate(startDate, '2015-02-17');
});
it('changes when typed end date is lower', function() {
datepicker.validation(endDate, '2015-02-16', '2015-02-16');
datepicker.expectedDate(startDate, '2015-02-16');
});
it('does not change when typed start date is equal', function() {
datepicker.validation(endDate, '2015-02-17', '2015-02-17');
datepicker.expectedDate(startDate, '2015-02-17');
});
it('does not change when selected end date is greater', function() {
datepicker.selectMonthAndYear(endDateDatepicker, 5, 2015).then(function() {
datepicker.clickDate(endDateDatepicker, endDate, '30').then(function() {
datepicker.expectedDate(startDate, '2015-02-17');
datepicker.expectedDate(endDate, '2015-05-30');
});
});
});
it('changes when selected end date is lower', function() {
datepicker.selectMonth(endDateDatepicker, 2).then(function() {
datepicker.clickDate(endDateDatepicker, endDate, '16').then(function() {
datepicker.expectedDate(startDate, '2015-02-16');
datepicker.expectedDate(endDate, '2015-02-16');
});
});
});
it('does not change when selected start date is equal', function() {
datepicker.selectMonthAndYear(endDateDatepicker, 2, 2015).then(function() {
datepicker.clickDate(endDateDatepicker, endDate, '17').then(function() {
datepicker.expectedDate(startDate, '2015-02-17');
datepicker.expectedDate(endDate, '2015-02-17');
});
});
});
});
});
describe('validation', function() {
it('validates valid start date', function() {
datepicker.validation(startDate, '10/24/2014', '10/24/2014');
datepicker.validation(startDate, '2014-10-24', '2014-10-24');
});
it('validates valid end date', function() {
datepicker.validation(endDate, '11/27/2014', '11/27/2014');
datepicker.validation(endDate, '2014-11-27', '2014-11-27');
});
it('doesn\'t validate invalid start date', function() {
datepicker.validation(startDate, '13/24/2014', '10/23/2014');
datepicker.validation(startDate, '2014-13-27', '2015-02-17');
});
it('doesn\'t validate invalid end date', function() {
datepicker.validation(endDate, '11/40/2014', '12/27/2014');
datepicker.validation(endDate, '2014-11-40', '2015-04-29');
});
it('validates empty start date', function() {
datepicker.validation(startDate, '', 'no start date');
datepicker.validation(startDate, '', '');
});
it('validates empty end date', function() {
datepicker.validation(endDate, '', 'no end date');
datepicker.validation(endDate, '', '');
});
});
describe('range selection', function() {
it('changes start date by clicking on calendar', function() {
datepicker.clickingDate(dateRangePicker, startDate, '9').then(function() {
datepicker.expectedDate(startDate, '12/09/2014');
datepicker.expectedDate(endDate, '12/17/2014');
startDate.click();
datepicker.selectMonthAndYear(startDateDatepicker, 12, 2014);
datepicker.clickDate(startDateDatepicker, startDate, '9').then(function() {
datepicker.expectedDate(startDate, '2014-12-09');
datepicker.expectedDate(endDate, '2015-04-29');
});
});
it('changes end date by clicking on calendar', function() {
datepicker.clickingDate(dateRangePicker, startDate, '17').then(function() {
datepicker.expectedDate(startDate, '09/23/2014');
datepicker.expectedDate(endDate, '12/17/2014');
datepicker.clickDate(endDateDatepicker, endDate, '17').then(function() {
datepicker.expectedDate(startDate, '2015-02-17');
datepicker.expectedDate(endDate, '2015-04-17');
});
});
});
@ -194,6 +290,8 @@ describe('details pane', function() {
beforeEach(function() {
startDate = dateRangePicker.$('.inplace-edit--date-range-start-date');
endDate = dateRangePicker.$('.inplace-edit--date-range-end-date');
startDateDatepicker = dateRangePicker.$('.inplace-edit--date-range-start-date-picker');
endDateDatepicker = dateRangePicker.$('.inplace-edit--date-range-end-date-picker');
});
beforeEach(function() {
@ -206,22 +304,26 @@ describe('details pane', function() {
});
it('shows date range in input', function() {
datepicker.expectedDate(startDate, 'no start date');
datepicker.expectedDate(endDate, '12/27/2014');
datepicker.expectedDate(startDate, '');
datepicker.expectedDate(endDate, '2014-12-27');
});
describe('range selection', function() {
it('changes start date by clicking on calendar', function() {
datepicker.clickingDate(dateRangePicker, startDate, '9').then(function() {
datepicker.expectedDate(startDate, '12/09/2014');
datepicker.expectedDate(endDate, '12/17/2014');
startDate.click();
datepicker.selectMonthAndYear(startDateDatepicker, 12, 2014);
datepicker.clickDate(startDateDatepicker, startDate, '9').then(function() {
datepicker.expectedDate(startDate, '2014-12-09');
datepicker.expectedDate(endDate, '2014-12-27');
});
});
it('changes end date by clicking on calendar', function() {
datepicker.clickingDate(dateRangePicker, endDate, '17').then(function() {
datepicker.expectedDate(startDate, '09/23/2014');
datepicker.expectedDate(endDate, '12/17/2014');
endDate.click();
datepicker.selectMonthAndYear(endDateDatepicker, 12, 2014);
datepicker.clickDate(endDateDatepicker, endDate, '17').then(function() {
datepicker.expectedDate(startDate, '');
datepicker.expectedDate(endDate, '2014-12-17');
});
});
});
@ -250,6 +352,8 @@ describe('details pane', function() {
beforeEach(function() {
startDate = dateRangePicker.$('.inplace-edit--date-range-start-date');
endDate = dateRangePicker.$('.inplace-edit--date-range-end-date');
startDateDatepicker = dateRangePicker.$('.inplace-edit--date-range-start-date-picker');
endDateDatepicker = dateRangePicker.$('.inplace-edit--date-range-end-date-picker');
});
beforeEach(function() {
@ -262,22 +366,24 @@ describe('details pane', function() {
});
it('shows date range in input', function() {
datepicker.expectedDate(startDate, '0/23/2014');
datepicker.expectedDate(endDate, 'no end date');
datepicker.expectedDate(startDate, '2014-10-23');
datepicker.expectedDate(endDate, '');
});
describe('range selection', function() {
it('changes start date by clicking on calendar', function() {
datepicker.clickingDate(dateRangePicker, startDate, '9').then(function() {
datepicker.expectedDate(startDate, '12/09/2014');
datepicker.expectedDate(endDate, '12/17/2014');
datepicker.clickDate(startDateDatepicker, startDate, '9').then(function() {
datepicker.expectedDate(startDate, '2014-10-09');
datepicker.expectedDate(endDate, '');
});
});
it('changes end date by clicking on calendar', function() {
datepicker.clickingDate(dateRangePicker, endDate, '17').then(function() {
datepicker.expectedDate(startDate, '09/23/2014');
datepicker.expectedDate(endDate, '12/17/2014');
endDate.click()
datepicker.selectMonthAndYear(endDateDatepicker, 12, 2014);
datepicker.clickDate(endDateDatepicker, endDate, '17').then(function() {
datepicker.expectedDate(startDate, '2014-10-23');
datepicker.expectedDate(endDate, '2014-12-17');
});
});
});

@ -98,9 +98,9 @@ var elements = {
};
var datepicker = {
clickingDate: function datepickerSpec(calendar, dateInput, selectDate) {
clickDate: function datepickerSpec(calendar, dateInput, selectDate) {
dateInput.click();
return calendar.all(by.css('a.ui-state-default')).filter(function(elem) {
return calendar.all(by.css('.ui-datepicker-calendar a.ui-state-default')).filter(function(elem) {
return elem.getText().then(function(text) {
return text.indexOf(selectDate) !== -1;
});
@ -108,8 +108,19 @@ var datepicker = {
filteredElements[0].click();
});
},
selectMonth: function(calendar, monthNumber) {
return calendar.$('.ui-datepicker-month > option[value="' + (monthNumber - 1) + '"]').click();
},
selectYear: function(calendar, yearNumber) {
return calendar.$('.ui-datepicker-year > option[value="' + yearNumber + '"]').click();
},
selectMonthAndYear: function(calendar, monthNumber, yearNumber) {
return datepicker.selectMonth(calendar, monthNumber).then(function() {
datepicker.selectYear(calendar, yearNumber);
});
},
expectedDate: function expectedDate(dateInput, expected) {
dateInput.getText(function(text) {
dateInput.getAttribute('value').then(function(text) {
expect(text).to.equal(expected);
});
},

Loading…
Cancel
Save