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

apps/documenteditor/mobile/locale/en.json

@@ -353,7 +353,9 @@
     "textModern": "Modern",
     "textCancel": "Cancel",
     "textRefreshEntireTable": "Refresh entire table",
-    "textRefreshPageNumbersOnly": "Refresh page numbers only"
+    "textRefreshPageNumbersOnly": "Refresh page numbers only",
+    "textStyles": "Styles",
+    "textAmountOfLevels": "Amount of Levels"
   },
   "Error": {
     "convertationTimeoutText": "Conversion timeout exceeded.",

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

@@ -8,6 +8,10 @@ import { EditTableContents } from '../../view/edit/EditTableContents';
 class EditTableContentsController extends Component {
     constructor (props) {
         super(props);
+
+        this.startLevel = 1;
+        this.endLevel = 3;
+        this.fillTOCProps = this.fillTOCProps.bind(this);
     }
 
     onStyle(value) {
@@ -41,7 +45,187 @@ class EditTableContentsController extends Component {
 
         propsTableContents.put_TabLeader(value);
         api.asc_SetTableOfContentsPr(propsTableContents);
+    }
 
+    onLevelsChange(value) {
+        const api = Common.EditorApi.get();
+        const propsTableContents = api.asc_GetTableOfContentsPr();
+
+        propsTableContents.clear_Styles();
+        propsTableContents.put_OutlineRange(1, value);
+        api.asc_SetTableOfContentsPr(propsTableContents);
+    }
+
+    fillTOCProps(props) {
+        const api = Common.EditorApi.get();
+        const docStyles = api.asc_GetStylesArray();
+
+        let checkStyles = false,
+            disableOutlines = false,
+            styles = [];
+
+        docStyles.forEach(style => {
+            let name = style.get_Name(),
+                level = api.asc_GetHeadingLevel(name);
+
+            if (style.get_QFormat() || level >= 0) { 
+                styles.push({
+                    name: name,
+                    displayValue: style.get_TranslatedName(),
+                    allowSelected: false,
+                    checked: false,
+                    value: '',
+                    headerLevel: (level >= 0) ? level + 1 : -1 
+                })
+            }
+        });
+
+        if(props) {
+            let start = props.get_OutlineStart(),
+                end = props.get_OutlineEnd(),
+                count = props.get_StylesCount();
+
+            this.startLevel = start;
+            this.endLevel = end;
+            this.count = count;
+
+            if ((start < 0 || end < 0) && count < 1) {
+                start = 1;
+                end = 9;
+                // this.spnLevels.setValue(end, true);
+            }
+
+            for (let i = 0; i < count; i++) {
+                let styleName = props.get_StyleName(i),
+                    level = props.get_StyleLevel(i),
+                    rec = styles.find(style => style.name == styleName);
+        
+                if (rec) {
+                    rec.checked = true;
+                    rec.value = level;
+                    if (rec.headerLevel !== level)
+                        disableOutlines = true;
+                } else {
+                    styles.push({
+                        name: styleName,
+                        displayValue: styleName,
+                        allowSelected: false,
+                        checked: true,
+                        value: level,
+                        headerLevel: -1
+                    });
+
+                    disableOutlines = true;
+                }
+            }
+
+            if (start > 0 && end > 0) {
+                for (let i = start; i <= end; i++) {
+                    let rec = styles.find(style => style.headerLevel === i);
+        
+                    if (rec) {
+                        rec.checked = true;
+                        rec.value = i;
+                    }
+                }
+            }
+
+            let newStart = -1, 
+                newEnd = -1, 
+                emptyIndex = -1;
+
+            for (let i = 0; i < 9; i++) {
+                let rec = styles.find(style => style.headerLevel === i + 1);
+
+                if (rec) {
+                    let headerLevel = rec.headerLevel,
+                        level = rec.value;
+
+                    if (headerLevel == level) {
+                        if (emptyIndex < 1) {
+                            if (newStart < 1)
+                                newStart = level;
+                            newEnd = level;
+                        } else {
+                            newStart = newEnd = -1;
+                            disableOutlines = true;
+                            break;
+                        }
+                    } else if (!rec.checked) {
+                        (newStart > 0) && (emptyIndex = i + 1);
+                    } else {
+                        newStart = newEnd = -1;
+                        disableOutlines = true;
+                        break;
+                    }
+                }
+            }
+
+            // this.spnLevels.setValue(newEnd > 0 ? newEnd : '', true);
+            checkStyles = (disableOutlines || newStart > 1);
+        } else {
+            for (let i = this.startLevel; i <= this.endLevel; i++) {
+                let rec = styles.find(style => style.headerLevel === i);
+
+                if (rec) {
+                    rec.checked = true;
+                    rec.value = i;
+                }
+            }
+        }
+
+        styles.sort(function(a, b) {
+            let aname = a.displayValue.toLocaleLowerCase(),
+                bname = b.displayValue.toLocaleLowerCase();
+            if (aname < bname) return -1;
+            if (aname > bname) return 1;
+            return 0;
+        });
+
+        return {
+            styles, 
+            start: this.startLevel,
+            end: this.endLevel,
+            count: this.count,
+            disableOutlines,
+            checkStyles
+        }
+
+        // this.stylesLevels.reset(styles);
+        // if (checkStyles) {
+        //     this._forceUpdateOutlineLevels = true;
+        //     this.radioStyles.setValue(true);
+        //     this.stylesList.scroller.update({alwaysVisibleY: true});
+        //     var rec = this.stylesLevels.findWhere({checked: true});
+        //     if (rec)
+        //         this.stylesList.scrollToRecord(rec);
+        // }
+    }
+
+    addStyles(styleName, value) {
+        const api = Common.EditorApi.get();
+        const propsTableContents = api.asc_GetTableOfContentsPr();
+
+        propsTableContents.add_Style(styleName, value);
+
+        if (propsTableContents.get_StylesCount() > 0) {
+            propsTableContents.put_OutlineRange(-1, -1);
+        } else {
+            propsTableContents.put_OutlineRange(1, 9);
+        }
+
+        // api.asc_SetTableOfContentsPr(propsTableContents);     
+    }
+
+    changeCaption(value) {
+        const api = Common.EditorApi.get();
+        const propsTableContents = api.asc_GetTableOfContentsPr();
+        
+        if(record) {
+            propsTableContents.put_Caption(value);
+            properties.clear_Styles();
+            api.asc_SetTableOfContentsPr(propsTableContents);  
+        }
     }
 
     onTableContentsUpdate(type, currentTOC) {
@@ -73,6 +257,10 @@ class EditTableContentsController extends Component {
                 onPageNumbers={this.onPageNumbers}
                 onRightAlign={this.onRightAlign}
                 onLeader={this.onLeader}
+                onLevelsChange={this.onLevelsChange}
+                fillTOCProps={this.fillTOCProps}
+                changeCaption={this.changeCaption}
+                addStyles={this.addStyles}
             />
         )
     }

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 { PageEditLeaderTableContents, PageEditStylesTableContents } from './EditTableContents';
+import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
 
 const routes = [
     //Edit text
@@ -196,6 +196,10 @@ const routes = [
     {
         path: '/edit-leader-table-contents/',
         component: PageEditLeaderTableContents
+    },
+    {
+        path: '/edit-structure-table-contents/',
+        component: PageEditStructureTableContents
     }
 ];
 

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

@@ -9,12 +9,14 @@ const EditTableContents = props => {
     const _t = t('Edit', {returnObjects: true});
     const api = Common.EditorApi.get();
     const propsTableContents = api.asc_GetTableOfContentsPr();
+    const count = propsTableContents.get_StylesCount();
     console.log(propsTableContents);
     const [type, setType] = useState(0);
     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 },
@@ -31,6 +33,7 @@ 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: '....................' },
@@ -61,7 +64,7 @@ const EditTableContents = props => {
                   }
                 ]
               ]
-        }).open()
+        }).open();
     }
 
     return (
@@ -100,7 +103,11 @@ const EditTableContents = props => {
                         setLeaderValue
                     }}></ListItem>
                 }
-                <ListItem title={t('Edit.textStructure')} link="/edit-table-contents-structure/" after={t('Edit.textLevels')}></ListItem>
+                <ListItem title={t('Edit.textStructure')} link="/edit-structure-table-contents/" after={count ? t('Edit.textStyles') : t('Edit.textLevels')} routeProps={{
+                    onLevelsChange: props.onLevelsChange,
+                    fillTOCProps: props.fillTOCProps,
+                    addStyles: props.addStyles
+                }}></ListItem>
             </List>
             <List className="buttons-list">
                 <ListButton className={'button-fill button-raised'} title={t('Edit.textRefresh')} 
@@ -173,8 +180,97 @@ const PageEditLeaderTableContents = props => {
     )
 }
 
+const PageEditStructureTableContents = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const isAndroid = Device.android;
+    const api = Common.EditorApi.get();
+    const propsTableContents = api.asc_GetTableOfContentsPr();
+    const {styles, start, end, count, disableOutlines, checkStyles} = props.fillTOCProps(propsTableContents);
+    console.log(styles, start, end, count, disableOutlines, checkStyles);
+
+    const [structure, setStructure] = useState(count ? 1 : 0);
+    const [amountLevels, setAmountLevels] = useState(end);
+
+    return (
+        <Page>
+            <Navbar title={t('Edit.textStructure')} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
+            <List>
+                <ListItem radio checked={structure === 0} title={t('Edit.textLevels')} onClick={() => setStructure(0)}></ListItem>
+                <ListItem radio checked={structure === 1} title={t('Edit.textStyles')} onClick={() => setStructure(1)}></ListItem>
+            </List>
+            {structure === 0 ?
+                <List>
+                    <ListItem title={t('Edit.textAmountOfLevels')}>
+                        {!isAndroid && <div slot='after-start'>{amountLevels}</div>}
+                        <div slot='after'>
+                            <Segmented>
+                                <Button outline className='decrement item-link' onClick={() => {
+                                    if(amountLevels > 1) {
+                                        setAmountLevels(amountLevels - 1); 
+                                        props.onLevelsChange(amountLevels - 1);
+                                    }
+                                }}>
+                                    {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                </Button>
+                                {isAndroid && <label>{amountLevels}</label>}
+                                <Button outline className='increment item-link' onClick={() => {
+                                    if(amountLevels < 9) {
+                                        setAmountLevels(amountLevels + 1); 
+                                        props.onLevelsChange(amountLevels + 1);
+                                    }
+                                }}>
+                                    {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                </Button>
+                            </Segmented>
+                        </div>
+                    </ListItem>
+                </List>
+            : 
+                <List>
+                    {styles.map((style, index) => {
+                        return (
+                            <ListItem checkbox key={index} title={style.displayValue} checked={style.checked}>
+                                {!isAndroid && <div slot='after-start'>{style.value}</div>}
+                                <div slot='after'>
+                                    <Segmented>
+                                        <Button outline className='decrement item-link' onClick={() => {
+                                            if(style.value > 1) {
+                                                props.addStyles(style.name, style.value - 1);
+                                            }
+                                        }}>
+                                            {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                                        </Button>
+                                        {isAndroid && <label>{style.value}</label>}
+                                        <Button outline className='increment item-link' onClick={() => {
+                                            if(style.value < 9) {
+                                                props.addStyles(style.name, style.value + 1);
+                                            }
+                                        }}>
+                                            {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                                        </Button>
+                                    </Segmented>
+                                </div>
+                            </ListItem>
+                        )
+                    })}
+                </List>
+            }
+        </Page>
+    )
+}
+
 export {
     EditTableContents,
     PageEditStylesTableContents,
-    PageEditLeaderTableContents
+    PageEditLeaderTableContents,
+    PageEditStructureTableContents
 };