mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-29 01:59:39 +01:00
Add date readonly, some class optimizing
This commit is contained in:
parent
ccfcf2a086
commit
4e597b5672
93
api/js/etemplate/Et2Date/Et2DateReadonly.ts
Normal file
93
api/js/etemplate/Et2Date/Et2DateReadonly.ts
Normal file
@ -0,0 +1,93 @@
|
||||
/**
|
||||
* EGroupware eTemplate2 - Readonly date WebComponent
|
||||
*
|
||||
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||
* @package api
|
||||
* @link https://www.egroupware.org
|
||||
* @author Nathan Gray
|
||||
*/
|
||||
|
||||
|
||||
import {html, LitElement} from "@lion/core";
|
||||
import {formatDate, parseDate} from "./Et2Date";
|
||||
import {et2_IDetachedDOM} from "../et2_core_interfaces";
|
||||
import {Et2Widget} from "../Et2Widget/Et2Widget";
|
||||
import {dateStyles} from "./DateStyles";
|
||||
|
||||
/**
|
||||
* This is a stripped-down read-only widget used in nextmatch
|
||||
*/
|
||||
export class Et2DateReadonly extends Et2Widget(LitElement) implements et2_IDetachedDOM
|
||||
{
|
||||
protected value : any;
|
||||
protected parser : Function;
|
||||
protected formatter : Function;
|
||||
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
dateStyles
|
||||
];
|
||||
}
|
||||
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
value: String,
|
||||
}
|
||||
}
|
||||
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
this.parser = parseDate;
|
||||
this.formatter = formatDate;
|
||||
}
|
||||
|
||||
set_value(value)
|
||||
{
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
let parsed : Date | Boolean = this.value ? this.parser(this.value) : false
|
||||
|
||||
return html`
|
||||
<time ${this.id ? html`id="${this._dom_id}"` : ''}
|
||||
datetime="${parsed ? this.formatter(<Date>parsed, {dateFormat: "Y-m-d", timeFormat: "H:i:s"}) : ""}">
|
||||
${this.value ? this.formatter(<Date>parsed) : ''}
|
||||
</time>
|
||||
`;
|
||||
}
|
||||
|
||||
getDetachedAttributes(attrs)
|
||||
{
|
||||
attrs.push("id", "value", "class");
|
||||
}
|
||||
|
||||
getDetachedNodes() : HTMLElement[]
|
||||
{
|
||||
return [<HTMLElement><unknown>this];
|
||||
}
|
||||
|
||||
setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data? : any) : void
|
||||
{
|
||||
// Do nothing, since we can't actually stop being a DOM node...
|
||||
}
|
||||
|
||||
loadFromXML()
|
||||
{
|
||||
// nope
|
||||
}
|
||||
|
||||
loadingFinished()
|
||||
{
|
||||
// already done, I'm a wc with no children
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
|
||||
customElements.define("et2-date_ro", Et2DateReadonly);
|
@ -1,72 +1,25 @@
|
||||
import {css, html, LitElement} from "@lion/core";
|
||||
/**
|
||||
* EGroupware eTemplate2 - Readonly date+time WebComponent
|
||||
*
|
||||
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||
* @package api
|
||||
* @link https://www.egroupware.org
|
||||
* @author Nathan Gray
|
||||
*/
|
||||
|
||||
import {formatDateTime, parseDateTime} from "./Et2Date";
|
||||
import {et2_IDetachedDOM} from "../et2_core_interfaces";
|
||||
import {Et2Widget} from "../Et2Widget/Et2Widget";
|
||||
import {dateStyles} from "./DateStyles";
|
||||
import {Et2DateReadonly} from "./Et2DateReadonly";
|
||||
|
||||
/**
|
||||
* This is a stripped-down read-only widget used in nextmatch
|
||||
*/
|
||||
export class Et2DateTimeReadonly extends Et2Widget(LitElement) implements et2_IDetachedDOM
|
||||
export class Et2DateTimeReadonly extends Et2DateReadonly
|
||||
{
|
||||
private value : any;
|
||||
|
||||
static get styles()
|
||||
constructor()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
dateStyles
|
||||
];
|
||||
}
|
||||
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
value: String,
|
||||
}
|
||||
}
|
||||
|
||||
set_value(value)
|
||||
{
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
let parsed : Date | Boolean = this.value ? parseDateTime(this.value) : false
|
||||
|
||||
return html`
|
||||
<time ${this.id ? html`id="${this._dom_id}"` : ''}
|
||||
datetime="${parsed ? formatDateTime(<Date>parsed, {dateFormat: "Y-m-d", timeFormat: "H:i:s"}) : ""}">
|
||||
${this.value ? formatDateTime(<Date>parsed) : ''}
|
||||
</time>
|
||||
`;
|
||||
}
|
||||
|
||||
getDetachedAttributes(attrs)
|
||||
{
|
||||
attrs.push("id", "value", "class");
|
||||
}
|
||||
|
||||
getDetachedNodes() : HTMLElement[]
|
||||
{
|
||||
return [<HTMLElement><unknown>this];
|
||||
}
|
||||
|
||||
setDetachedAttributes(_nodes : HTMLElement[], _values : object, _data? : any) : void
|
||||
{
|
||||
// Do nothing, since we can't actually stop being a DOM node...
|
||||
}
|
||||
|
||||
loadFromXML()
|
||||
{
|
||||
// nope
|
||||
}
|
||||
|
||||
loadingFinished()
|
||||
{
|
||||
// already done, I'm a wc with no children
|
||||
super();
|
||||
this.parser = parseDateTime;
|
||||
this.formatter = formatDateTime;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user