diff --git a/apps/common/mobile/lib/controller/collaboration/Comments.jsx b/apps/common/mobile/lib/controller/collaboration/Comments.jsx index 9db80cab2d..97237c753b 100644 --- a/apps/common/mobile/lib/controller/collaboration/Comments.jsx +++ b/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, AddReply, ViewComments} from '../../view/collaboration/Comments'; +import {AddComment, EditComment, AddReply, EditReply, ViewComments} from '../../view/collaboration/Comments'; // utils const timeZoneOffsetInMs = (new Date()).getTimezoneOffset() * 60000; @@ -271,6 +271,7 @@ class EditCommentController extends Component { super(props); this.onEditComment = this.onEditComment.bind(this); this.onAddReply = this.onAddReply.bind(this); + this.onEditReply = this.onEditReply.bind(this); } getUserInfo () { this.currentUser = this.props.users.currentUser; @@ -375,6 +376,14 @@ class EditCommentController extends Component { } } } + onEditReply (comment, reply, textReply) { + const currentUser = this.props.users.currentUser; + const indReply = reply.ind; + comment.replies[indReply].reply = textReply; + comment.replies[indReply].userid = currentUser.asc_getIdOriginal(); + comment.replies[indReply].username = currentUser.asc_getUserName(); + this.onChangeComment(comment); + } render() { const storeComments = this.props.storeComments; const comment = storeComments.currentComment; @@ -382,6 +391,7 @@ class EditCommentController extends Component { {storeComments.isOpenEditComment && } {storeComments.isOpenAddReply && } + {storeComments.isOpenEditReply && } ) } @@ -438,11 +448,13 @@ class ViewCommentsController extends Component { const api = Common.EditorApi.get(); comment && api.asc_removeComment(comment.uid); } - deleteReply (comment, indReply) { + deleteReply (comment, reply) { let replies = null, addReply = null, ascComment = (!!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); + const indReply = reply.ind; + if (ascComment && comment) { ascComment.asc_putText(comment.comment); ascComment.asc_putQuoteText(comment.quote); @@ -478,7 +490,7 @@ class ViewCommentsController extends Component { api.asc_changeComment(comment.uid, ascComment); } } - onCommentMenuClick (action, comment) { + onCommentMenuClick (action, comment, reply) { const { t } = this.props; const _t = t("Common.Collaboration", { returnObjects: true }); switch (action) { @@ -498,15 +510,14 @@ class ViewCommentsController extends Component { ); break; case 'editReply': - this.setState({showEditReply: true}); - console.log('editReply'); + this.props.storeComments.openEditReply(true, comment, reply); break; case 'deleteReply': f7.dialog.confirm( _t.textMessageDeleteReply, _t.textDeleteReply, () => { - this.deleteReply(comment, indReply); + this.deleteReply(comment, reply); } ); break; diff --git a/apps/common/mobile/lib/store/comments.js b/apps/common/mobile/lib/store/comments.js index fff628012c..1454346092 100644 --- a/apps/common/mobile/lib/store/comments.js +++ b/apps/common/mobile/lib/store/comments.js @@ -121,6 +121,7 @@ export class storeComments { } } + currentReply = null; @observable isOpenAddReply = false; @action openAddReply (open, comment) { if (open !== this.isOpenAddReply) { @@ -128,4 +129,13 @@ export class storeComments { this.isOpenAddReply = open; } } + + @observable isOpenEditReply = false; + @action openEditReply (open, comment, reply) { + if (open !== this.isOpenEditReply) { + this.currentComment = open ? comment : null; + this.currentReply = open ? reply : null; + this.isOpenEditReply = open; + } + } } \ No newline at end of file diff --git a/apps/common/mobile/lib/view/collaboration/Comments.jsx b/apps/common/mobile/lib/view/collaboration/Comments.jsx index 50899d6da7..0a3432c24e 100644 --- a/apps/common/mobile/lib/view/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx @@ -148,6 +148,25 @@ const CommentActions = ({comment, onCommentMenuClick, opened, openActionComment} ) }; +const ReplyActions = ({comment, reply, onCommentMenuClick, opened, openActionReply}) => { + const { t } = useTranslation(); + const _t = t('Common.Collaboration', {returnObjects: true}); + return ( + openActionReply(false)}> + + {reply && + {reply.editable && {onCommentMenuClick('editReply', comment, reply);}}>{_t.textEdit}} + {reply.removable && {onCommentMenuClick('deleteReply', comment, reply);}}>{_t.textDeleteReply}} + + } + + + {_t.textCancel} + + + ) +}; + // Edit comment const EditCommentPopup = inject("storeComments")(observer(({storeComments, comment, onEditComment}) => { const { t } = useTranslation(); @@ -253,7 +272,6 @@ const EditCommentDialog = inject("storeComments")(observer(({storeComments, comm done.classList.remove('disabled'); } }); - done.classList.add('disabled'); } } }).open(); @@ -386,6 +404,127 @@ const AddReply = ({userInfo, comment, onAddReply}) => { ) }; +const EditReplyPopup = inject("storeComments")(observer(({storeComments, comment, reply, onEditReply}) => { + const { t } = useTranslation(); + const _t = t('Common.Collaboration', {returnObjects: true}); + useEffect(() => { + f7.popup.open('.edit-reply-popup'); + }); + const [stateText, setText] = useState(reply.reply); + return ( + + + + { + f7.popup.close('.edit-reply-popup'); + storeComments.openEditReply(false); + }}>{_t.textCancel} + + {_t.textEditReply} + + { + onEditReply(comment, reply, stateText); + f7.popup.close('.edit-reply-popup'); + storeComments.openEditReply(false); + }} + > + {Device.android ? : _t.textDone} + + + +
+
+ {Device.android && +
{reply.userInitials}
+ } +
+
{reply.userName}
+
{reply.date}
+
+
+
+ {setText(event.target.value);}}> +
+
+
+ ) +})); + +const EditReplyDialog = inject("storeComments")(observer(({storeComments, comment, reply, onEditReply}) => { + const { t } = useTranslation(); + const _t = t('Common.Collaboration', {returnObjects: true}); + const templateInitials = `
${reply.userInitials}
`; + useEffect(() => { + f7.dialog.create({ + destroyOnClose: true, + containerEl: document.getElementById('edit-reply-dialog'), + content: + ` +
+
+ ${Device.android ? templateInitials : ''} +
+
${reply.userName}
+
${reply.date}
+
+
+
+ +
+
`, + on: { + opened: () => { + const cancel = document.getElementById('reply-cancel'); + cancel.addEventListener('click', () => { + f7.dialog.close(); + storeComments.openEditReply(false); + }); + const done = document.getElementById('reply-done'); + done.addEventListener('click', () => { + const value = document.getElementById('reply-text').value; + if (value.length > 0) { + onEditReply(comment, reply, value); + f7.dialog.close(); + storeComments.openEditReply(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'); + } + }); + } + } + }).open(); + }); + return ( +
+ ); +})); + +const EditReply = ({comment, reply, onEditReply}) => { + return ( + Device.phone ? + : + + ) +}; + // View comments const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment}) => { const { t } = useTranslation(); @@ -405,9 +544,12 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes } }; - const [clickComment, setClickComment] = useState(); + const [clickComment, setComment] = useState(); const [commentActionsOpened, openActionComment] = useState(false); + const [reply, setReply] = useState(); + const [replyActionsOpened, openActionReply] = useState(false); + return ( @@ -429,7 +571,7 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
{onResolveComment(comment);}}>
{setClickComment(comment); openActionComment(true);}} + onClick={() => {setComment(comment); openActionComment(true);}} >
} @@ -457,7 +599,11 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes {!viewMode &&
-
+
{setComment(comment); setReply(reply); openActionReply(true);}} + > + +
} @@ -480,6 +626,7 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes } +
) }; @@ -490,5 +637,6 @@ export { AddComment, EditComment, AddReply, + EditReply, _ViewComments as ViewComments } diff --git a/apps/common/mobile/resources/less/comments.less b/apps/common/mobile/resources/less/comments.less index 1151645394..c1cf3af2ce 100644 --- a/apps/common/mobile/resources/less/comments.less +++ b/apps/common/mobile/resources/less/comments.less @@ -17,14 +17,14 @@ } } } -#add-comment-dialog, #edit-comment-dialog, #add-reply-dialog { +#add-comment-dialog, #edit-comment-dialog, #add-reply-dialog, #edit-reply-dialog { .dialog { --f7-dialog-width: 400px; .dialog-inner { padding: 0; height: 400px; .wrap-comment { - .name, .comment-date { + .name, .comment-date, .reply-date { text-align: left; } .wrap-textarea { @@ -101,6 +101,6 @@ } } -.edit-comment-popup, .add-reply-popup { +.edit-comment-popup, .add-reply-popup, .edit-reply-popup { z-index: 20000; } \ No newline at end of file diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 00f9f0ea65..23eca76dae 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -125,7 +125,8 @@ "textMessageDeleteComment": "Do you really want to delete this comment?", "textMessageDeleteReply": "Do you really want to delete this reply?", "textDeleteReply": "Delete Reply", - "textEditComment": "Edit Comment" + "textEditComment": "Edit Comment", + "textEditReply": "Edit Reply" } }, "Settings": {