[DE mobile] Add review settings

2021-02-12 20:33:38 +03:00 · 2021-02-12 20:33:38 +03:00 · 4e8be323a8
parent 96795be9a6
commit 4e8be323a8
6 changed files with 183 additions and 36 deletions
--- a/apps/common/mobile/lib/controller/collaboration/Review.jsx
+++ b/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;
-        const arrChangeReview = this.getArrChangeReview(dataChanges);
+        this.dataChanges = this.props.storeReview.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}
+            />
        )
    }
 }
--- a/apps/common/mobile/lib/view/collaboration/Review.jsx
+++ b/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}>
-                   <Toggle checked={props.trackChanges} onToggleChange={
-                       (prev) => {
-                           props.onTrackChanges(!prev);
-                       }
-                   }/>
-               </ListItem>
-               <ListItem title={_t.textDisplayMode} link={'/display-mode/'} routeProps={{
-                   onDisplayMode: props.onDisplayMode
-               }}/>
+               {canReview &&
+                    <ListItem title={_t.textTrackChanges} className={isDisableAllSettings ? 'disabled' : ''}>
+                        <Toggle checked={props.trackChanges} onToggleChange={
+                            (prev) => {
+                                props.onTrackChanges(!prev);
+                            }
+                        }/>
+                    </ListItem>
+               }
+               {!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={() => {
-                   props.onAcceptAll();
-               }}>
-                   <Icon slot="media" icon="icon-accept-changes"></Icon>
-               </ListItem>
-               <ListItem title={_t.textRejectAllChanges} link='#' className='no-indicator' onClick={() => {
-                   props.onRejectAll();
-               }}>
-                   <Icon slot="media" icon="icon-reject-changes"></Icon>
-               </ListItem>
+               {canReview && !props.canUseReviewPermissions &&
+                    <ListItem title={_t.textAcceptAllChanges} link='#'
+                              className={'no-indicator' + (isDisableAllSettings ? ' disabled' : '')} onClick={() => {props.onAcceptAll();}}>
+                        <Icon slot="media" icon="icon-accept-changes"></Icon>
+                    </ListItem>
+               }
+               {canReview && !props.canUseReviewPermissions &&
+                    <ListItem title={_t.textRejectAllChanges} link='#'
+                              className={'no-indicator' + (isDisableAllSettings ? ' disabled' : '')} onClick={() => {props.onRejectAll();}}>
+                        <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'>
-                        <Link id='btn-accept-change' href='#' className={!change && 'disabled'}>{_t.textAccept}</Link>
-                        <Link id='btn-reject-change' href='#' className={!change && 'disabled'}>{_t.textReject}</Link>
-                    </span>
-                    {props.goto && <Link href='#' id='btn-goto-change'><Icon slot='media' icon='icon-goto'/></Link>}
+                    {!props.isReviewOnly &&
+                        <span className='accept-reject row'>
+                            <Link id='btn-accept-change'
+                                  href='#'
+                                  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-next-change' href='#'><Icon slot='media' icon='icon-next-change'/></Link>
+                    <Link id='btn-prev-change'
+                          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 id='date-change'>{change.date}</div>
+                            <div className='user-name'>{change.userName}</div>
+                            <div className='date-change'>{change.date}</div>
                        </div>
                    </div>
                    <div className='text' dangerouslySetInnerHTML={{__html: change.text}}></div>
--- a/apps/common/mobile/resources/less/common.less
+++ b/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;
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/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> ",
--- a/apps/documenteditor/mobile/src/less/app-material.less
+++ 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;
+        }
    }
 }

--- a/apps/documenteditor/mobile/src/less/app.less
+++ b/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;
+            }
+        }
    }
 }