[SSE mobile] Add insert of functions (init functions, quick functions)

apps/spreadsheeteditor/mobile/locale/en.json

@@ -11,7 +11,18 @@
             "textChart": "Chart",
             "textFunction": "Function",
             "textShape": "Shape",
-            "textOther": "Other"
+            "textOther": "Other",
+            "textGroups": "CATEGORIES",
+            "textBack": "Back",
+            "sCatLogical": "Logical",
+            "sCatDateAndTime": "Date and time",
+            "sCatEngineering": "Engineering",
+            "sCatFinancial": "Financial",
+            "sCatInformation": "Information",
+            "sCatLookupAndReference": "Lookup and Reference",
+            "sCatMathematic": "Math and trigonometry",
+            "sCatStatistical": "Statistical",
+            "sCatTextAndData": "Text and data"
         },
         "Edit" : {
             "textSelectObjectToEdit": "Select object to edit",

apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx

@@ -1,12 +1,65 @@
 import React, {Component} from 'react';
+import {observer, inject} from "mobx-react";
 import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 
+import {LocalStorage} from '../../../../../common/mobile/utils/LocalStorage';
+
 import AddFunction from '../../view/add/AddFunction';
 
+class _FunctionGroups extends Component {
+    constructor (props) {
+        super(props);
+    }
+    componentDidMount() {
+        Common.Notifications.on('engineCreated', api => {
+            this.api = api;
+            this.init();
+        });
+    }
+    init () {
+        const editorLang = LocalStorage.getItem('sse-settings-func-lang');
+        this._editorLang = (editorLang ? editorLang : 'en').split(/[\-\_]/)[0].toLowerCase();
+        const localizationFunctions = (data) => {
+            this.api.asc_setLocalization(data);
+            this.fill(data);
+        };
+
+        fetch(`locale/l10n/functions/${this._editorLang}.json`)
+            .then(response => response.json())
+            .then((data) => {
+                localizationFunctions(data);
+            });
+    }
+    fill () {
+        this._functions = {};
+        const localizationFunctionsDesc = (data) => {
+            let jsonDesc = {};
+            try {
+                jsonDesc = JSON.parse(data);
+            } catch (e) {
+                jsonDesc = data;
+            }
+            const grouparr = this.api.asc_getFormulasInfo();
+            this.props.storeFunctions.initFunctions(grouparr, jsonDesc);
+        };
+
+        fetch(`locale/l10n/functions/${this._editorLang}_desc.json`)
+            .then(response => response.json())
+            .then((data) => {
+                localizationFunctionsDesc(data);
+            });
+    }
+    render() {
+        return null;
+    }
+}
+const FunctionGroups = inject("storeFunctions")(observer(_FunctionGroups));
+
 class AddFunctionController extends Component {
     constructor (props) {
         super(props);
+        this.onInsertFunction = this.onInsertFunction.bind(this);
     }
 
     closeModal () {
@@ -17,12 +70,18 @@ class AddFunctionController extends Component {
         }
     }
 
+    onInsertFunction (type) {
+        const api = Common.EditorApi.get();
+        api.asc_insertInCell(api.asc_getFormulaLocaleName(type), Asc.c_oAscPopUpSelectorType.Func, true);
+        this.closeModal();
+    }
+
     render () {
         return (
-            <AddFunction
+            <AddFunction onInsertFunction={this.onInsertFunction}
             />
         )
     }
 }
 
-export default AddFunctionController;
+export {FunctionGroups, AddFunctionController};

apps/spreadsheeteditor/mobile/src/page/app.jsx

@@ -1,3 +1,5 @@
+import '../../../../common/Gateway.js';
+
 import React from 'react';
 
 import {App,Views,View,Navbar,NavLeft,NavRight,Link} from 'framework7-react';
@@ -5,7 +7,6 @@ import { f7ready } from 'framework7-react';
 
 import routes from '../router/routes.js';
 
-import '../../../../common/Gateway.js';
 import '../../../../common/main/lib/util/utils.js';
 import Notifications from '../../../../common/mobile/utils/notifications.js'
 import {MainController} from '../controller/Main';

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -9,6 +9,8 @@ import Statusbar from '../controller/StatusBar'
 import AddOptions from "../view/add/Add";
 import EditOptions from "../view/edit/Edit";
 
+import {FunctionGroups} from "../controller/add/AddFunction";
+
 export default class MainPage extends Component {
     constructor(props) {
         super(props);
@@ -89,6 +91,8 @@ export default class MainPage extends Component {
                     <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
             }
               <Statusbar />
+
+              <FunctionGroups /> {/* hidden component*/}
           </Page>
       )
   }

apps/spreadsheeteditor/mobile/src/store/functions.js

@@ -0,0 +1,31 @@
+import {action, computed} from 'mobx';
+
+export class storeFunctions {
+    @action initFunctions (groups, data) {
+        this.groups = groups;
+        this.data = data;
+    }
+    @computed get functions () {
+        const groups = this.groups;
+        const data = this.data;
+        const functions = {};
+        for (let g in groups) {
+            const group = groups[g];
+            const groupname = group.asc_getGroupName();
+            const funcarr = group.asc_getFormulasArray();
+
+            for (let f in funcarr) {
+                const func = funcarr[f];
+                const _name = func.asc_getName();
+                functions[_name] = {
+                    type: _name,
+                    group: groupname,
+                    caption: func.asc_getLocaleName(),
+                    args: (data && data[_name]) ? data[_name].a : '',
+                    descr: (data && data[_name]) ? data[_name].d : ''
+                };
+            }
+        }
+        return functions;
+    }
+}

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

@@ -3,6 +3,7 @@
 import {storeFocusObjects} from "./focusObjects";
 import {storeUsers} from '../../../../common/mobile/lib/store/users';
 import {storeWorksheets} from './sheets';
+import {storeFunctions} from './functions';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -15,6 +16,7 @@ export const stores = {
     // storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
     sheets: new storeWorksheets(),
+    storeFunctions: new storeFunctions(),
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),

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

@@ -6,7 +6,7 @@ import { observer, inject } from "mobx-react";
 import {Device} from '../../../../../common/mobile/utils/device';
 
 import AddChartController from "../../controller/add/AddChart";
-import AddFunctionController from "../../controller/add/AddFunction";
+import {AddFunctionController} from "../../controller/add/AddFunction";
 //import AddShapeController from "../../controller/add/AddShape";
 //import {AddOtherController} from "../../controller/add/AddOther";
 

apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx

@@ -1,12 +1,49 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
+import { useTranslation } from 'react-i18next';
+import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
 
 const AddFunction = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Add', {returnObjects: true});
+    const store = props.storeFunctions;
+    const functions = store.functions;
+    const quickFunctions = [
+        {caption: 'SUM',   type: 'SUM'},
+        {caption: 'MIN',   type: 'MIN'},
+        {caption: 'MAX',   type: 'MAX'},
+        {caption: 'COUNT', type: 'COUNT'}
+    ];
+    if (functions) {
+        quickFunctions.forEach((quickFunction) => {
+            quickFunction.caption = functions[quickFunction.type].caption;
+        });
+    }
+    let name = '';
+    const descriptions = ['DateAndTime', 'Engineering', 'Financial', 'Information', 'Logical', 'LookupAndReference', 'Mathematic', 'Statistical', 'TextAndData' ];
+    const groups = [];
+    for (let i = 0; i < descriptions.length; i++) {
+        name = descriptions[i];
+        groups[name] = _t['sCat' + name] || name;
+    }
     return (
         <Fragment>
-
+            <List>
+                {quickFunctions.map((f, index) => {
+                    return (
+                        <ListItem key={`f-${index}`}
+                                  title={f.caption}
+                                  className='no-indicator'
+                                  link='#'
+                                  onClick={() => {props.onInsertFunction(f.type);}}
+                        >
+                            <div slot='after'><Icon icon='icon-info'/></div>
+                        </ListItem>
+                    )
+                })}
+            </List>
         </Fragment>
     )
 };
 
-export default AddFunction;
+export default inject("storeFunctions")(observer(AddFunction));