[SSE mobile] Fix comments

This commit is contained in:
JuliaSvinareva 2021-03-26 16:23:17 +03:00
parent 56e316738e
commit 465fd40004
6 changed files with 56 additions and 101 deletions

View file

@ -272,10 +272,7 @@ class AddCommentController extends Component {
!!comment.asc_putDocumentFlag && comment.asc_putDocumentFlag(documentFlag); !!comment.asc_putDocumentFlag && comment.asc_putDocumentFlag(documentFlag);
api.asc_addComment(comment); api.asc_addComment(comment);
return true;
} }
return false;
} }
render() { render() {
return( return(
@ -316,10 +313,10 @@ class EditCommentController extends Component {
ascComment.asc_putDocumentFlag(comment.unattached); ascComment.asc_putDocumentFlag(comment.unattached);
} }
var reply = comment.replies; const reply = comment.replies;
if (reply && reply.length > 0) { if (reply && reply.length > 0) {
reply.forEach((reply) => { reply.forEach((reply) => {
var addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null)); const addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
if (addReply) { if (addReply) {
addReply.asc_putText(reply.reply); addReply.asc_putText(reply.reply);
addReply.asc_putTime(utcDateToString(new Date(reply.time))); addReply.asc_putTime(utcDateToString(new Date(reply.time)));

View file

@ -7,7 +7,6 @@ export class storeComments {
collectionComments: observable, collectionComments: observable,
groupCollectionComments: observable, groupCollectionComments: observable,
filter: observable, filter: observable,
groupCollectionFilter: observable,
showComments: observable, showComments: observable,
changeShowComment: action, changeShowComment: action,
@ -17,7 +16,7 @@ export class storeComments {
changeComment: action, changeComment: action,
changeFilter: action, changeFilter: action,
sortComments: computed, groupCollectionFilter: computed,
isOpenEditComment: observable, isOpenEditComment: observable,
openEditComment: action, openEditComment: action,
@ -31,7 +30,6 @@ export class storeComments {
groupCollectionComments = []; groupCollectionComments = [];
filter = undefined; filter = undefined;
groupCollectionFilter = []; // for sse
showComments = []; showComments = [];
changeShowComment (uid) { changeShowComment (uid) {
@ -42,54 +40,16 @@ export class storeComments {
} }
addComment (comment) { addComment (comment) {
comment.groupName ? this.addCommentToGroupCollection(comment) : this.addCommentToCollection(comment); comment.groupName ? this.groupCollectionComments.push(comment) : this.collectionComments.push(comment);
}
addCommentToCollection (comment) {
this.collectionComments.push(comment);
}
addCommentToGroupCollection (comment) {
const groupName = comment.groupName;
if (!this.groupCollectionComments[groupName]) {
this.groupCollectionComments[groupName] = [];
}
this.groupCollectionComments[groupName].push(comment);
if (typeof this.filter === 'object' && this.filter.indexOf(groupName) !== -1) {
this.groupCollectionFilter.push(comment);
}
} }
removeComment (id) { removeComment (id) {
if (this.collectionComments.length > 0) { const collection = this.collectionComments.length > 0 ? this.collectionComments : this.groupCollectionComments;
this.removeCommentFromCollection(id); const index = collection.findIndex((comment) => {
} else {
this.removeCommentFromGroups(id);
}
}
removeCommentFromCollection (id) {
const index = this.collectionComments.findIndex((comment) => {
return comment.uid === id; return comment.uid === id;
}); });
if (index !== -1) { if (index !== -1) {
this.collectionComments.splice(index, 1); collection.splice(index, 1);
}
}
removeCommentFromGroups (id) {
for (let name in this.groupCollectionComments) {
const store = this.groupCollectionComments[name];
const comment = store.find((item) => {
return item.uid === id;
});
const index = store.indexOf(comment);
if (index !== -1) {
this.groupCollectionComments[name].splice(index, 1);
if (typeof this.filter === 'object' && this.filter.indexOf(name) !== -1) {
this.groupCollectionFilter.splice(this.groupCollectionFilter.indexOf(comment), 1);
}
}
} }
} }
@ -111,43 +71,28 @@ export class storeComments {
} }
changeFilter (filter) { changeFilter (filter) {
let comments = [];
this.filter = filter; this.filter = filter;
filter.forEach((item) => {
if (!this.groupCollectionComments[item])
this.groupCollectionComments[item] = [];
comments = comments.concat(this.groupCollectionComments[item]);
});
this.groupCollectionFilter = comments;
} }
findComment (id) { findComment (id) {
let comment = this.collectionComments.find((item) => { const collection = this.collectionComments.length > 0 ? this.collectionComments : this.groupCollectionComments;
let comment = collection.find((item) => {
return item.uid === id; return item.uid === id;
}); });
if (!comment) {
comment = this.findCommentInGroup(id);
}
return comment; return comment;
} }
findCommentInGroup (id) { get groupCollectionFilter () {
let model; if (this.filter && this.groupCollectionComments.length > 0) {
for (let name in this.groupCollectionComments) { const arr = [];
const store = this.groupCollectionComments[name]; this.filter.forEach((groupName) => {
const uid = typeof id === 'object' && id.isArray() ? id[0] : id; this.groupCollectionComments.forEach((comment) => {
model = store.find((item) => { if (comment.groupName === groupName) {
return item.uid === uid; arr.push(comment);
}
});
}); });
if (model) return model; return arr;
}
return model;
}
get sortComments () {
const comments = (this.groupCollectionFilter.length !== 0) ? this.groupCollectionFilter : (this.collectionComments.length !== 0 ? this.collectionComments : false);
if (comments.length > 0) {
return [...comments].sort((a, b) => a.time > b.time ? 1 : -1);
} }
return false; return false;
} }

View file

@ -41,12 +41,11 @@ const AddCommentPopup = inject("storeComments")(observer(props => {
<NavRight> <NavRight>
<Link className={stateText.length === 0 && 'disabled'} <Link className={stateText.length === 0 && 'disabled'}
onClick={() => { onClick={() => {
if (props.onAddNewComment(stateText, false)) { f7.popup.close('.add-comment-popup');
f7.popup.close('.add-comment-popup'); setTimeout(() => {
setTimeout(() => { props.closeAddComment();
props.closeAddComment(); props.onAddNewComment(stateText, false)
}, 500) }, 500);
}
}}> }}>
{Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone} {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
</Link> </Link>
@ -108,9 +107,10 @@ const AddCommentDialog = inject("storeComments")(observer(props => {
const done = document.getElementById('comment-done'); const done = document.getElementById('comment-done');
done.addEventListener('click', () => { done.addEventListener('click', () => {
const value = document.getElementById('comment-text').value; const value = document.getElementById('comment-text').value;
if (value.length > 0 && props.onAddNewComment(value, false)) { if (value.length > 0) {
f7.dialog.close(); f7.dialog.close();
props.closeAddComment(); props.closeAddComment();
props.onAddNewComment(value, false);
} }
}); });
const area = document.getElementById('comment-text'); const area = document.getElementById('comment-text');
@ -197,16 +197,20 @@ const EditCommentPopup = inject("storeComments")(observer(({storeComments, comme
<NavLeft> <NavLeft>
<Link onClick={() => { <Link onClick={() => {
f7.popup.close('.edit-comment-popup'); f7.popup.close('.edit-comment-popup');
storeComments.openEditComment(false); setTimeout(() => {
storeComments.openEditComment(false);
}, 500);
}}>{_t.textCancel}</Link> }}>{_t.textCancel}</Link>
</NavLeft> </NavLeft>
<NavTitle>{_t.textEditComment}</NavTitle> <NavTitle>{_t.textEditComment}</NavTitle>
<NavRight> <NavRight>
<Link className={stateText.length === 0 && 'disabled'} <Link className={stateText.length === 0 && 'disabled'}
onClick={() => { onClick={() => {
onEditComment(comment, stateText);
f7.popup.close('.edit-comment-popup'); f7.popup.close('.edit-comment-popup');
storeComments.openEditComment(false); setTimeout(() => {
storeComments.openEditComment(false);
onEditComment(comment, stateText);
}, 500);
}} }}
> >
{Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone} {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
@ -317,17 +321,21 @@ const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo
<Navbar> <Navbar>
<NavLeft> <NavLeft>
<Link onClick={() => { <Link onClick={() => {
storeComments.openAddReply(false);
f7.popup.close('.add-reply-popup'); f7.popup.close('.add-reply-popup');
setTimeout(() => {
storeComments.openAddReply(false);
}, 500);
}}>{_t.textCancel}</Link> }}>{_t.textCancel}</Link>
</NavLeft> </NavLeft>
<NavTitle>{_t.textAddReply}</NavTitle> <NavTitle>{_t.textAddReply}</NavTitle>
<NavRight> <NavRight>
<Link className={stateText.length === 0 && 'disabled'} <Link className={stateText.length === 0 && 'disabled'}
onClick={() => { onClick={() => {
onAddReply(comment, stateText);
storeComments.openAddReply(false);
f7.popup.close('.add-reply-popup'); f7.popup.close('.add-reply-popup');
setTimeout(() => {
storeComments.openAddReply(false);
onAddReply(comment, stateText);
}, 500);
}}> }}>
{Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone} {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
</Link> </Link>
@ -433,16 +441,20 @@ const EditReplyPopup = inject("storeComments")(observer(({storeComments, comment
<NavLeft> <NavLeft>
<Link onClick={() => { <Link onClick={() => {
f7.popup.close('.edit-reply-popup'); f7.popup.close('.edit-reply-popup');
storeComments.openEditReply(false); setTimeout(() => {
storeComments.openEditReply(false);
}, 500);
}}>{_t.textCancel}</Link> }}>{_t.textCancel}</Link>
</NavLeft> </NavLeft>
<NavTitle>{_t.textEditReply}</NavTitle> <NavTitle>{_t.textEditReply}</NavTitle>
<NavRight> <NavRight>
<Link className={stateText.length === 0 && 'disabled'} <Link className={stateText.length === 0 && 'disabled'}
onClick={() => { onClick={() => {
onEditReply(comment, reply, stateText);
f7.popup.close('.edit-reply-popup'); f7.popup.close('.edit-reply-popup');
storeComments.openEditReply(false); setTimeout(() => {
storeComments.openEditReply(false);
onEditReply(comment, reply, stateText);
}, 500);
}} }}
> >
{Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone} {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
@ -548,7 +560,8 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
const isAndroid = Device.android; const isAndroid = Device.android;
const viewMode = !storeAppOptions.canComments; const viewMode = !storeAppOptions.canComments;
const comments = storeComments.sortComments; const comments = storeComments.groupCollectionFilter || storeComments.collectionComments;
const sortComments = comments.length > 0 ? [...comments].sort((a, b) => a.time > b.time ? 1 : -1) : null;
const [clickComment, setComment] = useState(); const [clickComment, setComment] = useState();
const [commentActionsOpened, openActionComment] = useState(false); const [commentActionsOpened, openActionComment] = useState(false);
@ -559,10 +572,10 @@ const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onRes
return ( return (
<Page> <Page>
<Navbar title={_t.textComments} backLink={_t.textBack}/> <Navbar title={_t.textComments} backLink={_t.textBack}/>
{!comments ? {!sortComments ?
<div className='no-comments'>{_t.textNoComments}</div> : <div className='no-comments'>{_t.textNoComments}</div> :
<List className='comment-list'> <List className='comment-list'>
{comments.map((comment, indexComment) => { {sortComments.map((comment, indexComment) => {
return ( return (
<ListItem key={`comment-${indexComment}`}> <ListItem key={`comment-${indexComment}`}>
<div slot='header' className='comment-header'> <div slot='header' className='comment-header'>

View file

@ -22,7 +22,8 @@ class AddOtherController extends Component {
const cellinfo = Common.EditorApi.get().asc_getCellInfo(); const cellinfo = Common.EditorApi.get().asc_getCellInfo();
const iscelllocked = cellinfo.asc_getLocked(); const iscelllocked = cellinfo.asc_getLocked();
const seltype = cellinfo.asc_getSelectionType(); const seltype = cellinfo.asc_getSelectionType();
return !(seltype === Asc.c_oAscSelectionType.RangeCells && !iscelllocked); const isComments = cellinfo.asc_getComments().length > 0;
return (!(seltype === Asc.c_oAscSelectionType.RangeCells && !iscelllocked) || isComments);
} }
render () { render () {

View file

@ -34,9 +34,8 @@ export default class extends React.Component {
return ( return (
<App { ...f7params } > <App { ...f7params } >
{/* Your main view, should have "view-main" class */} {/* Your main view, should have "view-main" class */}
<View main className="safe-areas" url="/"> <View main className="safe-areas" url="/" />
<MainController /> <MainController />
</View>
</App> </App>
) )
} }

View file

@ -70,7 +70,7 @@ export default class MainPage extends Component {
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link> <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link> <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
{ Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> } { Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
<Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link> <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link> <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight> </NavRight>
<Search useSuspense={false} /> <Search useSuspense={false} />