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

Add date readonly, some class optimizing

Browse Source
This commit is contained in:
nathan 2021-12-17 10:06:37 -07:00
parent ccfcf2a086
commit 4e597b5672
2 changed files with 108 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
api/js/etemplate/Et2Date/Et2DateReadonly.ts Normal file
View 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);

77
api/js/etemplate/Et2Date/Et2DateTimeReadonly.ts
View File

@ -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;
}
}