[DE] added users collection

apps/common/mobile/lib/controller/Collaboration.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react'
+import { resetUsers } from '../store/actions/actions.js'
+
+const Collaboration = () => {
+    const onChangeEditUsers = (users) => {
+        const store = Common.Store.get();
+        store.dispatch(resetUsers(Object.values(users)));
+    };
+
+    return {
+        setApi(api) {
+            this.api = api;
+            this.api.asc_registerCallback('asc_onAuthParticipantsChanged', onChangeEditUsers);
+            this.api.asc_registerCallback('asc_onParticipantsChanged',     onChangeEditUsers);
+            // this.api.asc_registerCallback('asc_onAddComment', _.bind(this.onApiAddComment, this));
+            // this.api.asc_registerCallback('asc_onAddComments', _.bind(this.onApiAddComments, this));
+            // this.api.asc_registerCallback('asc_onChangeCommentData', _.bind(this.onApiChangeCommentData, this));
+            // this.api.asc_registerCallback('asc_onRemoveComment', _.bind(this.onApiRemoveComment, this));
+            // this.api.asc_registerCallback('asc_onRemoveComments', _.bind(this.onApiRemoveComments, this));
+            // this.api.asc_registerCallback('asc_onShowComment', _.bind(this.apiShowComments, this));
+            // this.api.asc_registerCallback('asc_onHideComment', _.bind(this.apiHideComments, this));
+        }
+    }
+};
+
+export {Collaboration as CollaborationController}

apps/common/mobile/lib/store/actions/actions.js

@@ -0,0 +1,8 @@
+export const RESET_USERS = 'RESET_USERS';
+
+export const resetUsers = list => {
+    return {
+        type: RESET_USERS,
+        payload: list
+    }
+};

apps/common/mobile/lib/store/users.js

@@ -0,0 +1,11 @@
+import * as actionTypes from './actions/actions'
+
+const usersReducer = (state = [], action) => {
+    if (action.type == actionTypes.RESET_USERS) {
+        return [...action.payload];
+    }
+
+    return state;
+};
+
+export default usersReducer

apps/common/mobile/lib/view/Collaboration.jsx

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import { useSelector } from 'react-redux';
+import { Popover, List, ListItem, Navbar, NavTitle, NavRight } from 'framework7-react';
+import { Sheet, Toolbar, BlockTitle, Link, Page, View, Icon } from 'framework7-react';
+import { withTranslation, useTranslation } from 'react-i18next';
+
+const PageUsers = () => {
+    const { t } = useTranslation();
+    const userlist = useSelector(state => state.users);
+    return (
+        <Page name="collab__users">
+            <Navbar title="Users" backLink="Back"></Navbar>
+            <BlockTitle>{t("Collaboration.textEditUser")}</BlockTitle>
+            <List className="coauth__list">
+                {userlist.map((model, i) => (
+                    <ListItem title={model.asc_getUserName()} key={i}>
+                        <Icon slot="media" icon="coauth__list__icon" style={{ backgroundColor:model.asc_getColor() }}></Icon>
+                    </ListItem>
+                ))}
+            </List>
+        </Page>)
+};
+
+const PageCollaboration = () => {
+    "use strict";
+
+    return <Page name="collab__main">
+                <Navbar title="Collaboration">
+                    <NavRight>
+                        <Link sheetClose>Close</Link>
+                    </NavRight>
+                </Navbar>
+                <List>
+                    <ListItem href="/users/" title="Users"/>
+                    <ListItem link="#" title="Comments"/>
+                </List>
+            </Page>;
+
+};
+
+class CollaborationPopover extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <Popover className="collab__popover">
+                <Page>
+                    <Navbar title="Collaboration"></Navbar>
+                    <List>
+                        <ListItem link="#" title="Users"/>
+                        <ListItem link="#" title="Comments"/>
+                    </List>
+                </Page>
+            </Popover>
+        )
+    }
+}
+
+class CollaborationSheet extends Component {
+    constructor(props) {
+        super(props);
+
+        this.routes = [
+            {path: '/', component: 'PageCollaboration'},
+            {path: '/users/', component: 'PageUsers'}
+        ];
+    }
+    render() {
+        return (
+            <Sheet className="collab__sheet" push>
+                <View>
+                    <PageCollaboration />
+                </View>
+            </Sheet>
+        )
+    }
+}
+
+// export withTranslation()(CollaborationPopover);
+export {CollaborationPopover, CollaborationSheet, PageCollaboration, PageUsers, }

apps/common/mobile/resources/less/collaboration.less

@@ -0,0 +1,5 @@
+.coauth__list__icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+}

apps/documenteditor/mobile/locale/en.json

@@ -10,5 +10,8 @@
         "textDocumentInfo": "Document Info",
         "textHelp": "Help",
         "textAbout": "About"
+      },
+    "Collaboration": {
+      "textEditUser": "Users who are editing the file:"
     }
 }

apps/documenteditor/mobile/src/components/app.jsx

@@ -27,6 +27,7 @@ import routes from '../js/routes';
 
 import '../../../../common/Gateway.js';
 import '../../../../common/main/lib/util/utils.js';
+import { CollaborationController } from '../../../../common/mobile/lib/controller/Collaboration.jsx';
 
 export default class extends React.Component {
   constructor() {
@@ -140,8 +141,8 @@ export default class extends React.Component {
               let me = this;
               console.log('load config');
 
-              me.editorConfig = Object.assign({}, this.editorConfig, data);
+              me.editorConfig = Object.assign({}, this.editorConfig, data.config);
-              // me.appOptions.user = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, "Local.User"/*me.textAnonymous*/);
+              me.appOptions.user = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, "Local.User"/*me.textAnonymous*/);
           };
 
           const loadDocument = data => {
@@ -155,8 +156,8 @@ export default class extends React.Component {
 
                   let _permissions = Object.assign({}, data.doc.permissions),
                       _user = new Asc.asc_CUserInfo();
-                  // _user.put_Id(this.appOptions.user.id);
+                  _user.put_Id(this.appOptions.user.id);
-                  // _user.put_FullName(this.appOptions.user.fullname);
+                  _user.put_FullName(this.appOptions.user.fullname);
 
                   docInfo = new Asc.asc_CDocInfo();
                   docInfo.put_Id(data.doc.key);
@@ -242,6 +243,11 @@ export default class extends React.Component {
                   // Common.Gateway.on('showmessage',    _.bind(me.onExternalMessage, me));
                   Common.Gateway.on('opendocument',   loadDocument);
                   Common.Gateway.appReady();
+
+                  Common.Controllers = {};
+                  Common.Controllers.Collaboration = new CollaborationController();
+                  Common.Controllers.Collaboration.setApi(this.api, "");
+
               }, error => {
                   console.log('promise failed ' + error);
               });

apps/documenteditor/mobile/src/css/app.less

@@ -1,3 +1,6 @@
+
+@import '../../../../common/mobile/resources/less/collaboration.less';
+
 /* Left Panel right border when it is visible by breakpoint */
 .panel-left.panel-in-breakpoint:before {
   position: absolute;

apps/documenteditor/mobile/src/js/app.js

@@ -24,15 +24,20 @@ import App from '../components/app.jsx';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n';
 
+import { Provider } from 'react-redux'
+import { store } from '../store/store.js'
+
 // Init F7 React Plugin
 Framework7.use(Framework7React)
 
 // Mount React App
 ReactDOM.render(
     <I18nextProvider i18n={i18n}>
+        <Provider store={store}>
             <Suspense fallback="loading">
                 <App />
             </Suspense>
+        </Provider>
     </I18nextProvider>,
   document.getElementById('app'),
 );

apps/documenteditor/mobile/src/js/routes.js

@@ -9,6 +9,8 @@ import LeftPage2 from '../pages/left-page-2.jsx';
 import DynamicRoutePage from '../pages/dynamic-route.jsx';
 import RequestAndLoad from '../pages/request-and-load.jsx';
 
+import { PageCollaboration, PageUsers } from '../../../../common/mobile/lib/view/Collaboration.jsx';
+
 var routes = [
   {
     path: '/',
@@ -18,6 +20,14 @@ var routes = [
     path: '/document-settings/',
     component: DocumentSettings,
   },
+  {
+    path: '/users/',
+    component: PageUsers
+  },
+  {
+    path: '/collab-main/',
+    component: PageCollaboration
+  },
   {
     path: '/margins/',
     component: Margins,

apps/documenteditor/mobile/src/pages/home.jsx

@@ -21,6 +21,7 @@ import {
 
 import EditPopup from '../components/edit/Edit.jsx';
 import SettingsPopup from '../components/settings/Settings.jsx';
+import { CollaborationPopover, CollaborationSheet } from '../../../../common/mobile/lib/view/Collaboration.jsx'
 
 export default class Home extends Component {
   constructor(props) {
@@ -39,6 +40,8 @@ export default class Home extends Component {
             </NavLeft>
             <NavRight>
               <Link href={false} popupOpen=".edit-popup">Edit</Link>
+              {/*<Link href={false} popoverOpen=".collab__popover">Users</Link>*/}
+              <Link href={false} sheetOpen=".collab__sheet">Users</Link>
               <Link href={false} popupOpen=".settings-popup">Settings</Link>
             </NavRight>
           </Navbar>
@@ -47,6 +50,8 @@ export default class Home extends Component {
           </View>
           <EditPopup />
           <SettingsPopup />
+          <CollaborationPopover />
+          <CollaborationSheet />
         </Page>
     )
   }

apps/documenteditor/mobile/src/store/reducers/root.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import usersReducer from '../../../../../common/mobile/lib/store/users'
+
+export const initialState = {
+    users: []
+};
+
+export const rootReducer = combineReducers({
+    users: usersReducer
+});

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

@@ -0,0 +1,9 @@
+import { createStore } from 'redux'
+import { rootReducer, initialState } from './reducers/root'
+
+const store = createStore(rootReducer, initialState);
+
+!window.Common && (window.Common = {});
+Common.Store = { get: () => store };
+
+export { store };

build/package.json

@@ -4,7 +4,6 @@
   "homepage": "http://www.onlyoffice.com",
   "private": true,
   "dependencies": {
-    "chai": "1.9.1",
     "grunt": "^1.0.0",
     "grunt-contrib-clean": "^1.0.0",
     "grunt-contrib-concat": "^0.5.1",
@@ -17,15 +16,18 @@
     "grunt-contrib-uglify": "^4.0.1",
     "grunt-inline": "0.3.4",
     "grunt-json-minify": "^1.1.0",
-    "grunt-mocha": "^1.0.0",
     "grunt-spritesmith": "^6.8.0",
     "grunt-svgmin": "^6.0.0",
     "grunt-text-replace": "0.3.11",
     "iconsprite": "file:sprites",
     "iconv-lite": "^0.5.1",
     "less-plugin-clean-css": "1.5.0",
-    "lodash": "^4.0.0",
+    "lodash": "^4.17.20",
-    "mocha": "^6.2.2",
     "vinyl-fs": "^3.0.3"
+  },
+  "devDependencies": {
+    "chai": "1.9.1",
+    "mocha": "^6.2.2",
+    "grunt-mocha": "^1.0.0"
   }
 }

vendor/framework7-react/build/webpack.config.js

@@ -64,6 +64,7 @@ module.exports = {
         },
         include: [
           resolvePath('../../apps/documenteditor/mobile/src'),
+          resolvePath('../../apps/common/mobile/lib'),
           resolvePath('node_modules/framework7'),
 
           resolvePath('node_modules/framework7-react'),
@@ -106,6 +107,7 @@ module.exports = {
             }
           }),
           'css-loader',
+          'less-loader',
             {
                 loader: 'postcss-loader',
                 options: {

vendor/framework7-react/package.json

@@ -56,6 +56,8 @@
     "ora": "^4.0.5",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
+    "react-redux": "^7.2.1",
+    "redux": "^4.0.5",
     "rimraf": "^3.0.2",
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.1.0",