[SSE mobile] Changed encoding options
This commit is contained in:
SergeyEzhin
parent
850359ca6d
commit
116944b181
|
|
@ -2,44 +2,104 @@ 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";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
|
||||
class EncodingController extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { t } = this.props;
|
||||
const _t = t("View.Settings", { returnObjects: true });
|
||||
|
||||
this.valuesDelimeter = [4, 2, 3, 1, 5];
|
||||
this.namesDelimeter = [_t.txtComma, _t.txtSemicolon, _t.txtColon, _t.txtTab, _t.txtSpace];
|
||||
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.valueDelimeter = recommendedSettings && recommendedSettings.asc_getDelimiter() ? recommendedSettings.asc_getDelimiter() : 4;
|
||||
|
||||
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', false);
|
||||
f7.sheet.close('.encoding-popup', true);
|
||||
} else {
|
||||
f7.popover.close('#encoding-popover');
|
||||
}
|
||||
|
||||
this.setState({isOpen: false});
|
||||
}
|
||||
|
||||
async onSaveFormat(mode, valueEncoding, valueDelimeter) {
|
||||
onSaveFormat(valueEncoding, valueDelimeter) {
|
||||
const api = Common.EditorApi.get();
|
||||
const storeEncoding = this.props.storeEncoding;
|
||||
|
||||
await this.closeModal();
|
||||
this.closeModal();
|
||||
|
||||
if(mode === 2) {
|
||||
const formatOptions = storeEncoding.formatOptions;
|
||||
formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
|
||||
api.asc_DownloadAs(formatOptions);
|
||||
if(this.mode === 2) {
|
||||
this.formatOptions && this.formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
|
||||
api.asc_DownloadAs(this.formatOptions);
|
||||
} else {
|
||||
storeEncoding.setMode(1);
|
||||
const type = storeEncoding.type;
|
||||
api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
|
||||
api.asc_setAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Encoding routes={this.props.routes} onSaveFormat={this.onSaveFormat} />
|
||||
this.state.isOpen &&
|
||||
<Encoding
|
||||
closeModal={this.closeModal}
|
||||
mode={this.mode}
|
||||
formatOptions={this.formatOptions}
|
||||
onSaveFormat={this.onSaveFormat}
|
||||
pages={this.pages}
|
||||
pagesName={this.pagesName}
|
||||
namesDelimeter={this.namesDelimeter}
|
||||
valueEncoding={this.valueEncoding}
|
||||
valueDelimeter={this.valueDelimeter}
|
||||
valuesDelimeter={this.valuesDelimeter}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default inject("storeEncoding")(observer(EncodingController));
|
||||
export default withTranslation()(EncodingController);
|
||||
|
|
@ -18,6 +18,7 @@ import ErrorController from "./Error";
|
|||
import app from "../page/app";
|
||||
import About from "../../../../common/mobile/lib/view/About";
|
||||
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
|
||||
import EncodingController from "./Encoding";
|
||||
|
||||
@inject(
|
||||
"storeAppOptions",
|
||||
|
|
@ -27,9 +28,8 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
|
|||
"storeChartSettings",
|
||||
"storeSpreadsheetSettings",
|
||||
"storeSpreadsheetInfo",
|
||||
"storeApplicationSettings",
|
||||
"storeEncoding"
|
||||
)
|
||||
"storeApplicationSettings"
|
||||
)
|
||||
class MainController extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -319,15 +319,15 @@ class MainController extends Component {
|
|||
this.props.storeSpreadsheetSettings.addSchemes(schemes);
|
||||
});
|
||||
|
||||
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("View.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;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -776,6 +776,7 @@ class MainController extends Component {
|
|||
<EditCommentController />
|
||||
<ViewCommentsController />
|
||||
<PluginsController />
|
||||
<EncodingController />
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ 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) {
|
||||
|
|
@ -27,17 +26,13 @@ class DownloadController extends Component {
|
|||
|
||||
if (format) {
|
||||
if (format == Asc.c_oAscFileType.CSV) {
|
||||
const advOptions = api.asc_getAdvancedOptions();
|
||||
const storeEncoding = this.props.storeEncoding;
|
||||
|
||||
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');
|
||||
() => {
|
||||
const advOptions = api.asc_getAdvancedOptions();
|
||||
this.closeModal();
|
||||
Common.Notifications.trigger('openEncoding', Asc.c_oAscAdvancedOptionsID.CSV, advOptions, 2, new Asc.asc_CDownloadOptions(format));
|
||||
}
|
||||
)
|
||||
} else {
|
||||
|
|
@ -54,149 +49,51 @@ 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) => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (type == Asc.c_oAscAdvancedOptionsID.CSV) {
|
||||
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.initNamesDelimeter([_t.txtComma, _t.txtSemicolon, _t.txtColon, _t.txtTab, _t.txtSpace]);
|
||||
storeEncoding.changeEncoding(recommendedSettings.asc_getCodePage());
|
||||
storeEncoding.changeDelimeter(recommendedSettings && recommendedSettings.asc_getDelimiter() ? recommendedSettings.asc_getDelimiter() : 4);
|
||||
|
||||
// if(mode === 2) {
|
||||
// f7.views.current.router.navigate('/encoding/');
|
||||
// }
|
||||
}
|
||||
// let picker;
|
||||
// const pages = [];
|
||||
// const pagesName = [];
|
||||
|
||||
// for (let page of advOptions.asc_getCodePages()) {
|
||||
// pages.push(page.asc_getCodePage());
|
||||
// pagesName.push(page.asc_getCodePageName());
|
||||
// }
|
||||
|
||||
// Common.Notifications.trigger('preloader:close');
|
||||
// Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
|
||||
|
||||
// const buttons = [];
|
||||
|
||||
// if (mode === 2) {
|
||||
// buttons.push({
|
||||
// text: _t.textCancel
|
||||
// });
|
||||
// }
|
||||
|
||||
// buttons.push({
|
||||
// text: 'OK',
|
||||
// bold: true,
|
||||
// onClick: function() {
|
||||
// let encoding = picker.cols[0].value,
|
||||
// delimiter = picker.cols[1].value;
|
||||
|
||||
// if (mode == 2) {
|
||||
// formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding, delimiter));
|
||||
// api.asc_DownloadAs(formatOptions);
|
||||
// } else {
|
||||
// api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding, delimiter));
|
||||
// }
|
||||
|
||||
// if (!isDocReady) {
|
||||
// Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
// const dialog = f7.dialog.create({
|
||||
// title: _t.advCSVOptions,
|
||||
// text: '',
|
||||
// content:
|
||||
// '<div class="content-block small-picker" style="padding: 0; margin: 20px 0 0;">' +
|
||||
// '<div class="row">' +
|
||||
// '<div class="col-50" style="text-align: left;">' + _t.txtEncoding + '</div>' +
|
||||
// '<div class="col-50" style="text-align: right;">' + _t.txtDelimiter + '</div>' +
|
||||
// '</div>' +
|
||||
// '<div id="txt-encoding" class="small"></div>' +
|
||||
// '</div>',
|
||||
// buttons: buttons,
|
||||
// cssClass: 'dlg-adv-options'
|
||||
// }).open();
|
||||
|
||||
// const recommendedSettings = advOptions.asc_getRecommendedSettings();
|
||||
|
||||
// dialog.on('opened', () => {
|
||||
// picker = f7.picker.create({
|
||||
// containerEl: document.getElementById('txt-encoding'),
|
||||
// cols: [{
|
||||
// textAlign: 'left',
|
||||
// values: pages,
|
||||
// displayValues: pagesName
|
||||
// },{
|
||||
// textAlign: 'right',
|
||||
// width: 120,
|
||||
// values: [4, 2, 3, 1, 5],
|
||||
// displayValues: [',', ';', ':', _t.txtTab, _t.txtSpace]
|
||||
// }],
|
||||
// toolbar: false,
|
||||
// rotateEffect: true,
|
||||
// value: [
|
||||
// recommendedSettings && recommendedSettings.asc_getCodePage(),
|
||||
// (recommendedSettings && recommendedSettings.asc_getDelimiter()) ? recommendedSettings.asc_getDelimiter() : 4
|
||||
// ],
|
||||
// });
|
||||
// });
|
||||
|
||||
// } else
|
||||
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,
|
||||
onClick: function () {
|
||||
const password = document.getElementById('modal-password').value;
|
||||
api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password));
|
||||
if (!isDocReady) {
|
||||
Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
|
||||
}
|
||||
Common.Notifications.trigger('preloader:close');
|
||||
Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
|
||||
const buttons = [{
|
||||
text: 'OK',
|
||||
bold: true,
|
||||
onClick: function () {
|
||||
const password = document.getElementById('modal-password').value;
|
||||
api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password));
|
||||
if (!isDocReady) {
|
||||
Common.Notifications.trigger('preloader:beginAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256);
|
||||
}
|
||||
}];
|
||||
|
||||
if(isDRM) {
|
||||
f7.dialog.create({
|
||||
text: _t.txtIncorrectPwd,
|
||||
buttons : [{
|
||||
text: 'OK',
|
||||
bold: true,
|
||||
}]
|
||||
}).open();
|
||||
}
|
||||
}];
|
||||
|
||||
if (canRequestClose)
|
||||
buttons.push({
|
||||
text: _t.closeButtonText,
|
||||
onClick: function () {
|
||||
Common.Gateway.requestClose();
|
||||
}
|
||||
});
|
||||
|
||||
if(isDRM) {
|
||||
f7.dialog.create({
|
||||
title: _t.advDRMOptions,
|
||||
text: _t.textOpenFile,
|
||||
content: Device.ios ?
|
||||
'<div class="input-field"><input type="password" class="modal-text-input" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>' : '<div class="input-field"><div class="inputs-list list inline-labels"><ul><li><div class="item-content item-input"><div class="item-inner"><div class="item-input-wrap"><input type="password" name="modal-password" id="modal-password" placeholder=' + _t.advDRMPassword + '></div></div></div></li></ul></div></div>',
|
||||
buttons: buttons
|
||||
text: _t.txtIncorrectPwd,
|
||||
buttons : [{
|
||||
text: 'OK',
|
||||
bold: true,
|
||||
}]
|
||||
}).open();
|
||||
}
|
||||
|
||||
if (canRequestClose)
|
||||
buttons.push({
|
||||
text: _t.closeButtonText,
|
||||
onClick: function () {
|
||||
Common.Gateway.requestClose();
|
||||
}
|
||||
});
|
||||
|
||||
f7.dialog.create({
|
||||
title: _t.advDRMOptions,
|
||||
text: _t.textOpenFile,
|
||||
content: Device.ios ?
|
||||
'<div class="input-field"><input type="password" class="modal-text-input" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>' : '<div class="input-field"><div class="inputs-list list inline-labels"><ul><li><div class="item-content item-input"><div class="item-inner"><div class="item-input-wrap"><input type="password" name="modal-password" id="modal-password" placeholder=' + _t.advDRMPassword + '></div></div></div></li></ul></div></div>',
|
||||
buttons: buttons
|
||||
}).open();
|
||||
|
||||
};
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -1,44 +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', false);
|
||||
} else {
|
||||
f7.popover.close('#settings-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));
|
||||
|
|
@ -16,20 +16,6 @@ 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";
|
||||
import {PageEncodingList, PageDelimeterList} from '../view/Encoding';
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/encoding-list/',
|
||||
component: PageEncodingList
|
||||
},
|
||||
{
|
||||
path: '/delimeter-list/',
|
||||
component: PageDelimeterList
|
||||
}
|
||||
];
|
||||
|
||||
class MainPage extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -39,8 +25,7 @@ class MainPage extends Component {
|
|||
addOptionsVisible: false,
|
||||
addShowOptions: null,
|
||||
settingsVisible: false,
|
||||
collaborationVisible: false,
|
||||
encodingVisible: false
|
||||
collaborationVisible: false
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -57,8 +42,6 @@ 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};
|
||||
});
|
||||
|
|
@ -77,8 +60,6 @@ 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};
|
||||
});
|
||||
|
|
@ -132,11 +113,6 @@ class MainPage extends Component {
|
|||
!this.state.collaborationVisible ? null :
|
||||
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
|
||||
}
|
||||
{
|
||||
!this.state.encodingVisible && this.props.storeEncoding.mode ? null :
|
||||
<EncodingController routes={routes} openOptions={this.handleClickToOpenOeptions}
|
||||
onclosed={this.handleOptionsViewClosed.bind(this, 'encoding')} />
|
||||
}
|
||||
|
||||
<FilterOptionsController />
|
||||
|
||||
|
|
@ -149,4 +125,4 @@ class MainPage extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default inject("storeAppOptions", "storeEncoding")(observer(MainPage));
|
||||
export default inject("storeAppOptions")(observer(MainPage));
|
||||
|
|
@ -1,51 +1,69 @@
|
|||
import React, {Component, useEffect} from 'react';
|
||||
import { observer, inject } from "mobx-react";
|
||||
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 = inject("storeEncoding")(observer(props => {
|
||||
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 mode = storeEncoding.mode;
|
||||
const routes = props.routes;
|
||||
const pagesName = props.pagesName;
|
||||
const pages = props.pages;
|
||||
const valuesDelimeter = props.valuesDelimeter;
|
||||
const namesDelimeter = props.namesDelimeter;
|
||||
const [stateEncoding, setStateEncoding] = useState(props.valueEncoding);
|
||||
const [stateDelimeter, setStateDelimeter] = useState(props.valueDelimeter);
|
||||
const nameEncoding = pagesName[pages.indexOf(stateEncoding)];
|
||||
const nameDelimeter = namesDelimeter[valuesDelimeter.indexOf(stateDelimeter)];
|
||||
const mode = props.mode;
|
||||
|
||||
const changeStateEncoding = value => {
|
||||
setStateEncoding(value);
|
||||
}
|
||||
|
||||
const changeStateDelimeter = value => {
|
||||
setStateDelimeter(value);
|
||||
}
|
||||
|
||||
return (
|
||||
<View routes={routes}>
|
||||
<View style={props.style} routes={routes}>
|
||||
<Page>
|
||||
<Navbar title={_t.textChooseCsvOptions} />
|
||||
<BlockTitle>{_t.textDelimeter}</BlockTitle>
|
||||
<List>
|
||||
<ListItem title={nameDelimeter} link="/delimeter-list/"></ListItem>
|
||||
<ListItem title={nameDelimeter} link="/delimeter-list/" routeProps={{
|
||||
stateDelimeter,
|
||||
namesDelimeter: props.namesDelimeter,
|
||||
valuesDelimeter: props.valuesDelimeter,
|
||||
changeStateDelimeter
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<BlockTitle>{_t.textEncoding}</BlockTitle>
|
||||
<List>
|
||||
<ListItem title={nameEncoding} link="/encoding-list/"></ListItem>
|
||||
<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}></ListButton>
|
||||
<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(mode, valueEncoding, valueDelimeter)}></ListButton>
|
||||
<ListButton className='button-fill button-raised' title={mode === 2 ?_t.textDownload : _t.txtOk} onClick={() => props.onSaveFormat(stateEncoding, stateDelimeter)}></ListButton>
|
||||
</List>
|
||||
</Page>
|
||||
</View>
|
||||
|
||||
)
|
||||
}));
|
||||
};
|
||||
|
||||
const PageEncodingList = inject("storeEncoding")(observer(props => {
|
||||
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;
|
||||
const [currentEncoding, changeCurrentEncoding] = useState(props.stateEncoding);
|
||||
const pages = props.pages;
|
||||
const pagesName = props.pagesName;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
|
@ -54,8 +72,9 @@ const PageEncodingList = inject("storeEncoding")(observer(props => {
|
|||
<List>
|
||||
{pagesName.map((name, index) => {
|
||||
return (
|
||||
<ListItem radio checked={valueEncoding === pages[index]} title={name} key={index} value={pages[index]} onChange={() => {
|
||||
storeEncoding.changeEncoding(pages[index]);
|
||||
<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>
|
||||
)
|
||||
|
|
@ -63,15 +82,14 @@ const PageEncodingList = inject("storeEncoding")(observer(props => {
|
|||
</List>
|
||||
</Page>
|
||||
)
|
||||
}));
|
||||
};
|
||||
|
||||
const PageDelimeterList = inject("storeEncoding")(observer(props => {
|
||||
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;
|
||||
const [currentDelimeter, changeCurrentDelimeter] = useState(props.stateDelimeter);
|
||||
const namesDelimeter = props.namesDelimeter;
|
||||
const valuesDelimeter = props.valuesDelimeter;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
|
@ -80,8 +98,9 @@ const PageDelimeterList = inject("storeEncoding")(observer(props => {
|
|||
<List>
|
||||
{namesDelimeter.map((name, index) => {
|
||||
return (
|
||||
<ListItem radio checked={valueDelimeter === valuesDelimeter[index]} title={name} key={index} value={valuesDelimeter[index]} onChange={() => {
|
||||
storeEncoding.changeDelimeter(valuesDelimeter[index]);
|
||||
<ListItem radio checked={currentDelimeter === valuesDelimeter[index]} title={name} key={index} value={valuesDelimeter[index]} onChange={() => {
|
||||
changeCurrentDelimeter(valuesDelimeter[index]);
|
||||
props.changeStateDelimeter(valuesDelimeter[index]);
|
||||
f7.views.current.router.back();
|
||||
}}></ListItem>
|
||||
)
|
||||
|
|
@ -89,51 +108,88 @@ const PageDelimeterList = inject("storeEncoding")(observer(props => {
|
|||
</List>
|
||||
</Page>
|
||||
)
|
||||
}));
|
||||
};
|
||||
|
||||
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} routes={this.props.routes}
|
||||
onSaveFormat={this.props.onSaveFormat} />
|
||||
<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}
|
||||
formatOptions={this.props.formatOptions}
|
||||
pages={this.props.pages}
|
||||
pagesName={this.props.pagesName}
|
||||
namesDelimeter={this.props.namesDelimeter}
|
||||
valueEncoding={this.props.valueEncoding}
|
||||
valueDelimeter={this.props.valueDelimeter}
|
||||
valuesDelimeter={this.props.valuesDelimeter}
|
||||
style={{height: '410px'}}
|
||||
/>
|
||||
</Popover> :
|
||||
<Popup className="encoding-popup" onPopupClosed={() => this.props.onclosed()}>
|
||||
<PageEncoding onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} routes={this.props.routes}
|
||||
onSaveFormat={this.props.onSaveFormat} />
|
||||
<Popup className="encoding-popup">
|
||||
<PageEncoding
|
||||
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}
|
||||
valueEncoding={this.props.valueEncoding}
|
||||
valueDelimeter={this.props.valueDelimeter}
|
||||
valuesDelimeter={this.props.valuesDelimeter}
|
||||
/>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/encoding-list/',
|
||||
component: PageEncodingList
|
||||
},
|
||||
{
|
||||
path: '/delimeter-list/',
|
||||
component: PageDelimeterList
|
||||
}
|
||||
];
|
||||
|
||||
const Encoding = props => {
|
||||
useEffect(() => {
|
||||
if ( Device.phone )
|
||||
f7.popup.open('.encoding-popup');
|
||||
else f7.popover.open('#encoding-popover');
|
||||
else f7.popover.open('#encoding-popover', "#btn-settings");
|
||||
|
||||
return () => {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const onviewclosed = () => {
|
||||
if ( props.onclosed )
|
||||
props.onclosed();
|
||||
};
|
||||
|
||||
return <EncodingView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} onSaveFormat={props.onSaveFormat} routes={props.routes} />
|
||||
return (
|
||||
<EncodingView
|
||||
usePopover={!Device.phone}
|
||||
closeModal={props.closeModal}
|
||||
onSaveFormat={props.onSaveFormat}
|
||||
mode={props.mode}
|
||||
formatOptions={props.formatOptions}
|
||||
pages={props.pages}
|
||||
pagesName={props.pagesName}
|
||||
namesDelimeter={props.namesDelimeter}
|
||||
valueEncoding={props.valueEncoding}
|
||||
valueDelimeter={props.valueDelimeter}
|
||||
valuesDelimeter={props.valuesDelimeter}
|
||||
/>
|
||||
)
|
||||
};
|
||||
|
||||
export {Encoding, PageEncodingList, PageDelimeterList}
|
||||
|
|
@ -1,90 +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("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 (
|
||||
<Page>
|
||||
<Navbar title={_t.textChooseCsvOptions} backLink={mode === 2 ? _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={mode === 2 ?_t.textDownload : _t.txtOk} onClick={() => props.onSaveFormat(mode, 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}
|
||||
|
|
@ -12,8 +12,6 @@ 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 = [
|
||||
{
|
||||
|
|
@ -63,19 +61,7 @@ const routes = [
|
|||
{
|
||||
path: '/about/',
|
||||
component: About
|
||||
},
|
||||
// {
|
||||
// path: '/encoding/',
|
||||
// component: EncodingController
|
||||
// },
|
||||
// {
|
||||
// path: '/encoding-list/',
|
||||
// component: EncodingList
|
||||
// },
|
||||
// {
|
||||
// path: '/delimeter-list/',
|
||||
// component: DelimeterList
|
||||
// }
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -138,7 +124,6 @@ const SettingsList = inject("storeAppOptions", "storeEncoding")(observer(props =
|
|||
}
|
||||
|
||||
return (
|
||||
// onClick={onoptionclick.bind(this, "/download/")}
|
||||
<View style={props.style} stackPages={true} routes={routes}>
|
||||
<Page>
|
||||
{navbar}
|
||||
|
|
@ -161,7 +146,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="/download/" routeProps={{openOptions: props.openOptions}}>
|
||||
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
|
||||
<Icon slot="media" icon="icon-download"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPrint} onClick={onPrint}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue