[SSE mobile] Change Encoding
This commit is contained in:
SergeyEzhin
parent
5a30ae5cc9
commit
b7d44ced9f
44
apps/spreadsheeteditor/mobile/src/controller/Encoding.jsx
Normal file
44
apps/spreadsheeteditor/mobile/src/controller/Encoding.jsx
Normal file
|
|
@ -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));
|
||||
|
|
@ -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) {
|
||||
f7.views.current.router.navigate('/encoding/');
|
||||
}
|
||||
// if(mode === 2) {
|
||||
// f7.views.current.router.navigate('/encoding/');
|
||||
// }
|
||||
}
|
||||
// let picker;
|
||||
// const pages = [];
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
});
|
||||
|
|
@ -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 />
|
||||
|
||||
|
|
|
|||
153
apps/spreadsheeteditor/mobile/src/view/Encoding.jsx
Normal file
153
apps/spreadsheeteditor/mobile/src/view/Encoding.jsx
Normal file
|
|
@ -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}
|
||||
|
|
@ -64,18 +64,18 @@ const routes = [
|
|||
path: '/about/',
|
||||
component: About
|
||||
},
|
||||
{
|
||||
path: '/encoding/',
|
||||
component: EncodingController
|
||||
},
|
||||
{
|
||||
path: '/encoding-list/',
|
||||
component: EncodingList
|
||||
},
|
||||
{
|
||||
path: '/delimeter-list/',
|
||||
component: DelimeterList
|
||||
}
|
||||
// {
|
||||
// path: '/encoding/',
|
||||
// component: EncodingController
|
||||
// },
|
||||
// {
|
||||
// path: '/encoding-list/',
|
||||
// component: EncodingList
|
||||
// },
|
||||
// {
|
||||
// path: '/delimeter-list/',
|
||||
// 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}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue