412 lines
18 KiB
JavaScript
412 lines
18 KiB
JavaScript
/*
|
|
* (c) Copyright Ascensio System SIA 2010-2024
|
|
*
|
|
* This program is a free software product. You can redistribute it and/or
|
|
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
|
* version 3 as published by the Free Software Foundation. In accordance with
|
|
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
|
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
|
* of any third-party rights.
|
|
*
|
|
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
|
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
|
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
*
|
|
* You can contact Ascensio System SIA at 20A-6 Ernesta Birznieka-Upish
|
|
* street, Riga, Latvia, EU, LV-1050.
|
|
*
|
|
* The interactive user interfaces in modified source and object code versions
|
|
* of the Program must display Appropriate Legal Notices, as required under
|
|
* Section 5 of the GNU AGPL version 3.
|
|
*
|
|
* Pursuant to Section 7(b) of the License you must retain the original Product
|
|
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
|
* grant you any rights under trademark law for use of our trademarks.
|
|
*
|
|
* All the Product's GUI elements, including illustrations and icon sets, as
|
|
* well as technical writing content are licensed under the terms of the
|
|
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
|
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
*
|
|
*/
|
|
|
|
/**
|
|
* FillSeriesDialog.js
|
|
*
|
|
* Created on 07.11.2023
|
|
*
|
|
*/
|
|
|
|
define([
|
|
'common/main/lib/view/AdvancedSettingsWindow',
|
|
], function () { 'use strict';
|
|
|
|
SSE.Views.FillSeriesDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
|
|
options: {
|
|
contentWidth: 350,
|
|
separator: false
|
|
},
|
|
|
|
initialize : function(options) {
|
|
var me = this;
|
|
|
|
_.extend(this.options, {
|
|
title: this.textTitle,
|
|
contentStyle: 'padding: 5px;',
|
|
contentTemplate: _.template([
|
|
'<div class="settings-panel active">',
|
|
'<div class="inner-content">',
|
|
'<table cols="3" style="width: 100%;">',
|
|
'<tr>',
|
|
'<td class="padding-small">',
|
|
'<label class="header">', me.textSeries,'</label>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<label class="header">', me.textType,'</label>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<label class="header">', me.textDateUnit,'</label>',
|
|
'</td>',
|
|
'</tr>',
|
|
'<tr>',
|
|
'<td class="padding-small">',
|
|
'<div id="fill-radio-rows"></div>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<div id="fill-radio-linear"></div>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<div id="fill-radio-day"></div>',
|
|
'</td>',
|
|
'</tr>',
|
|
'<tr>',
|
|
'<td class="padding-small">',
|
|
'<div id="fill-radio-cols"></div>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<div id="fill-radio-growth"></div>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<div id="fill-radio-weekday"></div>',
|
|
'</td>',
|
|
'</tr>',
|
|
'<tr>',
|
|
'<td class="padding-small">',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<div id="fill-radio-date"></div>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<div id="fill-radio-month"></div>',
|
|
'</td>',
|
|
'</tr>',
|
|
'<tr>',
|
|
'<td class="padding-large">',
|
|
'</td>',
|
|
'<td class="padding-large">',
|
|
'<div id="fill-radio-autofill"></div>',
|
|
'</td>',
|
|
'<td class="padding-large">',
|
|
'<div id="fill-radio-year"></div>',
|
|
'</td>',
|
|
'</tr>',
|
|
'<tr>',
|
|
'<td colspan=3 class="padding-small">',
|
|
'<div id="fill-chb-trend"></div>',
|
|
'</td>',
|
|
'</tr>',
|
|
'<tr>',
|
|
'<td class="padding-small">',
|
|
'<label className="input-label">', me.textStep, '</label>',
|
|
'<div id="fill-input-step-value"></div>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'<label className="input-label">', me.textStop, '</label>',
|
|
'<div id="fill-input-stop-value"></div>',
|
|
'</td>',
|
|
'<td class="padding-small">',
|
|
'</td>',
|
|
'</tr>',
|
|
'</table>',
|
|
'</div></div>'
|
|
].join(''))()
|
|
}, options);
|
|
|
|
this.handler = options.handler;
|
|
this.props = options.props;
|
|
|
|
Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
|
|
},
|
|
|
|
render: function() {
|
|
Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
|
|
var me = this,
|
|
$window = this.getChild();
|
|
|
|
this.radioCols = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-cols'),
|
|
name: 'asc-radio-series',
|
|
labelText: this.textCols,
|
|
value: Asc.c_oAscSeriesInType.columns
|
|
});
|
|
this.radioCols.on('change', _.bind(this.onRadioSeriesChange, this));
|
|
|
|
this.radioRows = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-rows'),
|
|
name: 'asc-radio-series',
|
|
labelText: this.textRows,
|
|
value: Asc.c_oAscSeriesInType.rows
|
|
});
|
|
this.radioRows.on('change', _.bind(this.onRadioSeriesChange, this));
|
|
|
|
this.radioLinear = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-linear'),
|
|
name: 'asc-radio-type',
|
|
labelText: this.textLinear,
|
|
value: Asc.c_oAscSeriesType.linear
|
|
});
|
|
this.radioLinear.on('change', _.bind(this.onRadioTypeChange, this));
|
|
|
|
this.radioGrowth = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-growth'),
|
|
name: 'asc-radio-type',
|
|
labelText: this.textGrowth,
|
|
value: Asc.c_oAscSeriesType.growth
|
|
});
|
|
this.radioGrowth.on('change', _.bind(this.onRadioTypeChange, this));
|
|
|
|
this.radioDate = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-date'),
|
|
name: 'asc-radio-type',
|
|
labelText: this.textDate,
|
|
value: Asc.c_oAscSeriesType.date
|
|
});
|
|
this.radioDate.on('change', _.bind(this.onRadioTypeChange, this));
|
|
|
|
this.radioAuto = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-autofill'),
|
|
name: 'asc-radio-type',
|
|
labelText: this.textAuto,
|
|
value: Asc.c_oAscSeriesType.autoFill
|
|
});
|
|
this.radioAuto.on('change', _.bind(this.onRadioTypeChange, this));
|
|
|
|
this.radioDay = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-day'),
|
|
name: 'asc-radio-date',
|
|
labelText: this.textDay,
|
|
value: Asc.c_oAscDateUnitType.day
|
|
});
|
|
this.radioDay.on('change', _.bind(this.onRadioDateChange, this));
|
|
|
|
this.radioWeek = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-weekday'),
|
|
name: 'asc-radio-date',
|
|
labelText: this.textWeek,
|
|
value: Asc.c_oAscDateUnitType.weekday
|
|
});
|
|
this.radioWeek.on('change', _.bind(this.onRadioDateChange, this));
|
|
|
|
this.radioMonth = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-month'),
|
|
name: 'asc-radio-date',
|
|
labelText: this.textMonth,
|
|
value: Asc.c_oAscDateUnitType.month
|
|
});
|
|
this.radioMonth.on('change', _.bind(this.onRadioDateChange, this));
|
|
|
|
this.radioYear = new Common.UI.RadioBox({
|
|
el: $window.find('#fill-radio-year'),
|
|
name: 'asc-radio-date',
|
|
labelText: this.textYear,
|
|
value: Asc.c_oAscDateUnitType.year
|
|
});
|
|
this.radioYear.on('change', _.bind(this.onRadioDateChange, this));
|
|
|
|
this.chTrend = new Common.UI.CheckBox({
|
|
el: $window.find('#fill-chb-trend'),
|
|
labelText: this.textTrend
|
|
});
|
|
this.chTrend.on('change', _.bind(this.onChangeTrend, this));
|
|
|
|
this.inputStep = new Common.UI.InputField({
|
|
el : $window.find('#fill-input-step-value'),
|
|
style : 'width: 85px;',
|
|
allowBlank : true,
|
|
validateOnBlur : false
|
|
}).on('changed:after', function() {
|
|
me.isStepChanged = true;
|
|
});
|
|
this.inputStep._input.on('input', function (e) {
|
|
me.isInputStepFirstChange && me.inputStep.showError();
|
|
me.isInputStepFirstChange = false;
|
|
});
|
|
|
|
this.inputStop = new Common.UI.InputField({
|
|
el : $window.find('#fill-input-stop-value'),
|
|
style : 'width: 85px;',
|
|
allowBlank : true,
|
|
validateOnBlur : false
|
|
}).on('changed:after', function() {
|
|
me.isStopChanged = true;
|
|
});
|
|
this.inputStop._input.on('input', function (e) {
|
|
me.isInputStopFirstChange && me.inputStop.showError();
|
|
me.isInputStopFirstChange = false;
|
|
});
|
|
|
|
this.afterRender();
|
|
},
|
|
|
|
getFocusedComponents: function() {
|
|
return [this.radioRows, this.radioCols, this.radioLinear, this.radioGrowth, this.radioDate, this.radioAuto,
|
|
this.radioDay, this.radioWeek, this.radioMonth, this.radioYear, this.chTrend, this.inputStep, this.inputStop].concat(this.getFooterButtons());
|
|
},
|
|
|
|
getDefaultFocusableComponent: function () {
|
|
return this.radioRows;
|
|
},
|
|
|
|
afterRender: function() {
|
|
this._setDefaults(this.props);
|
|
},
|
|
|
|
show: function() {
|
|
Common.Views.AdvancedSettingsWindow.prototype.show.apply(this, arguments);
|
|
},
|
|
|
|
_setDefaults: function (props) {
|
|
if (props) {
|
|
var value = props.asc_getSeriesIn();
|
|
this.radioCols.setValue(value===Asc.c_oAscSeriesInType.columns, true);
|
|
this.radioRows.setValue(value===Asc.c_oAscSeriesInType.rows, true);
|
|
value = props.asc_getType();
|
|
this.radioLinear.setValue(value===Asc.c_oAscSeriesType.linear);
|
|
this.radioGrowth.setValue(value===Asc.c_oAscSeriesType.growth);
|
|
this.radioDate.setValue(value===Asc.c_oAscSeriesType.date);
|
|
this.radioAuto.setValue(value===Asc.c_oAscSeriesType.autoFill);
|
|
value = props.asc_getDateUnit();
|
|
this.radioDay.setValue(value===Asc.c_oAscDateUnitType.day, true);
|
|
this.radioWeek.setValue(value===Asc.c_oAscDateUnitType.weekday, true);
|
|
this.radioMonth.setValue(value===Asc.c_oAscDateUnitType.month, true);
|
|
this.radioYear.setValue(value===Asc.c_oAscDateUnitType.year, true);
|
|
this.chTrend.setValue(!!props.asc_getTrend());
|
|
value = props.asc_getStepValue();
|
|
this.inputStep.setValue(value!==null && value!==undefined ? value : '');
|
|
value = props.asc_getStopValue();
|
|
this.inputStop.setValue(value!==null && value!==undefined ? value : '');
|
|
}
|
|
this._changedProps = props || new Asc.asc_CSeriesSettings();
|
|
},
|
|
|
|
getSettings: function () {
|
|
return this._changedProps;
|
|
},
|
|
|
|
onDlgBtnClick: function(event) {
|
|
this._handleInput((typeof(event) == 'object') ? event.currentTarget.attributes['result'].value : event);
|
|
},
|
|
|
|
onPrimary: function() {
|
|
this._handleInput('ok');
|
|
return false;
|
|
},
|
|
|
|
_handleInput: function(state) {
|
|
if (this.handler) {
|
|
if (state === 'ok' && !this.isValid()) {
|
|
return;
|
|
}
|
|
this.handler.call(this, state, (state === 'ok') ? this.getSettings() : undefined);
|
|
}
|
|
this.close();
|
|
},
|
|
|
|
isValid: function() {
|
|
if (this.isStepChanged) {
|
|
var res = this._changedProps.asc_isValidStepValue(this.inputStep.getValue());
|
|
if (res[0]!==Asc.c_oAscError.ID.No) {
|
|
this.inputStep.showError([this.txtErrorNumber]);
|
|
this.inputStep.focus();
|
|
this.isInputStepFirstChange = true;
|
|
return false;
|
|
} else
|
|
this._changedProps.asc_setStepValue(res[1]);
|
|
}
|
|
if (this.isStopChanged) {
|
|
var res = this._changedProps.asc_isValidStopValue(this.inputStop.getValue());
|
|
if (res[0]!==Asc.c_oAscError.ID.No) {
|
|
this.inputStop.showError([this.txtErrorNumber]);
|
|
this.inputStop.focus();
|
|
this.isInputStopFirstChange = true;
|
|
return false;
|
|
} else
|
|
this._changedProps.asc_setStopValue(res[1]);
|
|
}
|
|
return true;
|
|
},
|
|
|
|
onRadioTypeChange: function(field, newValue, eOpts) {
|
|
if (newValue) {
|
|
this._changedProps && this._changedProps.asc_setType(field.options.value);
|
|
var isDate = field.options.value == Asc.c_oAscSeriesType.date,
|
|
isAuto = field.options.value == Asc.c_oAscSeriesType.autoFill,
|
|
isTrend = this.chTrend.getValue()==='checked';
|
|
this.radioDay.setDisabled(!isDate);
|
|
this.radioMonth.setDisabled(!isDate);
|
|
this.radioWeek.setDisabled(!isDate);
|
|
this.radioYear.setDisabled(!isDate);
|
|
this.inputStep.setDisabled(isAuto || isTrend);
|
|
this.inputStop.setDisabled(isAuto || isTrend);
|
|
}
|
|
},
|
|
|
|
onRadioSeriesChange: function(field, newValue, eOpts) {
|
|
if (newValue && this._changedProps) {
|
|
this._changedProps.asc_setSeriesIn(field.options.value);
|
|
}
|
|
},
|
|
|
|
onRadioDateChange: function(field, newValue, eOpts) {
|
|
if (newValue && this._changedProps) {
|
|
this._changedProps.asc_setDateUnit(field.options.value);
|
|
}
|
|
},
|
|
|
|
onChangeTrend: function(field, newValue, eOpts) {
|
|
var checked = field.getValue()==='checked',
|
|
isDate = this.radioDate.getValue(),
|
|
isAuto = this.radioAuto.getValue();
|
|
if (this._changedProps) {
|
|
this._changedProps.asc_setTrend(checked);
|
|
}
|
|
if (checked && (isDate || isAuto)) {
|
|
this.radioLinear.setValue(true);
|
|
}
|
|
this.radioDate.setDisabled(checked);
|
|
this.radioAuto.setDisabled(checked);
|
|
this.inputStep.setDisabled(checked || isAuto);
|
|
this.inputStop.setDisabled(checked || isAuto);
|
|
},
|
|
|
|
textTitle: 'Series',
|
|
textSeries: 'Series in',
|
|
textType: 'Type',
|
|
textDateUnit: 'Date unit',
|
|
textStep: 'Step value',
|
|
textStop: 'Stop value',
|
|
textCols: 'Columns',
|
|
textRows: 'Rows',
|
|
textLinear: 'Linear',
|
|
textGrowth: 'Growth',
|
|
textDate: 'Date',
|
|
textAuto: 'AutoFill',
|
|
textDay: 'Day',
|
|
textWeek: 'Weekday',
|
|
textMonth: 'Month',
|
|
textYear: 'Year',
|
|
textTrend: 'Trend',
|
|
txtErrorNumber: 'Your entry cannot be used. An integer or decimal number may be required.'
|
|
|
|
}, SSE.Views.FillSeriesDialog || {}))
|
|
}); |