mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-01 12:23:50 +01:00
Et2DateRange replaces old et2_date_range widget
This commit is contained in:
nathan
parent
773371584e
commit
b9b8a40bf4
@ -9,17 +9,13 @@
|
|||||||
* @copyright Nathan Gray 2011
|
* @copyright Nathan Gray 2011
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {ClassWithAttributes} from "./et2_core_inheritance";
|
|
||||||
import {et2_register_widget, et2_widget, WidgetConfig} from "./et2_core_widget";
|
|
||||||
import {et2_inputWidget} from './et2_core_inputWidget'
|
|
||||||
import {date} from "./lib/date.js";
|
import {date} from "./lib/date.js";
|
||||||
|
|
||||||
import {Et2Date} from "./Et2Date/Et2Date";
|
import {Et2Date} from "./Et2Date/Et2Date";
|
||||||
import {Et2DateDuration} from "./Et2Date/Et2DateDuration";
|
import {Et2DateDuration} from "./Et2Date/Et2DateDuration";
|
||||||
import {Et2DateDurationReadonly} from "./Et2Date/Et2DateDurationReadonly";
|
import {Et2DateDurationReadonly} from "./Et2Date/Et2DateDurationReadonly";
|
||||||
import {Et2DateReadonly} from "./Et2Date/Et2DateReadonly";
|
import {Et2DateReadonly} from "./Et2Date/Et2DateReadonly";
|
||||||
import {loadWebComponent} from "./Et2Widget/Et2Widget";
|
import {Et2DateRange} from "./Et2Date/Et2DateRange";
|
||||||
import {Et2Select} from "./Et2Select/Et2Select";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @deprecated use Et2Date
|
* @deprecated use Et2Date
|
||||||
@ -46,326 +42,6 @@ export class et2_date_ro extends Et2DateReadonly {}
|
|||||||
*
|
*
|
||||||
* @todo port to web-component
|
* @todo port to web-component
|
||||||
*/
|
*/
|
||||||
export class et2_date_range extends et2_inputWidget
|
export class et2_date_range extends Et2DateRange
|
||||||
{
|
{
|
||||||
static readonly _attributes: any = {
|
|
||||||
value: {
|
|
||||||
"type": "any",
|
|
||||||
"description": "An object with keys 'from' and 'to' for absolute ranges, or a relative range string"
|
|
||||||
},
|
|
||||||
relative: {
|
|
||||||
name: 'Relative',
|
|
||||||
type: 'boolean',
|
|
||||||
description: 'Is the date range relative (this week) or absolute (2016-02-15 - 2016-02-21). This will affect the value returned.'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
div: JQuery;
|
|
||||||
from: Et2Date;
|
|
||||||
to: Et2Date;
|
|
||||||
select: Et2Select;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Constructor
|
|
||||||
*/
|
|
||||||
constructor(_parent, _attrs? : WidgetConfig, _child? : object)
|
|
||||||
{
|
|
||||||
// Call the inherited constructor
|
|
||||||
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_date_range._attributes, _child || {}));
|
|
||||||
|
|
||||||
this.div = jQuery(document.createElement('div'))
|
|
||||||
.attr({ class:'et2_date_range'});
|
|
||||||
|
|
||||||
this.from = null;
|
|
||||||
this.to = null;
|
|
||||||
this.select = null;
|
|
||||||
|
|
||||||
// Set domid
|
|
||||||
this.set_id(this.id);
|
|
||||||
|
|
||||||
this.setDOMNode(this.div[0]);
|
|
||||||
this._createWidget();
|
|
||||||
|
|
||||||
this.set_relative(this.options.relative || false);
|
|
||||||
}
|
|
||||||
|
|
||||||
_createWidget()
|
|
||||||
{
|
|
||||||
var widget = this;
|
|
||||||
|
|
||||||
this.from = <Et2Date><any>loadWebComponent('et2-date', {
|
|
||||||
id: this.id+'[from]',
|
|
||||||
blur: egw.lang('From'),
|
|
||||||
onchange(_node,_widget) {
|
|
||||||
widget.to.set_min(widget.from.getValue());
|
|
||||||
if (_node instanceof Event) widget.onchange.call(widget, _widget, widget);
|
|
||||||
}
|
|
||||||
}, this);
|
|
||||||
this.to = <Et2Date><any>loadWebComponent('et2-date',{
|
|
||||||
id: this.id+'[to]',
|
|
||||||
blur: egw.lang('To'),
|
|
||||||
onchange(_node,_widget) {
|
|
||||||
widget.from.set_max(widget.to.getValue());
|
|
||||||
if (_node instanceof Event) widget.onchange.call(widget, _widget,widget);
|
|
||||||
}
|
|
||||||
}, this);
|
|
||||||
this.select = <Et2Select><any>loadWebComponent('et2-select',{
|
|
||||||
id: this.id+'[relative]',
|
|
||||||
select_options: et2_date_range.relative_dates,
|
|
||||||
empty_label: this.options.blur || 'All'
|
|
||||||
},this);
|
|
||||||
//this.select.loadingFinished();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Function which allows iterating over the complete widget tree.
|
|
||||||
* Overridden here to avoid problems with children when getting value
|
|
||||||
*
|
|
||||||
* @param _callback is the function which should be called for each widget
|
|
||||||
* @param _context is the context in which the function should be executed
|
|
||||||
* @param _type is an optional parameter which specifies a class/interface
|
|
||||||
* the elements have to be instanceOf.
|
|
||||||
*/
|
|
||||||
iterateOver(_callback, _context, _type)
|
|
||||||
{
|
|
||||||
if (typeof _type == "undefined")
|
|
||||||
{
|
|
||||||
_type = et2_widget;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.isInTree() && this.instanceOf(_type))
|
|
||||||
{
|
|
||||||
_callback.call(_context, this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Toggles relative or absolute dates
|
|
||||||
*
|
|
||||||
* @param {boolean} _value
|
|
||||||
*/
|
|
||||||
set_relative(_value)
|
|
||||||
{
|
|
||||||
this.options.relative = _value;
|
|
||||||
if(this.options.relative)
|
|
||||||
{
|
|
||||||
jQuery(this.from.getDOMNode()).hide();
|
|
||||||
jQuery(this.to.getDOMNode()).hide();
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
jQuery(this.select.getDOMNode()).hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
set_value(value)
|
|
||||||
{
|
|
||||||
// @ts-ignore
|
|
||||||
if(!value || typeof value == 'null')
|
|
||||||
{
|
|
||||||
this.select.set_value('');
|
|
||||||
this.from.set_value(null);
|
|
||||||
this.to.set_value(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Relative
|
|
||||||
if(value && typeof value === 'string')
|
|
||||||
{
|
|
||||||
this._set_relative_value(value);
|
|
||||||
|
|
||||||
}
|
|
||||||
else if(value && typeof value.from === 'undefined' && value[0])
|
|
||||||
{
|
|
||||||
value = {
|
|
||||||
from: value[0],
|
|
||||||
to: value[1] || new Date().valueOf()/1000
|
|
||||||
};
|
|
||||||
}
|
|
||||||
else if (value && value.from && value.to)
|
|
||||||
{
|
|
||||||
this.from.set_value(value.from);
|
|
||||||
this.to.set_value(value.to);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getValue()
|
|
||||||
{
|
|
||||||
return this.options.relative ?
|
|
||||||
this.select.getValue() :
|
|
||||||
{ from: this.from.getValue(), to: this.to.getValue() };
|
|
||||||
}
|
|
||||||
|
|
||||||
_set_relative_value(_value)
|
|
||||||
{
|
|
||||||
if(this.options.relative)
|
|
||||||
{
|
|
||||||
jQuery(this.select.getDOMNode()).show();
|
|
||||||
}
|
|
||||||
// Show description
|
|
||||||
this.select.set_value(_value);
|
|
||||||
|
|
||||||
var tempDate = new Date();
|
|
||||||
var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
|
|
||||||
|
|
||||||
// Use strings to avoid references
|
|
||||||
this.from.set_value(today.toJSON());
|
|
||||||
this.to.set_value(today.toJSON());
|
|
||||||
|
|
||||||
var relative = null;
|
|
||||||
for(var index in et2_date_range.relative_dates)
|
|
||||||
{
|
|
||||||
if(et2_date_range.relative_dates[index].value === _value)
|
|
||||||
{
|
|
||||||
relative = et2_date_range.relative_dates[index];
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(relative)
|
|
||||||
{
|
|
||||||
var dates = ["from","to"];
|
|
||||||
var value = today.toJSON();
|
|
||||||
for(var i = 0; i < dates.length; i++)
|
|
||||||
{
|
|
||||||
var date = dates[i];
|
|
||||||
if(typeof relative[date] == "function")
|
|
||||||
{
|
|
||||||
value = relative[date](new Date(value));
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
value = this[date]._relativeDate(relative[date]);
|
|
||||||
}
|
|
||||||
this[date].set_value(value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Class Constants
|
|
||||||
static readonly relative_dates = [
|
|
||||||
// Start and end are relative offsets, see et2_date.set_min()
|
|
||||||
// or Date objects
|
|
||||||
{
|
|
||||||
value: 'Today',
|
|
||||||
label: egw.lang('Today'),
|
|
||||||
from(date) {return date;},
|
|
||||||
to(date) {return date;}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: egw.lang('Yesterday'),
|
|
||||||
value: 'Yesterday',
|
|
||||||
from(date) {
|
|
||||||
date.setUTCDate(date.getUTCDate() - 1);
|
|
||||||
return date;
|
|
||||||
},
|
|
||||||
to: ''
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: egw.lang('This week'),
|
|
||||||
value: 'This week',
|
|
||||||
from(date) {return egw.week_start(date);},
|
|
||||||
to(date) {
|
|
||||||
date.setUTCDate(date.getUTCDate() + 6);
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: egw.lang('Last week'),
|
|
||||||
value: 'Last week',
|
|
||||||
from(date) {
|
|
||||||
var d = egw.week_start(date);
|
|
||||||
d.setUTCDate(d.getUTCDate() - 7);
|
|
||||||
return d;
|
|
||||||
},
|
|
||||||
to(date) {
|
|
||||||
date.setUTCDate(date.getUTCDate() + 6);
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: egw.lang('This month'),
|
|
||||||
value: 'This month',
|
|
||||||
from(date)
|
|
||||||
{
|
|
||||||
date.setUTCDate(1);
|
|
||||||
return date;
|
|
||||||
},
|
|
||||||
to(date)
|
|
||||||
{
|
|
||||||
date.setUTCMonth(date.getUTCMonth()+1);
|
|
||||||
date.setUTCDate(0);
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: egw.lang('Last month'),
|
|
||||||
value: 'Last month',
|
|
||||||
from(date)
|
|
||||||
{
|
|
||||||
date.setUTCMonth(date.getUTCMonth() - 1);
|
|
||||||
date.setUTCDate(1);
|
|
||||||
return date;
|
|
||||||
},
|
|
||||||
to(date)
|
|
||||||
{
|
|
||||||
date.setUTCMonth(date.getUTCMonth()+1);
|
|
||||||
date.setUTCDate(0);
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: egw.lang('Last 3 months'),
|
|
||||||
value: 'Last 3 months',
|
|
||||||
from(date)
|
|
||||||
{
|
|
||||||
date.setUTCMonth(date.getUTCMonth() - 2);
|
|
||||||
date.setUTCDate(1);
|
|
||||||
return date;
|
|
||||||
},
|
|
||||||
to(date)
|
|
||||||
{
|
|
||||||
date.setUTCMonth(date.getUTCMonth()+3);
|
|
||||||
date.setUTCDate(0);
|
|
||||||
return date;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/*
|
|
||||||
'This quarter'=> array(0,0,0,0, 0,0,0,0), // Just a marker, needs special handling
|
|
||||||
'Last quarter'=> array(0,-4,0,0, 0,-4,0,0), // Just a marker
|
|
||||||
*/
|
|
||||||
{
|
|
||||||
label: egw.lang('This year'),
|
|
||||||
value: 'This year',
|
|
||||||
from(d) {
|
|
||||||
d.setUTCMonth(0);
|
|
||||||
d.setUTCDate(1);
|
|
||||||
return d;
|
|
||||||
},
|
|
||||||
to(d) {
|
|
||||||
d.setUTCMonth(11);
|
|
||||||
d.setUTCDate(31);
|
|
||||||
return d;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: egw.lang('Last year'),
|
|
||||||
value: 'Last year',
|
|
||||||
from(d) {
|
|
||||||
d.setUTCMonth(0);
|
|
||||||
d.setUTCDate(1);
|
|
||||||
d.setUTCYear(d.getUTCYear() - 1);
|
|
||||||
return d;
|
|
||||||
},
|
|
||||||
to(d) {
|
|
||||||
d.setUTCMonth(11);
|
|
||||||
d.setUTCDate(31);
|
|
||||||
d.setUTCYear(d.getUTCYear() - 1);
|
|
||||||
return d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Still needed?
|
|
||||||
'2 years ago' => array(-2,0,0,0, -1,0,0,0),
|
|
||||||
'3 years ago' => array(-3,0,0,0, -2,0,0,0),
|
|
||||||
*/
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
et2_register_widget(et2_date_range, ["date-range"]);
|
|
||||||
Loading…
Reference in New Issue
Block a user