Merge branch 'feature/mobile-apps-on-reactjs-new-test' into feature/mobile-apps-on-reactjs

apps/documenteditor/mobile/locale/en.json

@@ -20,7 +20,16 @@
     "textTop": "Top",
     "textBottom": "Bottom",
     "textLeft": "Left",
-    "textRight": "Right"
+    "textRight": "Right",
+    "textDocumentTitle": "Document Title",
+    "textOwner": "Owner",
+    "textUploaded": "Uploaded",
+    "textStatistic": "Statistic",
+    "textLastModifiedBy": "Last Modified By",
+    "textLastModified": "Last Modified",
+    "textApplication": "Application",
+    "textLoading": "Loading...",
+    "textAuthor": "Author"
   },
   "Collaboration": {
     "textEditUser": "Users who are editing the file:"

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -3,7 +3,7 @@ import React, {Component} from 'react'
 import {inject} from "mobx-react";
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
-@inject("storeDocumentSettings", "storeFocusObjects", "storeTextSettings", "storeParagraphSettings", "storeTableSettings")
+@inject("storeDocumentSettings", "storeFocusObjects", "storeTextSettings", "storeParagraphSettings", "storeTableSettings", "storeDocumentInfo")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -87,6 +87,12 @@ class MainController extends Component {
                 this.api.asc_setDocInfo(docInfo);
                 this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId);
 
+                // Document Info
+
+                const storeDocumentInfo = this.props.storeDocumentInfo;
+
+                storeDocumentInfo.setDataDoc(data.doc);
+
                 // Common.SharedSettings.set('document', data.doc);
 
                 // if (data.doc) {
@@ -238,6 +244,31 @@ class MainController extends Component {
             storeTableSettings.initTableTemplates(templates);
         });
 
+        // Document Info
+
+        const storeDocumentInfo = this.props.storeDocumentInfo;
+
+        this.api.asc_registerCallback("asc_onGetDocInfoStart", () => {
+          console.log("Start");
+          storeDocumentInfo.switchIsLoaded(false);
+        });
+
+        this.api.asc_registerCallback("asc_onGetDocInfoStop", () => {
+          console.log("Stop");
+          storeDocumentInfo.switchIsLoaded(true);
+        });
+
+        this.api.asc_registerCallback("asc_onDocInfo", (obj) => {
+          storeDocumentInfo.changeCount(obj);
+        });
+
+        this.api.asc_registerCallback('asc_onGetDocInfoEnd', () => {
+          console.log('End');
+          storeDocumentInfo.switchIsLoaded(true);
+        });
+
+        // me.api.asc_registerCallback('asc_onDocumentName',       _.bind(me.onApiDocumentName, me));
+
     }
 
     render() {

apps/documenteditor/mobile/src/controller/settings/DocumentInfo.jsx

@@ -0,0 +1,77 @@
+import React, { Component } from "react";
+import DocumentInfo from "../../view/settings/DocumentInfo";
+
+class DocumentInfoController extends Component {
+    constructor(props) {
+        super(props);
+        this.docProps = this.getDocProps();
+        this.getModified = this.getModified();
+        this.getModifiedBy = this.getModifiedBy();
+        this.getCreators = this.getCreators();
+    }
+
+    getDocProps() {
+        const api = Common.EditorApi.get();
+        return api.asc_getCoreProps();
+    }
+
+    getAppProps() {
+        const api = Common.EditorApi.get();
+        const appProps = api.asc_getAppProps();
+
+        if (appProps) {
+            let appName =
+                (appProps.asc_getApplication() || "") +
+                (appProps.asc_getAppVersion() ? " " : "") +
+                (appProps.asc_getAppVersion() || "");
+            return appName;
+        }
+    }
+
+    getModified() {
+        let valueModified = this.docProps.asc_getModified();
+
+        if (valueModified) {
+            return (
+                valueModified.toLocaleString('en', {
+                    year: "numeric",
+                    month: "2-digit",
+                    day: "2-digit",
+                }) +
+                " " +
+                valueModified.toLocaleTimeString('en', { timeStyle: "short" })
+            );
+        }
+    }
+
+    getModifiedBy() {
+        let valueModifiedBy = this.docProps.asc_getLastModifiedBy();
+
+        if (valueModifiedBy) {
+            return Common.Utils.UserInfoParser.getParsedName(valueModifiedBy);
+        }
+    }
+
+    getCreators() {
+        return this.docProps.asc_getCreator();
+    }
+
+    componentDidMount() {
+        const api = Common.EditorApi.get();
+        api.startGetDocInfo();
+    }
+
+    render() {
+        return (
+            <DocumentInfo
+                getAppProps={this.getAppProps}
+                getModified={this.getModified}
+                getModifiedBy={this.getModifiedBy}
+                getCreators={this.getCreators} 
+            />
+        );
+    }
+}
+
+
+export default DocumentInfoController;

apps/documenteditor/mobile/src/store/documentInfo.js

@@ -0,0 +1,36 @@
+import { action, observable } from "mobx";
+
+export class storeDocumentInfo {
+  @observable infoObj = {
+    pageCount: 0,
+    wordsCount: 0,
+    paragraphCount: 0,
+    symbolsCount: 0,
+    symbolsWSCount: 0,
+  };
+  @observable isLoaded = false;
+  @observable dataDoc;
+
+  @action switchIsLoaded(value) {
+    this.isLoaded = value;
+  }
+
+  @action changeCount(obj) {
+    if (obj) {
+      if (obj.get_PageCount() > -1)
+        this.infoObj.pageCount = obj.get_PageCount();
+      if (obj.get_WordsCount() > -1)
+        this.infoObj.wordsCount = obj.get_WordsCount();
+      if (obj.get_ParagraphCount() > -1)
+        this.infoObj.paragraphCount = obj.get_ParagraphCount();
+      if (obj.get_SymbolsCount() > -1)
+        this.infoObj.symbolsCount = obj.get_SymbolsCount();
+      if (obj.get_SymbolsWSCount() > -1)
+        this.infoObj.symbolsWSCount = obj.get_SymbolsWSCount();
+    }
+  }
+
+  @action setDataDoc(obj) {
+    this.dataDoc = obj;
+  }
+}

apps/documenteditor/mobile/src/store/mainStore.js

@@ -8,6 +8,7 @@ import {storeShapeSettings} from "./shapeSettings";
 import {storeImageSettings} from "./imageSettings";
 import {storeTableSettings} from "./tableSettings";
 import {storeChartSettings} from "./chartSettings";
+import {storeDocumentInfo} from "./documentInfo";
 
 export const stores = {
     storeFocusObjects: new storeFocusObjects(),
@@ -18,6 +19,7 @@ export const stores = {
     storeShapeSettings: new storeShapeSettings(),
     storeChartSettings: new storeChartSettings(),
     storeImageSettings: new storeImageSettings(),
-    storeTableSettings: new storeTableSettings()
+    storeTableSettings: new storeTableSettings(),
+    storeDocumentInfo: new storeDocumentInfo()
 };
 

apps/documenteditor/mobile/src/view/settings/DocumentInfo.jsx

@@ -0,0 +1,87 @@
+import React, {Fragment} from "react";
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageDocumentInfo = (props) => {
+    const { t } = useTranslation();
+    const _t = t("Settings", { returnObjects: true });
+    const storeInfo = props.storeDocumentInfo;
+    const dataApp = props.getAppProps();
+    const dataModified = props.getModified;
+    const dataModifiedBy = props.getModifiedBy;
+    const creators = props.getCreators;
+    // console.log(creators);
+    const {
+        pageCount,
+        paragraphCount,
+        symbolsCount,
+        symbolsWSCount,
+        wordsCount,
+    } = storeInfo.infoObj;
+    const dataDoc = JSON.parse(JSON.stringify(storeInfo.dataDoc));
+    const isLoaded = storeInfo.isLoaded;
+    // console.log(pageCount, paragraphCount, symbolsCount, symbolsWSCount, wordsCount);
+  
+    return (
+        <Page>
+            <Navbar title={_t.textDocumentInfo} backLink={_t.textBack} />
+            <BlockTitle>{_t.textDocumentTitle}</BlockTitle>
+            <List>
+                <ListItem title={dataDoc.title}></ListItem>
+            </List>
+            <BlockTitle>{_t.textOwner}</BlockTitle>
+            <List>
+                <ListItem title={dataDoc.info.author}></ListItem>
+            </List>
+            <BlockTitle>{_t.textUploaded}</BlockTitle>
+            <List>
+                <ListItem title={dataDoc.info.created}></ListItem>
+            </List>
+            <BlockTitle>{_t.textStatistic}</BlockTitle>
+            <List> 
+                <ListItem title="Pages" after={isLoaded ? String(pageCount) : _t.textLoading}></ListItem>
+                <ListItem title="Paragraphs" after={isLoaded ? String(paragraphCount) : _t.textLoading}></ListItem>
+                <ListItem title="Words" after={isLoaded ? String(wordsCount) : _t.textLoading}></ListItem>
+                <ListItem title="Symbols" after={isLoaded ? String(symbolsCount) : _t.textLoading}></ListItem>
+                <ListItem title="Spaces" after={isLoaded ? String(symbolsWSCount) : _t.textLoading}></ListItem>
+            </List>
+            {dataModified && dataModifiedBy ? (
+                <Fragment>
+                    <BlockTitle>{_t.textLastModified}</BlockTitle>
+                    <List>
+                        <ListItem title={dataModified}></ListItem>
+                    </List>
+                    <BlockTitle>{_t.textLastModifiedBy}</BlockTitle>
+                    <List>
+                        <ListItem title={dataModifiedBy}></ListItem>
+                    </List>
+                </Fragment>
+            ) : null}
+            {dataApp ? (
+                <Fragment>
+                    <BlockTitle>{_t.textApplication}</BlockTitle>
+                    <List>
+                        <ListItem title={dataApp}></ListItem>
+                    </List>
+                </Fragment>
+            ) : null}
+            {creators ? (
+                <Fragment>
+                    <BlockTitle>{_t.textAuthor}</BlockTitle>
+                    <List>
+                        {
+                            creators.split(/\s*[,;]\s*/).map(item => {
+                                return <ListItem title={item}></ListItem>
+                            })
+                        }
+                    </List>
+                </Fragment>
+            ) : null}
+        </Page>
+    );
+};
+
+const DocumentInfo = inject("storeDocumentInfo")(observer(PageDocumentInfo));
+
+export default DocumentInfo;

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -5,6 +5,7 @@ import {f7} from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 
 import DocumentSettingsController from "../../controller/settings/DocumentSettings";
+import DocumentInfoController from "../../controller/settings/DocumentInfo";
 import { DocumentFormats, DocumentMargins } from "./DocumentSettings";
 
 const routes = [
@@ -24,6 +25,10 @@ const routes = [
         path: '/document-formats/',
         component: DocumentFormats,
     },
+    {
+        path: "/document-info/",
+        component: DocumentInfoController,
+    }
 ];
 
 
@@ -64,7 +69,7 @@ const SettingsList = withTranslation()(props => {
                     <ListItem title={_t.textPrint}>
                         <Icon slot="media" icon="icon-print"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textDocumentInfo} link="#">
+                    <ListItem title={_t.textDocumentInfo} link="#" onClick={onoptionclick.bind(this, "/document-info/")}>
                         <Icon slot="media" icon="icon-info"></Icon>
                     </ListItem>
                     <ListItem title={_t.textHelp} link="#">