From 42ad3fa8aee76eaf6b0a9f9c4f05fde63c8c999f Mon Sep 17 00:00:00 2001 From: ralf Date: Sat, 3 Aug 2024 10:12:41 +0200 Subject: [PATCH] fixed to work with changed et2-number widget and using decorators --- api/js/etemplate/Et2Date/Et2DateDuration.ts | 223 ++++++++---------- .../Et2Date/Et2DateDurationReadonly.ts | 7 +- 2 files changed, 99 insertions(+), 131 deletions(-) diff --git a/api/js/etemplate/Et2Date/Et2DateDuration.ts b/api/js/etemplate/Et2Date/Et2DateDuration.ts index 654ee3c92c..288b139873 100644 --- a/api/js/etemplate/Et2Date/Et2DateDuration.ts +++ b/api/js/etemplate/Et2Date/Et2DateDuration.ts @@ -15,6 +15,8 @@ import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget"; import {sprintf} from "../../egw_action/egw_action_common"; import {dateStyles} from "./DateStyles"; import shoelace from "../Styles/shoelace"; +import {customElement} from "lit/decorators/custom-element.js"; +import {property} from "lit/decorators/property.js"; export interface formatOptions { @@ -24,7 +26,7 @@ export interface formatOptions hoursPerDay : number; emptyNot0 : boolean; number_format? : string; -}; +} /** * Format a number as a time duration @@ -111,6 +113,7 @@ export function formatDuration(value : number | string, options : formatOptions) * If not specified, the time is in assumed to be minutes and will be displayed with a calculated unit * but this can be specified with the properties. */ +@customElement("et2-date-duration") export class Et2DateDuration extends Et2InputWidget(LitElement) { static get styles() @@ -170,95 +173,98 @@ export class Et2DateDuration extends Et2InputWidget(LitElement) ]; } - static get properties() + /** + * Data format + * + * Units to read/store the data. 'd' = days (float), 'h' = hours (float), 'm' = minutes (int), 's' = seconds (int). + */ + @property({type: String, reflect: true}) + dataFormat = "m"; + /** + * Display format + * + * Permitted units for displaying the data. + * 'd' = days, 'h' = hours, 'm' = minutes, 's' = seconds. Use combinations to give a choice. + * Default is 'dhm' = days or hours with selectbox. + */ + @property({type: String, reflect: true}) + set displayFormat(value : string) { - return { - ...super.properties, - - /** - * Data format - * - * Units to read/store the data. 'd' = days (float), 'h' = hours (float), 'm' = minutes (int), 's' = seconds (int). - */ - dataFormat: { - reflect: true, - type: String - }, - /** - * Display format - * - * Permitted units for displaying the data. - * 'd' = days, 'h' = hours, 'm' = minutes, 's' = seconds. Use combinations to give a choice. - * Default is 'dh' = days or hours with selectbox. - */ - displayFormat: { - reflect: true, - type: String - }, - - /** - * Select unit or input per unit - * - * Display a unit-selection for multiple units, or an input field per unit. - * Default is true - */ - selectUnit: { - reflect: true, - type: Boolean - }, - - /** - * Percent allowed - * - * Allows to enter a percentage instead of numbers - */ - percentAllowed: { - type: Boolean - }, - - /** - * Hours per day - * - * Number of hours in a day, used for converting between hours and (working) days. - * Default 8 - */ - hoursPerDay: { - reflect: true, - type: Number - }, - - /** - * 0 or empty - * - * Should the widget differ between 0 and empty, which get then returned as NULL - * Default false, empty is considered as 0 - */ - emptyNot0: { - reflect: true, - type: Boolean - }, - - /** - * Short labels - * - * use d/h/m instead of day/hour/minute - */ - shortLabels: { - reflect: true, - type: Boolean - }, - - /** - * Step limit - * - * Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. - */ - step: { - type: String + this.__displayFormat = ""; + if(!value) + { + // Don't allow an empty value, but don't throw a real error + console.warn("Invalid displayFormat ", value, this); + value = "dhm"; + } + // Display format must be in decreasing size order (dhms) or the calculations + // don't work out nicely + for(let f of Object.keys(Et2DateDuration.time_formats)) + { + if(value.indexOf(f) !== -1) + { + this.__displayFormat += f; } } } + get displayFormat() + { + return this.__displayFormat; + } + + /** + * Select unit or input per unit + * + * Display a unit-selection for multiple units, or an input field per unit. + * Default is true + */ + @property({type: Boolean, reflect: true}) + selectUnit = true; + + /** + * Percent allowed + * + * Allows to enter a percentage instead of numbers + */ + @property({type: Boolean}) + percentAllowed = false; + + /** + * Hours per day + * + * Number of hours in a day, used for converting between hours and (working) days. + * Default 8 + */ + @property({type: Number, reflect: true}) + hoursPerDay = 8; + + /** + * 0 or empty + * + * Should the widget differ between 0 and empty, which get then returned as NULL + * Default false, empty is considered as 0 + */ + @property({type: Boolean, reflect: true}) + emptyNot0 = false; + + /** + * Short labels + * + * use d/h/m instead of day/hour/minute + */ + @property({type: Boolean, reflect: true}) + shortLabels = false; + + /** + * Step limit + * + * Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. + */ + step: { + type: String + } + protected static time_formats = {d: "d", h: "h", m: "m", s: "s"}; protected _display = {value: "", unit: ""}; @@ -267,13 +273,7 @@ export class Et2DateDuration extends Et2InputWidget(LitElement) super(); // Property defaults - this.dataFormat = "m"; this.displayFormat = "dhm"; - this.selectUnit = true; - this.percentAllowed = false; - this.hoursPerDay = 8; - this.emptyNot0 = false; - this.shortLabels = false; this.formatter = formatDuration; } @@ -365,37 +365,6 @@ export class Et2DateDuration extends Et2InputWidget(LitElement) this.requestUpdate(); } - /** - * Set the format for displaying the duration - * - * @param {string} value - */ - set displayFormat(value : string) - { - this.__displayFormat = ""; - if(!value) - { - // Don't allow an empty value, but don't throw a real error - console.warn("Invalid displayFormat ", value, this); - value = "dhm"; - } - // Display format must be in decreasing size order (dhms) or the calculations - // don't work out nicely - for(let f of Object.keys(Et2DateDuration.time_formats)) - { - if(value.indexOf(f) !== -1) - { - this.__displayFormat += f; - } - } - } - - get displayFormat() - { - return this.__displayFormat; - } - - render() { @@ -603,7 +572,10 @@ export class Et2DateDuration extends Et2InputWidget(LitElement) ` @@ -665,7 +637,4 @@ export class Et2DateDuration extends Et2InputWidget(LitElement) { return this.shadowRoot ? this.shadowRoot.querySelector("sl-select") : null; } -} - -// @ts-ignore TypeScript is not recognizing that this is a LitElement -customElements.define("et2-date-duration", Et2DateDuration); \ No newline at end of file +} \ No newline at end of file diff --git a/api/js/etemplate/Et2Date/Et2DateDurationReadonly.ts b/api/js/etemplate/Et2Date/Et2DateDurationReadonly.ts index 333e9e2bd8..431e6e61a9 100644 --- a/api/js/etemplate/Et2Date/Et2DateDurationReadonly.ts +++ b/api/js/etemplate/Et2Date/Et2DateDurationReadonly.ts @@ -11,11 +11,13 @@ import {css, html} from "lit"; import {Et2DateDuration, formatOptions} from "./Et2DateDuration"; import {dateStyles} from "./DateStyles"; +import {customElement} from "lit/decorators/custom-element.js"; /** * This is a stripped-down read-only widget used in nextmatch */ +@customElement("et2-date-duration_ro") export class Et2DateDurationReadonly extends Et2DateDuration { static get styles() @@ -100,7 +102,4 @@ export class Et2DateDurationReadonly extends Et2DateDuration this[attr] = _values[attr]; } } -} - -// @ts-ignore TypeScript is not recognizing that this widget is a LitElement -customElements.define("et2-date-duration_ro", Et2DateDurationReadonly); \ No newline at end of file +} \ No newline at end of file