Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
JuliaSvinareva 2021-07-22 00:10:20 +03:00
parent 4c67f91240
commit 40b9837d55
5 changed files with 100 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/spreadsheeteditor/mobile/src/controller/Main.jsx
View file

@ -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 />

139
apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx
View file

@ -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 {sheets, storeAppOptions, users} = props;
const {t} = useTranslation();
const _t = t('Statusbar', {returnObjects: true});
let isEdit = storeAppOptions.isEdit;
let isDisconnected = users.isDisconnected;
const StatusbarController = inject('sheets')(observer(props => {
const sheets = props.sheets;
useEffect(() => {
const onDocumentReady = () => {
const api = Common.EditorApi.get();
// api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
Common.Notifications.on('engineCreated', api => {
api.asc_registerCallback('asc_onWorkbookLocked', (locked) => {
sheets.setWorkbookLocked(locked);
});
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);
};
if ( !Common.EditorApi ) {
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;
};
api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
// api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
});
Common.Notifications.on('document:ready', onApiSheetsChanged);
});
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};

2
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -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";

32
apps/spreadsheeteditor/mobile/src/store/sheets.js
View file

@ -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;
}
}

17
apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx
View file

@ -1,6 +1,5 @@
import React, { Fragment } from 'react';
import { View, Toolbar, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-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 = storeAppOptions.isEdit;
const hiddenSheets = sheets.hiddenWorksheets();
const allSheets = sheets.sheets;
const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
const { isEdit, allSheets, hiddenSheets, isWorkbookLocked } = props;
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};