diff --git a/application/Espo/Modules/Crm/Resources/i18n/en_US/Calendar.json b/application/Espo/Modules/Crm/Resources/i18n/en_US/Calendar.json
index b8f35423f7..ecd3f72c5f 100644
--- a/application/Espo/Modules/Crm/Resources/i18n/en_US/Calendar.json
+++ b/application/Espo/Modules/Crm/Resources/i18n/en_US/Calendar.json
@@ -15,8 +15,8 @@
"current": "current",
"time": "time",
"User List": "User List",
- "Manage Users": "Manage Users",
"View Calendar": "View Calendar",
- "Create Shared View": "Create Shared View"
+ "Create Shared View": "Create Shared View",
+ "Shared Mode Options": "Shared Mode Options"
}
}
diff --git a/client/modules/crm/res/templates/calendar/modals/shared-options.tpl b/client/modules/crm/res/templates/calendar/modals/shared-options.tpl
deleted file mode 100644
index 878e78a57e..0000000000
--- a/client/modules/crm/res/templates/calendar/modals/shared-options.tpl
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/client/modules/crm/res/templates/calendar/timeline.tpl b/client/modules/crm/res/templates/calendar/timeline.tpl
index e441cc619b..475367169f 100644
--- a/client/modules/crm/res/templates/calendar/timeline.tpl
+++ b/client/modules/crm/res/templates/calendar/timeline.tpl
@@ -35,7 +35,7 @@
{{/if}}
diff --git a/client/modules/crm/src/views/calendar/modals/shared-options.js b/client/modules/crm/src/views/calendar/modals/shared-options.js
index 4539ed598e..63701e632b 100644
--- a/client/modules/crm/src/views/calendar/modals/shared-options.js
+++ b/client/modules/crm/src/views/calendar/modals/shared-options.js
@@ -26,69 +26,109 @@
* these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
************************************************************************/
-define('crm:views/calendar/modals/shared-options', ['views/modal', 'model'], function (Dep, Model) {
+import ModalView from 'views/modal';
+import Model from 'model';
- return Dep.extend({
+export default class TimelineSharedOptionsModalView extends ModalView {
- className: 'dialog dialog-record',
+ className = 'dialog dialog-record'
- template: 'crm:calendar/modals/shared-options',
+ templateContent = `
+
+ `
- buttonList: [
+ /**
+ *
+ * @param {{
+ * users: {id: string, name: string}[],
+ * onApply: function({
+ * users: {id: string, name: string}[],
+ * }),
+ * }} options
+ */
+ constructor(options) {
+ super(options);
+
+ this.options = options;
+ }
+
+ setup() {
+ this.buttonList = [
{
name: 'save',
label: 'Save',
style: 'primary',
+ onClick: () => this.actionSave(),
},
{
name: 'cancel',
label: 'Cancel',
+ onClick: () => this.actionClose(),
},
- ],
+ ];
- setup: function () {
- var userList = this.options.userList || [];
+ this.headerText = this.translate('timeline', 'modes', 'Calendar') + ' ยท ' +
+ this.translate('Shared Mode Options', 'labels', 'Calendar')
- var userIdList = [];
- var userNames = {};
+ const users = this.options.users;
- userList.forEach(item => {
- userIdList.push(item.id);
- userNames[item.id] = item.name;
+ const userIdList = [];
+ const userNames = {};
+
+ users.forEach(item => {
+ userIdList.push(item.id);
+
+ userNames[item.id] = item.name;
+ });
+
+ this.model = new Model({
+ usersIds: userIdList,
+ usersNames: userNames,
+ });
+
+ this.createView('record', 'crm:views/calendar/record/shared-options', {
+ model: this.model,
+ selector: '.record-container',
+ });
+
+ }
+
+ /**
+ * @private
+ * @return {import('views/record/edit').default}
+ */
+ getRecordView() {
+ return this.getView('record');
+ }
+
+ /**
+ * @private
+ */
+ actionSave() {
+ const data = this.getRecordView().processFetch();
+
+ if (this.getRecordView().validate()) {
+ return;
+ }
+
+ /** @type {{id: string, name: string}[]} */
+ const users = [];
+
+ const userIds = this.model.attributes.usersIds || [];
+
+ userIds.forEach(id => {
+ users.push({
+ id: id,
+ name: (data.usersNames || {})[id] || id
});
+ });
- var model = new Model();
+ this.options.onApply({users: users})
- model.name = 'SharedCalendarOptions';
-
- model.set({
- usersIds: userIdList,
- usersNames: userNames
- });
-
- this.createView('record', 'crm:views/calendar/record/shared-options', {
- selector: '.record-container',
- model: model,
- });
- },
-
- actionSave: function () {
- var data = this.getView('record').fetch();
-
- var userList = [];
-
- (data.usersIds || []).forEach(id => {
- userList.push({
- id: id,
- name: (data.usersNames || {})[id] || id
- });
- });
-
- this.trigger('save', {
- userList: userList
- });
-
- this.remove();
- },
- });
-});
+ this.close();
+ }
+}
diff --git a/client/modules/crm/src/views/calendar/timeline.js b/client/modules/crm/src/views/calendar/timeline.js
index 2016f15874..96c0dc3932 100644
--- a/client/modules/crm/src/views/calendar/timeline.js
+++ b/client/modules/crm/src/views/calendar/timeline.js
@@ -34,6 +34,7 @@ import {Timeline} from 'vis-timeline';
import moment from 'moment';
import $ from 'jquery';
import RecordModal from 'helpers/record-modal';
+import TimelineSharedOptionsModalView from 'crm:views/calendar/modals/shared-options';
class TimelineView extends View {
@@ -117,10 +118,6 @@ class TimelineView extends View {
this.selectCalendarType(calendarType);
},
/** @this TimelineView */
- 'click button[data-action="addUser"]': function () {
- this.actionAddUser();
- },
- /** @this TimelineView */
'click button[data-action="showSharedCalendarOptions"]': function () {
this.actionShowSharedCalendarOptions();
},
@@ -811,29 +808,6 @@ class TimelineView extends View {
}, {patch: true});
}
- addSharedCalenderUser(id, name, skipStore) {
- let isMet = false;
-
- this.userList.forEach(item => {
- if (item.id === id) {
- isMet = true;
- }
- });
-
- if (isMet) {
- return;
- }
-
- this.userList.push({
- id: id,
- name: name,
- });
-
- if (!skipStore) {
- this.storeUserList();
- }
- }
-
getSharedCalenderUserList() {
const list = Espo.Utils.clone(this.getPreferences().get('sharedCalendarUserList'));
@@ -977,47 +951,11 @@ class TimelineView extends View {
});
}
- actionShowSharedCalendarOptions() {
- this.createView('dialog', 'crm:views/calendar/modals/shared-options', {
- userList: this.userList,
- }, view => {
- view.render();
-
- this.listenToOnce(view, 'save', data => {
- this.userList = data.userList;
- this.storeUserList();
- this.initGroupsDataSet();
- this.timeline.setGroups(this.groupsDataSet);
- this.runFetch();
- });
- });
- }
-
- actionAddUser() {
- const boolFilterList = [];
-
- if (this.getAcl().getPermissionLevel('userCalendar') === 'team') {
- boolFilterList.push('onlyMyTeam');
- }
-
- const viewName = this.getMetadata().get('clientDefs.' + this.foreignScope + '.modalViews.select') ||
- 'views/modals/select-records';
-
- Espo.Ui.notifyWait();
-
- this.createView('dialog', viewName, {
- scope: 'User',
- createButton: false,
- boolFilterList: boolFilterList,
- multiple: true,
- }, view => {
- view.render();
- Espo.Ui.notify(false);
-
- this.listenToOnce(view, 'select', modelList => {
- modelList.forEach(model => {
- this.addSharedCalenderUser(model.id, model.get('name'));
- });
+ async actionShowSharedCalendarOptions() {
+ const view = new TimelineSharedOptionsModalView({
+ users: this.userList,
+ onApply: data => {
+ this.userList = data.users;
this.storeUserList();
this.initGroupsDataSet();
@@ -1025,8 +963,12 @@ class TimelineView extends View {
this.timeline.setGroups(this.groupsDataSet);
this.runFetch();
- });
+ },
});
+
+ await this.assignView('modal', view);
+
+ await view.render();
}
actionRefresh() {