Change email tag display from multiple boolean to a single option

onlyEmail and fullEmail properties changed to just emailDisplay with options of "full" | "email" | "name" | "domain"
This commit is contained in:
nathan 2024-01-05 15:35:59 -07:00
parent 3a037c970c
commit f8f4a39648
5 changed files with 49 additions and 72 deletions

View File

@ -259,12 +259,12 @@
</row>
<row>
<et2-description for="mailAlternateAddress" value="Alternate email address"></et2-description>
<et2-email id="mailAlternateAddress" multiple="true" searchUrl="" onlyEmail="true"></et2-email>
<et2-email id="mailAlternateAddress" multiple="true" searchUrl="" emailDisplay="email"></et2-email>
<et2-description></et2-description>
</row>
<row disabled="@no_forward_available">
<et2-description for="mailForwardingAddress" value="Forward email's to"></et2-description>
<et2-email id="mailForwardingAddress" multiple="true" searchUrl="" onlyEmail="true"></et2-email>
<et2-email id="mailForwardingAddress" multiple="true" searchUrl="" emailDisplay="email"></et2-email>
<et2-vbox>
<et2-checkbox label="Forward only" id="deliveryMode" onchange="if (widget.getValue()) et2_dialog.alert('Forward only disables IMAP mailbox / storing of mails and just forwards them to given address.','Forward only');" selectedValue="forwardOnly"></et2-checkbox>
<et2-checkbox label="Allow users to change forwards" id="acc_user_forward"></et2-checkbox>

View File

@ -114,16 +114,12 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
includeLists : boolean;
/**
* If the email is a contact, we normally show the contact name instead of the email.
* Set to true to turn this off and always show just the email
* Mutually exclusive with fullEmail!
* What to display for the selected email addresses
*
* {@link Et2EmailTag#emailDisplay}
*/
@property({type: Boolean})
onlyEmail : boolean;
/** Show the full, original value email address under all circumstances, rather than the contact name for known contacts */
@property({type: Boolean})
fullEmail : boolean;
@property({type: String})
emailDisplay : "full" | "email" | "name" | "domain";
/** The component's help text. If you need to display HTML, use the `help-text` slot instead. */
@property({attribute: 'help-text'}) helpText = '';
@ -1007,8 +1003,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
"et2-select-draggable": !this.readonly && this.allowDragAndDrop,
})}
variant=${this.isValid ? nothing : "danger"}
.fullEmail=${this.fullEmail}
.onlyEmail=${this.onlyEmail}
.emailDisplay=${this.emailDisplay ?? nothing}
.value=${live(value)}
?removable=${!readonly}
?readonly=${readonly}

View File

@ -79,16 +79,11 @@ export class Et2SelectEmail extends Et2Select
includeLists: {type: Boolean},
/**
* If the email is a contact, we normally show the contact name instead of the email.
* Set to true to turn this off and always show just the email
* Mutually exclusive with fullEmail!
* What to display for the selected email addresses
*
* {@link Et2EmailTag#emailDisplay}
*/
onlyEmail: {type: Boolean},
/**
* Show the full, original value email address under all circumstances, rather than the contact name for known contacts
*/
fullEmail: {type: Boolean}
emailDisplay: {type: String}, //"full" | "email" | "name" | "domain";
}
}

View File

@ -7,6 +7,7 @@
* @author Nathan Gray
*/
import {css, html, nothing, PropertyValues, TemplateResult} from "lit";
import {property} from "lit/decorators/property.js";
import {classMap} from "lit/directives/class-map.js";
import shoelace from "../../Styles/shoelace";
import {Et2Tag} from "./Et2Tag";
@ -69,40 +70,25 @@ export class Et2EmailTag extends Et2Tag
`];
}
static get properties()
{
return {
...super.properties,
/**
* Check if the email is associated with an existing contact, and if it is not show a button to create
* a new contact with this email address.
*/
contactPlus: {
type: Boolean,
reflect: true,
},
@property({type: Boolean, reflect: true})
contactPlus = true;
/**
* If the email is a contact, we normally show the contact name instead of the email.
* Set to true to turn this off and always show just the email
* Mutually exclusive with fullEmail!
*/
onlyEmail: {type: Boolean},
/**
* If the email is a contact, we normally show the contact name instead of the email.
* Set to true to turn this off and always show the email
*/
fullEmail: {type: Boolean}
}
}
/**
* What to display for the selected email addresses
*
* - full: "Mr Test User <test@example.com>
* - name: "Mr Test User"
* - domain: "Mr Test User (example.com)"
* - email: "test@example.com"
*
* If name is unknown, we'll use the email instead.
*/
@property({type: String})
emailDisplay : "full" | "email" | "name" | "domain" = "domain";
constructor(...args : [])
{
super(...args);
this.contactPlus = true;
this.fullEmail = false;
this.onlyEmail = false;
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
this.handleMouseClick = this.handleMouseClick.bind(this);
@ -225,23 +211,29 @@ export class Et2EmailTag extends Et2Tag
public _contentTemplate() : TemplateResult
{
const split = Et2EmailTag.splitEmail(this.value);
let content = this.value;
// If there's a name, just show the name, otherwise show the email
if(!this.onlyEmail && Et2EmailTag.email_cache[content])
if(split.name)
{
// Append current value as email, data may have work & home email in it
content = (Et2EmailTag.email_cache[content]?.n_fn || "") + " <" + (Et2EmailTag.splitEmail(content)?.email || content) + ">"
}
if (this.onlyEmail)
{
const split = Et2EmailTag.splitEmail(content);
content = split.email || content;
}
else if(!this.fullEmail)
{
const split = Et2EmailTag.splitEmail(content);
content = split.name || split.email;
switch(this.emailDisplay)
{
case "full":
content = split.name + " <" + split.email + ">";
break;
case "email":
content = split.email;
break;
case "name":
default:
content = split.name;
break;
case "domain":
content = split.name + " (" + split.email.split("@").pop() + ")";
break;
}
}
return html`
<span part="content" class="tag__content" title="${this.value}">
${content}

View File

@ -54,14 +54,9 @@ describe('Et2EmailTag', () =>
assert.isTrue(component.contactPlus);
});
it('should have an onlyEmail property', () =>
it('should have an emailDisplay property', () =>
{
assert.isFalse(component.onlyEmail);
});
it('should have a fullEmail property', () =>
{
assert.isFalse(component.fullEmail);
assert.exists(component.emailDisplay);
});
it('should open addressbook with email preset on (+) click', () =>