[DE mobile] Added the ability to add tables

apps/common/mobile/resources/less/common-ios.less

@@ -337,7 +337,7 @@
         }
     }
 
-    .dataview {
+    .dataview, #add-table {
         &.page-content {
             background-color: @white;
         }

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

@@ -388,7 +388,6 @@
 .table-styles {
     width: 100%;
     .row {
-        padding: 0;
         &, li {
             margin-bottom: 12px;
         }

apps/documenteditor/mobile/locale/en.json

@@ -223,6 +223,10 @@
     "textTable": "Table",
     "textShape": "Shape",
     "textImage": "Image",
-    "textOther": "Other"
+    "textOther": "Other",
+    "textTableSize": "Table Size",
+    "textColumns": "Columns",
+    "textRows": "Rows",
+    "textCancel": "Cancel"
   }
 }

apps/documenteditor/mobile/src/controller/add/AddTable.jsx

@@ -1,20 +1,93 @@
 import React, {Component} from 'react';
 import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
-import {observer, inject} from "mobx-react";
+import { withTranslation} from 'react-i18next';
 
-import { AddTable } from '../../view/add/AddTable';
+import AddTable from '../../view/add/AddTable';
 
 class AddTableController extends Component {
     constructor (props) {
         super(props);
+        this.onStyleClick = this.onStyleClick.bind(this);
+
+        const api = Common.EditorApi.get();
+        api.asc_GetDefaultTableStyles();
     }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    onStyleClick (type) {
+        const api = Common.EditorApi.get();
+
+        this.closeModal();
+
+        const { t } = this.props;
+        const _t = t("Add", { returnObjects: true });
+
+        let picker;
+
+        const dialog = f7.dialog.create({
+            title: _t.textTableSize,
+            text: '',
+            content:
+                '<div class="content-block">' +
+                '<div class="row">' +
+                '<div class="col-50">' + _t.textColumns + '</div>' +
+                '<div class="col-50">' + _t.textRows + '</div>' +
+                '</div>' +
+                '<div id="picker-table-size"></div>' +
+                '</div>',
+            buttons: [
+                {
+                    text: _t.textCancel
+                },
+                {
+                    text: 'OK',
+                    bold: true,
+                    onClick: function () {
+                        const size = picker.value;
+
+                        api.put_Table(parseInt(size[0]), parseInt(size[1]), type.toString());
+                    }
+                }
+            ]
+        }).open();
+        dialog.on('opened', () => {
+            picker = f7.picker.create({
+                containerEl: document.getElementById('picker-table-size'),
+                cols: [
+                    {
+                        textAlign: 'center',
+                        width: '100%',
+                        values: [1,2,3,4,5,6,7,8,9,10]
+                    },
+                    {
+                        textAlign: 'center',
+                        width: '100%',
+                        values: [1,2,3,4,5,6,7,8,9,10]
+                    }
+                ],
+                toolbar: false,
+                rotateEffect: true,
+                value: [3, 3]
+            });
+        });
+    }
+
     render () {
         return (
-            <AddTable
+            <AddTable onStyleClick={this.onStyleClick}
             />
         )
     }
 }
 
-export default AddTableController;
+const AddTableWithTranslation = withTranslation()(AddTableController);
+
+export {AddTableWithTranslation as AddTableController};

apps/documenteditor/mobile/src/view/add/Add.jsx

@@ -5,7 +5,7 @@ import {f7} from 'framework7-react';
 import { observer, inject } from "mobx-react";
 import {Device} from '../../../../../common/mobile/utils/device';
 
-import AddTableController from "../../controller/add/AddTable";
+import {AddTableController} from "../../controller/add/AddTable";
 import AddShapeController from "../../controller/add/AddShape";
 //import AddImageController from "../../controller/add/AddImage";
 //import AddOtherController from "../../controller/add/AddOther";

apps/documenteditor/mobile/src/view/add/AddTable.jsx

@@ -5,11 +5,22 @@ import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
 const AddTable = props => {
+    const storeTableSettings = props.storeTableSettings;
+    const styles = storeTableSettings.styles;
     return (
-        <Fragment>
-
-        </Fragment>
+        <div className={'table-styles dataview'}>
+            <ul className="row">
+                {styles.map((style, index) => {
+                    return (
+                        <li key={index}
+                            onClick={() => {props.onStyleClick(style.templateId)}}>
+                            <img src={style.imageUrl}/>
+                        </li>
+                    )
+                })}
+            </ul>
+        </div>
     )
 };
 
-export {AddTable};
+export default  inject("storeTableSettings")(observer(AddTable));