[DE mobile] Add review settings

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

@@ -104,8 +104,18 @@ class Review extends Component {
     }
 
     render() {
+        const displayMode = this.props.storeReview.displayMode;
+        const isReviewOnly = this.appConfig.isReviewOnly;
+        const canReview = this.appConfig.canReview;
+        const canUseReviewPermissions = this.appConfig.canUseReviewPermissions;
+        const isRestrictedEdit = this.appConfig.isRestrictedEdit;
         return (
-            <PageReview trackChanges={this.state.trackChanges}
+            <PageReview isReviewOnly={isReviewOnly}
+                        canReview={canReview}
+                        canUseReviewPermissions={canUseReviewPermissions}
+                        isRestrictedEdit={isRestrictedEdit}
+                        displayMode={displayMode}
+                        trackChanges={this.state.trackChanges}
                         onTrackChanges={this.onTrackChanges}
                         onAcceptAll={this.onAcceptAll}
                         onRejectAll={this.onRejectAll}
@@ -118,6 +128,11 @@ class Review extends Component {
 class ReviewChange extends Component {
     constructor (props) {
         super(props);
+        this.onAcceptCurrentChange = this.onAcceptCurrentChange.bind(this);
+        this.onRejectCurrentChange = this.onRejectCurrentChange.bind(this);
+        this.onGotoNextChange = this.onGotoNextChange.bind(this);
+        this.onDeleteChange = this.onDeleteChange.bind(this);
+
         this.appConfig = props.storeAppOptions;
 
         if (this.appConfig && this.appConfig.canUseReviewPermissions) {
@@ -375,29 +390,83 @@ class ReviewChange extends Component {
             const userColor = item.get_UserColor();
             const goto = (item.get_MoveType() == Asc.c_oAscRevisionsMove.MoveTo || item.get_MoveType() == Asc.c_oAscRevisionsMove.MoveFrom);
             date = this.dateToLocaleTimeString(date);
-            const editable = this.appConfig.isReviewOnly && (item.get_UserId() == _userId) || !this.appConfig.isReviewOnly && (!this.appConfig.canUseReviewPermissions || this.checkUserGroups(item.get_UserName()));
+            const editable = this.appConfig.isReviewOnly && (item.get_UserId() == this.appConfig.user.id) || !this.appConfig.isReviewOnly && (!this.appConfig.canUseReviewPermissions || this.checkUserGroups(item.get_UserName()));
             arr.push({date: date, user: user, userColor: userColor, changeText: changeText, goto: goto, editable: editable});
         });
         return arr;
     }
 
+    onPrevChange () {
+        const api = Common.EditorApi.get();
+        api.asc_GetPrevRevisionsChange();
+    }
+
+    onNextChange () {
+        const api = Common.EditorApi.get();
+        api.asc_GetNextRevisionsChange();
+    }
+
+    onAcceptCurrentChange () {
+        const api = Common.EditorApi.get();
+        api.asc_AcceptChanges(this.dataChanges[0]);
+        setTimeout(() => {
+            api.asc_GetNextRevisionsChange();
+        });
+    }
+
+    onRejectCurrentChange () {
+        const api = Common.EditorApi.get();
+        api.asc_RejectChanges(this.dataChanges[0]);
+        setTimeout(() => {
+            api.asc_GetNextRevisionsChange();
+        });
+    }
+
+    onGotoNextChange () {
+        const api = Common.EditorApi.get();
+        api.asc_FollowRevisionMove(this.dataChanges[0]);
+    }
+
+    onDeleteChange () {
+        const api = Common.EditorApi.get();
+        api.asc_RejectChanges(this.dataChanges[0]);
+    }
+
     render() {
-        const dataChanges = this.props.storeReview.dataChanges;
+        this.dataChanges = this.props.storeReview.dataChanges;
-        const arrChangeReview = this.getArrChangeReview(dataChanges);
+        const arrChangeReview = this.getArrChangeReview(this.dataChanges);
         let change;
         let goto = false;
         if (arrChangeReview.length > 0) {
             change = {
                 date: arrChangeReview[0].date,
                 user: arrChangeReview[0].user,
+                userName: Common.Utils.String.htmlEncode(Common.Utils.UserInfoParser.getParsedName(arrChangeReview[0].user)),
                 color: arrChangeReview[0].userColor.get_hex(),
                 text: arrChangeReview[0].changeText,
-                initials: this.getInitials(arrChangeReview[0].user)
+                initials: this.getInitials(arrChangeReview[0].user),
+                editable: arrChangeReview[0].editable
             };
             goto = arrChangeReview[0].goto;
         }
+
+        const isReviewOnly = this.appConfig.isReviewOnly;
+        const canReview = this.appConfig.canReview;
+        const displayMode = this.props.storeReview.displayMode;
+
         return (
-            <PageReviewChange change={change} goto={goto}/>
+            <PageReviewChange change={change}
+                              goto={goto}
+                              isReviewOnly={isReviewOnly}
+                              canReview={canReview}
+                              displayMode={displayMode}
+                              onPrevChange={this.onPrevChange}
+                              onNextChange={this.onNextChange}
+                              onAcceptCurrentChange={this.onAcceptCurrentChange}
+                              onRejectCurrentChange={this.onRejectCurrentChange}
+                              onGotoNextChange={this.onGotoNextChange}
+                              onDeleteChange={this.onDeleteChange}
+            />
         )
     }
 }

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

@@ -9,35 +9,44 @@ const PageReview = props => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
 
+    const isDisableAllSettings = props.isReviewOnly || props.displayMode === "final" || props.displayMode === "original";
+    const canReview = !!props.canReview;
+
     return (
        <Page>
            <Navbar title={_t.textReview} backLink={_t.textBack}/>
            <List>
-               <ListItem title={_t.textTrackChanges}>
+               {canReview &&
-                   <Toggle checked={props.trackChanges} onToggleChange={
+                    <ListItem title={_t.textTrackChanges} className={isDisableAllSettings ? 'disabled' : ''}>
-                       (prev) => {
+                        <Toggle checked={props.trackChanges} onToggleChange={
-                           props.onTrackChanges(!prev);
+                            (prev) => {
-                       }
+                                props.onTrackChanges(!prev);
-                   }/>
+                            }
-               </ListItem>
+                        }/>
-               <ListItem title={_t.textDisplayMode} link={'/display-mode/'} routeProps={{
+                    </ListItem>
-                   onDisplayMode: props.onDisplayMode
+               }
-               }}/>
+               {!props.isRestrictedEdit &&
+                    <ListItem title={_t.textDisplayMode} link={'/display-mode/'} routeProps={{
+                        onDisplayMode: props.onDisplayMode
+                    }}/>
+               }
            </List>
            <List>
                <ListItem title={_t.textReviewChange} link={'/review-change/'}>
                    <Icon slot="media" icon="icon-review-changes"></Icon>
                </ListItem>
-               <ListItem title={_t.textAcceptAllChanges} link='#' className='no-indicator' onClick={() => {
+               {canReview && !props.canUseReviewPermissions &&
-                   props.onAcceptAll();
+                    <ListItem title={_t.textAcceptAllChanges} link='#'
-               }}>
+                              className={'no-indicator' + (isDisableAllSettings ? ' disabled' : '')} onClick={() => {props.onAcceptAll();}}>
-                   <Icon slot="media" icon="icon-accept-changes"></Icon>
+                        <Icon slot="media" icon="icon-accept-changes"></Icon>
-               </ListItem>
+                    </ListItem>
-               <ListItem title={_t.textRejectAllChanges} link='#' className='no-indicator' onClick={() => {
+               }
-                   props.onRejectAll();
+               {canReview && !props.canUseReviewPermissions &&
-               }}>
+                    <ListItem title={_t.textRejectAllChanges} link='#'
-                   <Icon slot="media" icon="icon-reject-changes"></Icon>
+                              className={'no-indicator' + (isDisableAllSettings ? ' disabled' : '')} onClick={() => {props.onRejectAll();}}>
-               </ListItem>
+                        <Icon slot="media" icon="icon-reject-changes"></Icon>
+                    </ListItem>
+               }
            </List>
        </Page>
     )
@@ -85,30 +94,57 @@ const PageReviewChange = props => {
     const { t } = useTranslation();
     const _t = t('Common.Collaboration', {returnObjects: true});
     const change = props.change;
+    const displayMode = props.displayMode;
+    const isLockAcceptReject = (!change || (change && !change.editable) || (displayMode === "final" || displayMode === "original") || !props.canReview);
+    const isLockPrevNext = (displayMode === "final" || displayMode === "original");
     return (
         <Page className='page-review'>
             <Navbar title={_t.textReviewChange} backLink={_t.textBack}/>
             <Toolbar position='bottom'>
                 <span className='change-buttons row'>
-                    <span className='accept-reject row'>
+                    {!props.isReviewOnly &&
-                        <Link id='btn-accept-change' href='#' className={!change && 'disabled'}>{_t.textAccept}</Link>
+                        <span className='accept-reject row'>
-                        <Link id='btn-reject-change' href='#' className={!change && 'disabled'}>{_t.textReject}</Link>
+                            <Link id='btn-accept-change'
-                    </span>
+                                  href='#'
-                    {props.goto && <Link href='#' id='btn-goto-change'><Icon slot='media' icon='icon-goto'/></Link>}
+                                  className={isLockAcceptReject && 'disabled'}
+                                  onClick={() => {props.onAcceptCurrentChange()}}
+                            >{_t.textAccept}</Link>
+                            <Link id='btn-reject-change'
+                                  href='#'
+                                  className={isLockAcceptReject && 'disabled'}
+                                  onClick={() => {props.onRejectCurrentChange()}}
+                            >{_t.textReject}</Link>
+                        </span>
+                    }
+                    {props.isReviewOnly && change && change.editable &&
+                        <span className='delete'>
+                            <Link href='#' id="btn-delete-change" onClick={() => {props.onDeleteChange()}}>{_t.textDelete}</Link>
+                        </span>
+                    }
+                    {props.goto && <Link href='#' id='btn-goto-change' onClick={() => {props.onGotoNextChange()}}><Icon slot='media' icon='icon-goto'/></Link>}
                 </span>
                 <span className='next-prev row'>
-                    <Link id='btn-prev-change' href='#'><Icon slot='media' icon='icon-prev-change'/></Link>
+                    <Link id='btn-prev-change'
-                    <Link id='btn-next-change' href='#'><Icon slot='media' icon='icon-next-change'/></Link>
+                          href='#'
+                          onClick={() => {props.onPrevChange()}}
+                          className={isLockPrevNext && 'disabled'}
+                    ><Icon slot='media' icon='icon-prev-change'/></Link>
+                    <Link id='btn-next-change'
+                          href='#'
+                          onClick={() => {props.onNextChange()}}
+                          className={isLockPrevNext && 'disabled'}
+                    ><Icon slot='media' icon='icon-next-change'/></Link>
                 </span>
             </Toolbar>
             {change ?
                 <div className='block-description'>
                     <div className='header-change'>
                         {isAndroid &&
-                        <div className='initials' style={{backgroundColor: `#${change.color}`}}>{change.initials}</div>}
+                            <div className='initials' style={{backgroundColor: `#${change.color}`}}>{change.initials}</div>
+                        }
                         <div className='info'>
-                            <div id='user-name'>{change.userName}</div>
+                            <div className='user-name'>{change.userName}</div>
-                            <div id='date-change'>{change.date}</div>
+                            <div className='date-change'>{change.date}</div>
                         </div>
                     </div>
                     <div className='text' dangerouslySetInnerHTML={{__html: change.text}}></div>

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

@@ -2,6 +2,7 @@
 @white: #ffffff;
 @black: #000000;
 @gray: #c4c4c4;
+@darkGray: #6d6d72;
 @green: #4cd964;
 @red: #f00;
 @background-normal: @white;

apps/documenteditor/mobile/locale/en.json

@@ -54,6 +54,7 @@
       "textAccept": "Accept",
       "textReject": "Reject",
       "textNoChanges": "There are no changes.",
+      "textDelete": "Delete",
       "textInserted": "<b>Inserted:</b>",
       "textDeleted": "<b>Deleted:</b>",
       "textParaInserted": "<b>Paragraph Inserted</b> ",

apps/documenteditor/mobile/src/less/app-material.less

@@ -28,6 +28,9 @@
 
     // Review
     .page-review {
+        .header-change {
+            display: flex;
+        }
         .toolbar {
             height: 56px;
             .toolbar-inner {
@@ -40,6 +43,17 @@
                 }
             }
         }
+        .initials {
+            height: 40px;
+            width: 40px;
+            border-radius: 50px;
+            color: @white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 16px;
+            font-size: 18px;
+        }
     }
 }
 

apps/documenteditor/mobile/src/less/app.less

@@ -41,6 +41,32 @@
     }
     .page-content {
         background-color: @white;
+        .no-changes {
+            padding: 15px;
+        }
+        .block-description {
+            padding: 15px;
+            .user-name {
+                font-size: 17px;
+                line-height: 22px;
+                color: @black;
+                margin: 0;
+            }
+            .date-change {
+                font-size: 14px;
+                line-height: 18px;
+                color: @darkGray;
+                margin: 0;
+                margin-top: 3px;
+            }
+            .text {
+                color: @black;
+                font-size: 15px;
+                line-height: 20px;
+                margin: 0;
+                margin-top: 10px;
+            }
+        }
     }
 }