espocrm-extensions/espocrm-base
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

autocomplete email addresses

Browse Source
This commit is contained in:
Yuri Kuznetsov
2024-02-14 16:40:25 +02:00
parent f4371efa1c
commit 495cd0f259
3 changed files with 124 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/views/email/fields/email-address-varchar.js
+43 -52
View File
@@ -29,6 +29,7 @@
import BaseFieldView from 'views/fields/base';
import EmailFromAddressFieldView from 'views/email/fields/from-address-varchar';
import EmailEmailAddressFieldView from 'views/email/fields/email-address';
import Autocomplete from 'ui/autocomplete';
class EmailAddressVarcharFieldView extends BaseFieldView {
@@ -332,64 +333,54 @@ class EmailAddressVarcharFieldView extends BaseFieldView {
this.addAddressHtml(item, this.nameHash[item] || '');
});
this.$input.autocomplete({
serviceUrl: () => {
return `EmailAddress/search` +
`?maxSize=${this.getAutocompleteMaxCount()}` +
`&onlyActual=true`;
},
paramName: 'q',
minChars: 1,
const autocomplete = new Autocomplete(this.$input.get(0), {
name: this.name,
autoSelectFirst: true,
noCache: true,
triggerSelectOnValidInput: false,
beforeRender: () => {
// Prevent an issue that suggestions are shown and not hidden
// when clicking outside the window and then focusing back on the document.
if (this.$input.get(0) !== document.activeElement) {
setTimeout(() => this.$input.autocomplete('hide'), 30);
}
},
formatResult: (/** Record */suggestion) => {
return this.getHelper().escapeString(suggestion.name) + ' <' +
this.getHelper().escapeString(suggestion.id) + '>';
},
transformResult: (response) => {
response = JSON.parse(response);
const list = [];
response.forEach((item) => {
list.push({
id: item.emailAddress,
name: item.entityName,
emailAddress: item.emailAddress,
entityId: item.entityId,
entityName: item.entityName,
entityType: item.entityType,
data: item.emailAddress,
value: item.emailAddress,
});
});
return {
suggestions: list
};
},
onSelect: (/** Record */item) => {
this.addAddress(item.emailAddress, item.entityName, item.entityType, item.entityId);
triggerSelectOnValidInput: true,
focusOnSelect: true,
minChars: 1,
forceHide: true,
onSelect: item => {
this.addAddress(
item.emailAddress,
item.entityName,
item.entityType,
item.entityId
);
this.$input.val('');
this.$input.focus();
},
formatResult: item => {
return this.getHelper().escapeString(item.name) + ' <' +
this.getHelper().escapeString(item.id) + '>';
},
lookupFunction: (query, done) => {
Espo.Ajax
.getRequest('EmailAddress/search', {
q: query,
maxSize: this.getAutocompleteMaxCount(),
onlyActual: true,
})
.then(/** Record[] */response => {
const result = response.map(item => {
return {
id: item.emailAddress,
name: item.entityName,
emailAddress: item.emailAddress,
entityId: item.entityId,
entityName: item.entityName,
entityType: item.entityType,
data: item.emailAddress,
value: item.emailAddress,
};
});
done(result);
});
},
});
this.once('render', () => {
this.$input.autocomplete('dispose');
});
this.once('remove', () => {
this.$input.autocomplete('dispose');
});
this.once('render remove', () => autocomplete.dispose());
}
if (this.mode === 'search' && this.getAcl().check('Email', 'create')) {
client/src/views/email/fields/email-address.js
+43 -46
View File
@@ -27,6 +27,7 @@
************************************************************************/
import BaseFieldView from 'views/fields/base';
import Autocomplete from 'ui/autocomplete';
class EmailEmailAddressFieldView extends BaseFieldView {
@@ -57,57 +58,53 @@ class EmailEmailAddressFieldView extends BaseFieldView {
initSearchAutocomplete() {
this.$input = this.$input || this.$el.find('input');
this.$input.autocomplete({
serviceUrl: () => {
return `EmailAddress/search` +
`?maxSize=${this.getAutocompleteMaxCount()}`
},
paramName: 'q',
minChars: 1,
const autocomplete = new Autocomplete(this.$input.get(0), {
name: this.name,
autoSelectFirst: true,
triggerSelectOnValidInput: false,
noCache: true,
formatResult: /** Record */suggestion => {
return this.getHelper().escapeString(suggestion.name) + ' <' +
this.getHelper().escapeString(suggestion.id) + '>';
},
transformResult: response => {
response = JSON.parse(response);
let list = response.map(item => {
return {
id: item.emailAddress,
name: item.entityName,
emailAddress: item.emailAddress,
entityId: item.entityId,
entityName: item.entityName,
entityType: item.entityType,
data: item.emailAddress,
value: item.emailAddress,
}
});
if (this.skipCurrentInAutocomplete) {
const current = this.$input.val();
list = list.filter(item => item.emailAddress !== current)
}
return {suggestions: list};
},
onSelect: /** Record */item => {
triggerSelectOnValidInput: true,
focusOnSelect: true,
minChars: 1,
forceHide: true,
handleFocusMode: 2,
onSelect: item => {
this.$input.val(item.emailAddress);
this.$input.focus();
},
formatResult: item => {
return this.getHelper().escapeString(item.name) + ' <' +
this.getHelper().escapeString(item.id) + '>';
},
lookupFunction: (query, done) => {
Espo.Ajax
.getRequest('EmailAddress/search', {
q: query,
maxSize: this.getAutocompleteMaxCount(),
})
.then(/** Record[] */response => {
let result = response.map(item => {
return {
id: item.emailAddress,
name: item.entityName,
emailAddress: item.emailAddress,
entityId: item.entityId,
entityName: item.entityName,
entityType: item.entityType,
data: item.emailAddress,
value: item.emailAddress,
};
});
if (this.skipCurrentInAutocomplete) {
const current = this.$input.val();
result = result.filter(item => item.emailAddress !== current)
}
done(result);
});
},
});
this.once('render', () => {
this.$input.autocomplete('dispose');
});
this.once('remove', () => {
this.$input.autocomplete('dispose');
});
this.once('render remove', () => autocomplete.dispose());
}
fetchSearch() {
client/src/views/fields/email.js
+38 -33
View File
@@ -28,6 +28,7 @@
import VarcharFieldView from 'views/fields/varchar';
import MailtoHelper from 'helpers/misc/mailto';
import Autocomplete from 'ui/autocomplete';
class EmailFieldView extends VarcharFieldView {
@@ -355,43 +356,47 @@ class EmailFieldView extends VarcharFieldView {
this.manageAddButton();
if (this.mode === this.MODE_SEARCH && this.getAcl().check('Email', 'create')) {
this.$element.autocomplete({
serviceUrl: () => {
return `EmailAddress/search` +
`?maxSize=${this.getAutocompleteMaxCount()}`
},
paramName: 'q',
minChars: 1,
const autocomplete = new Autocomplete(this.$element.get(0), {
name: this.name,
autoSelectFirst: true,
triggerSelectOnValidInput: false,
formatResult: /** Record */suggestion => {
return this.getHelper().escapeString(suggestion.name) + ' <' +
this.getHelper().escapeString(suggestion.id) + '>';
},
transformResult: /** Record */response => {
response = JSON.parse(response);
const list = [];
response.forEach(item => {
list.push({
id: item.emailAddress,
name: item.entityName,
emailAddress: item.emailAddress,
entityId: item.entityId,
entityName: item.entityName,
entityType: item.entityType,
data: item.emailAddress,
value: item.emailAddress,
});
});
return {suggestions: list};
},
onSelect: /** Record */item => {
triggerSelectOnValidInput: true,
focusOnSelect: true,
minChars: 1,
forceHide: true,
handleFocusMode: 2,
onSelect: item => {
this.$element.val(item.emailAddress);
this.$element.focus();
},
formatResult: item => {
return this.getHelper().escapeString(item.name) + ' <' +
this.getHelper().escapeString(item.id) + '>';
},
lookupFunction: (query, done) => {
Espo.Ajax
.getRequest('EmailAddress/search', {
q: query,
maxSize: this.getAutocompleteMaxCount(),
})
.then(/** Record[] */response => {
const result = response.map(item => {
return {
id: item.emailAddress,
name: item.entityName,
emailAddress: item.emailAddress,
entityId: item.entityId,
entityName: item.entityName,
entityType: item.entityType,
data: item.emailAddress,
value: item.emailAddress,
};
});
done(result);
});
},
});
this.once('render remove', () => autocomplete.dispose());
}
}