From 5ec2a233a4e4ac5b004341752e4a517121a802ce Mon Sep 17 00:00:00 2001
From: Ralf Becker <RalfBecker@outdoor-training.de>
Date: Wed, 19 Jan 2022 10:57:06 +0200
Subject: [PATCH] using WCs for simple select, r/o select-* and r/o date(-time)
 ToDo/Questions Nathan: - Tracker index gives a client-side TypeError -
 <et2-select-account readonly="true" is not registered, but <et2-select
 type="select-account" readonly="true" works - <et2-date-time was registered
 as <et2-datetime, was that a typo of a conscious choice to rename the widget
 and not just prefix with et2- - not yet enabled are r/w et2-date(-time) -
 still missing are r/o et2-date-(since|duration)

---
 api/etemplate.php                             | 26 +++++++++++++++++--
 api/js/etemplate/Et2Date/Et2DateTime.ts       |  2 +-
 .../etemplate/Et2Date/Et2DateTimeReadonly.ts  |  2 +-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/api/etemplate.php b/api/etemplate.php
index 5479637387..199d96f283 100644
--- a/api/etemplate.php
+++ b/api/etemplate.php
@@ -13,7 +13,7 @@
 use EGroupware\Api;
 
 // add et2- prefix to following widgets/tags
-const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box|textbox|textarea|button|colorpicker))(/?|\s[^>]*)>#m';
+const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box|textbox|textarea|button|colorpicker|description))(/?|\s[^>]*)>#m';
 
 // switch evtl. set output-compression off, as we cant calculate a Content-Length header with transparent compression
 ini_set('zlib.output_compression', 0);
@@ -75,7 +75,29 @@ function send_template()
 			return '<' . $matches[2] . 'et2-' . $matches[3] .
 				// web-components must not be self-closing (no "<et2-button .../>", but "<et2-button ...></et2-button>")
 				(substr($matches[4], -1) === '/' ? substr($matches[4], 0, -1) . '></et2-' . $matches[3] : $matches[4]) . '>';
-		},                           $str);
+		}, $str);
+
+		// handling of partially implemented select and date widget (only readonly or simple select without tags or search attribute or options)
+		$str = preg_replace_callback('#<(select|date)(-[^ ]+)? ([^>]+)/>#', static function (array $matches)
+		{
+			preg_match_all('/(^| )([a-z0-9_-]+)="([^"]+)"/', $matches[3], $attrs, PREG_PATTERN_ORDER);
+			$attrs = array_combine($attrs[2], $attrs[3]);
+			// fix not understood <et2-select-account --> <et2-select type="select-account", ToDo: Nathan
+			if ($matches[1] === 'select' && $matches[2] === '-account')
+			{
+				$matches[2] = '';
+				$matches[3] = 'type="select-account" '.$matches[3];
+			}
+			// add et2-prefix for <select-* or <date-* readonly="true"
+			if (($matches[1] === 'select' || in_array($matches[1].$matches[2], ['date','date-time'])) &&
+					isset($attrs['readonly']) && !in_array($attrs['readonly'], ['false', '0']) ||
+				// also add it for untyped/simple <select without search or tags attribute
+				$matches[1] === 'select' && empty($matches[2]) && !isset($attrs['type']) && !isset($attrs['search']) && !isset($attrs['tags']))
+			{
+				return '<et2-'.$matches[1].$matches[2].' '.$matches[3].'></et2-'.$matches[1].$matches[2].'>';
+			}
+			return $matches[0];
+		}, $str);
 
 		$processing = microtime(true);
 
diff --git a/api/js/etemplate/Et2Date/Et2DateTime.ts b/api/js/etemplate/Et2Date/Et2DateTime.ts
index 372faca739..be0b650c90 100644
--- a/api/js/etemplate/Et2Date/Et2DateTime.ts
+++ b/api/js/etemplate/Et2Date/Et2DateTime.ts
@@ -66,4 +66,4 @@ export class Et2DateTime extends Et2Date
 }
 
 // @ts-ignore TypeScript is not recognizing that Et2DateTime is a LitElement
-customElements.define("et2-datetime", Et2DateTime);
+customElements.define("et2-date-time", Et2DateTime);
diff --git a/api/js/etemplate/Et2Date/Et2DateTimeReadonly.ts b/api/js/etemplate/Et2Date/Et2DateTimeReadonly.ts
index 230b613ffc..9c0f9bda68 100644
--- a/api/js/etemplate/Et2Date/Et2DateTimeReadonly.ts
+++ b/api/js/etemplate/Et2Date/Et2DateTimeReadonly.ts
@@ -24,4 +24,4 @@ export class Et2DateTimeReadonly extends Et2DateReadonly
 }
 
 // @ts-ignore TypeScript is not recognizing that Et2Date is a LitElement
-customElements.define("et2-datetime_ro", Et2DateTimeReadonly);
\ No newline at end of file
+customElements.define("et2-date-time_ro", Et2DateTimeReadonly);
\ No newline at end of file