[SSE mobile] Change Encoding v.2

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

@@ -18,12 +18,13 @@ class EncodingController extends Component {
         }
     }
 
-    onSaveFormat(mode, valueEncoding, valueDelimeter) {
+    async onSaveFormat(mode, valueEncoding, valueDelimeter) {
         const api = Common.EditorApi.get();
         const storeEncoding = this.props.storeEncoding;
 
+        await this.closeModal();
+
         if(mode === 2) {
-            this.closeModal();
             const formatOptions = storeEncoding.formatOptions;
             formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
             api.asc_DownloadAs(formatOptions);
@@ -36,7 +37,7 @@ class EncodingController extends Component {
 
     render() {
         return (
-            <Encoding onSaveFormat={this.onSaveFormat} />
+            <Encoding routes={this.props.routes} onSaveFormat={this.onSaveFormat} />
         );
     }
 }

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

@@ -17,6 +17,19 @@ import {FunctionGroups} from "../controller/add/AddFunction";
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
 import EncodingController from "../controller/Encoding";
+import {PageEncodingList, PageDelimeterList} from '../view/Encoding';
+
+
+const routes = [
+    {
+        path: '/encoding-list/',
+        component: PageEncodingList
+    },
+    {
+        path: '/delimeter-list/',
+        component: PageDelimeterList
+    }
+];
 
 class MainPage extends Component {
     constructor(props) {
@@ -121,7 +134,8 @@ class MainPage extends Component {
                 }
                 {
                     !this.state.encodingVisible && this.props.storeEncoding.mode ? null : 
-                        <EncodingController openOptions={this.handleClickToOpenOeptions} onclosed={this.handleOptionsViewClosed.bind(this, 'encoding')} />
+                        <EncodingController routes={routes} openOptions={this.handleClickToOpenOeptions} 
+                            onclosed={this.handleOptionsViewClosed.bind(this, 'encoding')} />
                 }
 
                 <FilterOptionsController />

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

@@ -4,21 +4,6 @@ import { f7, Page, Navbar, List, ListItem, BlockTitle, ListButton, Popover, Popu
 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 });
@@ -28,9 +13,10 @@ const PageEncoding = inject("storeEncoding")(observer(props => {
     const valueDelimeter = storeEncoding.valueDelimeter;
     const nameEncoding = storeEncoding.nameEncoding;
     const mode = storeEncoding.mode;
+    const routes = props.routes;
 
     return (
-        <View routes={routes} url="/encoding/">
+        <View routes={routes}>
             <Page>
                 <Navbar title={_t.textChooseCsvOptions} />
                 <BlockTitle>{_t.textDelimeter}</BlockTitle>
@@ -42,6 +28,9 @@ const PageEncoding = inject("storeEncoding")(observer(props => {
                     <ListItem title={nameEncoding} link="/encoding-list/"></ListItem>
                 </List>
                 <List className="buttons-list">
+                    {mode === 2 ? 
+                        <ListButton className='button-fill button-raised' title={_t.textCancel}></ListButton>
+                    : null}
                     <ListButton className='button-fill button-raised' title={mode === 2 ?_t.textDownload : _t.txtOk} onClick={() => props.onSaveFormat(mode, valueEncoding, valueDelimeter)}></ListButton>
                 </List>
             </Page>
@@ -102,10 +91,6 @@ const PageDelimeterList = inject("storeEncoding")(observer(props => {
     )
 }));
 
-// 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);
@@ -121,10 +106,12 @@ class EncodingView extends Component {
         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} />
+                    <PageEncoding inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} routes={this.props.routes} 
+                        onSaveFormat={this.props.onSaveFormat} />
                 </Popover> :
                 <Popup className="encoding-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <PageEncoding onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
+                    <PageEncoding onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} routes={this.props.routes} 
+                        onSaveFormat={this.props.onSaveFormat} />
                 </Popup>
         )
     }
@@ -146,8 +133,7 @@ const Encoding = props => {
             props.onclosed();
     };
 
-    return <EncodingView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} onSaveFormat={props.onSaveFormat} />
+    return <EncodingView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} onSaveFormat={props.onSaveFormat} routes={props.routes} />
 };
 
-// export {EncodingList, Encoding, DelimeterList}
 export {Encoding, PageEncodingList, PageDelimeterList}