Fix Scheduler localization in appointment popup, first step (T887054)

js/ui/scheduler/appointmentPopup.js

@@ -10,6 +10,7 @@ import { extend } from '../../core/utils/extend';
 import { each } from '../../core/utils/iterator';
 import { Deferred, when } from '../../core/utils/deferred';
 import { isDefined } from '../../core/utils/type';
+import messageLocalization from '../../localization/message';
 
 const toMs = dateUtils.dateToMilliseconds;
 
@@ -282,7 +283,7 @@ export default class AppointmentPopup {
         return [
             {
                 shortcut: 'done',
-                options: { text: 'Done' },
+                options: { text: messageLocalization.format('Done') },
                 location: TOOLBAR_ITEM_AFTER_LOCATION,
                 onClick: (e) => this._doneButtonClickHandler(e)
             },

js/ui/scheduler/ui.scheduler.recurrence_editor.js

@@ -383,18 +383,22 @@ const RecurrenceEditor = Editor.inherit({
         const firstDayOfWeek = this._getFirstDayOfWeek();
         const byDay = this._recurrenceRule.rules()['byday'] ?
             this._recurrenceRule.rules()['byday'].split(',') : days[firstDayOfWeek];
-        const that = this;
-        const itemsButtonGroup = days.slice(firstDayOfWeek).concat(days.slice(0, firstDayOfWeek)).map(item => { return { text: item }; });
+
+        const localDaysNames = dateLocalization.getDayNames('abbreviated');
+        const dayNames = days.slice(firstDayOfWeek).concat(days.slice(0, firstDayOfWeek));
+
+        const itemsButtonGroup = localDaysNames.slice(firstDayOfWeek).concat(localDaysNames.slice(0, firstDayOfWeek)).map((item, index) => { return { text: item, key: dayNames[index] }; });
 
         this._$repeatOnWeek = $('<div>').addClass(RECURRENCE_BUTTON_GROUP).appendTo(this._$repeatOnEditor);
 
         this._weekEditor = this._createComponent(this._$repeatOnWeek, ButtonGroup, {
             items: itemsButtonGroup,
             selectionMode: 'multiple',
             selectedItemKeys: byDay,
+            keyExpr: 'key',
             onSelectionChanged: (e) => {
                 const selectedKeys = e.component.option('selectedItemKeys');
-                that._recurrenceRule.makeRule('byday', selectedKeys);
+                this._recurrenceRule.makeRule('byday', selectedKeys);
                 this._changeEditorValue();
             }
         });

testing/tests/DevExpress.ui.widgets.scheduler/appointmentPopup.tests.js

@@ -9,6 +9,7 @@ import SchedulerTimezoneEditor from 'ui/scheduler/timezones/ui.scheduler.timezon
 import fx from 'animation/fx';
 import { DataSource } from 'data/data_source/data_source';
 import resizeCallbacks from 'core/utils/resize_callbacks';
+import messageLocalization from 'localization/message';
 
 import 'ui/scheduler/ui.scheduler';
 import 'ui/switch';
@@ -1058,6 +1059,23 @@ QUnit.test('Done button shouldn\'t be disabled if validation fail', function(ass
     assert.equal(doneButton.option('disabled'), false, 'done button is not disabled');
 });
 
+QUnit.test('Done button default configuration should be correct', function(assert) {
+    this.instance.option({
+        onAppointmentFormOpening: function(e) {
+            const popup = e.component.getAppointmentPopup();
+            const buttons = popup.option('toolbarItems');
+            const doneButton = buttons[0];
+
+            assert.equal(doneButton.options.text, messageLocalization.format('Done'), 'done button text is ok');
+        },
+        onAppointmentAdding: function(e) {
+            e.cancel = true;
+        }
+    });
+    this.instance.showAppointmentPopup({ startDate: new Date(2015, 1, 1, 1), endDate: new Date(2015, 1, 1, 2), text: 'caption' });
+    $('.dx-scheduler-appointment-popup .dx-popup-done').trigger('dxclick');
+});
+
 QUnit.test('Done button custom configuration should be correct', function(assert) {
     const data = new DataSource({
         store: this.tasks

testing/tests/DevExpress.ui.widgets.scheduler/recurrenceEditor.tests.js

@@ -715,23 +715,21 @@ QUnit.test('Repeat-until dateBox should have right firstDayOfWeek after firstDay
     assert.equal(untilDate.option('calendarOptions.firstDayOfWeek'), 1, 'First day of the week is ok');
 });
 
+const dayNames = [{ key: 'SU', text: 'Sun' }, { key: 'MO', text: 'Mon' }, { key: 'TU', text: 'Tue' }, { key: 'WE', text: 'Wed' }, { key: 'TH', text: 'Thu' }, { key: 'FR', text: 'Fri' }, { key: 'SA', text: 'Sat' }];
+
 QUnit.test('Repeat-on-week editor should be rendered correctly', function(assert) {
     this.createInstance({ firstDayOfWeek: 3, value: 'FREQ=WEEKLY;BYDAY=TU' });
 
     const buttonGroup = $('.' + 'dx-buttongroup').eq(0).dxButtonGroup('instance');
-    assert.deepEqual(buttonGroup.option('items'), [
-        { text: 'WE' }, { text: 'TH' }, { text: 'FR' }, { text: 'SA' }, { text: 'SU' }, { text: 'MO' }, { text: 'TU' }
-    ]);
+    assert.deepEqual(buttonGroup.option('items'), dayNames.slice(3).concat(dayNames.slice(0, 3)));
 });
 
 QUnit.test('Repeat-on-week editor should be rendered correctly after firstDayOfWeek option changing', function(assert) {
     this.createInstance({ firstDayOfWeek: 3, value: 'FREQ=WEEKLY;BYDAY=TU' });
     this.instance.option('firstDayOfWeek', 5);
 
     const buttonGroup = $('.' + 'dx-buttongroup').eq(0).dxButtonGroup('instance');
-    assert.deepEqual(buttonGroup.option('items'), [
-        { text: 'FR' }, { text: 'SA' }, { text: 'SU' }, { text: 'MO' }, { text: 'TU' }, { text: 'WE' }, { text: 'TH' }
-    ]);
+    assert.deepEqual(buttonGroup.option('items'), dayNames.slice(5).concat(dayNames.slice(0, 5)));
 });
 
 QUnit.test('Repeat-count editor should have correct value after re-initializing values', function(assert) {