[DE mobile] Add editing a table of contents v.2

apps/documenteditor/mobile/locale/en.json

@@ -350,7 +350,10 @@
     "textCentered": "Centered",
     "textFormal": "Formal",
     "textStandard": "Standard",
-    "textModern": "Modern"
+    "textModern": "Modern",
+    "textCancel": "Cancel",
+    "textRefreshEntireTable": "Refresh entire table",
+    "textRefreshPageNumbersOnly": "Refresh page numbers only"
   },
   "Error": {
     "convertationTimeoutText": "Conversion timeout exceeded.",

apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx

@@ -10,20 +10,40 @@ class EditTableContentsController extends Component {
         super(props);
     }
 
-    onStyle(value, type) {
+    onStyle(value) {
         const api = Common.EditorApi.get();
         const propsTableContents = api.asc_GetTableOfContentsPr();
+    
         propsTableContents.put_StylesType(value);
-
-        if (type === 1) {
-            let checked = (value !== Asc.c_oAscTOFStylesType.Centered);
-            propsTableContents.put_RightAlignTab(checked);
-            // checked && properties.put_TabLeader(this.cmbLeader.getValue());
-        }
-        console.log(propsTableContents);
         api.asc_SetTableOfContentsPr(propsTableContents);
     }
 
+    onPageNumbers(value) {
+        const api = Common.EditorApi.get();
+        const propsTableContents = api.asc_GetTableOfContentsPr();
+
+        propsTableContents.put_ShowPageNumbers(value);
+        propsTableContents.put_RightAlignTab(value);
+        api.asc_SetTableOfContentsPr(propsTableContents);
+    }
+
+    onRightAlign(value) {
+        const api = Common.EditorApi.get();
+        const propsTableContents = api.asc_GetTableOfContentsPr();
+
+        propsTableContents.put_RightAlignTab(value);
+        api.asc_SetTableOfContentsPr(propsTableContents);
+    }
+
+    onLeader(value) {
+        const api = Common.EditorApi.get();
+        const propsTableContents = api.asc_GetTableOfContentsPr();
+
+        propsTableContents.put_TabLeader(value);
+        api.asc_SetTableOfContentsPr(propsTableContents);
+
+    }
+
     onTableContentsUpdate(type, currentTOC) {
         const api = Common.EditorApi.get();
         let props = api.asc_GetTableOfContentsPr(currentTOC);
@@ -48,6 +68,11 @@ class EditTableContentsController extends Component {
         return (
             <EditTableContents 
                 onStyle={this.onStyle} 
+                onTableContentsUpdate={this.onTableContentsUpdate}
+                onRemoveTableContents={this.onRemoveTableContents}
+                onPageNumbers={this.onPageNumbers}
+                onRightAlign={this.onRightAlign}
+                onLeader={this.onLeader}
             />
         )
     }

apps/documenteditor/mobile/src/store/mainStore.js

@@ -16,7 +16,6 @@ import {storePalette} from "./palette";
 import {storeReview} from '../../../../common/mobile/lib/store/review';
 import {storeComments} from "../../../../common/mobile/lib/store/comments";
 import {storeToolbarSettings} from "./toolbar";
-import {storeTableContent} from "./tableContent";
 
 export const stores = {
     storeAppOptions: new storeAppOptions(),
@@ -36,6 +35,5 @@ export const stores = {
     storeReview: new storeReview(),
     storeComments: new storeComments(),
     storeToolbarSettings: new storeToolbarSettings(),
-    storeTableContent: new storeTableContent()
 };
 

apps/documenteditor/mobile/src/store/tableContent.js

@@ -1,67 +0,0 @@
-import {action, observable, computed, makeObservable} from 'mobx';
-
-export class storeTableContent {
-    constructor() {
-        makeObservable(this, {
-            type: observable,
-            changeType: action,
-            options: observable,
-            initSettings: action
-        });
-    }
-
-    type = 0;
-
-    changeType(value) {
-        this.type = value;
-    }
-
-    options = {
-        contentWidth: 500,
-        height: 455
-    };
-
-    initSettings(props) {
-        // if (props) {
-        //     // var value = props.get_Hyperlink();
-        //     // this.chLinks.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
-        //     let value = props.get_StylesType();
-            
-        //     this.cmbStyles.setValue((value!==null) ? value : Asc.c_oAscTOCStylesType.Current);
-        //     value = props.get_ShowPageNumbers();
-        //     this.chPages.setValue((value !== null && value !== undefined) ? value : 'indeterminate');
-        //     if (this.chPages.getValue() == 'checked') {
-        //         value = props.get_RightAlignTab();
-        //         this.chAlign.setValue((value !== null && value !== undefined) ? value : 'indeterminate');
-        //         if (this.chAlign.getValue() == 'checked') {
-        //             value = props.get_TabLeader();
-        //             (value!==undefined) && this.cmbLeader.setValue(value);
-        //         }
-        //     } else {
-        //         (this.type==1) && (this.cmbStyles.getValue()==Asc.c_oAscTOFStylesType.Centered) && this.chAlign.setValue(false);
-        //     }
-        // }
-
-        // (this.type==1) ? this.fillTOFProps(props) : this.fillTOCProps(props);
-
-        // // Show Pages is always true when window is opened
-        // this._originalProps = (props) ? props : new Asc.CTableOfContentsPr();
-        // if (!props) {
-        //     if (this.type==1) {
-        //         this._originalProps.put_Caption(this.textFigure);
-        //         this._originalProps.put_IncludeLabelAndNumber(this.chFullCaption.getValue() == 'checked');
-        //     } else {
-        //         this._originalProps.put_OutlineRange(this.startLevel, this.endLevel);
-        //     }
-        //     this._originalProps.put_Hyperlink(this.chLinks.getValue() == 'checked');
-        //     this._originalProps.put_ShowPageNumbers(this.chPages.getValue() == 'checked');
-        //     if (this.chPages.getValue() == 'checked') {
-        //         this._originalProps.put_RightAlignTab(this.chAlign.getValue() == 'checked');
-        //         this._originalProps.put_TabLeader(this.cmbLeader.getValue());
-        //     }
-        // }
-
-        // (this.type==1) ? this.api.SetDrawImagePlaceTableOfFigures('tableofcontents-img', this._originalProps) : this.api.SetDrawImagePlaceContents('tableofcontents-img', this._originalProps);
-        // this.scrollerY.update();
-    }
-}

apps/documenteditor/mobile/src/view/edit/Edit.jsx

@@ -21,7 +21,7 @@ import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShap
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
 import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
 import {PageChartDesign,  PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
-import { EditStylesTableContents } from './EditTableContents';
+import { PageEditLeaderTableContents, PageEditStylesTableContents } from './EditTableContents';
 
 const routes = [
     //Edit text
@@ -191,7 +191,11 @@ const routes = [
 
     {
         path: '/edit-style-table-contents/',
-        component: EditStylesTableContents
+        component: PageEditStylesTableContents
+    },
+    {
+        path: '/edit-leader-table-contents/',
+        component: PageEditLeaderTableContents
     }
 ];
 

apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useEffect, useState } from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle} from 'framework7-react';
+import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
@@ -10,8 +10,11 @@ const EditTableContents = props => {
     const api = Common.EditorApi.get();
     const propsTableContents = api.asc_GetTableOfContentsPr();
     console.log(propsTableContents);
-    const storeTableContent = props.storeTableContent;
+    const [type, setType] = useState(0);
-    const type = storeTableContent.type;
+    const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
+    const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers());
+    const [rightAlign, setRightAlign] = useState(propsTableContents.get_RightAlignTab());
+    const [leaderValue, setLeaderValue] = useState(propsTableContents.get_TabLeader() ? propsTableContents.get_TabLeader() : Asc.c_oAscTabLeader.Dot);
     const arrStyles = (type === 1) ? [
         { displayValue: t('Edit.textCurrent'),     value: Asc.c_oAscTOFStylesType.Current },
         { displayValue: t('Edit.textSimple'),     value: Asc.c_oAscTOFStylesType.Simple },
@@ -28,29 +31,81 @@ const EditTableContents = props => {
         { displayValue: t('Edit.textModern'),     value: Asc.c_oAscTOCStylesType.Modern },
         { displayValue: t('Edit.textClassic'),     value: Asc.c_oAscTOCStylesType.Classic }
     ];
+    const arrLeaders = [
+        { value: Asc.c_oAscTabLeader.None,      displayValue: t('Edit.textNone') },
+        { value: Asc.c_oAscTabLeader.Dot,       displayValue: '....................' },
+        { value: Asc.c_oAscTabLeader.Hyphen,    displayValue: '-----------------' },
+        { value: Asc.c_oAscTabLeader.Underscore,displayValue: '__________' }
+    ];
 
-    const activeStyle = arrStyles.find(style => style.value === propsTableContents.get_StylesType());
+    const activeStyle = arrStyles.find(style => style.value === styleValue);
+    const activeLeader = arrLeaders.find(leader => leader.value === leaderValue);
+
+    const openActionsButtonsRefresh = () => {
+        f7.actions.create({
+            buttons: [
+                [
+                  {
+                    text: t('Edit.textRefreshEntireTable'),
+                    onClick: () => props.onTableContentsUpdate('all')
+                  },
+                  {
+                    text: t('Edit.textRefreshPageNumbersOnly'),
+                    onClick: () => props.onTableContentsUpdate('pages')
+                  }
+                ],
+                [
+                  {
+                    text: t('Edit.textCancel'),
+                    bold: true
+                  }
+                ]
+              ]
+        }).open()
+    }
 
     return (
         <Fragment>
             <List>
-                <ListItem title={t('Edit.textStyle')} link="/edit-style-table-contents/" after={activeStyle.displayValue} routeProps={{onStyle: props.onStyle, arrStyles}}></ListItem>
+                <ListItem title={t('Edit.textStyle')} link="/edit-style-table-contents/" after={activeStyle.displayValue} routeProps={{
+                    onStyle: props.onStyle, 
+                    arrStyles,
+                    setStyleValue,
+                    styleValue
+                }}></ListItem>
             </List>
             <List>
                 <ListItem>
                     <span>{t('Edit.textPageNumbers')}</span>
-                    <Toggle defaultChecked></Toggle>
+                    <Toggle checked={pageNumbers} onToggleChange={() => {
+                        setPageNumbers(!pageNumbers);
+                        props.onPageNumbers(!pageNumbers);
+                    }}></Toggle>
                 </ListItem>
-                <ListItem>
+                {pageNumbers && 
-                    <span>{t('Edit.textRightAlign')}</span>
+                    <ListItem>
-                    <Toggle defaultChecked></Toggle>
+                        <span>{t('Edit.textRightAlign')}</span>
-                </ListItem>
+                        <Toggle checked={rightAlign} onToggleChange={() => {
-                <ListItem title={t('Edit.textLeader')} link="/edit-table-contents-leader" after=""></ListItem>
+                            setRightAlign(!rightAlign);
+                            props.onRightAlign(!rightAlign);
+                        }}></Toggle>
+                    </ListItem>
+                }
+                {(pageNumbers && rightAlign) &&
+                    <ListItem title={t('Edit.textLeader')} link="/edit-leader-table-contents/" 
+                        after={activeLeader ? activeLeader.displayValue : arrLeaders[0].displayValue} routeProps={{
+                        onLeader: props.onLeader,
+                        arrLeaders,
+                        leaderValue,
+                        setLeaderValue
+                    }}></ListItem>
+                }
                 <ListItem title={t('Edit.textStructure')} link="/edit-table-contents-structure/" after={t('Edit.textLevels')}></ListItem>
             </List>
             <List className="buttons-list">
-                <ListButton className={'button-fill button-raised'} title={t('Edit.textRefresh')} />
+                <ListButton className={'button-fill button-raised'} title={t('Edit.textRefresh')} 
-                <ListButton className='button-red button-fill button-raised' title={t('Edit.textRemoveTableContent')} />
+                    onClick={() => openActionsButtonsRefresh()} />
+                <ListButton className='button-red button-fill button-raised' title={t('Edit.textRemoveTableContent')} onClick={() => props.onRemoveTableContents()} />
             </List>
         </Fragment>
     )
@@ -59,13 +114,7 @@ const EditTableContents = props => {
 const PageEditStylesTableContents = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
-    const api = Common.EditorApi.get();
+    const [styleValue, setStyleValue] = useState(props.styleValue);
-    const propsTableContents = api.asc_GetTableOfContentsPr();
-    const storeTableContent = props.storeTableContent;
-    const type = storeTableContent.type;
-    const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType());
-    // const styleValue = propsTableContents.get_StylesType();
-    console.log(styleValue);
 
     return (
         <Page>
@@ -81,7 +130,11 @@ const PageEditStylesTableContents = props => {
             <List>
                 {props.arrStyles.map((style, index) => {
                     return (
-                        <ListItem key={index} radio title={style.displayValue} value={style.value} checked={style.value === styleValue} onClick={() => {setStyleValue(style.value); props.onStyle(style.value, type)}}></ListItem>
+                        <ListItem key={index} radio title={style.displayValue} value={style.value} checked={style.value === styleValue} onClick={() => {
+                            setStyleValue(style.value); 
+                            props.setStyleValue(style.value);
+                            props.onStyle(style.value)
+                        }}></ListItem>
                     )
                 })}
             </List>
@@ -89,10 +142,39 @@ const PageEditStylesTableContents = props => {
     )
 }
 
-const EditTableContentsContainer = inject("storeTableContent")(observer(EditTableContents));
+const PageEditLeaderTableContents = props => {
-const EditStylesTableContents = inject("storeTableContent")(observer(PageEditStylesTableContents));
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const [leaderValue, setLeaderValue] = useState(props.leaderValue);
+
+    return (
+        <Page>
+            <Navbar title={t('Edit.textLeader')} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
+            <List>
+                {props.arrLeaders.map((leader, index) => {
+                    return (
+                        <ListItem key={index} radio title={leader.displayValue} checked={leaderValue === leader.value} onClick={() => {
+                            setLeaderValue(leader.value);
+                            props.setLeaderValue(leader.value);
+                            props.onLeader(leader.value);
+                        }}></ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+}
 
 export {
-    EditTableContentsContainer as EditTableContents,
+    EditTableContents,
-    EditStylesTableContents
+    PageEditStylesTableContents,
+    PageEditLeaderTableContents
 };