Et2Select: Add missing support for options on static type options (number, percent)

api/etemplate.php

@@ -77,23 +77,25 @@ function send_template()
 				list($matches[1], $matches[2]) = explode('-', $type[1], 2);
 			}
 			static $legacy_options = array( // use "ignore" to ignore further comma-sep. values, otherwise they are all in last attribute
-				'select' => 'empty_label,ignore',
+				'select'         => 'empty_label,ignore',
 				'select-account' => 'empty_label,account_type,ignore',
-				'box' => ',cellpadding,cellspacing,keep',
+				'select-number'  => 'empty_label,min,max,interval,suffix',
-				'hbox' => 'cellpadding,cellspacing,keep',
+				'box'            => ',cellpadding,cellspacing,keep',
-				'vbox' => 'cellpadding,cellspacing,keep',
+				'hbox'           => 'cellpadding,cellspacing,keep',
-				'groupbox' => 'cellpadding,cellspacing,keep',
+				'vbox'           => 'cellpadding,cellspacing,keep',
-				'checkbox' => 'selected_value,unselected_value,ro_true,ro_false',
+				'groupbox'       => 'cellpadding,cellspacing,keep',
-				'radio' => 'set_value,ro_true,ro_false',
+				'checkbox'       => 'selected_value,unselected_value,ro_true,ro_false',
-				'customfields' => 'sub-type,use-private,field-names',
+				'radio'          => 'set_value,ro_true,ro_false',
-				'date' => 'data_format,ignore', // Legacy option "mode" was never implemented in et2
+				'customfields'   => 'sub-type,use-private,field-names',
-				'description' => 'bold-italic,link,activate_links,label_for,link_target,link_popup_size,link_title',
+				'date'           => 'data_format,ignore',
-				'button' => 'image,ro_image',
+				// Legacy option "mode" was never implemented in et2
-				'buttononly' => 'image,ro_image',
+				'description'    => 'bold-italic,link,activate_links,label_for,link_target,link_popup_size,link_title',
-				'link-entry' => 'only_app,application_list',
+				'button'         => 'image,ro_image',
+				'buttononly'     => 'image,ro_image',
+				'link-entry'     => 'only_app,application_list',
 			);
 			// prefer more specific type-subtype over just type
-			$names = $legacy_options[$matches[1] . $matches[2]] ?? $legacy_options[$matches[1]] ?? null;
+			$names = $legacy_options[$matches[1] . '-' . $matches[2]] ?? $legacy_options[$matches[1]] ?? null;
 			if (isset($names))
 			{
 				$names = explode(',', $names);

api/js/etemplate/Et2Select/Et2Select.ts

@@ -357,19 +357,6 @@ export class Et2SelectCategory extends Et2Select
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
 customElements.define("et2-select-cat", Et2SelectCategory);
 
-export class Et2SelectPercent extends Et2Select
-{
-	constructor()
-	{
-		super();
-
-		this.select_options = so.percent(this, {});
-	}
-}
-
-// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
-customElements.define("et2-select-percent", Et2SelectPercent);
-
 export class Et2SelectCountry extends Et2Select
 {
 	constructor()
@@ -437,17 +424,68 @@ customElements.define("et2-select-month", Et2SelectMonth);
 
 export class Et2SelectNumber extends Et2Select
 {
+	static get properties()
+	{
+		return {
+			...super.properties,
+			/**
+			 * Step between numbers
+			 */
+			interval: {type: Number},
+			min: {type: Number},
+			max: {type: Number},
+
+			/**
+			 * Add one or more leading zeros
+			 * Set to how many zeros you want (000)
+			 */
+			leading_zero: {type: String},
+			/**
+			 * Appended after every number
+			 */
+			suffix: {type: String}
+		}
+	}
+
 	constructor()
 	{
 		super();
+		this.min = 1;
+		this.max = 10;
+		this.interval = 1;
+		this.leading_zero = "";
+		this.suffix = "";
+	}
 
-		this.select_options = so.number(this, {other: this.other || []});
+	updated(changedProperties : PropertyValues)
+	{
+		super.updated(changedProperties);
+
+		if(changedProperties.has('min') || changedProperties.has('max') || changedProperties.has('interval') || changedProperties.has('suffix'))
+		{
+			this.select_options = so.number(this);
+		}
 	}
 }
 
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
 customElements.define("et2-select-number", Et2SelectNumber);
 
+export class Et2SelectPercent extends Et2SelectNumber
+{
+	constructor()
+	{
+		super();
+		this.min = 0;
+		this.max = 100;
+		this.interval = 10;
+		this.suffix = "%%";
+	}
+}
+
+// @ts-ignore TypeScript is not recognizing that this widget is a LitElement
+customElements.define("et2-select-percent", Et2SelectPercent);
+
 export class Et2SelectPriority extends Et2Select
 {
 	constructor()
@@ -487,13 +525,23 @@ export class Et2SelectTimezone extends Et2Select
 // @ts-ignore TypeScript is not recognizing that this widget is a LitElement
 customElements.define("et2-select-timezone", Et2SelectTimezone);
 
-export class Et2SelectYear extends Et2Select
+export class Et2SelectYear extends Et2SelectNumber
 {
 	constructor()
 	{
 		super();
+		this.min = -3;
+		this.max = 2;
+	}
 
-		this.select_options = so.year(this, {other: this.other || []});
+	updated(changedProperties : PropertyValues)
+	{
+		super.updated(changedProperties);
+
+		if(changedProperties.has('min') || changedProperties.has('max') || changedProperties.has('interval') || changedProperties.has('suffix'))
+		{
+			this.select_options = so.year(this);
+		}
 	}
 }
 

api/js/etemplate/Et2Select/StaticOptions.ts

@@ -10,7 +10,7 @@
 import {sprintf} from "../../egw_action/egw_action_common";
 import {Et2SelectReadonly} from "./Et2SelectReadonly";
 import {find_select_options, SelectOption} from "./FindSelectOptions";
-import {Et2Select, Et2WidgetWithSelect} from "./Et2Select";
+import {Et2Select, Et2SelectNumber, Et2WidgetWithSelect} from "./Et2Select";
 
 export type Et2SelectWidgets = Et2Select | Et2WidgetWithSelect | Et2SelectReadonly;
 
@@ -146,27 +146,29 @@ export class StaticOptions
 		];
 	}
 
-	number(widget : Et2SelectWidgets, attrs) : SelectOption[]
+	number(widget : Et2SelectWidgets, attrs = {
+		min: undefined,
+		max: undefined,
+		interval: undefined,
+		format: undefined
+	}) : SelectOption[]
 	{
-		if(typeof attrs.other != 'object')
+
-		{
-			attrs.other = [];
-		}
 		var options = [];
-		var min = typeof (attrs.other[0]) == 'undefined' ? 1 : parseInt(attrs.other[0]);
+		var min = attrs.min ?? parseFloat(widget.min);
-		var max = typeof (attrs.other[1]) == 'undefined' ? 10 : parseInt(attrs.other[1]);
+		var max = attrs.max ?? parseFloat(widget.max);
-		var interval = typeof (attrs.other[2]) == 'undefined' ? 1 : parseInt(attrs.other[2]);
+		var interval = attrs.interval ?? parseFloat(widget.interval);
-		var format = '%d';
+		var format = attrs.format ?? '%d';
 
 		// leading zero specified in interval
-		if(attrs.other[2] && attrs.other[2][0] == '0')
+		if(widget.leading_zero && widget.leading_zero[0] == '0')
 		{
 			format = '%0' + ('' + interval).length + 'd';
 		}
 		// Suffix
-		if(attrs.other[3])
+		if(widget.suffix)
 		{
-			format += widget.egw().lang(attrs.other[3]);
+			format += widget.egw().lang(widget.suffix);
 		}
 
 		// Avoid infinite loop if interval is the wrong direction
@@ -182,29 +184,20 @@ export class StaticOptions
 		return options;
 	}
 
-	percent(widget : Et2SelectWidgets, attrs) : SelectOption[]
+	percent(widget : Et2SelectNumber) : SelectOption[]
 	{
-		if(typeof attrs.other != 'object')
+		return this.number(widget);
-		{
-			attrs.other = [];
-		}
-		attrs.other[0] = 0;
-		attrs.other[1] = 100;
-		attrs.other[2] = typeof (attrs.other[2]) == 'undefined' ? 10 : parseInt(attrs.other[2]);
-		attrs.other[3] = '%%';
-		return this.number(widget, attrs);
 	}
 
 	year(widget : Et2SelectWidgets, attrs) : SelectOption[]
 	{
-		if(typeof attrs.other != 'object')
+		if(typeof attrs != 'object')
 		{
-			attrs.other = [];
+			attrs = {}
 		}
 		var t = new Date();
-		attrs.other[0] = t.getFullYear() - (typeof (attrs.other[0]) == 'undefined' ? 3 : parseInt(attrs.other[0]));
+		attrs.min = t.getFullYear() + parseInt(widget.min);
-		attrs.other[1] = t.getFullYear() + (typeof (attrs.other[1]) == 'undefined' ? 2 : parseInt(attrs.other[1]));
+		attrs.max = t.getFullYear() + parseInt(widget.max);
-		attrs.other[2] = typeof (attrs.other[2]) == 'undefined' ? 1 : parseInt(attrs.other[2]);
 		return this.number(widget, attrs);
 	}