[SSE mobile] Added Application Settings without Regional Settings

apps/spreadsheeteditor/mobile/locale/en.json

@@ -256,7 +256,24 @@
             "advDRMPassword": "Password",
             "closeButtonText": "Close File",
             "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
-            "textCancel": "Cancel"
+            "textCancel": "Cancel",
+            "textUnitOfMeasurement": "Unit Of Measurement",
+            "textCentimeter": "Centimeter",
+            "textPoint": "Point",
+            "textInch": "Inch",
+            "textMacrosSettings": "Macros Settings",
+            "textFormulaLanguage": "Formula Language",
+            "textRegionalSettings": "Regional Settings",
+            "textCommentingDisplay": "Commenting Display",
+            "textComments": "Comments",
+            "textResolvedComments": "Resolved Comments",
+            "textR1C1Style": "R1C1 Reference Style",
+            "textDisableAll": "Disable All",
+            "textDisableAllMacrosWithoutNotification": "Disable all macros without a notification",
+            "textShowNotification": "Show Notification",
+            "textDisableAllMacrosWithNotification": "Disable all macros with a notification",
+            "textEnableAll": "Enable All",
+            "textEnableAllMacrosWithoutNotification": "Enable all macros without a notification"
         }
     },
     "Common": {

apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx

@@ -0,0 +1,95 @@
+import React, { Component } from "react";
+import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
+import {observer, inject} from "mobx-react";
+
+class ApplicationSettingsController extends Component {
+    constructor(props) {
+        super(props);
+        this.onFormulaLangChange = this.onFormulaLangChange.bind(this);
+        this.initRegSettings();
+    }
+
+    initRegSettings() {
+
+        // this.props.storeApplicationSettings.initRegSettings();
+
+        const info = new Asc.asc_CFormatCellsInfo();
+        const api = Common.EditorApi.get();
+        const regSettings = this.props.storeApplicationSettings.reqSettings;
+
+        info.asc_setType(Asc.c_oAscNumFormatType.None);
+        info.asc_setSymbol(regSettings);
+
+        let arr = api.asc_getFormatCells(info);
+        let text = api.asc_getLocaleExample(arr[4], 1000.01, regSettings);
+
+        text = text + ' ' + api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regSettings);
+        text = text + ' ' + api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regSettings);
+
+        this.textRegSettingsExample = text;
+    }
+
+    onChangeDisplayComments(displayComments) {
+        const api = Common.EditorApi.get();
+
+        if (!displayComments) {
+            api.asc_hideComments();
+            // Common.localStorage.setBool("sse-settings-resolvedcomment", false);
+        } else {
+            // let resolved = Common.localStorage.getBool("sse-settings-resolvedcomment");
+            api.asc_showComments(displayComments);
+        }
+
+        // Common.localStorage.setBool("sse-mobile-settings-livecomment", displayComments);
+    }
+
+    onChangeDisplayResolved(value) {
+        const api = Common.EditorApi.get();
+        // let displayComments = Common.localStorage.getBool("sse-mobile-settings-livecomment");
+
+        // if (displayComments) {
+        api.asc_showComments(value);
+        // Common.localStorage.setBool("sse-settings-resolvedcomment", resolved);
+        // }
+    }
+
+    clickR1C1Style(checked) {
+        const api = Common.EditorApi.get();
+        // Common.localStorage.setBool('sse-settings-r1c1', checked);
+        api.asc_setR1C1Mode(checked);
+    }
+
+    unitMeasurementChange(value) {
+        value = value ? +value : Common.Utils.Metric.getDefaultMetric();
+        Common.Utils.Metric.setCurrentMetric(value);
+        // Common.localStorage.setItem("se-mobile-settings-unit", value);
+    }
+
+    onChangeMacrosSettings(value) {
+        Common.Utils.InternalSettings.set("sse-mobile-macros-mode", +value);
+        // Common.localStorage.setItem("sse-mobile-macros-mode", +value);
+    }
+
+    onFormulaLangChange(value) {
+        // Common.localStorage.setItem("sse-settings-func-lang", value);
+        this.initRegSettings();
+        // SSE.getController('AddFunction').onDocumentReady();
+    }
+
+    render() {
+        return (
+            <ApplicationSettings 
+                unitMeasurementChange={this.unitMeasurementChange}
+                textRegSettingsExample={this.textRegSettingsExample}
+                onChangeDisplayComments={this.onChangeDisplayComments}
+                onChangeDisplayResolved={this.onChangeDisplayResolved}
+                clickR1C1Style={this.clickR1C1Style}
+                onChangeMacrosSettings={this.onChangeMacrosSettings}  
+                onFormulaLangChange={this.onFormulaLangChange}     
+            />
+        )
+    }
+}
+
+
+export default inject("storeApplicationSettings")(observer(ApplicationSettingsController));

apps/spreadsheeteditor/mobile/src/store/applicationSettings.js

@@ -0,0 +1,89 @@
+import {action, observable} from 'mobx';
+
+export class storeApplicationSettings {
+   
+    @observable unitMeasurement = Common.Utils.Metric.getCurrentMetric();
+    @observable macrosMode = 0;
+    @observable formulaLang = Common.Locale.currentLang || dataLang[0].value;
+    @observable regSettings = 0x0409;
+    @observable regData = [];
+    @observable isRefStyle = false;
+    @observable isComments = true;
+    @observable isResolvedComments = true;
+
+    getFormulaLanguages() {
+        const dataLang = [
+            { value: 'en', displayValue: 'English', exampleValue: ' SUM; MIN; MAX; COUNT' },
+            { value: 'de', displayValue: 'Deutsch', exampleValue: ' SUMME; MIN; MAX; ANZAHL' },
+            { value: 'es', displayValue: 'Spanish', exampleValue: ' SUMA; MIN; MAX; CALCULAR' },
+            { value: 'fr', displayValue: 'French', exampleValue: ' SOMME; MIN; MAX; NB' },
+            { value: 'it', displayValue: 'Italian', exampleValue: ' SOMMA; MIN; MAX; CONTA.NUMERI' },
+            { value: 'ru', displayValue: 'Russian', exampleValue: ' СУММ; МИН; МАКС; СЧЁТ' },
+            { value: 'pl', displayValue: 'Polish', exampleValue: ' SUMA; MIN; MAX; ILE.LICZB' }
+        ]
+
+        return dataLang;
+    }
+
+    getRegDataCodes() {
+        const regDataCode = [
+            { value: 0x042C }, { value: 0x0402 }, { value: 0x0405 }, { value: 0x0407 },  {value: 0x0807}, { value: 0x0408 }, { value: 0x0C09 }, { value: 0x0809 }, { value: 0x0409 }, { value: 0x0C0A }, { value: 0x080A },
+            { value: 0x040B }, { value: 0x040C }, { value: 0x0410 }, { value: 0x0411 }, { value: 0x0412 }, { value: 0x0426 }, { value: 0x0413 }, { value: 0x0415 }, { value: 0x0416 },
+            { value: 0x0816 }, { value: 0x0419 }, { value: 0x041B }, { value: 0x0424 }, { value: 0x081D }, { value: 0x041D }, { value: 0x041F }, { value: 0x0422 }, { value: 0x042A }, { value: 0x0804 }
+        ];
+
+        return regDataCode;
+    }
+
+    // @action initRegData() {
+    //     const regDataCodes = this.getRegDataCodes();
+    //     regDataCodes.forEach(item => {
+    //         let langInfo = Common.util.LanguageInfo.getLocalLanguageName(item.value);
+    //         this.regData.push({code: item.value, displayName: langInfo[1], langName: langInfo[0]});
+    //     })
+    // }
+
+    // @action initRegSettings() {
+    //     const regData = this.getRegDataCodes();
+    //     let value = Number(Common.localStorage.getItem('sse-settings-regional'));
+
+    //     if(!value) {
+    //         this.regSettings = 0x0409;
+    //     } else {
+    //         regData.forEach(obj => {
+    //             if(obj.value === value) {
+    //                 this.regSettings = obj.value;
+    //             }
+    //         });
+    //     }
+    // }
+
+    @action changeRegSettings(value) {
+        this.regSettings = value;
+    }
+
+    @action changeUnitMeasurement(value) {
+        this.unitMeasurement = +value;
+    }
+
+    @action changeMacrosSettings(value) {
+        this.macrosMode = +value;
+    }
+
+    @action changeDisplayComments(value) {
+        this.isComments = value;
+        if (!value) this.changeDisplayResolved(value);
+    }
+
+    @action changeDisplayResolved(value) {
+        this.isResolvedComments = value;
+    }
+
+    @action changeRefStyle(value) {
+        this.isRefStyle = value;
+    }
+
+    @action changeFormulaLang(value) {
+        this.formulaLang = value;
+    }
+}

apps/spreadsheeteditor/mobile/src/store/mainStore.js

@@ -6,7 +6,7 @@ import {storeWorksheets} from './sheets';
 import {storeFunctions} from './functions';
 import {storePalette} from "./palette";
 import {storeTextSettings} from "./textSettings";
-// import {storeParagraphSettings} from "./paragraphSettings";
+import {storeApplicationSettings} from "./applicationSettings";
 import {storeShapeSettings} from "./shapeSettings";
 import {storeCellSettings} from "./cellSettings";
 // import {storeImageSettings} from "./imageSettings";
@@ -17,6 +17,7 @@ import {storeSpreadsheetSettings} from "./spreadsheetSettings";
 export const stores = {
     storeFocusObjects: new storeFocusObjects(),
     storeSpreadsheetSettings: new storeSpreadsheetSettings(),
+    storeApplicationSettings: new storeApplicationSettings(),
     users: new storeUsers(),
     sheets: new storeWorksheets(),
     storeFunctions: new storeFunctions(),

apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx

@@ -0,0 +1,179 @@
+import React, {Fragment} from "react";
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageApplicationSettings = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const storeApplicationSettings = props.storeApplicationSettings;
+    const unitMeasurement = storeApplicationSettings.unitMeasurement;
+    const formulaLang = storeApplicationSettings.formulaLang;
+    // const regSettings = storeApplicationSettings.regSettings;
+    const dataLang = storeApplicationSettings.getFormulaLanguages();
+    const dataRegCodes = storeApplicationSettings.getRegDataCodes();
+    const defineFormulaLang = () => dataLang.find(obj => obj.value === formulaLang);
+    // const defineRegSettings = () => dataRegCodes.find(obj => obj.value === regSettings);
+    const currentFormulaLang = defineFormulaLang();
+    // const currentRegSettings = defineRegSettings();
+    const textRegSettingsExample = props.textRegSettingsExample;
+    const isRefStyle = storeApplicationSettings.isRefStyle;
+    const isComments = storeApplicationSettings.isComments;
+    const isResolvedComments = storeApplicationSettings.isResolvedComments;
+
+    const changeMeasureSettings = value => {
+        storeApplicationSettings.changeUnitMeasurement(value);
+        props.unitMeasurementChange(value);
+    };
+
+    // set mode
+    // const appOptions = props.storeAppOptions;
+    // const _isEdit = appOptions.isEdit;
+    // const _isShowMacros = (!appOptions.isDisconnected && appOptions.customization) ? appOptions.customization.macros !== false : true;
+
+    return (
+        <Page>
+            <Navbar title={_t.textApplicationSettings} backLink={_t.textBack} />
+            {/* {_isEdit && */}
+                <Fragment>
+                    <BlockTitle>{_t.textUnitOfMeasurement}</BlockTitle>
+                    <List>
+                        <ListItem radio radioIcon="end" title={_t.textCentimeter} name="unit-of-measurement" checked={unitMeasurement === 0}
+                            onChange={() => changeMeasureSettings(0)}></ListItem>
+                        <ListItem radio radioIcon="end" title={_t.textPoint} name="unit-of-measurement" checked={unitMeasurement === 1}
+                            onChange={() => changeMeasureSettings(1)}></ListItem>
+                        <ListItem radio radioIcon="end" title={_t.textInch} name="unit-of-measurement" checked={unitMeasurement === 2}
+                            onChange={() => changeMeasureSettings(2)}></ListItem>
+                    </List>
+                    <BlockTitle>{_t.textFormulaLanguage}</BlockTitle>
+                    <List mediaList>
+                        <ListItem title={currentFormulaLang.displayValue} subtitle={`Example: ${currentFormulaLang.exampleValue}`} link="/formula-languages/" 
+                            routeProps={{
+                                onFormulaLangChange: props.onFormulaLangChange
+                            }}>
+                        </ListItem>
+                    </List>
+                    <BlockTitle>{_t.textRegionalSettings}</BlockTitle>
+                    <List mediaList>
+                        <ListItem title="English" subtitle={`Example: ${textRegSettingsExample}`} link="/regional-settings/"></ListItem>
+                    </List>
+                    <BlockTitle>{_t.textCommentingDisplay}</BlockTitle>
+                    <List>
+                        <ListItem>
+                            <span>{_t.textComments}</span>
+                            <Toggle checked={isComments}
+                                    onChange={() => {
+                                        storeApplicationSettings.changeDisplayComments(!isComments);
+                                        props.onChangeDisplayComments(!isComments);
+                                    }}
+                            />
+                        </ListItem>
+                        <ListItem>
+                            <span>{_t.textResolvedComments}</span>
+                            <Toggle checked={isResolvedComments} disabled={!isComments}
+                                    onChange={() => {
+                                        storeApplicationSettings.changeDisplayResolved(!isResolvedComments);
+                                        props.onChangeDisplayResolved(!isResolvedComments);
+                                    }}
+                            />
+                        </ListItem>
+                    </List>
+                    <List>
+                        <ListItem>
+                            <span>{_t.textR1C1Style}</span>
+                            <Toggle checked={isRefStyle}
+                                    onChange={() => {
+                                        storeApplicationSettings.changeRefStyle(!isRefStyle);
+                                        props.clickR1C1Style(!isRefStyle);
+                                    }}
+                            />
+                        </ListItem>
+                    </List>
+                </Fragment>
+            {/* } */}
+            {/* {_isShowMacros && */}
+                <List>
+                    <ListItem title={_t.textMacrosSettings} link="/macros-settings/" routeProps={{
+                        onChangeMacrosSettings: props.onChangeMacrosSettings
+                    }}></ListItem>
+                </List>
+            {/* } */}
+        </Page>
+    );
+};
+
+const PageRegionalSettings = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const storeApplicationSettings = props.storeApplicationSettings;
+
+    return (
+        <Page>
+            <Navbar title={_t.textRegionalSettings} backLink={_t.textBack} />
+        </Page>
+    )
+}
+
+const PageFormulaLanguage = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const storeApplicationSettings = props.storeApplicationSettings;
+    const formulaLang = storeApplicationSettings.formulaLang;
+    const dataLang = storeApplicationSettings.getFormulaLanguages();
+
+    return (
+        <Page>
+            <Navbar title={_t.textFormulaLanguage} backLink={_t.textBack} />
+            <List mediaList>
+                {dataLang.map((elem, index) => {
+                    return (
+                        <ListItem radio key={index} title={elem.displayValue} subtitle={`Example: ${elem.exampleValue}`} checked={elem.value === formulaLang}
+                            onChange={() => {
+                                storeApplicationSettings.changeFormulaLang(elem.value);
+                                props.onFormulaLangChange(elem.value);
+                            }}>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageMacrosSettings = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const storeApplicationSettings = props.storeApplicationSettings;
+    const macrosMode = storeApplicationSettings.macrosMode;
+
+    const changeMacros = value => {
+        storeApplicationSettings.changeMacrosSettings(value);
+        props.onChangeMacrosSettings(value);
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textMacrosSettings} backLink={_t.textBack} />
+            <List mediaList>
+                <ListItem radio name="macros-settings" title={_t.textDisableAll} text={_t.textDisableAllMacrosWithoutNotification} 
+                    checked={macrosMode === 2} onChange={() => changeMacros(2)}></ListItem>
+                <ListItem radio name="macros-settings" title={_t.textShowNotification} text={_t.textDisableAllMacrosWithNotification}
+                    checked={macrosMode === 0} onChange={() => changeMacros(0)}></ListItem>
+                <ListItem radio name="macros-settings" title={_t.textEnableAll} text={_t.textEnableAllMacrosWithoutNotification}
+                    checked={macrosMode === 1} onChange={() => changeMacros(1)}></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const ApplicationSettings = inject("storeApplicationSettings")(observer(PageApplicationSettings));
+const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
+const RegionalSettings = inject("storeApplicationSettings")(observer(PageRegionalSettings));
+const FormulaLanguage = inject("storeApplicationSettings")(observer(PageFormulaLanguage));
+
+export {
+    ApplicationSettings, 
+    MacrosSettings,
+    RegionalSettings,
+    FormulaLanguage
+};

apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx

@@ -4,8 +4,10 @@ import { withTranslation } from 'react-i18next';
 import {f7} from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx';
+import ApplicationSettingsController from '../../controller/settings/ApplicationSettings.jsx';
 import {DownloadWithTranslation} from '../../controller/settings/Download.jsx';
 import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx';
+import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
 
 const routes = [
     {
@@ -31,6 +33,22 @@ const routes = [
     {
         path: '/download/',
         component: DownloadWithTranslation
+    },
+    {
+        path: '/application-settings/',
+        component: ApplicationSettingsController
+    },
+    {
+        path: '/macros-settings/',
+        component: MacrosSettings
+    },
+    {
+        path: '/regional-settings/',
+        component: RegionalSettings
+    },
+    {
+        path: '/formula-languages/',
+        component: FormulaLanguage
     }
 ];
 
@@ -94,7 +112,7 @@ const SettingsList = withTranslation()(props => {
                     <ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
                         <Icon slot="media" icon="icon-table-settings"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textApplicationSettings} link="#">
+                    <ListItem title={_t.textApplicationSettings} link="#" onClick={onoptionclick.bind(this, '/application-settings/')}>
                         <Icon slot="media" icon="icon-app-settings"></Icon>
                     </ListItem>
                     <ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, "/download/")}>