').append($remove);
- fetch: function () {
- let data = Dep.prototype.fetch.call(this);
+ let $name = $('
')
+ .addClass('link-item-name')
+ .text(name)
+ .append(' ')
- if (!this.skipRoles) {
- data[this.columnsName] = Espo.Utils.cloneDeep(this.columns);
- }
+ let $role;
- return data;
- },
- });
-});
+ if (this.roleType === this.ROLE_TYPE_ENUM) {
+ $role = this.getJQSelect(id, role);
+ }
+ else {
+ let text = this.rolePlaceholderText || this.translate(this.roleField, 'fields', this.roleFieldScope);
+
+ $role = $('')
+ .addClass('role form-control input-sm')
+ .attr('maxlength', this.roleMaxLength) // @todo Get the value from metadata.
+ .attr('placeholder', text)
+ .attr('data-id', id)
+ .attr('value', role || '');
+ }
+
+ if ($role) {
+ $left.append($('')
+ .addClass('link-item-column')
+ .addClass('link-item-column-' + $role.get(0).tagName.toLowerCase())
+ .append($role)
+ );
+ }
+
+ $left.append($name);
+ $el.append($left).append($right);
+ $container.append($el);
+
+ if ($role && $role.get(0).tagName === 'SELECT') {
+ Select.init($role);
+ }
+
+ if (this.isEditMode() && $role) {
+ let fetch = ($target) => {
+ if (!$target || !$target.length) {
+ return;
+ }
+
+ if ($target.val() === null) {
+ return;
+ }
+
+ let value = $target.val().toString().trim();
+ let id = $target.data('id');
+
+ if (value === '') {
+ value = null;
+ }
+
+ this.columns[id] = this.columns[id] || {};
+ this.columns[id][this.columnName] = value;
+ };
+
+ $role.on('change', e => {
+ fetch($(e.currentTarget));
+ this.trigger('change');
+ });
+
+ fetch($role);
+ }
+
+ return $el;
+ }
+
+ fetch() {
+ let data = super.data();
+
+ if (!this.skipRoles) {
+ data[this.columnsName] = Espo.Utils.cloneDeep(this.columns);
+ }
+
+ return data;
+ }
+}
+
+// noinspection JSDeprecatedSymbols
+export default LinkMultipleWithRoleFieldView;
diff --git a/client/src/views/fields/link-multiple-with-status.js b/client/src/views/fields/link-multiple-with-status.js
index 4ee06bec14..57e42848f8 100644
--- a/client/src/views/fields/link-multiple-with-status.js
+++ b/client/src/views/fields/link-multiple-with-status.js
@@ -26,61 +26,63 @@
* these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
************************************************************************/
-define('views/fields/link-multiple-with-status', ['views/fields/link-multiple'], function (Dep) {
+import LinkMultipleFieldView from 'views/fields/link-multiple';
- return Dep.extend({
+class LinkMultipleWithStatusFieldView extends LinkMultipleFieldView {
- setup: function () {
- Dep.prototype.setup.call(this);
+ setup() {
+ super.setup();
- this.columnsName = this.name + 'Columns';
+ this.columnsName = this.name + 'Columns';
+ this.columns = Espo.Utils.cloneDeep(this.model.get(this.columnsName) || {});
+
+ this.listenTo(this.model, 'change:' + this.columnsName, () => {
this.columns = Espo.Utils.cloneDeep(this.model.get(this.columnsName) || {});
+ });
- this.listenTo(this.model, 'change:' + this.columnsName, () => {
- this.columns = Espo.Utils.cloneDeep(this.model.get(this.columnsName) || {});
- });
+ this.statusField = this.getMetadata()
+ .get(['entityDefs', this.model.entityType, 'fields', this.name, 'columns', 'status']);
- this.statusField = this.getMetadata()
- .get(['entityDefs', this.model.entityType, 'fields', this.name, 'columns', 'status']);
+ this.styleMap = this.getMetadata()
+ .get(['entityDefs', this.foreignScope, 'fields', this.statusField, 'style']) || {};
+ }
- this.styleMap = this.getMetadata()
- .get(['entityDefs', this.foreignScope, 'fields', this.statusField, 'style']) || {};
- },
+ getAttributeList() {
+ const list = super.getAttributeList();
- getAttributeList: function () {
- let list = Dep.prototype.getAttributeList.call(this);
+ list.push(this.name + 'Columns');
- list.push(this.name + 'Columns');
+ return list;
+ }
- return list;
- },
+ getDetailLinkHtml(id, name) {
+ let status = (this.columns[id] || {}).status;
- getDetailLinkHtml: function (id, name) {
- let status = (this.columns[id] || {}).status;
+ if (!status) {
+ return super.getDetailLinkHtml(id, name);
+ }
- if (!status) {
- return Dep.prototype.getDetailLinkHtml.call(this, id, name);
- }
+ let style = this.styleMap[status];
- let style = this.styleMap[status];
+ let targetStyleList = ['success', 'danger'];
- let targetStyleList = ['success', 'danger'];
+ if (!style || !~targetStyleList.indexOf(style)) {
+ return super.getDetailLinkHtml(id, name);
+ }
- if (!style || !~targetStyleList.indexOf(style)) {
- return Dep.prototype.getDetailLinkHtml.call(this, id, name);
- }
+ let iconStyle = '';
- let iconStyle = '';
+ if (style === 'success') {
+ iconStyle = 'fas fa-check text-success small';
+ }
+ else if (style === 'danger') {
+ iconStyle = 'fas fa-times text-danger small';
+ }
- if (style === 'success') {
- iconStyle = 'fas fa-check text-success small';
- }
- else if (style === 'danger') {
- iconStyle = 'fas fa-times text-danger small';
- }
+ return ' ' +
+ super.getDetailLinkHtml(id, name);
+ }
+}
- return ' ' +
- Dep.prototype.getDetailLinkHtml.call(this, id, name);
- },
- });
-});
+// noinspection JSUnusedGlobalSymbols
+export default LinkMultipleWithStatusFieldView;
diff --git a/client/src/views/fields/map.js b/client/src/views/fields/map.js
index 6205be1edd..c40c26a46b 100644
--- a/client/src/views/fields/map.js
+++ b/client/src/views/fields/map.js
@@ -19,232 +19,237 @@
* along with EspoCRM. If not, see http://www.gnu.org/licenses/.
************************************************************************/
-define('views/fields/map', ['views/fields/base'], function (Dep) {
+import BaseFieldView from 'views/fields/base';
- return Dep.extend({
+class MapFieldView extends BaseFieldView {
- type: 'map',
+ type = 'map'
- detailTemplate: 'fields/map/detail',
+ detailTemplate = 'fields/map/detail'
+ listTemplate = 'fields/map/detail'
- listTemplate: 'fields/map/detail',
+ addressField = null
+ provider = null
+ height = 300
- addressField: null,
+ // noinspection JSCheckFunctionSignatures
+ data() {
+ const data = super.data();
- provider: null,
+ data.hasAddress = this.hasAddress();
- height: 300,
+ // noinspection JSValidateTypes
+ return data;
+ }
- data: function () {
- var data = Dep.prototype.data.call(this);
+ setup() {
+ this.addressField = this.name.slice(0, this.name.length - 3);
- data.hasAddress = this.hasAddress();
+ this.provider = this.options.provider || this.params.provider;
+ this.height = this.options.height || this.params.height || this.height;
- return data;
- },
+ const addressAttributeList = Object.keys(this.getMetadata().get('fields.address.fields') || {})
+ .map(a => this.addressField + Espo.Utils.upperCaseFirst(a));
- setup: function () {
- this.addressField = this.name.substr(0, this.name.length - 3);
+ this.listenTo(this.model, 'sync', model => {
+ let isChanged = false;
- this.provider = this.options.provider || this.params.provider;
- this.height = this.options.height || this.params.height || this.height;
-
- var addressAttributeList = Object.keys(this.getMetadata().get('fields.address.fields') || {})
- .map(a => {
- return this.addressField + Espo.Utils.upperCaseFirst(a);
- });
-
- this.listenTo(this.model, 'sync', model => {
- let isChanged = false;
-
- addressAttributeList.forEach(attribute => {
- if (model.hasChanged(attribute)) {
- isChanged = true;
- }
- });
-
- if (isChanged && this.isRendered()) {
- this.reRender();
+ addressAttributeList.forEach(attribute => {
+ if (model.hasChanged(attribute)) {
+ isChanged = true;
}
});
- this.listenTo(this.model, 'after:save', () => {
- if (this.isRendered()) {
- this.reRender();
- }
- });
- },
-
- hasAddress: function () {
- return !!this.model.get(this.addressField + 'City') ||
- !!this.model.get(this.addressField + 'PostalCode');
- },
-
- onRemove: function () {
- $(window).off('resize.' + this.cid);
- },
-
- afterRender: function () {
- this.addressData = {
- city: this.model.get(this.addressField + 'City'),
- street: this.model.get(this.addressField + 'Street'),
- postalCode: this.model.get(this.addressField + 'PostalCode'),
- country: this.model.get(this.addressField + 'Country'),
- state: this.model.get(this.addressField + 'State'),
- };
-
- this.$map = this.$el.find('.map');
-
- if (this.hasAddress()) {
- this.processSetHeight(true);
-
- if (this.height === 'auto') {
- $(window).off('resize.' + this.cid);
- $(window).on('resize.' + this.cid, this.processSetHeight.bind(this));
- }
-
- let methodName = 'afterRender' + this.provider.replace(/\s+/g, '');
-
- if (typeof this[methodName] === 'function') {
- this[methodName]();
- }
- else {
- let implClassName = this.getMetadata()
- .get(['clientDefs', 'AddressMap', 'implementations', this.provider]);
-
- if (implClassName) {
- Espo.loader.require(implClassName, impl => {
- impl.render(this);
- });
- }
- }
+ if (isChanged && this.isRendered()) {
+ this.reRender();
}
- },
+ });
- afterRenderGoogle: function () {
- if (window.google && window.google.maps) {
- this.initMapGoogle();
-
- return;
+ this.listenTo(this.model, 'after:save', () => {
+ if (this.isRendered()) {
+ this.reRender();
}
+ });
+ }
- if (typeof window.mapapiloaded === 'function') {
- let mapapiloaded = window.mapapiloaded;
+ hasAddress() {
+ return !!this.model.get(this.addressField + 'City') ||
+ !!this.model.get(this.addressField + 'PostalCode');
+ }
- window.mapapiloaded = () => {
- this.initMapGoogle();
- mapapiloaded();
- };
+ onRemove() {
+ $(window).off('resize.' + this.cid);
+ }
- return;
- }
+ afterRender() {
+ this.addressData = {
+ city: this.model.get(this.addressField + 'City'),
+ street: this.model.get(this.addressField + 'Street'),
+ postalCode: this.model.get(this.addressField + 'PostalCode'),
+ country: this.model.get(this.addressField + 'Country'),
+ state: this.model.get(this.addressField + 'State'),
+ };
- window.mapapiloaded = () => {
- this.initMapGoogle();
- };
+ this.$map = this.$el.find('.map');
- let src = 'https://maps.googleapis.com/maps/api/js?callback=mapapiloaded';
- let apiKey = this.getConfig().get('googleMapsApiKey');
-
- if (apiKey) {
- src += '&key=' + apiKey;
- }
-
- let scriptElement = document.createElement('script');
-
- scriptElement.setAttribute('async', 'async');
- scriptElement.src = src;
-
- document.head.appendChild(scriptElement);
- },
-
- processSetHeight: function (init) {
- var height = this.height;
+ if (this.hasAddress()) {
+ this.processSetHeight(true);
if (this.height === 'auto') {
- height = this.$el.parent().height();
+ $(window).off('resize.' + this.cid);
+ $(window).on('resize.' + this.cid, this.processSetHeight.bind(this));
+ }
- if (init && height <= 0) {
- setTimeout(() => {
- this.processSetHeight(true);
- }, 50);
+ let methodName = 'afterRender' + this.provider.replace(/\s+/g, '');
- return;
+ if (typeof this[methodName] === 'function') {
+ this[methodName]();
+ }
+ else {
+ let implClassName = this.getMetadata()
+ .get(['clientDefs', 'AddressMap', 'implementations', this.provider]);
+
+ if (implClassName) {
+ Espo.loader.require(implClassName, impl => {
+ impl.render(this);
+ });
}
}
+ }
+ }
- this.$map.css('height', height + 'px');
- },
+ // noinspection JSUnusedGlobalSymbols
+ afterRenderGoogle() {
+ if (window.google && window.google.maps) {
+ this.initMapGoogle();
- initMapGoogle: function () {
- var geocoder = new google.maps.Geocoder();
+ return;
+ }
- try {
- var map = new google.maps.Map(this.$el.find('.map').get(0), {
- zoom: 15,
- center: {lat: 0, lng: 0},
- scrollwheel: false,
- });
- }
- catch (e) {
- console.error(e.message);
+ // noinspection SpellCheckingInspection
+ if (typeof window.mapapiloaded === 'function') {
+ // noinspection SpellCheckingInspection
+ let mapapiloaded = window.mapapiloaded;
+
+ // noinspection SpellCheckingInspection
+ window.mapapiloaded = () => {
+ this.initMapGoogle();
+ mapapiloaded();
+ };
+
+ return;
+ }
+
+ // noinspection SpellCheckingInspection
+ window.mapapiloaded = () => {
+ this.initMapGoogle();
+ };
+
+ let src = 'https://maps.googleapis.com/maps/api/js?callback=mapapiloaded';
+ let apiKey = this.getConfig().get('googleMapsApiKey');
+
+ if (apiKey) {
+ src += '&key=' + apiKey;
+ }
+
+ let scriptElement = document.createElement('script');
+
+ scriptElement.setAttribute('async', 'async');
+ scriptElement.src = src;
+
+ document.head.appendChild(scriptElement);
+ }
+
+ processSetHeight(init) {
+ let height = this.height;
+
+ if (this.height === 'auto') {
+ height = this.$el.parent().height();
+
+ if (init && height <= 0) {
+ setTimeout(() => {
+ this.processSetHeight(true);
+ }, 50);
return;
}
+ }
- let address = '';
+ this.$map.css('height', height + 'px');
+ }
- if (this.addressData.street) {
- address += this.addressData.street;
- }
+ initMapGoogle() {
+ const geocoder = new google.maps.Geocoder();
+ let map;
- if (this.addressData.city) {
- if (address !== '') {
- address += ', ';
- }
-
- address += this.addressData.city;
- }
-
- if (this.addressData.state) {
- if (address !== '') {
- address += ', ';
- }
-
- address += this.addressData.state;
- }
-
- if (this.addressData.postalCode) {
- if (this.addressData.state || this.addressData.city) {
- address += ' ';
- }
- else {
- if (address) {
- address += ', ';
- }
- }
-
- address += this.addressData.postalCode;
- }
-
- if (this.addressData.country) {
- if (address !== '') {
- address += ', ';
- }
-
- address += this.addressData.country;
- }
-
- geocoder.geocode({'address': address}, (results, status) => {
- if (status === google.maps.GeocoderStatus.OK) {
- map.setCenter(results[0].geometry.location);
-
- new google.maps.Marker({
- map: map,
- position: results[0].geometry.location,
- });
- }
+ try {
+ // noinspection SpellCheckingInspection
+ map = new google.maps.Map(this.$el.find('.map').get(0), {
+ zoom: 15,
+ center: {lat: 0, lng: 0},
+ scrollwheel: false,
});
- },
- });
-});
+ }
+ catch (e) {
+ console.error(e.message);
+
+ return;
+ }
+
+ let address = '';
+
+ if (this.addressData.street) {
+ address += this.addressData.street;
+ }
+
+ if (this.addressData.city) {
+ if (address !== '') {
+ address += ', ';
+ }
+
+ address += this.addressData.city;
+ }
+
+ if (this.addressData.state) {
+ if (address !== '') {
+ address += ', ';
+ }
+
+ address += this.addressData.state;
+ }
+
+ if (this.addressData.postalCode) {
+ if (this.addressData.state || this.addressData.city) {
+ address += ' ';
+ }
+ else {
+ if (address) {
+ address += ', ';
+ }
+ }
+
+ address += this.addressData.postalCode;
+ }
+
+ if (this.addressData.country) {
+ if (address !== '') {
+ address += ', ';
+ }
+
+ address += this.addressData.country;
+ }
+
+ geocoder.geocode({'address': address}, (results, status) => {
+ if (status === google.maps.GeocoderStatus.OK) {
+ map.setCenter(results[0].geometry.location);
+
+ new google.maps.Marker({
+ map: map,
+ position: results[0].geometry.location,
+ });
+ }
+ });
+ }
+}
+
+export default MapFieldView;