[SSE mobile] Correct protection sheet v.3

This commit is contained in:
SergeyEzhin 2021-10-12 19:15:47 +04:00
parent 1508b2ee64
commit 7a4bd9484c
10 changed files with 89 additions and 42 deletions

View file

@ -9,14 +9,16 @@ import { idContextMenuElement } from '../../../../common/mobile/lib/view/Context
import { Device } from '../../../../common/mobile/utils/device';
import EditorUIController from '../lib/patch';
@inject ( stores => ({
@inject (stores => ({
isEdit: stores.storeAppOptions.isEdit,
canComments: stores.storeAppOptions.canComments,
canViewComments: stores.storeAppOptions.canViewComments,
canCoAuthoring: stores.storeAppOptions.canCoAuthoring,
users: stores.users,
isDisconnected: stores.users.isDisconnected,
storeSheets: stores.sheets
storeSheets: stores.sheets,
wsProps: stores.storeWorksheets.wsProps,
wsLock: stores.storeWorksheets.wsLock
}))
class ContextMenu extends ContextMenuController {
constructor(props) {

View file

@ -402,24 +402,27 @@ class MainController extends Component {
});
this.api.asc_registerCallback('asc_onChangeProtectWorksheet', this.onChangeProtectSheet.bind(this));
this.api.asc_registerCallback('asc_onActiveSheetChanged', this.onChangeProtectSheet.bind(this));
this.api.asc_registerCallback('asc_onActiveSheetChanged', this.onChangeProtectSheet.bind(this));
}
onChangeProtectSheet() {
const storeWorksheets = this.props.storeWorksheets;
let props = this.getWSProps(true);
let {wsLock, wsProps} = this.getWSProps(true);
storeWorksheets.setWsProps(props);
storeWorksheets.setWsLock(wsLock);
storeWorksheets.setWsProps(wsProps);
}
getWSProps(update) {
const storeAppOptions = this.props.storeAppOptions;
let wsProps = {};
let wsProtection = {};
if (!storeAppOptions.config || !storeAppOptions.isEdit && !storeAppOptions.isRestrictedEdit) return;
if (update) {
let wsProtected = !!this.api.asc_isProtectedSheet();
if (wsProtected) {
let wsLock = !!this.api.asc_isProtectedSheet();
let wsProps = {};
if (wsLock) {
let props = this.api.asc_getProtectedSheet();
props && this.wsLockOptions.forEach(function(item){
wsProps[item] = props['asc_get' + item] ? props['asc_get' + item]() : false;
@ -429,9 +432,11 @@ class MainController extends Component {
wsProps[item] = false;
});
}
wsProtection = {wsLock, wsProps};
}
return wsProps;
return wsProtection;
}
_onLongActionEnd(type, id) {

View file

@ -1,6 +1,7 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import { withTranslation } from 'react-i18next';
import {observer, inject} from "mobx-react";
import AddSortAndFilter from '../../view/add/AddFilter';
@ -120,9 +121,10 @@ class AddFilterController extends Component {
onInsertSort={this.onInsertSort}
onInsertFilter={this.onInsertFilter}
isFilter={this.state.isFilter}
wsLock={this.props.storeWorksheets.wsLock}
/>
)
}
}
export default withTranslation()(AddFilterController);
export default inject("storeWorksheets")(observer(withTranslation()(AddFilterController)));

View file

@ -30,8 +30,7 @@ class AddOtherController extends Component {
return (
<AddOther closeModal={this.closeModal}
hideAddComment={this.hideAddComment}
wsPropsHyperlinks={this.props.wsPropsHyperlinks}
wsPropsObjects={this.props.wsPropsObjects}
wsProps={this.props.wsProps}
/>
)
}

View file

@ -90,6 +90,7 @@ class MainPage extends Component {
const appOptions = this.props.storeAppOptions;
const storeWorksheets = this.props.storeWorksheets;
const wsProps = storeWorksheets.wsProps;
const wsLock = storeWorksheets.wsLock;
const config = appOptions.config;
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo));
@ -117,11 +118,11 @@ class MainPage extends Component {
<SearchSettings useSuspense={false} />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} wsProps={wsProps} />
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} wsLock={wsLock} wsProps={wsProps} />
}
{
!this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} wsProps={wsProps} showOptions={this.state.addShowOptions} />
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} wsLock={wsLock} wsProps={wsProps} showOptions={this.state.addShowOptions} />
}
{
!this.state.settingsVisible ? null :

View file

@ -93,7 +93,7 @@ export class storeWorksheets {
let model = this.sheets[index];
if(model && model.locked !== locked)
model.locked = locked;
this.isWorkbookLocked = locked;
this.isWorksheetLocked = locked;
}
isProtectedWorkbook = false;
@ -101,8 +101,13 @@ export class storeWorksheets {
this.isProtectedWorkbook = value;
}
wsProps;
wsProps = {};
setWsProps(value) {
this.wsProps = value;
}
wsLock;
setWsLock(value) {
this.wsLock = value;
}
}

View file

@ -58,6 +58,8 @@ const routes = [
const AddLayoutNavbar = ({ tabs, inPopover }) => {
const isAndroid = Device.android;
if(!tabs.length) return null;
return (
<Navbar>
{tabs.length > 1 ?
@ -67,8 +69,7 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
<Icon slot="media" icon={item.icon}></Icon>
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div> :
<NavTitle>{tabs[0].caption}</NavTitle>
</div> : <NavTitle>{tabs[0].caption}</NavTitle>
}
{ !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
</Navbar>
@ -76,6 +77,8 @@ const AddLayoutNavbar = ({ tabs, inPopover }) => {
};
const AddLayoutContent = ({ tabs }) => {
if(!tabs.length) return null;
return (
<Tabs animated>
{tabs.map((item, index) =>
@ -90,6 +93,7 @@ const AddLayoutContent = ({ tabs }) => {
const AddTabs = props => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
const wsLock = props.wsLock;
const wsProps = props.wsProps;
const showPanels = props.showPanels;
const tabs = [];
@ -128,13 +132,12 @@ const AddTabs = props => {
});
}
}
if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects)) {
if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) {
tabs.push({
caption: _t.textOther,
id: 'add-other',
icon: 'icon-add-other',
component: <AddOtherController wsPropsObjects={wsProps.Objects}
wsPropsHyperlinks={wsProps.InsertHyperlinks}/>
component: <AddOtherController wsProps={wsProps} />
});
}
if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) {
@ -145,6 +148,17 @@ const AddTabs = props => {
component: <AddLinkController/>
});
}
if(!tabs.length) {
if (Device.phone) {
f7.popup.close('.add-popup', false);
} else {
f7.popover.close('#add-popover', false);
}
return null;
}
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
@ -169,10 +183,10 @@ class AddView extends Component {
return (
show_popover ?
<Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsProps={this.props.wsProps} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsLock={this.props.wsLock} wsProps={this.props.wsProps} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
</Popover> :
<Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsProps={this.props.wsProps} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
<AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} wsLock={this.props.wsLock} wsProps={this.props.wsProps} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
</Popup>
)
}
@ -228,6 +242,7 @@ const Add = props => {
showPanels={options ? options.panels : undefined}
isAddShapeHyperlink = {isAddShapeHyperlink}
wsProps={props.wsProps}
wsLock={props.wsLock}
/>
};

View file

@ -6,6 +6,8 @@ const AddSortAndFilter = props => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
const isFilter = props.isFilter;
const wsLock = props.wsLock;
return (
<Page>
<Navbar title={_t.textSortAndFilter} backLink={_t.textBack}/>
@ -21,14 +23,16 @@ const AddSortAndFilter = props => {
</Row>
</ListItem>
</List>
<List>
<ListItem title={_t.textFilter}>
<Toggle checked={isFilter}
onToggleChange={(prev) => {
props.onInsertFilter(!prev);
}}/>
</ListItem>
</List>
{!wsLock &&
<List>
<ListItem title={_t.textFilter}>
<Toggle checked={isFilter}
onToggleChange={(prev) => {
props.onInsertFilter(!prev);
}}/>
</ListItem>
</List>
}
</Page>
)
};

View file

@ -6,24 +6,23 @@ const AddOther = props => {
const { t } = useTranslation();
const _t = t('View.Add', {returnObjects: true});
const hideAddComment = props.hideAddComment();
const wsPropsHyperlinks = props.wsPropsHyperlinks;
const wsPropsObjects = props.wsPropsObjects;
const wsProps = props.wsProps;
return (
<List>
<ListItem title={_t.textImage} className={wsPropsObjects && 'disabled'} link={'/add-image/'}>
<ListItem title={_t.textImage} className={wsProps.Objects && 'disabled'} link={'/add-image/'}>
<Icon slot="media" icon="icon-insimage"></Icon>
</ListItem>
{(!hideAddComment && !wsPropsObjects) && <ListItem title={_t.textComment} onClick={() => {
{(!hideAddComment && !wsProps.Objects) && <ListItem title={_t.textComment} onClick={() => {
props.closeModal();
Common.Notifications.trigger('addcomment');
}}>
<Icon slot="media" icon="icon-insert-comment"></Icon>
</ListItem>}
<ListItem title={_t.textSortAndFilter} className={wsPropsObjects && 'disabled'} link={'/add-sort-and-filter/'}>
<ListItem title={_t.textSortAndFilter} className={wsProps.Sort && 'disabled'} link={'/add-sort-and-filter/'}>
<Icon slot="media" icon="icon-sort"></Icon>
</ListItem>
<ListItem title={_t.textLink} className={wsPropsHyperlinks && 'disabled'} link={'/add-link/'}>
<ListItem title={_t.textLink} className={wsProps.InsertHyperlinks && 'disabled'} link={'/add-link/'}>
<Icon slot="media" icon="icon-link"></Icon>
</ListItem>
</List>

View file

@ -290,6 +290,9 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
const isAndroid = Device.android;
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
if(!editors.length) return null;
return (
<Navbar>
{
@ -297,8 +300,7 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
<div className='tab-buttons tabbar'>
{editors.map((item, index) => <Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
</div> :
<NavTitle>{ editors[0].caption }</NavTitle>
</div> : <NavTitle>{ editors[0].caption }</NavTitle>
}
{ !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
</Navbar>
@ -306,6 +308,8 @@ const EditLayoutNavbar = ({ editors, inPopover }) => {
};
const EditLayoutContent = ({ editors }) => {
if(!editors.length) return null;
if (editors.length > 1) {
return (
<Tabs animated>
@ -329,6 +333,7 @@ const EditTabs = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const store = props.storeFocusObjects;
const wsLock = props.wsLock;
const wsProps = props.wsProps;
const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections);
let editors = [];
@ -385,6 +390,16 @@ const EditTabs = props => {
}
}
if(!editors.length) {
if (Device.phone) {
f7.sheet.close('#edit-sheet', false);
} else {
f7.popover.close('#edit-popover', false);
}
return null;
}
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
@ -406,10 +421,10 @@ const EditView = props => {
return (
show_popover ?
<Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}>
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} inPopover={true} wsProps={props.wsProps} onOptionClick={onOptionClick} style={{height: '410px'}} />
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} inPopover={true} wsLock={props.wsLock} wsProps={props.wsProps} onOptionClick={onOptionClick} style={{height: '410px'}} />
</Popover> :
<Sheet id="edit-sheet" push onSheetClosed={() => props.onClosed()}>
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} onOptionClick={onOptionClick} wsProps={props.wsProps} />
<EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} onOptionClick={onOptionClick} wsLock={props.wsLock} wsProps={props.wsProps} />
</Sheet>
)
};
@ -436,7 +451,7 @@ const EditOptions = props => {
const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
return (
<EditView usePopover={!Device.phone} onClosed={onviewclosed} isAddShapeHyperlink={isAddShapeHyperlink} hyperinfo={hyperinfo} wsProps={props.wsProps} />
<EditView usePopover={!Device.phone} onClosed={onviewclosed} isAddShapeHyperlink={isAddShapeHyperlink} hyperinfo={hyperinfo} wsLock={props.wsLock} wsProps={props.wsProps} />
)
};