From 312bf62adc5ade3a2d80c9a19aa0e2dd57c64a3b Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Mon, 1 Nov 2021 10:21:08 -0600
Subject: [PATCH] Implement readonly for date widget

---
 api/js/etemplate/Et2Date/Et2Date.ts           | 28 +++++++++++++++++++
 api/js/etemplate/Et2Date/test/Et2Date.test.ts | 15 ++++++++++
 2 files changed, 43 insertions(+)

diff --git a/api/js/etemplate/Et2Date/Et2Date.ts b/api/js/etemplate/Et2Date/Et2Date.ts
index 06d7a4ca6e..c1288da6ef 100644
--- a/api/js/etemplate/Et2Date/Et2Date.ts
+++ b/api/js/etemplate/Et2Date/Et2Date.ts
@@ -186,6 +186,11 @@ export class Et2Date extends Et2InputWidget(LionInputDatepicker)
 
 	getValue()
 	{
+		if(this.readOnly)
+		{
+			return null;
+		}
+
 		// The supplied value was not understandable, return null
 		if(this.modelValue instanceof Unparseable || !this.modelValue)
 		{
@@ -236,12 +241,35 @@ export class Et2Date extends Et2InputWidget(LionInputDatepicker)
 		return new Date(modelValue.getTime() + offset);
 	}
 
+	/**
+	 * Overriding from parent for read-only
+	 *
+	 * @return {TemplateResult}
+	 * @protected
+	 */
+	// eslint-disable-next-line class-methods-use-this
+	_inputGroupInputTemplate()
+	{
+		if(this.readOnly)
+		{
+			return this.formattedValue;
+		}
+		else
+		{
+			return super._inputGroupInputTemplate();
+		}
+	}
+
 	/**
 	 * Overriding parent to add class to button, and use an image instead of unicode emoji
 	 */
 	// eslint-disable-next-line class-methods-use-this
 	_invokerTemplate()
 	{
+		if(this.readOnly)
+		{
+			return '';
+		}
 		let img = this.egw() ? this.egw().image("calendar") || '' : '';
 		return html`
             <button
diff --git a/api/js/etemplate/Et2Date/test/Et2Date.test.ts b/api/js/etemplate/Et2Date/test/Et2Date.test.ts
index 153ac68a01..6462fb7abb 100644
--- a/api/js/etemplate/Et2Date/test/Et2Date.test.ts
+++ b/api/js/etemplate/Et2Date/test/Et2Date.test.ts
@@ -47,6 +47,21 @@ describe("Date widget", () =>
 		assert.equal(element.querySelector("[slot='label']").textContent, "Label set");
 	})
 
+	it('Readonly does not return a value', () =>
+	{
+		element.readOnly = true;
+		let test_time_string = '2008-09-22T12:00:00.000Z';
+
+		element.set_value(test_time_string);
+
+		// Use a Promise to wait for asychronous changes to the DOM
+		return Promise.resolve().then(() =>
+		{
+			// Read-only widget returns null
+			assert.equal(element.getValue(), null);
+		});
+	});
+
 	const tz_list = [
 		{name: "America/Edmonton", offset: 600},
 		{name: "UTC", offset: 0},