holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP on Date widget

Browse Source 
Something's not right with the parser/formatter, they're not getting called.

Times not handled yet
This commit is contained in:
nathan 2021-08-13 15:26:18 -06:00
parent 35e5d57b2a
commit 4f225054f8
11 changed files with 3578 additions and 3381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/Et2Box.ts
View File

@ -9,7 +9,7 @@
*/
import {css, html, LitElement} from "@lion/core";
import {css, html, LitElement} from "../../../node_modules/@lion/core/index.js";
import {Et2Widget} from "./Et2Widget";
export class Et2Box extends Et2Widget(LitElement)

5
api/js/etemplate/Et2Button.ts
View File

@ -9,8 +9,8 @@
*/
import {css, html} from "@lion/core/index.js";
import {LionButton} from "@lion/button/index.js";
import {css, html} from "../../../node_modules/@lion/core/index.js";
import {LionButton} from "../../../node_modules/@lion/button/index.js";
import {Et2InputWidget} from "./et2_core_inputWidget";
import {Et2Widget} from "./Et2Widget";
@ -42,6 +42,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
static get properties()
{
return {
...super.properties,
image: {type: String},
onclick: {type: Function}
}

163
api/js/etemplate/Et2Date.ts Normal file
View File

@ -0,0 +1,163 @@
/**
* EGroupware eTemplate2 - Date widget (WebComponent)
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
* @subpackage api
* @link https://www.egroupware.org
* @author Nathan Gray
*/
import {css, html} from "../../../node_modules/@lion/core/index.js"
import {LionInputDatepicker} from "../../../node_modules/@lion/input-datepicker/index.js"
import {Et2InputWidget} from "./et2_core_inputWidget";
import {Et2Widget} from "./Et2Widget";
/**
* To parse a date into the right format
*
* @param {string} dateString
* @returns {Date | undefined}
*/
export function parseDate(dateString)
{
debugger;
let formatString = <string>(egw.preference("dateformat") || 'Y-m-d');
formatString = formatString.replaceAll(/-\/\./ig, '-');
let parsedString = "";
switch (formatString)
{
case 'd-m-Y':
parsedString = `${dateString.slice(6, 10)}/${dateString.slice(
3,
5,
)}/${dateString.slice(0, 2)}`;
break;
case 'm-d-Y':
parsedString = `${dateString.slice(6, 10)}/${dateString.slice(
0,
2,
)}/${dateString.slice(3, 5)}`;
break;
case 'Y-m-d':
parsedString = `${dateString.slice(0, 4)}/${dateString.slice(
5,
7,
)}/${dateString.slice(8, 10)}`;
break;
case 'd-M-Y':
parsedString = `${dateString.slice(6, 10)}/${dateString.slice(
3,
5,
)}/${dateString.slice(0, 2)}`;
default:
parsedString = '0000/00/00';
}
const [year, month, day] = parsedString.split('/').map(Number);
const parsedDate = new Date(Date.UTC(year, month - 1, day));
// Check if parsedDate is not `Invalid Date` or that the date has changed (e.g. the not existing 31.02.2020)
if (
year > 0 &&
month > 0 &&
day > 0 &&
parsedDate.getDate() === day &&
parsedDate.getMonth() === month - 1
)
{
return parsedDate;
}
return undefined;
}
/**
* Format dates according to user preference
*
* @param {Date} date
* @param {import('@lion/localize/types/LocalizeMixinTypes').FormatDateOptions} [options] Intl options are available
* set 'dateFormat': "Y-m-d" to specify a particular format
* @returns {string}
*/
export function formatDate(date: Date, options): string
{
debugger;
if (!date || !(date instanceof Date))
{
return "";
}
let _value = '';
// Add timezone offset back in, or formatDate will lose those hours
let formatDate = new Date(date.valueOf() + date.getTimezoneOffset() * 60 * 1000);
let dateformat = options.dateFormat || <string>egw.preference("dateformat") || 'Y-m-d';
var replace_map = {
d: "" + date.getUTCDate(),
m: "" + date.getUTCMonth() + 1,
Y: "" + date.getUTCFullYear()
}
var re = new RegExp(Object.keys(replace_map).join("|"), "gi");
_value = dateformat.replace(re, function (matched)
{
return replace_map[matched];
});
return _value;
}
export class Et2Date extends Et2InputWidget(Et2Widget(LionInputDatepicker))
{
static get styles()
{
return [
...super.styles,
css`
/* Custom CSS */
`,
];
}
static get properties()
{
return {
...super.properties,
value: {
attribute: true,
converter: {
toAttribute(value)
{
return value ? value.toJSON().replace(/\.\d{3}Z$/, 'Z') : "";
},
fromAttribute(value)
{
return new Date(value);
}
}
},
}
}
constructor()
{
super();
this.parser = parseDate;
this.formatter = formatDate;
}
connectedCallback()
{
super.connectedCallback();
}
getValue()
{
debugger;
return this.modelValue ? this.modelValue.toJSON().replace(/\.\d{3}Z$/, 'Z') : "";
}
}
customElements.define("et2-date", Et2Date);

6
api/js/etemplate/Et2Textbox.ts
View File

@ -1,5 +1,5 @@
/**
* EGroupware eTemplate2 - Button widget
* EGroupware eTemplate2 - Textbox widget (WebComponent)
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
@ -9,8 +9,8 @@
*/
import {css, html} from "@lion/core";
import {LionInput} from "@lion/input";
import {css, html} from "../../../node_modules/@lion/core/index.js"
import {LionInput} from "../../../node_modules/@lion/input/index.js"
import {Et2InputWidget} from "./et2_core_inputWidget";
import {Et2Widget} from "./Et2Widget";

7
api/js/etemplate/Et2Widget.ts
View File

@ -341,14 +341,9 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
let val = mgr.getEntry(widget.id, false, true);
if (val !== null)
{
widget.setAttribute("value", val);
widget.set_value(val);
}
}
// Check for already inside namespace
if (this._createNamespace() && this.getArrayMgr("content").perspectiveData.owner == this)
{
widget.setAttribute("value", this.getArrayMgr("content").data);
}
}
// Children need to be loaded

94
api/js/etemplate/et2_core_inputWidget.ts
View File

@ -15,17 +15,19 @@
*/
import {et2_no_init} from "./et2_core_common";
import { ClassWithAttributes } from "./et2_core_inheritance";
import { et2_widget, WidgetConfig } from "./et2_core_widget";
import { et2_valueWidget } from './et2_core_valueWidget'
import {ClassWithAttributes} from "./et2_core_inheritance";
import {et2_widget, WidgetConfig} from "./et2_core_widget";
import {et2_valueWidget} from './et2_core_valueWidget'
import {et2_IInput, et2_IInputNode, et2_ISubmitListener} from "./et2_core_interfaces";
import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
// fixing circular dependencies by only importing the type (not in compiled .js)
import type {et2_tabbox} from "./et2_widget_tabs";
export interface et2_input {
getInputNode() : HTMLInputElement|HTMLElement;
export interface et2_input
{
getInputNode(): HTMLInputElement | HTMLElement;
}
/**
* et2_inputWidget derrives from et2_simpleWidget and implements the IInput
* interface. When derriving from this class, call setDOMNode with an input
@ -33,7 +35,7 @@ export interface et2_input {
*/
export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_ISubmitListener, et2_input
{
static readonly _attributes : any = {
static readonly _attributes: any = {
"needed": {
"name": "Required",
"default": false,
@ -78,7 +80,7 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
/**
* Constructor
*/
constructor(_parent, _attrs? : WidgetConfig, _child? : object)
constructor(_parent, _attrs?: WidgetConfig, _child?: object)
{
// Call the inherited constructor
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_inputWidget._attributes, _child || {}));
@ -105,7 +107,7 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
/**
* Make sure dirty flag is properly set
*/
doLoadingFinished() : boolean | JQueryPromise<unknown>
doLoadingFinished(): boolean | JQueryPromise<unknown>
{
let result = super.doLoadingFinished();
@ -141,10 +143,12 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
{
jQuery(node)
.off('.et2_inputWidget')
.bind("change.et2_inputWidget", this, function(e) {
.bind("change.et2_inputWidget", this, function (e)
{
e.data.change.call(e.data, this);
})
.bind("focus.et2_inputWidget", this, function(e) {
.bind("focus.et2_inputWidget", this, function (e)
{
e.data.focus.call(e.data, this);
});
}
@ -173,14 +177,16 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
if (valid && this.onchange)
{
if(typeof this.onchange == 'function')
if (typeof this.onchange == 'function')
{
// Make sure function gets a reference to the widget
var args = Array.prototype.slice.call(arguments);
if(args.indexOf(this) == -1) args.push(this);
if (args.indexOf(this) == -1) args.push(this);
return this.onchange.apply(this, args);
} else {
}
else
{
return (et2_compileLegacyJS(this.options.onchange, this, _node))();
}
}
@ -189,11 +195,11 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
focus(_node)
{
if(typeof this.options.onfocus == 'function')
if (typeof this.options.onfocus == 'function')
{
// Make sure function gets a reference to the widget
var args = Array.prototype.slice.call(arguments);
if(args.indexOf(this) == -1) args.push(this);
if (args.indexOf(this) == -1) args.push(this);
return this.options.onfocus.apply(this, args);
}
@ -206,13 +212,13 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
*
* @param {string} _value value to set
*/
set_value(_value : any | null)
set_value(_value: any | null)
{
var node = this.getInputNode();
if (node)
{
jQuery(node).val(_value);
if(this.isAttached() && this._oldValue !== et2_no_init && this._oldValue !== _value)
if (this.isAttached() && this._oldValue !== et2_no_init && this._oldValue !== _value)
{
jQuery(node).change();
}
@ -223,7 +229,7 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
set_id(_value)
{
this.id = _value;
this.dom_id = _value && this.getInstanceManager() ? this.getInstanceManager().uniqueId+'_'+this.id : _value;
this.dom_id = _value && this.getInstanceManager() ? this.getInstanceManager().uniqueId + '_' + this.id : _value;
// Set the id of the _input_ node (in contrast to the default
// implementation, which sets the base node)
@ -249,9 +255,12 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
var node = this.getInputNode();
if (node)
{
if(_value && !this.options.readonly) {
if (_value && !this.options.readonly)
{
jQuery(node).attr("required", "required");
} else {
}
else
{
node.removeAttribute("required");
}
}
@ -273,8 +282,8 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
jQuery(node).addClass("invalid");
// If on a tab, switch to that tab so user can see it
let widget : et2_widget = this;
while(widget.getParent() && widget.getType() != 'tabbox')
let widget: et2_widget = this;
while (widget.getParent() && widget.getType() != 'tabbox')
{
widget = widget.getParent();
}
@ -319,26 +328,26 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
isDirty()
{
let value = this.getValue();
if(typeof value !== typeof this._oldValue)
if (typeof value !== typeof this._oldValue)
{
return true;
}
if(this._oldValue === value)
if (this._oldValue === value)
{
return false;
}
switch(typeof this._oldValue)
switch (typeof this._oldValue)
{
case "object":
if(typeof this._oldValue.length !== "undefined" &&
if (typeof this._oldValue.length !== "undefined" &&
this._oldValue.length !== value.length
)
{
return true;
}
for(let key in this._oldValue)
for (let key in this._oldValue)
{
if(this._oldValue[key] !== value[key]) return true;
if (this._oldValue[key] !== value[key]) return true;
}
return false;
default:
@ -392,58 +401,63 @@ export class et2_inputWidget extends et2_valueWidget implements et2_IInput, et2_
*/
type Constructor<T = {}> = new (...args: any[]) => T;
export const Et2InputWidget = <T extends Constructor>(superClass: T) => {
class Et2InputWidgetClass extends superClass implements et2_IInput, et2_IInputNode {
export const Et2InputWidget = <T extends Constructor>(superClass: T) =>
{
class Et2InputWidgetClass extends superClass implements et2_IInput, et2_IInputNode
{
label: string = '';
protected value: string | number | Object;
protected _oldValue: string | number | Object;
/** WebComponent **/
static get properties() {
static get properties()
{
return {
...super.properties,
value: {attribute: false}
};
}
constructor() {
constructor()
{
super();
}
set_value(new_value)
{
this.modelValue=new_value;
this.value = new_value;
}
getValue()
{
return this._inputNode.value;
return this.getInputNode().value;
}
isDirty()
{
let value = this.getValue();
if(typeof value !== typeof this._oldValue)
if (typeof value !== typeof this._oldValue)
{
return true;
}
if(this._oldValue === value)
if (this._oldValue === value)
{
return false;
}
switch(typeof this._oldValue)
switch (typeof this._oldValue)
{
case "object":
if(typeof this._oldValue.length !== "undefined" &&
if (typeof this._oldValue.length !== "undefined" &&
this._oldValue.length !== value.length
)
{
return true;
}
for(let key in this._oldValue)
for (let key in this._oldValue)
{
if(this._oldValue[key] !== value[key]) return true;
if (this._oldValue[key] !== value[key]) return true;
}
return false;
default:

5
api/js/etemplate/et2_core_widget.ts
View File

@ -862,11 +862,6 @@ export class et2_widget extends ClassWithAttributes
widget.setAttribute("value", val);
}
}
// Check for already inside namespace
if (this._createNamespace() && this.getArrayMgr("content").perspectiveData.owner == this)
{
widget.setAttribute("value", this.getArrayMgr("content").data);
}
}
// Children need to be loaded

1
api/js/etemplate/etemplate2.ts
View File

@ -25,6 +25,7 @@ import '../jsapi/egw_json.js';
import {egwIsMobile} from "../egw_action/egw_action_common.js";
import './Et2Box';
import './Et2Button';
import './Et2Date';
import './Et2Textbox';
/* Include all widget classes here, we only care about them registering, not importing anything*/
import './et2_widget_vfs'; // Vfs must be first (before et2_widget_file) due to import cycle

93
api/src/Etemplate/Widget/Date.php
View File

@ -60,7 +60,7 @@ class Date extends Transformer
* @param string $cname
* @param array $expand values for keys 'c', 'row', 'c_', 'row_', 'cont'
*/
public function beforeSendToClient($cname, array $expand=null)
public function beforeSendToClient($cname, array $expand = null)
{
if($this->type == 'date-houronly')
{
@ -87,14 +87,20 @@ class Date extends Transformer
* @param array $expand
* @param array $data Row data
*/
public function set_row_value($cname, Array $expand, Array &$data)
public function set_row_value($cname, array $expand, array &$data)
{
if($this->type == 'date-duration') return;
if($this->type == 'date-duration')
{
return;
}
$form_name = self::form_name($cname, $this->id, $expand);
$value =& $this->get_array($data, $form_name, true);
if (true) $value = $this->format_date($value);
if(true)
{
$value = $this->format_date($value);
}
}
/**
@ -104,14 +110,17 @@ class Date extends Transformer
*/
public function format_date($value)
{
if (!$value) return $value; // otherwise we will get current date or 1970-01-01 instead of an empty value
if(!$value)
{
return $value;
} // otherwise we will get current date or 1970-01-01 instead of an empty value
// for DateTime objects (regular PHP and Api\DateTime ones), set user timezone
if ($value instanceof \DateTime)
if($value instanceof \DateTime)
{
$date = Api\DateTime::server2user($value);
}
elseif ($this->attrs['data_format'] && $this->attrs['data_format'] !== 'object')
elseif($this->attrs['data_format'] && $this->attrs['data_format'] !== 'object')
{
$date = Api\DateTime::createFromFormat($this->attrs['data_format'], $value, Api\DateTime::$user_timezone);
}
@ -142,58 +151,65 @@ class Date extends Transformer
* @param string $cname current namespace
* @param array $expand values for keys 'c', 'row', 'c_', 'row_', 'cont'
* @param array $content
* @param array &$validated=array() validated content
* @param array &$validated =array() validated content
* @return boolean true if no validation error, false otherwise
*/
public function validate($cname, array $expand, array $content, &$validated=array())
public function validate($cname, array $expand, array $content, &$validated = array())
{
$form_name = self::form_name($cname, $this->id, $expand);
if (!$this->is_readonly($cname, $form_name) && $this->type != 'date-since') // date-since is always readonly
if(!$this->is_readonly($cname, $form_name) && $this->type != 'date-since') // date-since is always readonly
{
$value = self::get_array($content, $form_name);
$valid =& self::get_array($validated, $form_name, true);
if ($value && $this->type !== 'date-duration')
if($value && $this->type !== 'date-duration')
{
try
{
if (substr($value, -1) === 'Z') $value = substr($value, 0, -1);
if(substr($value, -1) === 'Z')
{
$value = substr($value, 0, -1);
}
$date = new Api\DateTime($value);
}
catch(\Exception $e)
catch (\Exception $e)
{
unset($e);
$date = null;
$value = '';
// this is not really a user error, but one of the clientside engine
self::set_validation_error($form_name,lang("'%1' is not a valid date !!!", $value).' '.$this->data_format);
self::set_validation_error($form_name, lang("'%1' is not a valid date !!!", $value) . ' ' . $this->data_format);
}
}
if ((string)$value === '' && $this->attrs['needed'])
if((string)$value === '' && $this->attrs['needed'])
{
self::set_validation_error($form_name,lang('Field must not be empty !!!'));
self::set_validation_error($form_name, lang('Field must not be empty !!!'));
}
elseif (is_null($value))
elseif(is_null($value))
{
$valid = null;
}
elseif ($this->type == 'date-duration')
elseif($this->type == 'date-duration')
{
$valid = (string)$value === '' ? '' : (int)$value;
}
if (!empty($this->attrs['min']) && !empty($value))
if(!empty($this->attrs['min']) && !empty($value))
{
if(is_numeric($this->attrs['min']))
{
$min = new Api\DateTime(strtotime( $this->attrs['min'] . 'days'));
$min = new Api\DateTime(strtotime($this->attrs['min'] . 'days'));
}
elseif (preg_match('/[+-][[:digit:]]+[ymwd]/',$this->attrs['min']))
elseif(preg_match('/[+-][[:digit:]]+[ymwd]/', $this->attrs['min']))
{
// Relative date with periods
$min = new Api\DateTime(strtotime(str_replace(array('y','m','w','d'), array('years','months','weeks','days'), $this->attrs['min'])));
$min = new Api\DateTime(strtotime(str_replace(array('y', 'm', 'w', 'd'), array('years', 'months',
'weeks',
'days'), $this->attrs['min'])
)
);
}
else
{
@ -201,23 +217,28 @@ class Date extends Transformer
}
if($date < $min)
{
self::set_validation_error($form_name,lang(
self::set_validation_error($form_name, lang(
"Value has to be at least '%1' !!!",
$min->format($this->type != 'date')
),'');
), ''
);
$value = $min;
}
}
if (!empty($this->attrs['max']) && !empty($value))
if(!empty($this->attrs['max']) && !empty($value))
{
if(is_numeric($this->attrs['max']))
{
$max = new Api\DateTime(strtotime( $this->attrs['max'] . 'days'));
$max = new Api\DateTime(strtotime($this->attrs['max'] . 'days'));
}
elseif (preg_match('/[+-][[:digit:]]+[ymwd]/',$this->attrs['max']))
elseif(preg_match('/[+-][[:digit:]]+[ymwd]/', $this->attrs['max']))
{
// Relative date with periods
$max = new Api\DateTime(strtotime(str_replace(array('y','m','w','d'), array('years','months','weeks','days'), $this->attrs['max'])));
$max = new Api\DateTime(strtotime(str_replace(array('y', 'm', 'w', 'd'), array('years', 'months',
'weeks',
'days'), $this->attrs['max'])
)
);
}
else
{
@ -225,14 +246,15 @@ class Date extends Transformer
}
if($date > $max)
{
self::set_validation_error($form_name,lang(
self::set_validation_error($form_name, lang(
"Value has to be at maximum '%1' !!!",
$max->format($this->type != 'date')
),'');
), ''
);
$value = $max;
}
}
if ($this->type == 'date-duration')
if($this->type == 'date-duration')
{
$valid = (string)$value === '' ? '' : (int)$value;
}
@ -241,22 +263,23 @@ class Date extends Transformer
// Not null, blank
$value = '';
}
elseif ($date && empty($this->attrs['data_format'])) // integer timestamp
elseif($date && empty($this->attrs['data_format'])) // integer timestamp
{
$valid = $date->format('ts');
}
// string with formatting letters like for php's date() method
elseif ($date && ($valid = $date->format($this->attrs['data_format'])))
elseif($date && ($valid = $date->format($this->attrs['data_format'])))
{
// Nothing to do here
}
else
{
// this is not really a user error, but one of the clientside engine
self::set_validation_error($form_name,lang("'%1' is not a valid date !!!", $value).' '.$this->data_format);
self::set_validation_error($form_name, lang("'%1' is not a valid date !!!", $value) . ' ' . $this->data_format);
}
//error_log("$this : ($valid)" . Api\DateTime::to($valid));
}
}
}
\EGroupware\Api\Etemplate\Widget::registerWidget(__NAMESPACE__.'\\Date', array('time_or_date'));
\EGroupware\Api\Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Date', array('et2-date', 'time_or_date'));

2
infolog/templates/default/edit.xet
View File

@ -165,7 +165,7 @@
</menulist>
<description/>
<description value="Startdate" for="info_startdate"/>
<date-time statustext="when should the ToDo or Phonecall be started, it shows up from that date in the filter open or own open (startpage)" id="info_startdate" class="et2_fullWidth"/>
<et2-date statustext="when should the ToDo or Phonecall be started, it shows up from that date in the filter open or own open (startpage)" id="info_startdate" class="et2_fullWidth"></et2-date>
</row>
<row class="dialogHeader3">
<description value="Contact"/>

5
package.json
View File

@ -46,6 +46,11 @@
},
"dependencies": {
"@andxor/jquery-ui-touch-punch-fix": "^1.0.2",
"@lion/button": "^0.14.2",
"@lion/core": "^0.18.2",
"@lion/input": "^0.15.4",
"@lion/input-date": "^0.12.6",
"@lion/input-datepicker": "^0.23.6",
"jquery-ui-dist": "^1.12.1",
"jquery-ui-themes": "^1.12.0",
"jquery-ui-timepicker-addon": "^1.6.3",