Finish Et2Email widget

This commit is contained in:
nathan 2023-12-13 10:33:30 -07:00
parent e28d38898b
commit c9ab4cccf6
4 changed files with 24 additions and 12 deletions

View File

@ -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 {

View File

@ -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>

View File

@ -217,4 +217,4 @@ class Taglist extends Etemplate\Widget
}
Etemplate\Widget::registerWidget(__NAMESPACE__ . '\\Taglist', array(
'taglist', 'et2-select-email', 'et2-select-thumbnail'));
'taglist', 'et2-select-email', 'et2-select-thumbnail', 'et2-email'));

View File

@ -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">