[SSE mobile] Add encoding options

apps/common/mobile/lib/store/encoding.js

@@ -12,7 +12,13 @@ export class storeEncoding {
             valueEncoding: observable,
             nameEncoding: observable,
             initPages: action,
-            changeEncoding: action
+            changeEncoding: action,
+            valueDelimeter: observable,
+            nameDelimeter: observable,
+            changeDelimeter: action,
+            namesDelimeter: observable,
+            valuesDelimeter: observable,
+            initNamesDelimeter: action
         });
     }
 
@@ -23,6 +29,10 @@ export class storeEncoding {
     formatOptions;
     valueEncoding;
     nameEncoding;
+    namesDelimeter = [];
+    valuesDelimeter = [4, 2, 3, 1, 5];
+    nameDelimeter;
+    valueDelimeter;
 
     initOptions ({type, advOptions, formatOptions}) {
         this.type= type;
@@ -37,8 +47,17 @@ export class storeEncoding {
         }
     }
 
+    initNamesDelimeter(names) {
+        this.namesDelimeter = names;
+    }
+
     changeEncoding(value) {
         this.nameEncoding = this.pagesName[this.pages.indexOf(value)];
         this.valueEncoding = value;
     }
+
+    changeDelimeter(value) {
+        this.nameDelimeter = this.namesDelimeter[this.valuesDelimeter.indexOf(value)];
+        this.valueDelimeter = value;
+    }
 }

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

@@ -10,7 +10,7 @@ import {storeTableSettings} from "./tableSettings";
 import {storeChartSettings} from "./chartSettings";
 import {storeDocumentInfo} from "./documentInfo";
 import {storeApplicationSettings} from './applicationSettings';
-import {storeEncoding} from "./encoding";
+import {storeEncoding} from "../../../../common/mobile/lib/store/encoding";
 import {storeAppOptions} from "./appOptions";
 import {storePalette} from "./palette";
 import {storeReview} from "./review";

apps/spreadsheeteditor/mobile/locale/en.json

@@ -513,7 +513,16 @@
             "textValues": "Values",
             "textNoTextFound": "Text not found",
             "textReplaceAll": "Replace All",
-            "textCollaboration": "Collaboration"
+            "textCollaboration": "Collaboration",
+            "textChooseCsvOptions": "Choose CSV Options",
+            "txtDownloadCsv": "Download CSV",
+            "textDelimeter": "Delimeter",
+            "textEncoding": "Encoding",
+            "textChooseEncoding": "Choose Encoding",
+            "textChooseDelimeter": "Choose Delimeter",
+            "txtComma": "Comma",
+            "txtSemicolon": "Semicolon",
+            "txtColon": "Colon"
         }
     },
     "Statusbar": {

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

@@ -3,6 +3,7 @@ import Download from "../../view/settings/Download";
 import { Device } from '../../../../../common/mobile/utils/device';
 import { withTranslation, useTranslation } from 'react-i18next';
 import { f7 } from 'framework7-react';
+import { observer, inject } from "mobx-react";
 
 class DownloadController extends Component {
     constructor(props) {
@@ -17,11 +18,20 @@ class DownloadController extends Component {
 
         if (format) {
             if (format == Asc.c_oAscFileType.CSV) {
+                const advOptions = api.asc_getAdvancedOptions();
+                const recommendedSettings = advOptions.asc_getRecommendedSettings();
+
                 f7.dialog.confirm(
                     _t.warnDownloadAs,
                     _t.notcriticalErrorTitle,
-                    function () {
+                    () => {
-                        onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t, true);
+                        this.props.storeEncoding.initOptions({type: Asc.c_oAscAdvancedOptionsID.CSV, advOptions, formatOptions: new Asc.asc_CDownloadOptions(format)});
+                        this.props.storeEncoding.initPages();
+                        this.props.storeEncoding.initNamesDelimeter([_t.txtComma, _t.txtSemicolon, _t.txtColon, _t.txtTab, _t.txtSpace]);
+                        this.props.storeEncoding.changeEncoding(recommendedSettings.asc_getCodePage());
+                        this.props.storeEncoding.changeDelimeter(recommendedSettings && recommendedSettings.asc_getDelimiter() ? recommendedSettings.asc_getDelimiter() : 4);
+                        f7.views.current.router.navigate('/encoding/');
+                        // onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t, true);
                     }
                 )
             } else {
@@ -37,92 +47,93 @@ class DownloadController extends Component {
     }
 }
 
-const DownloadWithTranslation = withTranslation()(DownloadController);
+const DownloadWithTranslation = inject("storeEncoding")(observer(withTranslation()(DownloadController)));
 
 const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady, canRequestClose, isDRM) => {
     const api = Common.EditorApi.get();
 
-    if (type == Asc.c_oAscAdvancedOptionsID.CSV) {
+    // if (type == Asc.c_oAscAdvancedOptionsID.CSV) {
-        let picker;
+    //     let picker;
-        const pages = [];
+    //     const pages = [];
-        const pagesName = [];
+    //     const pagesName = [];
 
-        for (let page of advOptions.asc_getCodePages()) {
+    //     for (let page of advOptions.asc_getCodePages()) {
-            pages.push(page.asc_getCodePage());
+    //         pages.push(page.asc_getCodePage());
-            pagesName.push(page.asc_getCodePageName());
+    //         pagesName.push(page.asc_getCodePageName());
-        }
+    //     }
 
-        Common.Notifications.trigger('preloader:close');
+    //     Common.Notifications.trigger('preloader:close');
-        Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
+    //     Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
 
-        const buttons = [];
+    //     const buttons = [];
 
-        if (mode === 2) {
+    //     if (mode === 2) {
-            buttons.push({
+    //         buttons.push({
-                text: _t.textCancel
+    //             text: _t.textCancel
-            });
+    //         });
-        }
+    //     }
 
-        buttons.push({
+    //     buttons.push({
-            text: 'OK',
+    //         text: 'OK',
-            bold: true,
+    //         bold: true,
-            onClick: function() {
+    //         onClick: function() {
-                let encoding = picker.cols[0].value,
+    //             let encoding = picker.cols[0].value,
-                    delimiter = picker.cols[1].value;
+    //                 delimiter = picker.cols[1].value;
 
-                if (mode == 2) {
+    //             if (mode == 2) {
-                    formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding, delimiter));
+    //                 formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding, delimiter));
-                    api.asc_DownloadAs(formatOptions);
+    //                 api.asc_DownloadAs(formatOptions);
-                } else {
+    //             } else {
-                    api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding, delimiter));
+    //                 api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding, delimiter));
-                }
+    //             }
 
-                if (!isDocReady) {
+    //             if (!isDocReady) {
-                    Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
+    //                 Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
-                }
+    //             }
-            }
+    //         }
-        });
+    //     });
 
-        const dialog = f7.dialog.create({
+    //     const dialog = f7.dialog.create({
-            title: _t.advCSVOptions,
+    //         title: _t.advCSVOptions,
-            text: '',
+    //         text: '',
-            content:
+    //         content:
-            '<div class="content-block small-picker" style="padding: 0; margin: 20px 0 0;">' +
+    //         '<div class="content-block small-picker" style="padding: 0; margin: 20px 0 0;">' +
-                '<div class="row">' +
+    //             '<div class="row">' +
-                    '<div class="col-50" style="text-align: left;">' + _t.txtEncoding + '</div>' +
+    //                 '<div class="col-50" style="text-align: left;">' + _t.txtEncoding + '</div>' +
-                    '<div class="col-50" style="text-align: right;">' + _t.txtDelimiter + '</div>' +
+    //                 '<div class="col-50" style="text-align: right;">' + _t.txtDelimiter + '</div>' +
-                '</div>' +
+    //             '</div>' +
-                '<div id="txt-encoding" class="small"></div>' +
+    //             '<div id="txt-encoding" class="small"></div>' +
-            '</div>',
+    //         '</div>',
-            buttons: buttons,
+    //         buttons: buttons,
-            cssClass: 'dlg-adv-options'
+    //         cssClass: 'dlg-adv-options'
-        }).open();
+    //     }).open();
 
-        const recommendedSettings = advOptions.asc_getRecommendedSettings();
+    //     const recommendedSettings = advOptions.asc_getRecommendedSettings();
 
-        dialog.on('opened', () => {
+    //     dialog.on('opened', () => {
-            picker = f7.picker.create({
+    //         picker = f7.picker.create({
-                containerEl: document.getElementById('txt-encoding'),
+    //             containerEl: document.getElementById('txt-encoding'),
-                cols: [{
+    //             cols: [{
-                    textAlign: 'left',
+    //                 textAlign: 'left',
-                    values: pages,
+    //                 values: pages,
-                    displayValues: pagesName
+    //                 displayValues: pagesName
-                },{
+    //             },{
-                    textAlign: 'right',
+    //                 textAlign: 'right',
-                    width: 120,
+    //                 width: 120,
-                    values: [4, 2, 3, 1, 5],
+    //                 values: [4, 2, 3, 1, 5],
-                    displayValues: [',', ';', ':', _t.txtTab, _t.txtSpace]
+    //                 displayValues: [',', ';', ':', _t.txtTab, _t.txtSpace]
-                }],
+    //             }],
-                toolbar: false,
+    //             toolbar: false,
-                rotateEffect: true,
+    //             rotateEffect: true,
-                value: [
+    //             value: [
-                    recommendedSettings && recommendedSettings.asc_getCodePage(),
+    //                 recommendedSettings && recommendedSettings.asc_getCodePage(),
-                    (recommendedSettings && recommendedSettings.asc_getDelimiter()) ? recommendedSettings.asc_getDelimiter() : 4
+    //                 (recommendedSettings && recommendedSettings.asc_getDelimiter()) ? recommendedSettings.asc_getDelimiter() : 4
-                ],
+    //             ],
-            });
+    //         });
-        });
+    //     });
 
-    } else if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
+    // } else 
+    if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
         Common.Notifications.trigger('preloader:close');
         Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
         const buttons = [{

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

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { Device } from '../../../../../common/mobile/utils/device';
+import { f7 } from "framework7-react";
+import { Encoding } from "../../view/settings/Encoding";
+
+class EncodingController extends Component {
+    constructor(props) {
+        super(props);
+        this.onSaveFormat = this.onSaveFormat.bind(this);
+    }
+
+    closeModal() {
+        if (Device.phone) {
+            f7.sheet.close('.settings-popup', true);
+        } else {
+            f7.popover.close('#settings-popover');
+        }
+    }
+
+    onSaveFormat(formatOptions, valueEncoding, valueDelimeter) {
+        const api = Common.EditorApi.get();
+
+        this.closeModal();
+        formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
+        api.asc_DownloadAs(formatOptions);
+    }
+
+    render() {
+        return (
+            <Encoding onSaveFormat={this.onSaveFormat} />
+        );
+    }
+}
+
+export default EncodingController;

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

@@ -11,6 +11,7 @@ import {storeShapeSettings} from "./shapeSettings";
 import {storeCellSettings} from "./cellSettings";
 import {storeSpreadsheetInfo} from "./spreadsheetInfo";
 import {storeAppOptions} from "./appOptions";
+import {storeEncoding} from "../../../../common/mobile/lib/store/encoding";
 // import {storeImageSettings} from "./imageSettings";
 // import {storeTableSettings} from "./tableSettings";
 import {storeChartSettings} from "./chartSettings";
@@ -22,6 +23,7 @@ export const stores = {
     storeSpreadsheetSettings: new storeSpreadsheetSettings(),
     storeApplicationSettings: new storeApplicationSettings(),
     users: new storeUsers(),
+    storeEncoding: new storeEncoding(),
     sheets: new storeWorksheets(),
     storeFunctions: new storeFunctions(),
     storeTextSettings: new storeTextSettings(),

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { observer, inject } from "mobx-react";
+import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageEncoding = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const storeEncoding = props.storeEncoding;
+    const valueEncoding = storeEncoding.valueEncoding;
+    const nameDelimeter = storeEncoding.nameDelimeter;
+    const valueDelimeter = storeEncoding.valueDelimeter;
+    const nameEncoding = storeEncoding.nameEncoding;
+    const formatOptions = storeEncoding.formatOptions;
+
+    return (
+        <Page>
+            <Navbar title={_t.textChooseCsvOptions} backLink={_t.textBack} />
+            <BlockTitle>{_t.textDelimeter}</BlockTitle>
+            <List>
+                <ListItem title={nameDelimeter} href="/delimeter-list/"></ListItem>
+            </List>
+            <BlockTitle>{_t.textEncoding}</BlockTitle>
+            <List>
+                <ListItem title={nameEncoding} href="/encoding-list/"></ListItem>
+            </List>
+            <List className="buttons-list">
+                <ListButton className='button-fill button-raised' title={_t.textDownload} onClick={() => props.onSaveFormat(formatOptions, valueEncoding, valueDelimeter)}></ListButton>
+            </List>
+        </Page>
+    )
+}
+
+const PageEncodingList = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const storeEncoding = props.storeEncoding;
+    const valueEncoding = storeEncoding.valueEncoding;
+    const pages = storeEncoding.pages;
+    const pagesName = storeEncoding.pagesName;
+    
+    return (
+        <Page>
+            <Navbar title={_t.txtDownloadCsv} backLink={_t.textBack} />
+            <BlockTitle>{_t.textChooseEncoding}</BlockTitle>
+            <List>
+                {pagesName.map((name, index) => {
+                    return (
+                        <ListItem radio checked={valueEncoding === pages[index]} title={name} key={index} value={pages[index]} onChange={() => {
+                            storeEncoding.changeEncoding(pages[index]);
+                            f7.views.current.router.back();
+                        }}></ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const PageDelimeterList = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const storeEncoding = props.storeEncoding;
+    const valueDelimeter = storeEncoding.valueDelimeter;
+    const namesDelimeter = storeEncoding.namesDelimeter;
+    const valuesDelimeter = storeEncoding.valuesDelimeter;
+    
+    return (
+        <Page>
+            <Navbar title={_t.txtDownloadCsv} backLink={_t.textBack} />
+            <BlockTitle>{_t.textChooseDelimeter}</BlockTitle>
+            <List>
+                {namesDelimeter.map((name, index) => {
+                    return (
+                        <ListItem radio checked={valueDelimeter === valuesDelimeter[index]} title={name} key={index} value={valuesDelimeter[index]} onChange={() => {
+                            storeEncoding.changeDelimeter(valuesDelimeter[index]);
+                            f7.views.current.router.back();
+                        }}></ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
+
+const Encoding = inject("storeEncoding")(observer(PageEncoding));
+const EncodingList = inject("storeEncoding")(observer(PageEncodingList));
+const DelimeterList = inject("storeEncoding")(observer(PageDelimeterList));
+
+export {EncodingList, Encoding, DelimeterList}

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

@@ -12,6 +12,8 @@ import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from '.
 import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
 // import SpreadsheetAbout from './SpreadsheetAbout.jsx';
 import About from '../../../../../common/mobile/lib/view/About';
+import EncodingController from '../../controller/settings/Encoding';
+import { EncodingList, DelimeterList } from '../../view/settings/Encoding';
 
 const routes = [
     {
@@ -61,6 +63,18 @@ const routes = [
     {
         path: '/about/',
         component: About
+    },
+    {
+        path: '/encoding/',
+        component: EncodingController
+    },
+    {
+        path: '/encoding-list/',
+        component: EncodingList
+    },
+    {
+        path: '/delimeter-list/',
+        component: DelimeterList
     }
 ];