[DE mobile] Added Document Info

apps/documenteditor/mobile/locale/en.json

@@ -20,7 +20,14 @@
     "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"
   },
   "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,27 @@ 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("End");
+          storeDocumentInfo.switchIsLoaded(true);
+        });
+
+        this.api.asc_registerCallback("asc_onDocInfo", (obj) => {
+          storeDocumentInfo.changeCount(obj);
+        });
+
+        // me.api.asc_registerCallback('asc_onGetDocInfoEnd',      _.bind(me.onApiGetDocInfoEnd, me));
+        // me.api.asc_registerCallback('asc_onDocumentName',       _.bind(me.onApiDocumentName, me));
+
     }
 
     render() {

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

@@ -0,0 +1,80 @@
+import React, { Component } from "react";
+import DocumentInfo from "../../view/settings/DocumentInfo";
+
+class DocumentInfoController extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  getDocProps() {
+    const api = Common.EditorApi.get();
+    if (api) {
+      let docProps = api.asc_getCoreProps();
+      return docProps;
+    }
+  }
+
+  getAppProps() {
+    const api = Common.EditorApi.get();
+    if (api) {
+      const appProps = api.asc_getAppProps();
+      console.log(appProps);
+      if (appProps) {
+        let appName =
+          (appProps.asc_getApplication() || "") +
+          (appProps.asc_getAppVersion() ? " " : "") +
+          (appProps.asc_getAppVersion() || "");
+        return appName;
+      }
+    }
+  }
+
+  getModified() {
+    const docProps = this.getDocProps();
+    if (docProps) {
+      let valueModified = docProps.asc_getModified();
+      console.log(docProps);
+      if (valueModified) {
+        return (
+          valueModified.toLocaleString(_lang, {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+          }) +
+          " " +
+          valueModified.toLocaleTimeString(_lang, { timeStyle: "short" })
+        );
+      }
+    }
+  }
+
+  getModifiedBy() {
+    const docProps = this.getDocProps();
+    if (docProps) {
+      let valueModifiedBy = docProps.asc_getLastModifiedBy();
+      if (valueModifiedBy) {
+        return Common.Utils.UserInfoParser.getParsedName(valueModifiedBy);
+      }
+    }
+  }
+
+  componentDidMount() {
+    const api = Common.EditorApi.get();
+    if (api) {
+      api.startGetDocInfo();
+    }
+  }
+
+  render() {
+    return (
+      <DocumentInfo
+        getAppProps={this.getAppProps}
+        getModified={this.getModified}
+        getModifiedBy={this.getModifiedBy}
+        getDocProps={this.getDocProps}
+      />
+    );
+  }
+}
+
+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,81 @@
+import React 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 {
+    pageCount,
+    paragraphCount,
+    symbolsCount,
+    symbolsWSCount,
+    wordsCount,
+  } = storeInfo.infoObj;
+  const dataDoc = JSON.parse(JSON.stringify(storeInfo.dataDoc));
+  const isLoaded = storeInfo.isLoaded;
+
+  if (!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={pageCount}></ListItem>
+          <ListItem title="Paragraphs" after={paragraphCount}></ListItem>
+          <ListItem title="Words" after={wordsCount}></ListItem>
+          <ListItem title="Symbols" after={symbolsCount}></ListItem>
+          <ListItem title="Spaces" after={symbolsWSCount}></ListItem>
+        </List>
+        {dataModified && dataModifiedBy ? (
+          <Block>
+            <BlockTitle>{_t.textLastModified}</BlockTitle>
+            <List>
+              <ListItem title="11/19/2020 1:13 PM"></ListItem>
+            </List>
+            <BlockTitle>{_t.textLastModifiedBy}</BlockTitle>
+            <List>
+              <ListItem title="John Smith"></ListItem>
+            </List>
+          </Block>
+        ) : null}
+        {dataApp ? (
+          <Block>
+            <BlockTitle>{_t.textApplication}</BlockTitle>
+            <List>
+              <ListItem title="ONLYOFFICE/6.0.2.5"></ListItem>
+            </List>
+          </Block>
+        ) : 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="#">