[DE mobile] Changed encoding options

This commit is contained in:
SergeyEzhin 2021-07-24 01:38:54 +03:00
parent 116944b181
commit 33bf343709
13 changed files with 278 additions and 250 deletions

View file

@ -1,70 +0,0 @@
import {action, observable, makeObservable} from 'mobx';
export class storeEncoding {
constructor() {
makeObservable(this, {
type: observable,
mode: observable,
setMode: action,
advOptions: observable,
formatOptions: observable,
pages: observable,
pagesName: observable,
initOptions: action,
valueEncoding: observable,
nameEncoding: observable,
initPages: action,
changeEncoding: action,
valueDelimeter: observable,
nameDelimeter: observable,
changeDelimeter: action,
namesDelimeter: observable,
valuesDelimeter: observable,
initNamesDelimeter: action
});
}
type;
mode = 1;
pages = [];
pagesName = [];
advOptions;
formatOptions;
valueEncoding;
nameEncoding;
namesDelimeter = [];
valuesDelimeter = [4, 2, 3, 1, 5];
nameDelimeter;
valueDelimeter;
initOptions ({type, advOptions, formatOptions}) {
this.type = type;
this.advOptions = advOptions;
this.formatOptions = formatOptions;
}
initPages() {
for (let page of this.advOptions.asc_getCodePages()) {
this.pages.push(page.asc_getCodePage());
this.pagesName.push(page.asc_getCodePageName());
}
}
initNamesDelimeter(names) {
this.namesDelimeter = names;
}
setMode(value) {
this.mode = value;
}
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;
}
}

View file

@ -0,0 +1,94 @@
import React, { Component } from 'react';
import { Device } from '../../../../common/mobile/utils/device';
import { f7 } from "framework7-react";
import { Encoding } from "../view/Encoding";
class EncodingController extends Component {
constructor(props) {
super(props);
this.onSaveFormat = this.onSaveFormat.bind(this);
this.closeModal = this.closeModal.bind(this);
this.state = {
isOpen: false
};
Common.Notifications.on('engineCreated', api => {
api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions, mode, formatOptions) => {
this.initEncoding(type, advOptions, mode, formatOptions);
});
});
Common.Notifications.on('openEncoding', (type, advOptions, mode, formatOptions) => {
this.initEncoding(type, advOptions, mode, formatOptions);
});
}
initEncoding(type, advOptions, mode, formatOptions) {
if(type === Asc.c_oAscAdvancedOptionsID.CSV) {
Common.Notifications.trigger('preloader:close');
Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
this.mode = mode;
this.advOptions = advOptions;
this.formatOptions = formatOptions;
this.pages = [];
this.pagesName = [];
const recommendedSettings = this.advOptions.asc_getRecommendedSettings();
this.initPages();
this.valueEncoding = recommendedSettings.asc_getCodePage();
this.setState({
isOpen: true
});
}
}
initPages() {
for (let page of this.advOptions.asc_getCodePages()) {
this.pages.push(page.asc_getCodePage());
this.pagesName.push(page.asc_getCodePageName());
}
}
closeModal() {
if (Device.phone) {
f7.sheet.close('.encoding-popup', true);
} else {
f7.popover.close('#encoding-popover');
}
this.setState({isOpen: false});
}
onSaveFormat(valueEncoding) {
const api = Common.EditorApi.get();
this.closeModal();
if(this.mode === 2) {
this.formatOptions && this.formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding));
api.asc_DownloadAs(this.formatOptions);
} else {
api.asc_setAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, new Asc.asc_CTextOptions(valueEncoding));
}
}
render() {
return (
this.state.isOpen &&
<Encoding
closeModal={this.closeModal}
mode={this.mode}
onSaveFormat={this.onSaveFormat}
pages={this.pages}
pagesName={this.pagesName}
valueEncoding={this.valueEncoding}
/>
);
}
}
export default EncodingController;

View file

@ -16,7 +16,7 @@ import EditorUIController from '../lib/patch';
import ErrorController from "./Error";
import LongActionsController from "./LongActions";
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
import EncodingController from "./Encoding";
@inject(
"storeAppOptions",
"storeDocumentSettings",
@ -26,8 +26,7 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
"storeTableSettings",
"storeDocumentInfo",
"storeChartSettings",
"storeApplicationSettings",
"storeEncoding"
"storeApplicationSettings"
)
class MainController extends Component {
constructor(props) {
@ -608,14 +607,15 @@ class MainController extends Component {
storeDocumentSettings.addSchemes(arr);
});
const storeEncoding = this.props.storeEncoding;
// Downloaded Advanced Options
this.api.asc_registerCallback('asc_onAdvancedOptions', (type, advOptions, mode, formatOptions) => {
const {t} = this.props;
const _t = t("Settings", { returnObjects: true });
onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this._isDocReady, this.props.storeAppOptions.canRequestClose, this.isDRM, storeEncoding);
if(type == Asc.c_oAscAdvancedOptionsID.DRM) this.isDRM = true;
if(type == Asc.c_oAscAdvancedOptionsID.DRM) {
onAdvancedOptions(type, _t, this._isDocReady, this.props.storeAppOptions.canRequestClose, this.isDRM);
this.isDRM = true;
}
});
}
@ -821,6 +821,7 @@ class MainController extends Component {
{EditorUIController.getEditCommentControllers && EditorUIController.getEditCommentControllers()}
<ViewCommentsController />
<PluginsController />
<EncodingController />
</Fragment>
)
}

View file

@ -13,7 +13,7 @@ class DownloadController extends Component {
closeModal() {
if (Device.phone) {
f7.sheet.close('.settings-popup', true);
f7.sheet.close('.settings-popup', false);
} else {
f7.popover.close('#settings-popover');
}
@ -31,11 +31,10 @@ class DownloadController extends Component {
_t.notcriticalErrorTitle,
() => {
if (format == Asc.c_oAscFileType.TXT) {
const canRequestClose = this.props.storeAppOptions.canRequestClose;
const storeEncoding = this.props.storeEncoding;
const advOptions = api.asc_getAdvancedOptions();
this.closeModal();
Common.Notifications.trigger('openEncoding', Asc.c_oAscAdvancedOptionsID.TXT, advOptions, 2, new Asc.asc_CDownloadOptions(format));
onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.TXT, advOptions, 2, new Asc.asc_CDownloadOptions(format), _t, true, canRequestClose, false, storeEncoding);
}
else {
this.closeModal();
@ -62,29 +61,16 @@ class DownloadController extends Component {
}
}
const DownloadWithTranslation = inject("storeAppOptions", "storeEncoding")(observer(withTranslation()(DownloadController)));
const DownloadWithTranslation = inject("storeAppOptions")(observer(withTranslation()(DownloadController)));
const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady, canRequestClose, isDRM, storeEncoding) => {
const onAdvancedOptions = (type, _t, isDocReady, canRequestClose, isDRM) => {
if ($$('.dlg-adv-options.modal-in').length > 0) return;
const api = Common.EditorApi.get();
if (type == Asc.c_oAscAdvancedOptionsID.TXT) {
Common.Notifications.trigger('preloader:close');
Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
const recommendedSettings = advOptions.asc_getRecommendedSettings();
storeEncoding.initOptions({type, advOptions, formatOptions});
storeEncoding.initPages();
storeEncoding.setMode(mode);
storeEncoding.changeEncoding(recommendedSettings.asc_getCodePage());
f7.views.current.router.navigate('/encoding/');
}
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 = [{
text: 'OK',
bold: true,
@ -122,7 +108,6 @@ const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady
buttons: buttons,
cssClass: 'dlg-adv-options'
}).open();
}
};

View file

@ -1,43 +0,0 @@
import React, { Component } from 'react';
import { Device } from '../../../../../common/mobile/utils/device';
import { f7 } from "framework7-react";
import { Encoding } from "../../view/settings/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('.settings-popup', true);
} else {
f7.popover.close('#settings-popover');
}
}
onSaveFormat(mode, valueEncoding) {
const api = Common.EditorApi.get();
this.closeModal();
if(mode === 2) {
const formatOptions = this.props.storeEncoding.formatOptions;
formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding));
api.asc_DownloadAs(formatOptions);
} else {
const type = this.props.storeEncoding.type;
api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(valueEncoding));
}
}
render() {
return (
<Encoding onSaveFormat={this.onSaveFormat} />
);
}
}
export default inject("storeEncoding")(observer(EncodingController));

View file

@ -10,7 +10,6 @@ import {storeTableSettings} from "./tableSettings";
import {storeChartSettings} from "./chartSettings";
import {storeDocumentInfo} from "./documentInfo";
import {storeApplicationSettings} from './applicationSettings';
import {storeEncoding} from "../../../../common/mobile/lib/store/encoding";
import {storeAppOptions} from "./appOptions";
import {storePalette} from "./palette";
import {storeReview} from "./review";
@ -21,7 +20,6 @@ export const stores = {
storeFocusObjects: new storeFocusObjects(),
storeDocumentSettings: new storeDocumentSettings(),
users: new storeUsers(),
storeEncoding: new storeEncoding(),
storeTextSettings: new storeTextSettings(),
storeParagraphSettings: new storeParagraphSettings(),
storeShapeSettings: new storeShapeSettings(),

View file

@ -0,0 +1,136 @@
import React, {Component, useEffect, useState} from '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 PageEncoding = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
const pagesName = props.pagesName;
const pages = props.pages;
const [stateEncoding, setStateEncoding] = useState(props.valueEncoding);
const nameEncoding = pagesName[pages.indexOf(stateEncoding)];
const mode = props.mode;
const changeStateEncoding = value => {
setStateEncoding(value);
}
return (
<View style={props.style} routes={routes}>
<Page>
<Navbar title={_t.textChooseCsvOptions} />
<BlockTitle>{_t.textEncoding}</BlockTitle>
<List>
<ListItem title={nameEncoding} link="/encoding-list/" routeProps={{
stateEncoding,
pages: props.pages,
pagesName: props.pagesName,
changeStateEncoding
}}></ListItem>
</List>
<List className="buttons-list">
{mode === 2 ?
<ListButton className='button-fill button-raised' title={_t.textCancel} onClick={() => props.closeModal()}></ListButton>
: null}
<ListButton className='button-fill button-raised' title={mode === 2 ?_t.textDownload : _t.txtOk} onClick={() => props.onSaveFormat(stateEncoding)}></ListButton>
</List>
</Page>
</View>
)
};
const PageEncodingList = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
const [currentEncoding, changeCurrentEncoding] = useState(props.stateEncoding);
const pages = props.pages;
const pagesName = props.pagesName;
return (
<Page>
<Navbar title={_t.txtDownloadCsv} backLink={_t.textBack} />
<BlockTitle>{_t.textChooseEncoding}</BlockTitle>
<List>
{pagesName.map((name, index) => {
return (
<ListItem radio checked={currentEncoding === pages[index]} title={name} key={index} value={pages[index]} onChange={() => {
changeCurrentEncoding(pages[index]);
props.changeStateEncoding(pages[index]);
f7.views.current.router.back();
}}></ListItem>
)
})}
</List>
</Page>
)
};
class EncodingView extends Component {
constructor(props) {
super(props);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="encoding-popover" className="popover__titled" closeByBackdropClick={false} closeByOutsideClick={false}>
<PageEncoding
inPopover={true}
onSaveFormat={this.props.onSaveFormat}
closeModal={this.props.closeModal}
mode={this.props.mode}
pages={this.props.pages}
pagesName={this.props.pagesName}
valueEncoding={this.props.valueEncoding}
style={{height: '410px'}}
/>
</Popover> :
<Popup className="encoding-popup">
<PageEncoding
onSaveFormat={this.props.onSaveFormat}
closeModal={this.props.closeModal}
mode={this.props.mode}
pages={this.props.pages}
pagesName={this.props.pagesName}
valueEncoding={this.props.valueEncoding}
/>
</Popup>
)
}
}
const routes = [
{
path: '/encoding-list/',
component: PageEncodingList
}
];
const Encoding = props => {
useEffect(() => {
if ( Device.phone )
f7.popup.open('.encoding-popup');
else f7.popover.open('#encoding-popover', "#btn-settings");
return () => {
}
});
return (
<EncodingView
usePopover={!Device.phone}
closeModal={props.closeModal}
onSaveFormat={props.onSaveFormat}
mode={props.mode}
pages={props.pages}
pagesName={props.pagesName}
valueEncoding={props.valueEncoding}
/>
)
};
export {Encoding, PageEncodingList}

View file

@ -1,57 +0,0 @@
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("Settings", { returnObjects: true });
const storeEncoding = props.storeEncoding;
const valueEncoding= storeEncoding.valueEncoding;
const nameEncoding = storeEncoding.nameEncoding;
const mode = storeEncoding.mode;
return (
<Page>
<Navbar title={_t.textChooseTxtOptions} backLink={_t.textBack} />
<BlockTitle>{_t.textEncoding}</BlockTitle>
<List>
<ListItem title={nameEncoding} href="/encoding-list/"></ListItem>
</List>
<List className="buttons-list">
<ListButton className='button-fill button-raised' title={mode === 2 ?_t.textDownload : _t.textOk} onClick={() => props.onSaveFormat(mode, valueEncoding)}></ListButton>
</List>
</Page>
)
}
const PageEncodingList = props => {
const { t } = useTranslation();
const _t = t("Settings", { returnObjects: true });
const storeEncoding = props.storeEncoding;
const valueEncoding = storeEncoding.valueEncoding;
const pages = storeEncoding.pages;
const pagesName = storeEncoding.pagesName;
return (
<Page>
<Navbar title={_t.txtDownloadTxt} 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 Encoding = inject("storeEncoding")(observer(PageEncoding));
const EncodingList = inject("storeEncoding")(observer(PageEncodingList));
export {EncodingList, Encoding}

View file

@ -12,8 +12,6 @@ import ApplicationSettingsController from "../../controller/settings/Application
import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings";
import { MacrosSettings } from "./ApplicationSettings";
import About from '../../../../../common/mobile/lib/view/About';
import EncodingController from '../../controller/settings/Encoding';
import { EncodingList } from '../../view/settings/Encoding';
const routes = [
{
@ -55,14 +53,6 @@ const routes = [
{
path: '/about/',
component: About
},
{
path: '/encoding/',
component: EncodingController
},
{
path: '/encoding-list/',
component: EncodingList
}
];

View file

@ -89,7 +89,6 @@ class EncodingController extends Component {
<Encoding
closeModal={this.closeModal}
mode={this.mode}
formatOptions={this.formatOptions}
onSaveFormat={this.onSaveFormat}
pages={this.pages}
pagesName={this.pagesName}

View file

@ -11,7 +11,6 @@ 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";
@ -23,7 +22,6 @@ export const stores = {
storeSpreadsheetSettings: new storeSpreadsheetSettings(),
storeApplicationSettings: new storeApplicationSettings(),
users: new storeUsers(),
storeEncoding: new storeEncoding(),
sheets: new storeWorksheets(),
storeFunctions: new storeFunctions(),
storeTextSettings: new storeTextSettings(),

View file

@ -126,7 +126,6 @@ class EncodingView extends Component {
onSaveFormat={this.props.onSaveFormat}
closeModal={this.props.closeModal}
mode={this.props.mode}
formatOptions={this.props.formatOptions}
pages={this.props.pages}
pagesName={this.props.pagesName}
namesDelimeter={this.props.namesDelimeter}
@ -141,7 +140,6 @@ class EncodingView extends Component {
onSaveFormat={this.props.onSaveFormat}
closeModal={this.props.closeModal}
mode={this.props.mode}
formatOptions={this.props.formatOptions}
pages={this.props.pages}
pagesName={this.props.pagesName}
namesDelimeter={this.props.namesDelimeter}
@ -181,7 +179,6 @@ const Encoding = props => {
closeModal={props.closeModal}
onSaveFormat={props.onSaveFormat}
mode={props.mode}
formatOptions={props.formatOptions}
pages={props.pages}
pagesName={props.pagesName}
namesDelimeter={props.namesDelimeter}

View file

@ -65,7 +65,7 @@ const routes = [
];
const SettingsList = inject("storeAppOptions", "storeEncoding")(observer(props => {
const SettingsList = inject("storeAppOptions")(observer(props => {
const { t } = useTranslation();
const _t = t('View.Settings', {returnObjects: true});
const navbar = <Navbar title={_t.textSettings}>