ref

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

client/modules/crm/res/templates/calendar/modals/shared-options.tpl

@@ -1,7 +0,0 @@
-<div class="panel panel-default no-side-margin">
-<div class="panel-body">
-
-<div class="record-container">{{{record}}}</div>
-
-</div>
-</div>

client/modules/crm/res/templates/calendar/timeline.tpl

@@ -35,7 +35,7 @@
         <button
             class="btn btn-text{{#ifNotEqual calendarType 'shared'}} hidden{{/ifNotEqual}} btn-icon"
             data-action="showSharedCalendarOptions"
-            title="{{translate 'Manage Users' scope='Calendar'}}"
+            title="{{translate 'Shared Mode Options' scope='Calendar'}}"
         ><span class="fas fa-pencil-alt fa-sm"></span></button>
         </div>
         {{/if}}

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 = `
+        <div class="panel panel-default no-side-margin">
+            <div class="panel-body">
+                <div class="record-container">{{{record}}}</div>
+            </div>
+        </div>
+    `
 
-        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();
+    }
+}

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() {