Display dates with backend timezone. Manipulate date with app timezone.

This commit is contained in:
Jérémy GAULIN 2016-05-14 04:07:38 +02:00
parent 578319a204
commit 02c000530c
4 changed files with 72 additions and 38 deletions

View File

@ -1,5 +1,6 @@
<?php namespace Backend\Widgets;
use Backend;
use Backend\Classes\FormField;
use Backend\FormWidgets\DatePicker;
use Carbon\Carbon;
@ -100,15 +101,41 @@ class Filter extends WidgetBase
*/
public function renderScopeElement($scope)
{
$params = ['scope' => $scope];
$loadDatePicker = false;
switch ($scope->type) {
case 'date':
$loadDatePicker = true;
if ($scope->value && $scope->value instanceof Carbon) {
$params['dateStr'] = Backend::dateTime($scope->value, ['formatAlias' => 'dateMin']);
$params['date'] = $scope->value->format('Y-m-d H:i:s');
}
break;
case 'daterange':
// Load datepicker assets
new DatePicker($this->controller, new FormField('dummy', 'dummy'));
$loadDatePicker = true;
if ($scope->value && is_array($scope->value) && count($scope->value) === 2 &&
$scope->value[0] && $scope->value[0] instanceof Carbon &&
$scope->value[1] && $scope->value[1] instanceof Carbon
) {
$params['afterStr'] = Backend::dateTime($scope->value[0], ['formatAlias' => 'dateMin']);
$params['beforeStr'] = Backend::dateTime($scope->value[1], ['formatAlias' => 'dateMin']);
$params['after'] = $scope->value[0]->format('Y-m-d H:i:s');
$params['before'] = $scope->value[1]->format('Y-m-d H:i:s');
}
break;
}
return $this->makePartial('scope_'.$scope->type, ['scope' => $scope]);
if($loadDatePicker) {
// Load datepicker assets
new DatePicker($this->controller, new FormField('dummy', 'dummy'));
}
return $this->makePartial('scope_'.$scope->type, $params);
}
//
@ -501,7 +528,7 @@ class Filter extends WidgetBase
switch ($scope->type) {
case 'date':
if ($scope->value instanceof Carbon) {
$value = $scope->value->setTime(0, 0, 0);
$value = $scope->value;
/*
* Condition
@ -510,7 +537,7 @@ class Filter extends WidgetBase
$query->whereRaw(DbDongle::parse(strtr($scopeConditions, [
':filtered' => $value->format('Y-m-d'),
':after' => $value->format('Y-m-d H:i:s'),
':before' => $value->copy()->setTime(23, 59, 59)->format('Y-m-d H:i:s')
':before' => $value->copy()->addDay()->addMinutes(-1)->format('Y-m-d H:i:s')
])));
}
@ -528,8 +555,6 @@ class Filter extends WidgetBase
list($after, $before) = array_values($scope->value);
if($after && $after instanceof Carbon && $before && $before instanceof Carbon) {
$after->setTime(0, 0, 0);
$before->setTime(23, 59, 59);
/*
* Condition
@ -728,8 +753,8 @@ class Filter extends WidgetBase
}
foreach ($ajaxDates as $date) {
if(preg_match('/\d{4}-\d{2}-\d{2}/', $date)) {
$dates[] = Carbon::createFromFormat('Y-m-d', $date);
if(preg_match('/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/', $date)) {
$dates[] = Carbon::createFromFormat('Y-m-d H:i:s', $date);
} else {
$dates = [];
break;

View File

@ -1,14 +1,14 @@
<!-- Date scope -->
<a
class="filter-scope-date <?= $scope->value ? 'active' : '' ?>"
class="filter-scope-date <?= isset($date) ? 'active' : '' ?>"
href="javascript:;"
data-scope-name="<?= $scope->scopeName ?>"
data-scope-data="<?= e(json_encode([
'date' => $scope->value && $scope->value instanceof \Carbon\Carbon ? $scope->value->format('Y-m-d') : null,
'date' => $date,
'minDate' => $scope->minDate ? $scope->minDate : '2000-01-01' ,
'maxDate' => $scope->maxDate ? $scope->maxDate : '2099-12-31',
]))
?>">
<span class="filter-label"><?= e(trans($scope->label)) ?>:</span>
<span class="filter-setting"><?= $scope->value && $scope->value instanceof \Carbon\Carbon ? $scope->value->format('Y-m-d') : e(trans('backend::lang.filter.date_all')) ?></span>
<span class="filter-setting"><?= isset($dateStr) ? $dateStr : e(trans('backend::lang.filter.date_all')) ?></span>
</a>

View File

@ -1,14 +1,14 @@
<!-- Date Range scope -->
<a
class="filter-scope-date range <?= $scope->value ? 'active' : '' ?>"
class="filter-scope-date range <?= isset($after) && isset($before) ? 'active' : '' ?>"
href="javascript:;"
data-scope-name="<?= $scope->scopeName ?>"
data-scope-data="<?= e(json_encode([
'dates' => $scope->value && is_array($scope->value) ? array_map(function($value) { return $value && $value instanceof \Carbon\Carbon ? $value->format('Y-m-d') : null; }, $scope->value) : null,
'dates' => isset($after) && isset($before) ? [$after, $before] : null,
'minDate' => $scope->minDate ? $scope->minDate : '2000-01-01',
'maxDate' => $scope->maxDate ? $scope->maxDate : '2099-12-31',
]))
?>">
<span class="filter-label"><?= e(trans($scope->label)) ?>:</span>
<span class="filter-setting"><?= $scope->value && is_array($scope->value) ? join(' → ', array_map(function($value) { return $value && $value instanceof \Carbon\Carbon ? $value->format('Y-m-d') : null; }, $scope->value)) : e(trans('backend::lang.filter.date_all')) ?></span>
<span class="filter-setting"><?= isset($afterStr) && isset($beforeStr) ? ($afterStr . ' → ' . $beforeStr) : e(trans('backend::lang.filter.date_all')) ?></span>
</a>

View File

@ -165,7 +165,7 @@
</div> \
</div> \
<div class="filter-buttons"> \
<button class="btn btn-block btn-primary oc-icon-search" data-trigger="filter"> \
<button class="btn btn-block btn-primary" data-trigger="filter"> \
{{ filter_button_text }} \
</button> \
<button class="btn btn-block btn-secondary" data-trigger="clear"> \
@ -184,8 +184,8 @@
data = this.scopeValues[scopeName]
data = $.extend({}, data, {
filter_button_text: $.oc.lang.get('filter.dates.filter_button_text'),
reset_button_text: $.oc.lang.get('filter.dates.reset_button_text'),
filter_button_text: this.getLang('filter.dates.filter_button_text'),
reset_button_text: this.getLang('filter.dates.reset_button_text'),
date_placeholder: this.getLang('filter.dates.date_placeholder', 'Date')
})
@ -195,7 +195,7 @@
$scope.data('oc.popover', null)
$scope.ocPopover({
content: Mustache.render(self.getPopoverDateTemplate(), data),
content: Mustache.render(this.getPopoverDateTemplate(), data),
modal: false,
highlightModalTarget: true,
closeOnPageClick: true,
@ -212,8 +212,8 @@
data = this.scopeValues[scopeName]
data = $.extend({}, data, {
filter_button_text: $.oc.lang.get('filter.dates.filter_button_text'),
reset_button_text: $.oc.lang.get('filter.dates.reset_button_text'),
filter_button_text: this.getLang('filter.dates.filter_button_text'),
reset_button_text: this.getLang('filter.dates.reset_button_text'),
after_placeholder: this.getLang('filter.dates.after_placeholder', 'After'),
before_placeholder: this.getLang('filter.dates.before_placeholder', 'Before')
})
@ -224,7 +224,7 @@
$scope.data('oc.popover', null)
$scope.ocPopover({
content: Mustache.render(self.getPopoverRangeTemplate(), data),
content: Mustache.render(this.getPopoverRangeTemplate(), data),
modal: false,
highlightModalTarget: true,
closeOnPageClick: true,
@ -237,9 +237,9 @@
FilterWidget.prototype.initDatePickers = function (isRange) {
var self = this,
scopeData = self.$activeScope.data('scope-data'),
scopeData = this.$activeScope.data('scope-data'),
$inputs = $('.field-datepicker input', '#controlFilterPopover'),
data = self.scopeValues[self.activeScopeName]
data = this.scopeValues[this.activeScopeName]
if (!data) {
data = {
@ -256,11 +256,11 @@
yearRange: 10,
setDefaultDate: '' !== defaultValue ? defaultValue.toDate() : '',
format: self.getDateFormat(),
i18n: $.oc.lang.get('datepicker')
i18n: self.getLang('datepicker')
}
if (0 <= index && index < data.dates.length) {
defaultValue = moment(data.dates[index], 'YYYY-MM-DD')
defaultValue = moment.tz(data.dates[index], self.appTimezone).tz(self.timezone)
}
if (!isRange) {
@ -286,17 +286,16 @@
}
FilterWidget.prototype.updateScopeDateSetting = function ($scope, dates) {
var self = this,
$setting = $scope.find('.filter-setting'),
dateFormat = self.getDateFormat(),
dateRegex =/\d{4}-\d{2}-\d{2}/,
var $setting = $scope.find('.filter-setting'),
dateFormat = this.getDateFormat(),
dateRegex =/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/,
reset = false
if (dates && dates.length && dates[0].match(dateRegex)) {
if (dates.length > 1) {
if(dates[1].match(dateRegex)) {
var after = moment(dates[0], 'YYYY-MM-DD').format(dateFormat),
before = moment(dates[1], 'YYYY-MM-DD').format(dateFormat);
var after = moment.tz(dates[0], this.appTimezone).tz(this.timezone).format(dateFormat),
before = moment.tz(dates[1], this.appTimezone).tz(this.timezone).format(dateFormat);
$setting.text(after + ' → ' + before)
} else {
@ -304,7 +303,7 @@
}
}
else {
$setting.text(moment(dates[0], 'YYYY-MM-DD').format(dateFormat))
$setting.text(moment.tz(dates[0], this.appTimezone).tz(this.timezone).format(dateFormat))
}
$scope.addClass('active')
@ -325,16 +324,26 @@
if (!isReset) {
$('.field-datepicker input', '#controlFilterPopover').each(function (index, datepicker) {
dates.push($(datepicker).data('pikaday').toString('YYYY-MM-DD'))
var date = $(datepicker).data('pikaday').toString('YYYY-MM-DD');
if (index === 0) {
date += '00:00:00'
} else if (index === 1) {
date += '23:59:59'
}
dates.push(moment.tz(date, self.timezone)
.tz(self.appTimezone)
.format('YYYY-MM-DD HH:mm:ss'))
})
}
self.updateScopeDateSetting(self.$activeScope, dates);
self.scopeValues[self.activeScopeName] = {
this.updateScopeDateSetting(this.$activeScope, dates);
this.scopeValues[this.activeScopeName] = {
dates: dates
}
self.isActiveScopeDirty = true;
self.$activeScope.data('oc.popover').hide()
this.isActiveScopeDirty = true;
this.$activeScope.data('oc.popover').hide()
}
FilterWidget.prototype.getDateFormat = function () {