Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Add encoding options

Browse source
This commit is contained in:
SergeyEzhin 2021-07-14 20:42:05 +03:00
parent de1ac14073
commit e5b87b9aa6
8 changed files with 256 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/documenteditor/mobile/src/store/encoding.js → apps/common/mobile/lib/store/encoding.js
View file

@ -12,7 +12,13 @@ export class storeEncoding {
valueEncoding: observable,
nameEncoding: observable,
initPages: action,
changeEncoding: action
changeEncoding: action,
valueDelimeter: observable,
nameDelimeter: observable,
changeDelimeter: action,
namesDelimeter: observable,
valuesDelimeter: observable,
initNamesDelimeter: action
});
}
@ -23,6 +29,10 @@ export class storeEncoding {
formatOptions;
valueEncoding;
nameEncoding;
namesDelimeter = [];
valuesDelimeter = [4, 2, 3, 1, 5];
nameDelimeter;
valueDelimeter;
initOptions ({type, advOptions, formatOptions}) {
this.type= type;
@ -37,8 +47,17 @@ export class storeEncoding {
}
}
initNamesDelimeter(names) {
this.namesDelimeter = names;
}
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;
}
}

2
apps/documenteditor/mobile/src/store/mainStore.js
View file

@ -10,7 +10,7 @@ import {storeTableSettings} from "./tableSettings";
import {storeChartSettings} from "./chartSettings";
import {storeDocumentInfo} from "./documentInfo";
import {storeApplicationSettings} from './applicationSettings';
import {storeEncoding} from "./encoding";
import {storeEncoding} from "../../../../common/mobile/lib/store/encoding";
import {storeAppOptions} from "./appOptions";
import {storePalette} from "./palette";
import {storeReview} from "./review";

11
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -513,7 +513,16 @@
"textValues": "Values",
"textNoTextFound": "Text not found",
"textReplaceAll": "Replace All",
"textCollaboration": "Collaboration"
"textCollaboration": "Collaboration",
"textChooseCsvOptions": "Choose CSV Options",
"txtDownloadCsv": "Download CSV",
"textDelimeter": "Delimeter",
"textEncoding": "Encoding",
"textChooseEncoding": "Choose Encoding",
"textChooseDelimeter": "Choose Delimeter",
"txtComma": "Comma",
"txtSemicolon": "Semicolon",
"txtColon": "Colon"
}
},
"Statusbar": {

157
apps/spreadsheeteditor/mobile/src/controller/settings/Download.jsx
View file

@ -3,6 +3,7 @@ import Download from "../../view/settings/Download";
import { Device } from '../../../../../common/mobile/utils/device';
import { withTranslation, useTranslation } from 'react-i18next';
import { f7 } from 'framework7-react';
import { observer, inject } from "mobx-react";
class DownloadController extends Component {
constructor(props) {
@ -17,11 +18,20 @@ class DownloadController extends Component {
if (format) {
if (format == Asc.c_oAscFileType.CSV) {
const advOptions = api.asc_getAdvancedOptions();
const recommendedSettings = advOptions.asc_getRecommendedSettings();
f7.dialog.confirm(
_t.warnDownloadAs,
_t.notcriticalErrorTitle,
function () {
onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t, true);
() => {
this.props.storeEncoding.initOptions({type: Asc.c_oAscAdvancedOptionsID.CSV, advOptions, formatOptions: new Asc.asc_CDownloadOptions(format)});
this.props.storeEncoding.initPages();
this.props.storeEncoding.initNamesDelimeter([_t.txtComma, _t.txtSemicolon, _t.txtColon, _t.txtTab, _t.txtSpace]);
this.props.storeEncoding.changeEncoding(recommendedSettings.asc_getCodePage());
this.props.storeEncoding.changeDelimeter(recommendedSettings && recommendedSettings.asc_getDelimiter() ? recommendedSettings.asc_getDelimiter() : 4);
f7.views.current.router.navigate('/encoding/');
// onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t, true);
}
)
} else {
@ -37,92 +47,93 @@ class DownloadController extends Component {
}
}
const DownloadWithTranslation = withTranslation()(DownloadController);
const DownloadWithTranslation = inject("storeEncoding")(observer(withTranslation()(DownloadController)));
const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, isDocReady, canRequestClose, isDRM) => {
const api = Common.EditorApi.get();
if (type == Asc.c_oAscAdvancedOptionsID.CSV) {
let picker;
const pages = [];
const pagesName = [];
// if (type == Asc.c_oAscAdvancedOptionsID.CSV) {
// let picker;
// const pages = [];
// const pagesName = [];
for (let page of advOptions.asc_getCodePages()) {
pages.push(page.asc_getCodePage());
pagesName.push(page.asc_getCodePageName());
}
// 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);
// Common.Notifications.trigger('preloader:close');
// Common.Notifications.trigger('preloader:endAction', Asc.c_oAscAsyncActionType['BlockInteraction'], -256, true);
const buttons = [];
// const buttons = [];
if (mode === 2) {
buttons.push({
text: _t.textCancel
});
}
// 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;
// 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 (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);
}
}
});
// 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 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();
// 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
],
});
});
// 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 if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
// } 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 = [{

35
apps/spreadsheeteditor/mobile/src/controller/settings/Encoding.jsx Normal file
View file

@ -0,0 +1,35 @@
import React, { Component } from 'react';
import { Device } from '../../../../../common/mobile/utils/device';
import { f7 } from "framework7-react";
import { Encoding } from "../../view/settings/Encoding";
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(formatOptions, valueEncoding, valueDelimeter) {
const api = Common.EditorApi.get();
this.closeModal();
formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(valueEncoding, valueDelimeter));
api.asc_DownloadAs(formatOptions);
}
render() {
return (
<Encoding onSaveFormat={this.onSaveFormat} />
);
}
}
export default EncodingController;

2
apps/spreadsheeteditor/mobile/src/store/mainStore.js
View file

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

90
apps/spreadsheeteditor/mobile/src/view/settings/Encoding.jsx Normal file
View file

@ -0,0 +1,90 @@
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 formatOptions = storeEncoding.formatOptions;
return (
<Page>
<Navbar title={_t.textChooseCsvOptions} backLink={_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={_t.textDownload} onClick={() => props.onSaveFormat(formatOptions, 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}

14
apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
View file

@ -12,6 +12,8 @@ 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 = [
{
@ -61,6 +63,18 @@ const routes = [
{
path: '/about/',
component: About
},
{
path: '/encoding/',
component: EncodingController
},
{
path: '/encoding-list/',
component: EncodingList
},
{
path: '/delimeter-list/',
component: DelimeterList
}
];