[SSE mobile] Change Encoding

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

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

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

@@ -4,6 +4,7 @@ import { Device } from '../../../../../common/mobile/utils/device';
 import { withTranslation, useTranslation } from 'react-i18next';
 import { f7 } from 'framework7-react';
 import { observer, inject } from "mobx-react";
+// import MainPage from '../../page/main';
 
 class DownloadController extends Component {
     constructor(props) {
@@ -11,6 +12,14 @@ class DownloadController extends Component {
         this.onSaveFormat = this.onSaveFormat.bind(this);
     }
 
+    closeModal() {
+        if (Device.phone) {
+            f7.sheet.close('.settings-popup', false);
+        } else {
+            f7.popover.close('#settings-popover');
+        }
+    }
+
     onSaveFormat(format) {
         const api = Common.EditorApi.get();
         const { t } = this.props;
@@ -24,12 +33,15 @@ class DownloadController extends Component {
                 f7.dialog.confirm(
                     _t.warnDownloadAs,
                     _t.notcriticalErrorTitle,
-                    () => {
+                    async () => {
                         const canRequestClose = this.props.storeAppOptions.canRequestClose;
+                        await this.closeModal();
                         onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, advOptions, 2, new Asc.asc_CDownloadOptions(format), _t, true, canRequestClose, false, storeEncoding);
+                        this.props.openOptions('encoding');
                     }
                 )
             } else {
+                this.closeModal();
                 api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
             }
         }
@@ -60,9 +72,9 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady
         storeEncoding.changeEncoding(recommendedSettings.asc_getCodePage());
         storeEncoding.changeDelimeter(recommendedSettings && recommendedSettings.asc_getDelimiter() ? recommendedSettings.asc_getDelimiter() : 4);
 
-        if(mode === 2) {
+        // if(mode === 2) {
-            f7.views.current.router.navigate('/encoding/');
+        // f7.views.current.router.navigate('/encoding/');
-        }   
+        // }   
     }
     //     let picker;
     //     const pages = [];

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -16,6 +16,7 @@ import { f7 } from 'framework7-react';
 import {FunctionGroups} from "../controller/add/AddFunction";
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
+import EncodingController from "../controller/Encoding";
 
 class MainPage extends Component {
     constructor(props) {
@@ -26,6 +27,7 @@ class MainPage extends Component {
             addShowOptions: null,
             settingsVisible: false,
             collaborationVisible: false,
+            encodingVisible: false
         };
     }
 
@@ -42,6 +44,8 @@ class MainPage extends Component {
                 };
             else if ( opts == 'settings' )
                 return {settingsVisible: true};
+            else if ( opts == 'encoding' )
+                return {encodingVisible: true};
             else if ( opts == 'coauth' )
                 return {collaborationVisible: true};
         });
@@ -60,6 +64,8 @@ class MainPage extends Component {
                     return {addOptionsVisible: false};
                 else if ( opts == 'settings' )
                     return {settingsVisible: false};
+                else if ( opts == 'encoding' )
+                    return {encodingVisible: false};
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false};
             });
@@ -67,7 +73,7 @@ class MainPage extends Component {
                 f7.navbar.show('.main-navbar');
             }
         })();
-    };
+    }; 
 
   render() {
       const appOptions = this.props.storeAppOptions;
@@ -106,13 +112,17 @@ class MainPage extends Component {
                         <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
                 }
                 {
-                    !this.state.settingsVisible && this.props.storeEncoding.mode ? null :
+                    !this.state.settingsVisible ? null :
                         <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
                 }
                 {
                     !this.state.collaborationVisible ? null :
                         <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
                 }
+                {
+                    !this.state.encodingVisible && this.props.storeEncoding.mode ? null : 
+                        <EncodingController openOptions={this.handleClickToOpenOeptions} onclosed={this.handleOptionsViewClosed.bind(this, 'encoding')} />
+                }
 
                 <FilterOptionsController />
                 

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

@@ -0,0 +1,153 @@
+import React, {Component, useEffect} from 'react';
+import { observer, inject } from "mobx-react";
+import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popup, View, Link } from "framework7-react";
+import { useTranslation } from "react-i18next";
+import { Device } from '../../../../common/mobile/utils/device';
+
+const routes = [
+    {
+        path: '/encoding/',
+        component: PageEncoding
+    },
+    {
+        path: '/encoding-list/',
+        component: PageEncodingList
+    },
+    {
+        path: '/delimeter-list/',
+        component: PageDelimeterList
+    }
+];
+
+const PageEncoding = inject("storeEncoding")(observer(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 mode = storeEncoding.mode;
+
+    return (
+        <View routes={routes} url="/encoding/">
+            <Page>
+                <Navbar title={_t.textChooseCsvOptions} />
+                <BlockTitle>{_t.textDelimeter}</BlockTitle>
+                <List>
+                    <ListItem title={nameDelimeter} link="/delimeter-list/"></ListItem>
+                </List>
+                <BlockTitle>{_t.textEncoding}</BlockTitle>
+                <List>
+                    <ListItem title={nameEncoding} link="/encoding-list/"></ListItem>
+                </List>
+                <List className="buttons-list">
+                    <ListButton className='button-fill button-raised' title={mode === 2 ?_t.textDownload : _t.txtOk} onClick={() => props.onSaveFormat(mode, valueEncoding, valueDelimeter)}></ListButton>
+                </List>
+            </Page>
+        </View>
+        
+    )
+}));
+
+const PageEncodingList = inject("storeEncoding")(observer(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 = inject("storeEncoding")(observer(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));
+
+class EncodingView extends Component {
+    constructor(props) {
+        super(props);
+        this.onoptionclick = this.onoptionclick.bind(this);
+    }
+
+    onoptionclick(page){
+        f7.views.current.router.navigate(page);
+    }
+
+    render() {
+        const show_popover = this.props.usePopover;
+        return (
+            show_popover ?
+                <Popover id="encoding-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
+                    <PageEncoding inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} onSaveFormat={this.props.onSaveFormat} />
+                </Popover> :
+                <Popup className="encoding-popup" onPopupClosed={() => this.props.onclosed()}>
+                    <PageEncoding onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
+                </Popup>
+        )
+    }
+}
+
+const Encoding = props => {
+    useEffect(() => {
+        if ( Device.phone )
+            f7.popup.open('.encoding-popup');
+        else f7.popover.open('#encoding-popover');
+
+        return () => {
+        }
+    });
+
+
+    const onviewclosed = () => {
+        if ( props.onclosed )
+            props.onclosed();
+    };
+
+    return <EncodingView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} onSaveFormat={props.onSaveFormat} />
+};
+
+// export {EncodingList, Encoding, DelimeterList}
+export {Encoding, PageEncodingList, PageDelimeterList}

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

@@ -64,18 +64,18 @@ const routes = [
         path: '/about/',
         component: About
     },
-    {
+    // {
-        path: '/encoding/',
+    //     path: '/encoding/',
-        component: EncodingController
+    //     component: EncodingController
-    },
+    // },
-    {
+    // {
-        path: '/encoding-list/',
+    //     path: '/encoding-list/',
-        component: EncodingList
+    //     component: EncodingList
-    },
+    // },
-    {
+    // {
-        path: '/delimeter-list/',
+    //     path: '/delimeter-list/',
-        component: DelimeterList
+    //     component: DelimeterList
-    }
+    // }
 ];
 
 
@@ -138,7 +138,8 @@ const SettingsList = inject("storeAppOptions", "storeEncoding")(observer(props =
     } 
     
     return (
-        <View style={props.style} stackPages={true} routes={routes} url={!props.storeEncoding.mode && '/encoding/'}>
+        // onClick={onoptionclick.bind(this, "/download/")}
+        <View style={props.style} stackPages={true} routes={routes}>
             <Page>
                 {navbar}
                 <List>
@@ -160,7 +161,7 @@ const SettingsList = inject("storeAppOptions", "storeEncoding")(observer(props =
                     <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/")}>
+                    <ListItem title={_t.textDownload} link="/download/" routeProps={{openOptions: props.openOptions}}>
                         <Icon slot="media" icon="icon-download"></Icon>
                     </ListItem>
                     <ListItem title={_t.textPrint} onClick={onPrint}>