From c9ab4cccf6f5f11a4ec6c5ae93f3e1436f216d25 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Wed, 13 Dec 2023 10:33:30 -0700
Subject: [PATCH] Finish Et2Email widget

---
 api/js/etemplate/Et2Email/Et2Email.styles.ts |  7 ++++++-
 api/js/etemplate/Et2Email/Et2Email.ts        | 13 ++++++++++---
 api/src/Etemplate/Widget/Taglist.php         |  2 +-
 mail/templates/default/compose.xet           | 14 +++++++-------
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/api/js/etemplate/Et2Email/Et2Email.styles.ts b/api/js/etemplate/Et2Email/Et2Email.styles.ts
index b2d015c5ee..887f38fa46 100644
--- a/api/js/etemplate/Et2Email/Et2Email.styles.ts
+++ b/api/js/etemplate/Et2Email/Et2Email.styles.ts
@@ -18,6 +18,7 @@ export default css`
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
+		align-items: center;
 		gap: 0.1rem 0.5rem;
 
 		background-color: var(--sl-input-background-color);
@@ -55,6 +56,7 @@ export default css`
 	/* Tags */
 	.email et2-email-tag {
 		order: 2;
+		flex-grow: 0;
 		margin: auto 0px;
 		--icon-width: 1.8em;
 
@@ -62,7 +64,6 @@ export default css`
 	}
 
 	/* Search box */
-
 	.email__search {
 		flex: 1 1 auto;
 		order: 10;
@@ -76,9 +77,13 @@ export default css`
 		padding-inline: var(--sl-input-spacing-medium);
 	}
 
+	.email .email__loading {
+		order: 19;
+	}
 	.email .email__suffix {
 		order: 20;
 	}
+
 	/* Listbox */
 
 	.email__listbox {
diff --git a/api/js/etemplate/Et2Email/Et2Email.ts b/api/js/etemplate/Et2Email/Et2Email.ts
index 713e6cae42..35cbfdffd9 100644
--- a/api/js/etemplate/Et2Email/Et2Email.ts
+++ b/api/js/etemplate/Et2Email/Et2Email.ts
@@ -283,7 +283,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 			this.classList.remove("et2-sortable-email");
 			return;
 		}
-		console.log(this, " is sortable");
 		this.classList.add("et2-sortable-email");
 		let pull : boolean | string = !this.disabled && !this.readonly;
 		if(this.readonly && !this.disabled)
@@ -450,12 +449,14 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 		clearTimeout(this._searchTimeout);
 
 		this.searching = true;
+		this.requestUpdate("searching");
 
 		// Start the searches
 		this._searchPromise = this.remoteSearch(this._search.value, this.searchOptions);
 		return this._searchPromise.then(async() =>
 		{
 			this.searching = false;
+			this.requestUpdate("searching", true);
 			if(!this.open && this.hasFocus)
 			{
 				this.show();
@@ -584,7 +585,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 	 */
 	private handleLostFocus = (event : MouseEvent | KeyboardEvent) =>
 	{
-		console.log(this, "lost focus");
 		// Close when clicking outside of the component
 		const path = event.composedPath();
 		if(this && !path.includes(this))
@@ -690,6 +690,11 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 		// Tab or enter checks current value
 		else if(Et2Email.TAG_BREAK.indexOf(event.key) !== -1)
 		{
+			// Don't want the key to do its normal ting
+			event.stopPropagation();
+			event.preventDefault();
+
+			// Check for valid email or current selection
 			if(!this.validateAddress(this._search.value.trim()) && this.currentOption)
 			{
 				this._search.value = this.currentOption.value.replaceAll("___", " ");
@@ -1058,6 +1063,8 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
                             <slot part="prefix" name="prefix" class="email__prefix"></slot>
                             ${this.tagsTemplate()}
                             ${this.inputTemplate()}
+                            ${this.searching ? html`
+                                <sl-spinner class="email__loading"></sl-spinner>` : nothing}
                             <slot part="suffix" name="suffix" class="email__suffix"></slot>
                         </div>
                         <div
@@ -1071,7 +1078,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
                                 @keydown=${this.handleSuggestionsKeyDown}
                                 @mouseup=${this.handleSuggestionsMouseUp}
                         >
-                            ${this.suggestionsTemplate()}
+                            ${(this._selectOptions && this._selectOptions.length) ? this.suggestionsTemplate() : this.egw().lang("no matches found")}
                         </div>
                     </sl-popup>
                 </div>
diff --git a/api/src/Etemplate/Widget/Taglist.php b/api/src/Etemplate/Widget/Taglist.php
index 596de5454f..f681b63b64 100644
--- a/api/src/Etemplate/Widget/Taglist.php
+++ b/api/src/Etemplate/Widget/Taglist.php
@@ -217,4 +217,4 @@ class Taglist extends Etemplate\Widget
 }
 
 Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Taglist', array(
-	'taglist', 'et2-select-email', 'et2-select-thumbnail'));
\ No newline at end of file
+	'taglist', 'et2-select-email', 'et2-select-thumbnail', 'et2-email'));
\ No newline at end of file
diff --git a/mail/templates/default/compose.xet b/mail/templates/default/compose.xet
index 0cb3cd477e..9f88b84216 100644
--- a/mail/templates/default/compose.xet
+++ b/mail/templates/default/compose.xet
@@ -57,9 +57,9 @@
 					</row>
 					<row class="mailComposeHeaders" >
 						<et2-description  value="To"></et2-description>
-						<et2-select-email  id="to" allowDragAndDrop="true" width="100%" onclick="app.mail.address_click" multiple="true"
-							onchange="app.mail.recipients_onchange" autofocus="true" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email"
-							placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
+                        <et2-email id="to" width="100%" onclick="app.mail.address_click" autofocus="true"
+                                   onchange="app.mail.recipients_onchange"
+                                   placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-email>
 						<et2-hbox>
 							<et2-description  id="cc_expander" value="Cc" class="et2_button_text" onclick="app.mail.compose_fieldExpander"></et2-description>
 							<et2-description  id="bcc_expander" value="Bcc" class="et2_button_text" onclick="app.mail.compose_fieldExpander"></et2-description>
@@ -67,16 +67,16 @@
 					</row>
 					<row class="mailComposeHeaders mailComposeJQueryCc">
 						<et2-description  value="Cc"></et2-description>
-						<et2-select-email id="cc" width="100%" allowDragAndDrop="true" onclick="app.mail.address_click" multiple="true"
+                        <et2-email id="cc" width="100%" onclick="app.mail.address_click"
                                           onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email"
-                                          placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
+                                   placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-email>
                         <et2-description></et2-description>
                     </row>
                     <row class="mailComposeHeaders mailComposeJQueryBcc">
                         <et2-description value="Bcc"></et2-description>
-                        <et2-select-email id="bcc" width="100%" allowDragAndDrop="true" onclick="app.mail.address_click" multiple="true"
+                        <et2-email id="bcc" width="100%" onclick="app.mail.address_click"
                                           onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email"
-                                          placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
+                                   placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-email>
                         <et2-description></et2-description>
                     </row>
                     <row class="mailComposeHeaders">