[SSE mobile] Add insert of functions (insert functions from groups, page info)

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

@@ -198,8 +198,11 @@
         }
         li.no-indicator {
             .item-link {
-                .item-inner:before {
-                    content: none;
+                .item-inner {
+                    padding-right: 15px;
+                    &:before {
+                        content: none;
+                    }
                 }
             }
         }

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

@@ -152,8 +152,11 @@
     .list {
         li.no-indicator {
             .item-link {
-                .item-inner:before {
-                    content: none;
+                .item-inner{
+                    padding-right: 15px;
+                    &:before {
+                        content: none;
+                    }
                 }
             }
         }

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

@@ -5,7 +5,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import {LocalStorage} from '../../../../../common/mobile/utils/LocalStorage';
 
-import AddFunction from '../../view/add/AddFunction';
+import {AddFunction} from '../../view/add/AddFunction';
 
 class _FunctionGroups extends Component {
     constructor (props) {
@@ -79,6 +79,7 @@ class AddFunctionController extends Component {
     render () {
         return (
             <AddFunction onInsertFunction={this.onInsertFunction}
+                         onOptionClick={this.props.onOptionClick}
             />
         )
     }

apps/spreadsheeteditor/mobile/src/less/app.less

@@ -30,3 +30,12 @@
     --f7-popover-width: 360px;
     //--f7-page-content-extra-padding-top: 37px;
 }
+
+.function-info {
+    padding: 0 15px;
+}
+.page-function-info {
+    &.page-content, .page-content {
+        background-color: @white;
+    }
+}

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

@@ -7,10 +7,20 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import AddChartController from "../../controller/add/AddChart";
 import {AddFunctionController} from "../../controller/add/AddFunction";
+import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction";
 //import AddShapeController from "../../controller/add/AddShape";
 //import {AddOtherController} from "../../controller/add/AddOther";
 
 const routes = [
+    // Functions
+    {
+        path: '/add-function-group/',
+        component: PageFunctionGroup
+    },
+    {
+        path: '/add-function-info/',
+        component: PageFunctionInfo
+    }
 ];
 
 const AddLayoutNavbar = ({ tabs, inPopover }) => {
@@ -62,7 +72,7 @@ const AddTabs = props => {
             caption: _t.textFunction,
             id: 'add-function',
             icon: 'icon-add-formula',
-            component: <AddFunctionController/>
+            component: <AddFunctionController onOptionClick={props.onOptionClick}/>
         });
     }
     /*tabs.push({
@@ -93,8 +103,8 @@ class AddView extends Component {
 
         this.onoptionclick = this.onoptionclick.bind(this);
     }
-    onoptionclick(page){
-        f7.views.current.router.navigate(page);
+    onoptionclick(page, props){
+        f7.views.current.router.navigate(page, props);
     }
     render() {
         const show_popover = this.props.usePopover;

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

@@ -1,7 +1,61 @@
 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';
+import {List, ListItem, Page, Navbar, Icon, BlockTitle} from 'framework7-react';
+
+const PageInfo = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Add', {returnObjects: true});
+    const f = props.functionInfo;
+    return(
+        <Page className='page-function-info'>
+            <Navbar title={f.caption} backLink={_t.textBack}/>
+            <div className='function-info'>
+                <h3>{`${f.caption} ${f.args}`}</h3>
+                <p>{f.descr}</p>
+            </div>
+        </Page>
+    )
+};
+
+const PageGroup = ({name, type, functions, onInsertFunction, f7router}) => {
+    const { t } = useTranslation();
+    const _t = t('View.Add', {returnObjects: true});
+    const items = [];
+    for (let k in functions) {
+        if (functions[k].group == type)
+            items.push(functions[k]);
+    }
+    return (
+        <Page>
+            <Navbar title={name} backLink={_t.textBack}/>
+            <List>
+                {items.map((f, index) => {
+                    return(
+                        <ListItem key={`f-${index}`}
+                                  link={'#'}
+                                  title={f.caption}
+                                  className='no-indicator'
+                                  onClick={() => {onInsertFunction(f.type);}}
+                        >
+                            <div slot='after'
+                                 onClick={(event) => {
+                                     f7router.navigate('/add-function-info/', {
+                                         props: {
+                                             functionInfo: f
+                                         }
+                                     });
+                                     event.stopPropagation();
+                                 }}>
+                                <Icon icon='icon-info'/>
+                            </div>
+                        </ListItem>
+                    )
+                })}
+            </List>
+        </Page>
+    )
+};
 
 const AddFunction = props => {
     const { t } = useTranslation();
@@ -16,7 +70,10 @@ const AddFunction = props => {
     ];
     if (functions) {
         quickFunctions.forEach((quickFunction) => {
-            quickFunction.caption = functions[quickFunction.type].caption;
+            const f = functions[quickFunction.type];
+            quickFunction.caption = f.caption;
+            quickFunction.args = f.args;
+            quickFunction.descr = f.descr;
         });
     }
     let name = '';
@@ -24,7 +81,11 @@ const AddFunction = props => {
     const groups = [];
     for (let i = 0; i < descriptions.length; i++) {
         name = descriptions[i];
-        groups[name] = _t['sCat' + name] || name;
+        name = _t['sCat' + name] || name;
+        groups.push({
+            type: descriptions[i],
+            name: name
+        })
     }
     return (
         <Fragment>
@@ -37,13 +98,46 @@ const AddFunction = props => {
                                   link='#'
                                   onClick={() => {props.onInsertFunction(f.type);}}
                         >
-                            <div slot='after'><Icon icon='icon-info'/></div>
+                            <div slot='after'
+                                 onClick={(event) => {
+                                     props.onOptionClick('/add-function-info/', {
+                                         props: {
+                                             functionInfo: f
+                                         }
+                                     });
+                                     event.stopPropagation();
+                                 }}>
+                                <Icon icon='icon-info'/>
+                            </div>
                         </ListItem>
                     )
                 })}
             </List>
+            <BlockTitle>{_t.textGroups}</BlockTitle>
+            <List>
+                {groups.map((group, index) => {
+                    return(
+                        <ListItem key={`gr-${index}`}
+                                  link={'/add-function-group/'}
+                                  title={group.name}
+                                  routeProps={{
+                                      name: group.name,
+                                      type: group.type,
+                                      functions: functions,
+                                      onInsertFunction: props.onInsertFunction
+                                  }}
+                        />
+                    )
+                })}
+            </List>
         </Fragment>
     )
 };
 
-export default inject("storeFunctions")(observer(AddFunction));
+const AddFunctionContainer = inject("storeFunctions")(observer(AddFunction));
+
+export {
+    AddFunctionContainer as AddFunction,
+    PageGroup as PageFunctionGroup,
+    PageInfo as PageFunctionInfo
+};