Add of highlighing of changed field.pull/2973/head
mhirtie
10 years ago
parent
44d73a7d5b
commit
2124e98622
@ -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> |
||||
|
||||
@ -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; |
||||
}; |
||||
|
||||
Loading…
Reference in new issue