[mobile] Comments (edit comment, add reply)

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

@@ -5,7 +5,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 import { withTranslation} from 'react-i18next';
 import { LocalStorage } from '../../../utils/LocalStorage';
 
-import {AddComment, EditComment, ViewComments} from '../../view/collaboration/Comments';
+import {AddComment, EditComment, AddReply, ViewComments} from '../../view/collaboration/Comments';
 
 // utils
 const timeZoneOffsetInMs = (new Date()).getTimezoneOffset() * 60000;
@@ -266,23 +266,23 @@ class AddCommentController extends Component {
     }
 }
 
-class ViewCommentsController extends Component {
+class EditCommentController extends Component {
     constructor (props) {
         super(props);
-        this.onCommentMenuClick = this.onCommentMenuClick.bind(this);
-        this.onResolveComment = this.onResolveComment.bind(this);
         this.onEditComment = this.onEditComment.bind(this);
-        this.closeEditComment = this.closeEditComment.bind(this);
+        this.onAddReply = this.onAddReply.bind(this);
-
+    }
+    getUserInfo () {
         this.currentUser = this.props.users.currentUser;
-
+        const name = this.currentUser.asc_getUserName();
-        this.state = {
+        return {
-            showEditComment: false,
+            name: name,
-            showEditReply: false
+            initials: this.props.users.getInitials(name),
+            color: this.currentUser.asc_getColor()
         };
     }
     onChangeComment (comment) {
-        const ascComment = !!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null);
+        const ascComment = typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null);
         if (ascComment && comment) {
             ascComment.asc_putText(comment.comment);
             ascComment.asc_putQuoteText(comment.quote);
@@ -316,6 +316,86 @@ class ViewCommentsController extends Component {
             api.asc_changeComment(comment.uid, ascComment);
         }
     }
+    onEditComment (comment, text) {
+        comment.comment = text.trim();
+        const user = this.props.users.currentUser;
+        comment.userid = user.asc_getIdOriginal();
+        comment.username = user.asc_getUserName();
+        this.onChangeComment(comment);
+    }
+    onAddReply (comment, replyVal) {
+        let reply = null;
+        let addReply = null;
+        const ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+
+        if (ascComment) {
+            ascComment.asc_putText(comment.comment);
+            ascComment.asc_putQuoteText(comment.quote);
+            ascComment.asc_putTime(utcDateToString(new Date(comment.time)));
+            ascComment.asc_putOnlyOfficeTime(ooDateToString(new Date(comment.time)));
+            ascComment.asc_putUserId(comment.userId);
+            ascComment.asc_putUserName(comment.userName);
+            ascComment.asc_putSolved(comment.resolved);
+            ascComment.asc_putGuid(comment.guid);
+
+            if (!!ascComment.asc_putDocumentFlag) {
+                ascComment.asc_putDocumentFlag(comment.unattached);
+            }
+
+            reply = comment.replies;
+            if (reply && reply.length) {
+                reply.forEach(function (reply) {
+
+                    addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+                    if (addReply) {
+                        addReply.asc_putText(reply.reply);
+                        addReply.asc_putTime(utcDateToString(new Date(reply.time)));
+                        addReply.asc_putOnlyOfficeTime(ooDateToString(new Date(reply.time)));
+                        addReply.asc_putUserId(reply.userId);
+                        addReply.asc_putUserName(reply.userName);
+
+                        ascComment.asc_addReply(addReply);
+                    }
+                });
+            }
+
+            addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+            if (addReply) {
+                addReply.asc_putText(replyVal);
+                addReply.asc_putTime(utcDateToString(new Date()));
+                addReply.asc_putOnlyOfficeTime(ooDateToString(new Date()));
+                const currentUser = this.props.users.currentUser;
+                addReply.asc_putUserId(currentUser.asc_getIdOriginal());
+                addReply.asc_putUserName(currentUser.asc_getUserName());
+
+                ascComment.asc_addReply(addReply);
+
+                const api = Common.EditorApi.get();
+                api.asc_changeComment(comment.uid, ascComment);
+            }
+        }
+    }
+    render() {
+        const storeComments = this.props.storeComments;
+        const comment = storeComments.currentComment;
+        return (
+            <Fragment>
+                {storeComments.isOpenEditComment && <EditComment comment={comment} onEditComment={this.onEditComment}/>}
+                {storeComments.isOpenAddReply && <AddReply userInfo={this.getUserInfo()} comment={comment} onAddReply={this.onAddReply}/>}
+            </Fragment>
+        )
+    }
+}
+
+class ViewCommentsController extends Component {
+    constructor (props) {
+        super(props);
+        this.onCommentMenuClick = this.onCommentMenuClick.bind(this);
+        this.onResolveComment = this.onResolveComment.bind(this);
+        this.closeEditComment = this.closeEditComment.bind(this);
+
+        this.currentUser = this.props.users.currentUser;
+    }
     onResolveComment (comment) {
         let reply = null,
             addReply = null,
@@ -358,12 +438,6 @@ class ViewCommentsController extends Component {
         const api = Common.EditorApi.get();
         comment && api.asc_removeComment(comment.uid);
     }
-    onEditComment (comment, text) {
-        comment.comment = text.trim();
-        comment.userid = this.currentUser.asc_getIdOriginal();
-        comment.username = this.currentUser.asc_getUserName();
-        this.onChangeComment(comment);
-    }
     deleteReply (comment, indReply) {
         let replies = null,
             addReply = null,
@@ -409,14 +483,7 @@ class ViewCommentsController extends Component {
         const _t = t("Common.Collaboration", { returnObjects: true });
         switch (action) {
             case 'editComment':
-                this.setState({
+                this.props.storeComments.openEditComment(true, comment);
-                    showEditComment: true,
-                    editProps: {
-                        comment: comment,
-                        onEditComment: this.onEditComment
-                    }
-                });
-                console.log('editComment');
                 break;
             case 'resolve':
                 this.onResolveComment(comment);
@@ -444,7 +511,7 @@ class ViewCommentsController extends Component {
                 );
                 break;
             case 'addReply':
-                console.log('addReply');
+                this.props.storeComments.openAddReply(true, comment);
                 break;
         }
     }
@@ -454,23 +521,21 @@ class ViewCommentsController extends Component {
     }
     render() {
         return(
-            <Fragment>
+            <ViewComments onCommentMenuClick={this.onCommentMenuClick}
-                <ViewComments showEditComment={this.showEditComment}
+                          onResolveComment={this.onResolveComment}
-                              onCommentMenuClick={this.onCommentMenuClick}
+            />
-                              onResolveComment={this.onResolveComment}
-                />
-                {this.state.showEditComment && <EditComment editProps={this.state.editProps} opened={this.state.showEditComment} close={this.closeEditComment}/>}
-            </Fragment>
         )
     }
 }
 
 const _CommentsController = inject('storeAppOptions', 'storeComments', 'users')(observer(CommentsController));
 const _AddCommentController = inject('storeAppOptions', 'storeComments', 'users')(observer(AddCommentController));
+const _EditCommentController = inject('storeComments', 'users')(observer(EditCommentController));
 const _ViewCommentsController = inject('storeComments', 'users')(observer(withTranslation()(ViewCommentsController)));
 
 export {
     _CommentsController as CommentsController,
     _AddCommentController as AddCommentController,
+    _EditCommentController as EditCommentController,
     _ViewCommentsController as ViewCommentsController
 };

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

@@ -110,4 +110,22 @@ export class storeComments {
             this.isOpenAddComment = open;
         }
     }
+
+    // Edit comment
+    currentComment = null;
+    @observable isOpenEditComment = false;
+    @action openEditComment (open, comment) {
+        if (open !== this.isOpenEditComment) {
+            this.currentComment = open ? comment : null;
+            this.isOpenEditComment = open;
+        }
+    }
+
+    @observable isOpenAddReply = false;
+    @action openAddReply (open, comment) {
+        if (open !== this.isOpenAddReply) {
+            this.currentComment = open ? comment : null;
+            this.isOpenAddReply = open;
+        }
+    }
 }

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

@@ -149,18 +149,20 @@ const CommentActions = ({comment, onCommentMenuClick, opened, openActionComment}
 };
 
 // Edit comment
-const EditCommentPopup = ({comment, onEditComment, opened, close}) => {
+const EditCommentPopup = inject("storeComments")(observer(({storeComments, comment, onEditComment}) => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.edit-comment-popup');
+    });
     const [stateText, setText] = useState(comment.comment);
-    console.log(comment);
     return (
-        <Popup className="edit-comment-popup" opened={opened} animate={true}>
+        <Popup className="edit-comment-popup">
             <Navbar>
                 <NavLeft>
                     <Link onClick={() => {
-                        close();
+                        f7.popup.close('.edit-comment-popup');
-                        //f7.popup.close('.edit-comment-popup');
+                        storeComments.openEditComment(false);
                     }}>{_t.textCancel}</Link>
                 </NavLeft>
                 <NavTitle>{_t.textEditComment}</NavTitle>
@@ -168,8 +170,8 @@ const EditCommentPopup = ({comment, onEditComment, opened, close}) => {
                     <Link className={stateText.length === 0 && 'disabled'}
                           onClick={() => {
                               onEditComment(comment, stateText);
-                              close();
+                              f7.popup.close('.edit-comment-popup');
-                              //f7.popup.close('.edit-comment-popup');
+                              storeComments.openEditComment(false);
                           }}
                     >
                         {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
@@ -192,13 +194,195 @@ const EditCommentPopup = ({comment, onEditComment, opened, close}) => {
             </div>
         </Popup>
     )
-};
+}));
 
-const EditComment = ({editProps, opened, close}) => {
+const EditCommentDialog = inject("storeComments")(observer(({storeComments, comment, onEditComment}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const templateInitials = `<div class="initials" style="background-color: ${comment.userColor};">${comment.userInitials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('edit-comment-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="comment-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textEditComment}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="comment-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="header-comment">
+                        ${Device.android ? templateInitials : ''}
+                        <div>
+                            <div class='name'>${comment.userName}</div>
+                            <div class='comment-date'>${comment.date}</div>
+                        </div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='comment-text' placeholder='${_t.textEditComment}' autofocus>${comment.comment}</textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('comment-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        storeComments.openEditComment(false);
+                    });
+                    const done = document.getElementById('comment-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('comment-text').value;
+                        if (value.length > 0) {
+                            onEditComment(comment, value);
+                            f7.dialog.close();
+                            storeComments.openEditComment(false);
+                        }
+                    });
+                    const area = document.getElementById('comment-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                    done.classList.add('disabled');
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='edit-comment-dialog'></div>
+    );
+}));
+
+const EditComment = ({comment, onEditComment}) => {
     return (
         Device.phone ?
-            <EditCommentPopup {...editProps} opened={opened} close={close}/> :
+            <EditCommentPopup comment={comment} onEditComment={onEditComment}/> :
-            <EditCommentDialog />
+            <EditCommentDialog comment={comment} onEditComment={onEditComment}/>
+    )
+};
+
+const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo, comment, onAddReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.add-reply-popup');
+    });
+    const [stateText, setText] = useState('');
+    return (
+        <Popup className="add-reply-popup">
+            <Navbar>
+                <NavLeft>
+                    <Link onClick={() => {
+                        storeComments.openAddReply(false);
+                        f7.popup.close('.add-reply-popup');
+                    }}>{_t.textCancel}</Link>
+                </NavLeft>
+                <NavTitle>{_t.textAddReply}</NavTitle>
+                <NavRight>
+                    <Link className={stateText.length === 0 && 'disabled'}
+                          onClick={() => {
+                              onAddReply(comment, stateText);
+                              storeComments.openAddReply(false);
+                              f7.popup.close('.add-reply-popup');
+                          }}>
+                        {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
+                    </Link>
+                </NavRight>
+            </Navbar>
+            <div className='wrap-comment'>
+                <div className="header-comment">
+                    {Device.android &&
+                    <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
+                    }
+                    <div className='name'>{userInfo.name}</div>
+                </div>
+                <div className='wrap-textarea'>
+                    <Input type='textarea' placeholder={_t.textAddReply} autofocus value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
+                </div>
+            </div>
+        </Popup>
+    )
+}));
+
+const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInfo, comment, onAddReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const templateInitials = `<div class="initials" style="background-color: ${userInfo.color};">${userInfo.initials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('add-reply-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="reply-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textAddReply}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="reply-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="header-comment">
+                        ${Device.android ? templateInitials : ''}
+                        <div class='name'>${userInfo.name}</div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='reply-text' placeholder='${_t.textAddReply}' autofocus></textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('reply-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        storeComments.openAddReply(false);
+                    });
+                    const done = document.getElementById('reply-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('reply-text').value;
+                        if (value.length > 0) {
+                            onAddReply(comment, value);
+                            f7.dialog.close();
+                            storeComments.openAddReply(false);
+                        }
+                    });
+                    const area = document.getElementById('reply-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                    done.classList.add('disabled');
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='add-reply-dialog'></div>
+    );
+}));
+
+const AddReply = ({userInfo, comment, onAddReply}) => {
+    return (
+        Device.phone ?
+            <AddReplyPopup userInfo={userInfo} comment={comment} onAddReply={onAddReply}/> :
+            <AddReplyDialog userInfo={userInfo} comment={comment} onAddReply={onAddReply}/>
     )
 };
 
@@ -305,5 +489,6 @@ const _ViewComments = inject('storeComments', 'storeAppOptions')(observer(ViewCo
 export {
     AddComment,
     EditComment,
+    AddReply,
     _ViewComments as ViewComments
 }

apps/common/mobile/resources/less/comments.less

@@ -17,14 +17,14 @@
     }
   }
 }
-#add-comment-dialog {
+#add-comment-dialog, #edit-comment-dialog, #add-reply-dialog {
   .dialog {
     --f7-dialog-width: 400px;
     .dialog-inner {
       padding: 0;
       height: 400px;
       .wrap-comment {
-        .name {
+        .name, .comment-date {
           text-align: left;
         }
         .wrap-textarea {
@@ -101,6 +101,6 @@
   }
 }
 
-.edit-comment-popup {
+.edit-comment-popup, .add-reply-popup {
   z-index: 20000;
 }

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

@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/collaboration/Collaboration.jsx';
 import {InitReviewController as ReviewController} from '../../../../common/mobile/lib/controller/collaboration/Review.jsx';
 import { onAdvancedOptions } from './settings/Download.jsx';
-import {CommentsController, AddCommentController} from "../../../../common/mobile/lib/controller/collaboration/Comments";
+import {CommentsController, AddCommentController, EditCommentController} from "../../../../common/mobile/lib/controller/collaboration/Comments";
 
 @inject(
     "storeAppOptions",
@@ -335,6 +335,7 @@ class MainController extends Component {
                 <ReviewController />
                 <CommentsController />
                 <AddCommentController />
+                <EditCommentController />
             </Fragment>
             )
     }