mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 08:34:42 +01:00
WIP on Date widget
Something's not right with the parser/formatter, they're not getting called. Times not handled yet
This commit is contained in:
parent
35e5d57b2a
commit
4f225054f8
@ -9,18 +9,18 @@
|
||||
*/
|
||||
|
||||
|
||||
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)
|
||||
{
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
css`
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
:host > div {
|
||||
display: flex;
|
||||
@ -31,53 +31,53 @@ export class Et2Box extends Et2Widget(LitElement)
|
||||
::slotted(*) {
|
||||
/* CSS for child elements */
|
||||
}`,
|
||||
];
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
return html`
|
||||
render()
|
||||
{
|
||||
return html`
|
||||
<div class="et2_box" ${this.id ? html`id="${this.id}"` : ''}>
|
||||
<slot><p>Empty box</p></slot>
|
||||
</div> `;
|
||||
}
|
||||
}
|
||||
|
||||
_createNamespace(): boolean
|
||||
{
|
||||
return true;
|
||||
}
|
||||
_createNamespace(): boolean
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("et2-box", Et2Box);
|
||||
|
||||
export class Et2HBox extends Et2Box
|
||||
{
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host > div {
|
||||
flex-direction: row;
|
||||
}`
|
||||
];
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("et2-hbox", Et2HBox);
|
||||
|
||||
export class Et2VBox extends Et2Box
|
||||
{
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host > div {
|
||||
flex-direction: column;
|
||||
}`
|
||||
];
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("et2-vbox", Et2VBox);
|
@ -9,22 +9,22 @@
|
||||
*/
|
||||
|
||||
|
||||
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";
|
||||
|
||||
export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
|
||||
{
|
||||
protected _created_icon_node: HTMLImageElement;
|
||||
protected clicked: boolean = false;
|
||||
private image: string;
|
||||
protected _created_icon_node: HTMLImageElement;
|
||||
protected clicked: boolean = false;
|
||||
private image: string;
|
||||
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host {
|
||||
padding: 1px 8px;
|
||||
/* These should probably come from somewhere else */
|
||||
@ -36,114 +36,115 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
|
||||
width: 20px;
|
||||
padding-right: 3px;
|
||||
}`,
|
||||
];
|
||||
];
|
||||
}
|
||||
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
image: {type: String},
|
||||
onclick: {type: Function}
|
||||
}
|
||||
}
|
||||
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
|
||||
// Property default values
|
||||
this.image = '';
|
||||
|
||||
// Create icon Element since BXButton puts it as child, but we put it as attribute
|
||||
this._created_icon_node = document.createElement("img");
|
||||
this._created_icon_node.slot = "icon";
|
||||
// Do not add this._icon here, no children can be added in constructor
|
||||
|
||||
// Define a default click handler
|
||||
// If a different one gets set via attribute, it will be used instead
|
||||
this.onclick = (typeof this.onclick === "function") ? this.onclick : () =>
|
||||
{
|
||||
return this.getInstanceManager().submit();
|
||||
};
|
||||
}
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
|
||||
//this.classList.add("et2_button")
|
||||
|
||||
if (this.image)
|
||||
{
|
||||
this._created_icon_node.src = egw.image(this.image);
|
||||
this.appendChild(this._created_icon_node);
|
||||
}
|
||||
|
||||
static get properties()
|
||||
this.addEventListener("click", this._handleClick.bind(this));
|
||||
}
|
||||
|
||||
|
||||
_handleClick(event: MouseEvent): boolean
|
||||
{
|
||||
debugger;
|
||||
// ignore click on readonly button
|
||||
if (this.disabled) return false;
|
||||
|
||||
this.clicked = true;
|
||||
|
||||
// Cancel buttons don't trigger the close confirmation prompt
|
||||
if (this.classList.contains("et2_button_cancel"))
|
||||
{
|
||||
return {
|
||||
image: {type: String},
|
||||
onclick: {type: Function}
|
||||
}
|
||||
this.getInstanceManager()?.skip_close_prompt();
|
||||
}
|
||||
|
||||
constructor()
|
||||
if (!super._handleClick(event))
|
||||
{
|
||||
super();
|
||||
|
||||
// Property default values
|
||||
this.image = '';
|
||||
|
||||
// Create icon Element since BXButton puts it as child, but we put it as attribute
|
||||
this._created_icon_node = document.createElement("img");
|
||||
this._created_icon_node.slot = "icon";
|
||||
// Do not add this._icon here, no children can be added in constructor
|
||||
|
||||
// Define a default click handler
|
||||
// If a different one gets set via attribute, it will be used instead
|
||||
this.onclick = (typeof this.onclick === "function") ? this.onclick : () =>
|
||||
{
|
||||
return this.getInstanceManager().submit();
|
||||
};
|
||||
this.clicked = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
this.clicked = false;
|
||||
this.getInstanceManager()?.skip_close_prompt(false);
|
||||
return true;
|
||||
}
|
||||
|
||||
//this.classList.add("et2_button")
|
||||
|
||||
if (this.image)
|
||||
{
|
||||
this._created_icon_node.src = egw.image(this.image);
|
||||
this.appendChild(this._created_icon_node);
|
||||
}
|
||||
|
||||
this.addEventListener("click", this._handleClick.bind(this));
|
||||
}
|
||||
|
||||
|
||||
_handleClick(event: MouseEvent): boolean
|
||||
{
|
||||
debugger;
|
||||
// ignore click on readonly button
|
||||
if (this.disabled) return false;
|
||||
|
||||
this.clicked = true;
|
||||
|
||||
// Cancel buttons don't trigger the close confirmation prompt
|
||||
if (this.classList.contains("et2_button_cancel"))
|
||||
{
|
||||
this.getInstanceManager()?.skip_close_prompt();
|
||||
}
|
||||
|
||||
if (!super._handleClick(event))
|
||||
{
|
||||
this.clicked = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
this.clicked = false;
|
||||
this.getInstanceManager()?.skip_close_prompt(false);
|
||||
return true;
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
return html`
|
||||
render()
|
||||
{
|
||||
return html`
|
||||
<div class="button-content et2_button" id="${this._buttonId}">
|
||||
<slot name="icon"></slot>
|
||||
<slot></slot>
|
||||
</div> `;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Implementation of the et2_IInput interface
|
||||
*/
|
||||
/**
|
||||
* Implementation of the et2_IInput interface
|
||||
*/
|
||||
|
||||
/**
|
||||
* Always return false as a button is never dirty
|
||||
*/
|
||||
isDirty()
|
||||
/**
|
||||
* Always return false as a button is never dirty
|
||||
*/
|
||||
isDirty()
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
resetDirty()
|
||||
{
|
||||
}
|
||||
|
||||
getValue()
|
||||
{
|
||||
if (this.clicked)
|
||||
{
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
resetDirty()
|
||||
{
|
||||
}
|
||||
|
||||
getValue()
|
||||
{
|
||||
if (this.clicked)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
// If "null" is returned, the result is not added to the submitted
|
||||
// array.
|
||||
return null;
|
||||
}
|
||||
// If "null" is returned, the result is not added to the submitted
|
||||
// array.
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("et2-button", Et2Button);
|
||||
|
163
api/js/etemplate/Et2Date.ts
Normal file
163
api/js/etemplate/Et2Date.ts
Normal 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);
|
@ -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,45 +9,45 @@
|
||||
*/
|
||||
|
||||
|
||||
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";
|
||||
|
||||
export class Et2Textbox extends Et2InputWidget(Et2Widget(LionInput))
|
||||
{
|
||||
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
/* Custom CSS */
|
||||
`,
|
||||
];
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
/* Custom CSS */
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
value: {attribute: true},
|
||||
onclick: {type: Function}
|
||||
}
|
||||
}
|
||||
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
value: {attribute: true},
|
||||
onclick: {type: Function}
|
||||
}
|
||||
}
|
||||
constructor()
|
||||
{
|
||||
debugger;
|
||||
super();
|
||||
|
||||
constructor()
|
||||
{
|
||||
debugger;
|
||||
super();
|
||||
}
|
||||
|
||||
}
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("et2-textbox", Et2Textbox);
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -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,9 +35,9 @@ 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",
|
||||
"name": "Required",
|
||||
"default": false,
|
||||
"type": "boolean",
|
||||
"description": "If required, the user must enter a value before the form can be submitted"
|
||||
@ -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:
|
||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -29,7 +29,7 @@ use EGroupware\Api;
|
||||
* &8 = dont show time for readonly and type date-time if time is 0:00,
|
||||
* &16 = prefix r/o display with dow
|
||||
* &32 = prefix r/o display with week-number
|
||||
* &64 = prefix r/o display with weeknumber and dow
|
||||
* &64 = prefix r/o display with weeknumber and dow
|
||||
* &128 = no icon to trigger popup, click into input trigers it, also removing the separators to save space
|
||||
*
|
||||
* @todo validation of date-duration
|
||||
@ -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'));
|
@ -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"/>
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user