ref

client/modules/crm/res/templates/calendar/record/edit-view.tpl

@@ -1,14 +0,0 @@
-<div class="row">
-    <div class="cell form-group col-md-6" data-name="name">
-        <label class="control-label" data-name="name">{{{translate 'name' category='fields'}}}</label>
-        <div class="field" data-name="name">{{{nameField}}}</div>
-    </div>
-    <div class="cell form-group col-md-6" data-name="mode">
-        <label class="control-label" data-name="mode">{{{translate 'mode' category='fields' scope='DashletOptions'}}}</label>
-        <div class="field" data-name="mode">{{{modeField}}}</div>
-    </div>
-    <div class="cell form-group col-md-6" data-name="teams">
-        <label class="control-label" data-name="teams">{{{translate 'teams' category='fields'}}}</label>
-        <div class="field" data-name="teams">{{{teamsField}}}</div>
-    </div>
-</div>

client/modules/crm/src/views/calendar/fields/teams.js

@@ -26,16 +26,15 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('crm:views/calendar/fields/teams', ['views/fields/link-multiple'], function (Dep) {
+import LinkMultipleFieldView from 'views/fields/link-multiple';
 
-    return Dep.extend({
+export default class CalendarSharedViewTeamsFieldView extends LinkMultipleFieldView {
 
-        foreignScope: 'Team',
+    foreignScope = 'Team'
 
-        getSelectBoolFilterList: function () {
-            if (this.getAcl().getPermissionLevel('userCalendar') === 'team') {
-                return ['onlyMy'];
-            }
+    getSelectBoolFilterList() {
+        if (this.getAcl().getPermissionLevel('userCalendar') === 'team') {
+            return ['onlyMy'];
         }
-    });
-});
+    }
+}

client/modules/crm/src/views/calendar/modals/edit-view.js

@@ -28,22 +28,27 @@
 
 import ModalView from 'views/modal';
 import Model from 'model';
+import EditForModalRecordView from 'views/record/edit-for-modal';
+import EnumFieldView from 'views/fields/enum';
+import VarcharFieldView from 'views/fields/varchar';
+import CalendarSharedViewTeamsFieldView from 'crm:views/calendar/fields/teams';
 
 export default class CalendarEditViewModal extends ModalView {
 
     // language=Handlebars
     templateContent = `
-        <div class="panel panel-default no-side-margin">
-            <div class="panel-body">
-                <div class="record-container">{{{record}}}</div>
-            </div>
-        </div>
+        <div class="record-container no-side-margin">{{{record}}}</div>
     `
 
-    className ='dialog dialog-record'
+    className = 'dialog dialog-record'
+
+    /**
+     * @private
+     * @type {EditForModalRecordView}
+     */
+    recordView
 
     /**
-     *
      * @param {{
      *     afterSave?: function({id: string}): void,
      *     afterRemove?: function(): void,
@@ -132,11 +137,51 @@ export default class CalendarEditViewModal extends ModalView {
 
         model.set(modelData);
 
-        this.createView('record', 'crm:views/calendar/record/edit-view', {
-            selector: '.record-container',
-            model: model
+        this.recordView = new EditForModalRecordView({
+            model: model,
+            detailLayout: [
+                {
+                    rows: [
+                        [
+                            {
+                                view: new VarcharFieldView({
+                                    name: 'name',
+                                    labelText: this.translate('name', 'fields'),
+                                    params: {
+                                        required: true,
+                                    },
+                                })
+                            },
+                            {
+                                view: new EnumFieldView({
+                                    name: 'mode',
+                                    labelText: this.translate('mode', 'fields', 'DashletOptions'),
+                                    params: {
+                                        translation: 'DashletOptions.options.mode',
+                                        options: this.getMetadata().get('clientDefs.Calendar.sharedViewModeList') || [],
+                                    },
+                                })
+                            }
+                        ],
+                        [
+                            {
+                                view: new CalendarSharedViewTeamsFieldView({
+                                    name: 'teams',
+                                    labelText: this.translate('teams', 'fields'),
+                                    params: {
+                                        required: true
+                                    },
+                                })
+                            },
+                            false
+                        ]
+                    ]
+                }
+            ]
         });
 
+        this.assignView('record', this.recordView);
+
         if (this.isNew) {
             this.headerText = this.translate('Create Shared View', 'labels', 'Calendar');
         } else {
@@ -146,16 +191,11 @@ export default class CalendarEditViewModal extends ModalView {
     }
 
     async actionSave() {
-        const modelData = this.getView('record').fetch();
-
-        this.getView('record').model.set(modelData);
-
-        if (this.getView('record').validate()) {
+        if (this.recordView.validate()) {
             return;
         }
 
-        this.disableButton('save');
-        this.disableButton('remove');
+        const modelData = this.recordView.fetch();
 
         const calendarViewDataList = this.getPreferences().get('calendarViewDataList') || [];
 
@@ -168,7 +208,7 @@ export default class CalendarEditViewModal extends ModalView {
         };
 
         if (this.isNew) {
-            data.id = Math.random().toString(36).substr(2, 10);
+            data.id = Math.random().toString(36).substring(2, 12);
 
             calendarViewDataList.push(data);
         } else {
@@ -183,6 +223,9 @@ export default class CalendarEditViewModal extends ModalView {
 
         Espo.Ui.notify(this.translate('saving', 'messages'));
 
+        this.disableButton('save');
+        this.disableButton('remove');
+
         try {
             await this.getPreferences().save(
                 {

client/modules/crm/src/views/calendar/record/edit-view.js

@@ -1,59 +0,0 @@
-/************************************************************************
- * This file is part of EspoCRM.
- *
- * EspoCRM – Open Source CRM application.
- * Copyright (C) 2014-2025 Yurii Kuznietsov, Taras Machyshyn, Oleksii Avramenko
- * Website: https://www.espocrm.com
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <https://www.gnu.org/licenses/>.
- *
- * The interactive user interfaces in modified source and object code versions
- * of this program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU Affero General Public License version 3.
- *
- * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
- * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
- ************************************************************************/
-
-define('crm:views/calendar/record/edit-view', ['views/record/base'], function (Dep) {
-
-    return Dep.extend({
-
-        template: 'crm:calendar/record/edit-view',
-
-        setup: function () {
-            Dep.prototype.setup.call(this);
-
-            this.createField('mode', 'views/fields/enum', {
-                options: this.getMetadata().get(['clientDefs', 'Calendar', 'sharedViewModeList']) || [],
-                translation: 'DashletOptions.options.mode'
-            }, null, null, {
-                labelText: this.translate('mode', 'fields', 'DashletOptions')
-            });
-
-            this.createField('name', 'views/fields/varchar', {
-                required: true
-            }, null, null, {
-                labelText: this.translate('name', 'fields')
-            });
-
-            this.createField('teams', 'crm:views/calendar/fields/teams', {
-                required: true
-            }, null, null, {
-                labelText: this.translate('teams', 'fields'),
-                foreignScope: 'Team'
-            });
-        },
-    });
-});