[SSE mobile] Add comments

apps/common/mobile/lib/controller/collaboration/Comments.jsx

@@ -60,12 +60,12 @@ class CommentsController extends Component {
             api.asc_registerCallback('asc_onChangeCommentData', this.changeCommentData.bind(this));
             api.asc_registerCallback('asc_onShowComment', this.changeShowComments.bind(this));
             api.asc_registerCallback('asc_onHideComment', this.hideComments.bind(this));
-        });
 
-        Common.Notifications.on('comments:filterchange', this.onFilterChange.bind(this)); // for sse
+            if (window.editorType === 'sse') {
-
+                api.asc_registerCallback('asc_onActiveSheetChanged', this.onApiActiveSheetChanged.bind(this));
-        Common.Notifications.on('configOptionsFill', () => {
+                Common.Notifications.on('comments:filterchange', this.onFilterChange.bind(this));
-            this.curUserId = this.appOptions.user.id;
+                Common.Notifications.on('sheet:active', this.onApiActiveSheetChanged.bind(this));
+            }
         });
 
         Common.Notifications.on('document:ready', () => {
@@ -77,8 +77,13 @@ class CommentsController extends Component {
                 isLiveCommenting ? api.asc_showComments(resolved) : api.asc_hideComments();
                 /** coauthoring end **/
             }
+
+            this.curUserId = this.props.users.currentUser.asc_getIdOriginal();
         });
     }
+    onApiActiveSheetChanged (index) {
+        this.onFilterChange(['doc', 'sheet' + Common.EditorApi.get().asc_getWorksheetId(index)]);
+    }
     addComment (id, data) {
         const comment = this.readSDKComment(id, data);
         if (comment) {

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

@@ -54,8 +54,8 @@ export class storeComments {
         if (!this.groupCollectionComments[groupName]) {
             this.groupCollectionComments[groupName] = [];
         }
-        this.groupCollectionComments[groupname].push(comment);
+        this.groupCollectionComments[groupName].push(comment);
-        if (this.filter.indexOf(groupname) !== -1) {
+        if (typeof this.filter === 'object' && this.filter.indexOf(groupName) !== -1) {
             this.groupCollectionFilter.push(comment);
         }
     }
@@ -86,7 +86,7 @@ export class storeComments {
             const index = store.indexOf(comment);
             if (index !== -1) {
                 this.groupCollectionComments[name].splice(index, 1);
-                if (this.filter.indexOf(name) !== -1) {
+                if (typeof this.filter === 'object' && this.filter.indexOf(name) !== -1) {
                     this.groupCollectionFilter.splice(this.groupCollectionFilter.indexOf(comment), 1);
                 }
             }
@@ -135,9 +135,9 @@ export class storeComments {
         let model;
         for (let name in this.groupCollectionComments) {
             const store = this.groupCollectionComments[name];
-            const id = id.isArray() ? id[0] : id;
+            const uid = typeof id === 'object' && id.isArray() ? id[0] : id;
             model = store.find((item) => {
-                return item.uid === id;
+                return item.uid === uid;
             });
             if (model) return model;
         }

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -31,8 +31,10 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
             <Navbar>
                 <NavLeft>
                     <Link onClick={() => {
-                        props.closeAddComment();
                         f7.popup.close('.add-comment-popup');
+                        setTimeout(() => {
+                            props.closeAddComment();
+                        }, 500)
                     }}>{_t.textCancel}</Link>
                 </NavLeft>
                 <NavTitle>{_t.textAddComment}</NavTitle>
@@ -40,8 +42,10 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
                     <Link className={stateText.length === 0 && 'disabled'}
                           onClick={() => {
                               if (props.onAddNewComment(stateText, false)) {
-                                  props.closeAddComment();
                                   f7.popup.close('.add-comment-popup');
+                                  setTimeout(() => {
+                                      props.closeAddComment();
+                                  }, 500)
                               }
                     }}>
                         {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}

apps/spreadsheeteditor/mobile/locale/en.json

@@ -46,7 +46,8 @@
             "textInsert": "Insert",
             "textInvalidRange": "ERROR! Invalid cells range",
             "textSortAndFilter": "Sort and Filter",
-            "textFilter": "Filter"
+            "textFilter": "Filter",
+            "textComment": "Comment"
         },
         "Edit" : {
             "textSelectObjectToEdit": "Select object to edit",
@@ -321,7 +322,21 @@
             "textBack": "Back",
             "textUsers": "Users",
             "textEditUser": "Users who are editing the file:",
-            "textComments": "Comments"
+            "textComments": "Comments",
+            "textAddComment": "Add Comment",
+            "textCancel": "Cancel",
+            "textDone": "Done",
+            "textNoComments": "This document doesn't contain comments",
+            "textEdit": "Edit",
+            "textResolve": "Resolve",
+            "textReopen": "Reopen",
+            "textAddReply": "Add Reply",
+            "textDeleteComment": "Delete Comment",
+            "textMessageDeleteComment": "Do you really want to delete this comment?",
+            "textMessageDeleteReply": "Do you really want to delete this reply?",
+            "textDeleteReply": "Delete Reply",
+            "textEditComment": "Edit Comment",
+            "textEditReply": "Edit Reply"
         }
     }
 }

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

@@ -1,15 +1,22 @@
 
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react'
 import { inject } from "mobx-react";
 import { f7 } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/collaboration/Collaboration.jsx'
 import { onAdvancedOptions } from './settings/Download.jsx';
+import {
+    AddCommentController,
+    CommentsController,
+    EditCommentController,
+    ViewCommentsController
+} from "../../../../common/mobile/lib/controller/collaboration/Comments";
 
 @inject("storeAppOptions", "storeFocusObjects", "storeCellSettings", "storeTextSettings", "storeChartSettings", "storeSpreadsheetSettings", "storeSpreadsheetInfo")
 class MainController extends Component {
     constructor(props) {
-        super(props)
+        super(props);
+        window.editorType = 'sse';
     }
 
     initSdk() {
@@ -318,7 +325,15 @@ class MainController extends Component {
     }
 
     render() {
-        return <CollaborationController />
+        return (
+            <Fragment>
+                <CollaborationController />
+                <CommentsController />
+                <AddCommentController />
+                <EditCommentController />
+                <ViewCommentsController />
+            </Fragment>
+        )
     }
 
     componentDidMount() {

apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx

@@ -63,6 +63,8 @@ const Statusbar = inject('sheets')(props => {
         const api = Common.EditorApi.get();
         api.asc_showWorksheet(model.index);
         sheets.setActiveWorksheet(i);
+
+        Common.Notifications.trigger('sheet:active', model.index);
     };
 
     const onAddTabClicked = () => {

apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx

@@ -18,9 +18,17 @@ class AddOtherController extends Component {
         }
     }
 
+    hideAddComment () {
+        const cellinfo = Common.EditorApi.get().asc_getCellInfo();
+        const iscelllocked = cellinfo.asc_getLocked();
+        const seltype = cellinfo.asc_getSelectionType();
+        return !(seltype === Asc.c_oAscSelectionType.RangeCells && !iscelllocked);
+    }
+
     render () {
         return (
-            <AddOther
+            <AddOther closeModal={this.closeModal}
+                      hideAddComment={this.hideAddComment}
             />
         )
     }

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -12,6 +12,8 @@
 @import '../../../../common/mobile/resources/less/icons.less';
 @import '../../../../common/mobile/resources/less/dataview.less';
 @import '../../../../common/mobile/resources/less/search.less';
+@import '../../../../common/mobile/resources/less/contextmenu.less';
+@import '../../../../common/mobile/resources/less/comments.less';
 @import './app-material.less';
 @import './app-ios.less';
 @import './icons-ios.less';

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

@@ -15,6 +15,7 @@ import {storeAppOptions} from "./appOptions";
 // import {storeTableSettings} from "./tableSettings";
 import {storeChartSettings} from "./chartSettings";
 import {storeSpreadsheetSettings} from "./spreadsheetSettings";
+import {storeComments} from "../../../../common/mobile/lib/store/comments";
 
 export const stores = {
     storeFocusObjects: new storeFocusObjects(),
@@ -30,8 +31,9 @@ export const stores = {
     storeShapeSettings: new storeShapeSettings(),
     storeChartSettings: new storeChartSettings(),
     storePalette: new storePalette(),
-    storeCellSettings: new storeCellSettings()
+    storeCellSettings: new storeCellSettings(),
     // storeImageSettings: new storeImageSettings(),
     // storeTableSettings: new storeTableSettings()
+    storeComments: new storeComments()
 };
 

apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx

@@ -5,11 +5,18 @@ import { useTranslation } from 'react-i18next';
 const AddOther = props => {
     const { t } = useTranslation();
     const _t = t('View.Add', {returnObjects: true});
+    const hideAddComment = props.hideAddComment();
     return (
         <List>
             <ListItem title={_t.textImage} link={'/add-image/'}>
                 <Icon slot="media" icon="icon-insimage"></Icon>
             </ListItem>
+            {!hideAddComment && <ListItem title={_t.textComment} onClick={() => {
+                props.closeModal();
+                Common.Notifications.trigger('addcomment');
+            }}>
+                <Icon slot="media" icon="icon-insert-comment"></Icon>
+            </ListItem>}
             <ListItem title={_t.textLink} link={'/add-link/'}>
                 <Icon slot="media" icon="icon-link"></Icon>
             </ListItem>