[SSE mobile] Change to add listeners on events in statusbar

apps/spreadsheeteditor/mobile/src/controller/Main.jsx

@@ -18,6 +18,7 @@ import ErrorController from "./Error";
 import app from "../page/app";
 import About from "../../../../common/mobile/lib/view/About";
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
+import { StatusbarController } from "./Statusbar";
 
 @inject(
     "storeAppOptions",
@@ -799,6 +800,7 @@ class MainController extends Component {
             <Fragment>
                 <LongActionsController />
                 <ErrorController LoadingDocument={this.LoadingDocument}/>
+                <StatusbarController />
                 <CollaborationController />
                 <CommentsController />
                 <AddCommentController />

apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx

@@ -1,85 +1,31 @@
 
 import React, { Fragment, useEffect, useState } from 'react';
 import {StatusbarView} from '../view/Statusbar';
-import { inject } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
 
-const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
+const StatusbarController = inject('sheets')(observer(props => {
-    const {sheets, storeAppOptions, users} = props;
+    const sheets = props.sheets;
-    const {t} = useTranslation();
-    const _t = t('Statusbar', {returnObjects: true});
-
-    let isEdit = storeAppOptions.isEdit;
-    let isDisconnected = users.isDisconnected;
 
     useEffect(() => {
-        const onDocumentReady = () => {
+        Common.Notifications.on('engineCreated', api => {
-            const api = Common.EditorApi.get();
+            api.asc_registerCallback('asc_onWorkbookLocked', (locked) => {
-            // api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
+                sheets.setWorkbookLocked(locked);
-            api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
+            });
-            api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
+            api.asc_registerCallback('asc_onWorksheetLocked', (index, locked) => {
+                sheets.setWorksheetLocked(index, locked);
+            });
             api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
-            api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
             api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
-        };
+            api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
-        if ( !Common.EditorApi ) {
+            // api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
-            Common.Notifications.on('document:ready', onDocumentReady);
+        });
         Common.Notifications.on('document:ready', onApiSheetsChanged);
-        } else {
+    });
-            onDocumentReady();
-        }
-
-        const on_main_view_click = e => {
-            if(!e.target.closest('.tab.active')) {
-                f7.popover.close('.document-menu.modal-in', false);
-            }
-        };
-
-        $$('.view-main').on('click', on_main_view_click);
-
-        return () => {
-            Common.Notifications.off('document:ready', onDocumentReady);
-            Common.Notifications.off('document:ready', onApiSheetsChanged);
-
-            const api = Common.EditorApi.get();
-            // api.asc_unregisterCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
-            api.asc_unregisterCallback('asc_onWorkbookLocked', onWorkbookLocked);
-            api.asc_unregisterCallback('asc_onWorksheetLocked', onWorksheetLocked);
-            api.asc_unregisterCallback('asc_onSheetsChanged', onApiSheetsChanged);
-            api.asc_unregisterCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
-            api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
-
-            $$('.view-main').off('click', on_main_view_click);
-        };
-    }, []);
-
-    const onApiActiveSheetChanged = (index) => {
-        if (index < sheets.sheets.length) {
-            sheets.setActiveWorksheet(index);
-            Common.Notifications.trigger('sheet:active', index);
-        }
-    }
-
-    const onApiHideTabContextMenu = () => {
-        f7.popover.close('.document-menu.modal-in', false);
-    }
-
-    const onWorkbookLocked = locked => {
-        locked ? $$('.idx-btn-addtab').addClass('disabled') : $$('.idx-btn-addtab').removeClass('disabled');
-    };
-
-    const onWorksheetLocked = (index, locked) => {
-        // let model = sheets.sheets.find(sheet => sheet.index === index);
-        let model = sheets.at(index);
-        if(model && model.locked != locked)
-            model.locked = locked;
-    };
 
     const onApiSheetsChanged = () => {
-        // console.log('on api sheets changed');
-
         const api = Common.EditorApi.get();
         const sheets_count = api.asc_getWorksheetsCount();
         const active_index = api.asc_getActiveWorksheetIndex();
@@ -100,9 +46,42 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         }
 
         sheets.resetSheets(items);
-        // updateTabsColors();
     };
 
+    const onApiActiveSheetChanged = (index) => {
+        if (index < sheets.sheets.length) {
+            sheets.setActiveWorksheet(index);
+            Common.Notifications.trigger('sheet:active', index);
+        }
+    };
+
+    const onApiHideTabContextMenu = () => {
+        f7.popover.close('.document-menu.modal-in', false);
+    }
+
+    return null;
+}));
+
+const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => {
+    const {sheets, storeAppOptions, users} = props;
+    const {t} = useTranslation();
+    const _t = t('Statusbar', {returnObjects: true});
+
+    const isEdit = storeAppOptions.isEdit;
+    const isDisconnected = users.isDisconnected;
+
+    useEffect(() => {
+        const on_main_view_click = e => {
+            if(!e.target.closest('.tab.active')) {
+                f7.popover.close('.document-menu.modal-in', false);
+            }
+        };
+        $$('.view-main').on('click', on_main_view_click);
+        return () => {
+            $$('.view-main').off('click', on_main_view_click);
+        };
+    }, []);
+
     // const loadTabColor = sheetindex => {
     //     const api = Common.EditorApi.get();
     //     let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
@@ -178,15 +157,12 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
     const onAddTabClicked = () => {
         const api = Common.EditorApi.get();
         api.asc_closeCellEditor();
-
-        createSheetName();
         api.asc_addWorksheet(createSheetName());
     };
 
     const onTabClick = (i, target) => {
         const api = Common.EditorApi.get();
         const model = sheets.at(i);
-        // console.log(model);
 
         let opened = $$('.document-menu.modal-in').length;
         let index = model.index;
@@ -204,7 +180,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         else {
             f7.popover.close('#idx-tab-context-menu-popover', false);
             onTabClicked(i);
-            // Common.Notifications.trigger('sheet:active', index);
         }
     };
 
@@ -314,7 +289,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         } else {
             f7.popover.close('#idx-hidden-sheets-popover');
             api['asc_showWorksheet'](index);
-            // loadTabColor(index);
         }
     };
 
@@ -348,8 +322,17 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
     };
 
     return (
-        <StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} onTabMenu={onTabMenu} />
+        <StatusbarView isEdit={isEdit}
+                       allSheets={sheets.sheets}
+                       activeSheet={sheets.activeWorksheet}
+                       hiddenSheets={sheets.hiddenWorksheets()}
+                       isWorkbookLocked={sheets.isWorkbookLocked}
+                       onTabClick={onTabClick}
+                       onTabClicked={onTabClicked}
+                       onAddTabClicked={onAddTabClicked}
+                       onTabMenu={onTabMenu}
+        />
     )
-});
+}));
 
-export default Statusbar;
+export {Statusbar, StatusbarController};

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

@@ -6,7 +6,7 @@ import { Device } from '../../../../common/mobile/utils/device';
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
 import CellEditor from '../controller/CellEditor';
-import Statusbar from '../controller/Statusbar';
+import { Statusbar } from '../controller/Statusbar';
 import FilterOptionsController from '../controller/FilterOptions.jsx'
 import AddOptions from "../view/add/Add";
 import EditOptions from "../view/edit/Edit";

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

@@ -1,5 +1,5 @@
 
-import {observable, action, makeObservable} from 'mobx';
+import {observable, action, makeObservable, computed} from 'mobx';
 
 class Worksheet {
     sheet = {
@@ -26,7 +26,14 @@ export class storeWorksheets {
         makeObservable(this, {
             sheets: observable,
             resetSheets: action,
-            setActiveWorksheet: action
+            setActiveWorksheet: action,
+            activeWorksheet: computed,
+
+            isWorkbookLocked: observable,
+            setWorkbookLocked: action,
+
+            isWorksheetLocked: observable,
+            setWorksheetLocked: action
         });
         this.sheets = [];
     }
@@ -46,6 +53,14 @@ export class storeWorksheets {
         }
     }
 
+    get activeWorksheet() {
+        for (let i = 0; i < this.sheets.length; i++) {
+            if (this.sheets[i].active)
+                return i;
+        }
+        return -1;
+    }
+
     at(i) {
         return this.sheets[i]
     }
@@ -61,4 +76,17 @@ export class storeWorksheets {
     visibleWorksheets() {
         return this.sheets.filter(model => !model.hidden);
     }
+
+    isWorkbookLocked = false;
+    setWorkbookLocked(locked) {
+        this.isWorkbookLocked = locked;
+    }
+
+    isWorksheetLocked = false;
+    setWorksheetLocked(index, locked) {
+        let model = this.sheets[index];
+        if(model && model.locked !== locked)
+            model.locked = locked;
+        this.isWorkbookLocked = locked;
+    }
 }

apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
-import { View, Toolbar, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
+import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
-import { observer, inject } from "mobx-react";
 import { useTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
 
@@ -8,16 +7,12 @@ const viewStyle = {
     height: 30
 };
 
-const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
+const StatusbarView = props => {
     const { t } = useTranslation();
     const _t = t('Statusbar', {returnObjects: true});
     const isAndroid = Device.android;
     const isPhone = Device.isPhone;
-    const { sheets, storeAppOptions } = props;
+    const { isEdit, allSheets, hiddenSheets, isWorkbookLocked } = props;
-    const isEdit = storeAppOptions.isEdit;
-    const hiddenSheets = sheets.hiddenWorksheets();
-    const allSheets = sheets.sheets;
-    const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
 
     const getTabColor = model => {
         let color = model.color;
@@ -119,7 +114,7 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
         <Fragment>
             <View id="idx-statusbar" className="statusbar" style={viewStyle}>
                 <div id="idx-box-add-tab">
-                    <Link href="false" id="idx-btn-addtab" className="tab" onClick={e => props.onAddTabClicked()}>
+                    <Link href={false} id="idx-btn-addtab" className={`tab${isWorkbookLocked ? ' disabled' : ''}`} onClick={props.onAddTabClicked}>
                         <Icon className="icon icon-plus" />
                     </Link>
                 </div>
@@ -127,7 +122,7 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
                     <ul className="sheet-tabs bottom">
                         {allSheets.map((model,i) => 
                             model.hidden ? null : 
-                                <li className={getTabClassList(model)} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
+                                <li className={`tab${model.active ? ' active' : ''} ${model.locked ? ' locked' : ''}`} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
                                     <a style={{boxShadow: getTabColor(model)}}>{model.name}</a>
                                 </li>
                             
@@ -194,6 +189,6 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
             ) : null}
         </Fragment>
     )
-}));
+};
 
 export {StatusbarView};