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:
`
`,
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 (
)
};
// 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:
`
`,
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:
`
`,
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.replies.length > 0 &&
{comment.replies.map((reply, indexReply) => {
return (
-
{isAndroid &&
{reply.userInitials}
}
{reply.userName}
{reply.date}
{!viewMode &&
}
)
})}
}
)
})}
}
)
};
const _ViewComments = inject('storeComments', 'storeAppOptions')(observer(ViewComments));
export {
AddComment,
EditComment,
AddReply,
_ViewComments as ViewComments
}