import React, {useState, useEffect, Fragment} from 'react'; import {observer, inject} from "mobx-react"; import { f7, Popup, Page, Navbar, NavLeft, NavRight, NavTitle, Link, Input, Icon, List, ListItem, Actions, ActionsGroup, ActionsButton } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../utils/device'; // Add comment const AddCommentPopup = inject("storeComments")(observer(props => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); useEffect(() => { f7.popup.open('.add-comment-popup'); }); const userInfo = props.userInfo; const [stateText, setText] = useState(''); return ( { props.storeComments.openAddComment(false); f7.popup.close('.add-comment-popup'); }}>{_t.textCancel} {_t.textAddComment} { if (props.onAddNewComment(stateText, false)) { props.storeComments.openAddComment(false); f7.popup.close('.add-comment-popup'); } }}> {Device.android ? : _t.textDone}
{Device.android &&
{userInfo.initials}
}
{userInfo.name}
{setText(event.target.value);}}>
) })); const AddCommentDialog = inject("storeComments")(observer(props => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); const userInfo = props.userInfo; const templateInitials = `
${userInfo.initials}
`; useEffect(() => { f7.dialog.create({ destroyOnClose: true, containerEl: document.getElementById('add-comment-dialog'), content: `
${Device.android ? templateInitials : ''}
${userInfo.name}
`, on: { opened: () => { const cancel = document.getElementById('comment-cancel'); cancel.addEventListener('click', () => { f7.dialog.close(); props.storeComments.openAddComment(false); }); const done = document.getElementById('comment-done'); done.addEventListener('click', () => { const value = document.getElementById('comment-text').value; if (value.length > 0 && props.onAddNewComment(value, false)) { f7.dialog.close(); props.storeComments.openAddComment(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 (
); })); const AddComment = props => { return ( Device.phone ? : ) }; // Actions const CommentActions = ({comment, onCommentMenuClick, opened, openActionComment}) => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); return ( openActionComment(false)}> {comment && {comment.editable && {onCommentMenuClick('editComment', comment);}}>{_t.textEdit}} {!comment.resolved ? {onCommentMenuClick('resolve', comment);}}>{_t.textResolve} : {onCommentMenuClick('resolve', comment);}}>{_t.textReopen} } {onCommentMenuClick('addReply', comment);}}>{_t.textAddReply} {comment.removable && {onCommentMenuClick('deleteComment', comment);}}>{_t.textDeleteComment}} } {_t.textCancel} ) }; // Edit comment 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); return ( { f7.popup.close('.edit-comment-popup'); storeComments.openEditComment(false); }}>{_t.textCancel} {_t.textEditComment} { onEditComment(comment, stateText); f7.popup.close('.edit-comment-popup'); storeComments.openEditComment(false); }} > {Device.android ? : _t.textDone}
{Device.android &&
{comment.userInitials}
}
{comment.userName}
{comment.date}
{setText(event.target.value);}}>
) })); const EditCommentDialog = inject("storeComments")(observer(({storeComments, comment, onEditComment}) => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); const templateInitials = `
${comment.userInitials}
`; useEffect(() => { f7.dialog.create({ destroyOnClose: true, containerEl: document.getElementById('edit-comment-dialog'), content: `
${Device.android ? templateInitials : ''}
${comment.userName}
${comment.date}
`, 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 (
); })); const EditComment = ({comment, onEditComment}) => { return ( Device.phone ? : ) }; 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 ( { storeComments.openAddReply(false); f7.popup.close('.add-reply-popup'); }}>{_t.textCancel} {_t.textAddReply} { onAddReply(comment, stateText); storeComments.openAddReply(false); f7.popup.close('.add-reply-popup'); }}> {Device.android ? : _t.textDone}
{Device.android &&
{userInfo.initials}
}
{userInfo.name}
{setText(event.target.value);}}>
) })); const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInfo, comment, onAddReply}) => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); const templateInitials = `
${userInfo.initials}
`; useEffect(() => { f7.dialog.create({ destroyOnClose: true, containerEl: document.getElementById('add-reply-dialog'), content: `
${Device.android ? templateInitials : ''}
${userInfo.name}
`, 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 (
); })); const AddReply = ({userInfo, comment, onAddReply}) => { return ( Device.phone ? : ) }; // View comments const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment}) => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); const isAndroid = Device.android; const viewMode = !storeAppOptions.canComments; const comments = storeComments.sortComments; const sliceQuote = (text) => { if (text) { let sliced = text.slice(0, 100); if (sliced.length < text.length) { sliced += '...'; return sliced; } return text; } }; const [clickComment, setClickComment] = useState(); const [commentActionsOpened, openActionComment] = useState(false); return ( {!comments ?
{_t.textNoComments}
: {comments.map((comment, indexComment) => { return (
{isAndroid &&
{comment.userInitials}
}
{comment.userName}
{comment.date}
{!viewMode &&
{onResolveComment(comment);}}>
{setClickComment(comment); openActionComment(true);}} >
}
{comment.quote &&
{sliceQuote(comment.quote)}
}
{comment.comment}
{comment.replies.length > 0 &&
    {comment.replies.map((reply, indexReply) => { return (
  • {isAndroid &&
    {reply.userInitials}
    }
    {reply.userName}
    {reply.date}
    {!viewMode &&
    }
    {reply.reply}
  • ) })}
}
) })}
}
) }; const _ViewComments = inject('storeComments', 'storeAppOptions')(observer(ViewComments)); export { AddComment, EditComment, AddReply, _ViewComments as ViewComments }