[SSE mobile] Add protection sheet

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

@@ -31,7 +31,8 @@ import { StatusbarController } from "./Statusbar";
     "storeSpreadsheetSettings",
     "storeSpreadsheetInfo",
     "storeApplicationSettings",
-    "storeToolbarSettings"
+    "storeToolbarSettings",
+    "storeWorksheets"
     )
 class MainController extends Component {
     constructor(props) {
@@ -48,6 +49,9 @@ class MainController extends Component {
             isDocModified: false
         };
         
+        this.wsLockOptions = ['SelectLockedCells', 'SelectUnlockedCells', 'FormatCells', 'FormatColumns', 'FormatRows', 'InsertColumns', 'InsertRows', 'InsertHyperlinks', 'DeleteColumns',
+                'DeleteRows', 'Sort', 'AutoFilter', 'PivotTables', 'Objects', 'Scenarios'];
+
         this.defaultTitleText = __APP_TITLE_TEXT__;
 
         const { t } = this.props;
@@ -396,6 +400,42 @@ class MainController extends Component {
                 }
             }
         });
+
+        this.api.asc_registerCallback('asc_onChangeProtectWorksheet', 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);
+    
+        storeWorksheets.setWorksheetProtection(props);
+    }
+
+    getWSProps(update) {
+        const storeAppOptions = this.props.storeAppOptions;
+        let protection = {};
+        if (!storeAppOptions.config || !storeAppOptions.isEdit && !storeAppOptions.isRestrictedEdit) return;
+
+        if (update) {
+            let wsProtected = !!this.api.asc_isProtectedSheet();
+            let arr = {};
+            if (wsProtected) {
+                // arr = [];
+                let props = this.api.asc_getProtectedSheet();
+                props && this.wsLockOptions.forEach(function(item){
+                    arr[item] = props['asc_get' + item] ? props['asc_get' + item]() : false;
+                });
+            } else {
+                this.wsLockOptions.forEach(function(item){
+                    arr[item] = false;
+                });
+            }
+
+            protection = {wsLock: wsProtected, wsProps: arr};
+        }
+
+        return protection;
     }
 
     _onLongActionEnd(type, id) {

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

@@ -38,6 +38,7 @@ export const stores = {
     // storeImageSettings: new storeImageSettings(),
     // storeTableSettings: new storeTableSettings()
     storeComments: new storeComments(),
-    storeToolbarSettings: new storeToolbarSettings()
+    storeToolbarSettings: new storeToolbarSettings(),
+    storeWorksheets: new storeWorksheets()
 };
 

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

@@ -36,7 +36,10 @@ export class storeWorksheets {
             setWorksheetLocked: action,
 
             isProtectedWorkbook: observable,
-            setProtectedWorkbook: action
+            setProtectedWorkbook: action,
+
+            worksheetProtection: observable,
+            setWorksheetProtection: action
         });
         this.sheets = [];
     }
@@ -97,4 +100,9 @@ export class storeWorksheets {
     setProtectedWorkbook(value) {
         this.isProtectedWorkbook = value;
     }
+
+    worksheetProtection;
+    setWorksheetProtection(value) {
+        this.worksheetProtection = value;
+    }
 }

apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx

@@ -11,6 +11,10 @@ const EditCell = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeCellSettings = props.storeCellSettings;
+    const storeWorksheets = props.storeWorksheets;
+    const worksheetProtection = storeWorksheets.worksheetProtection;
+    const wsLock = worksheetProtection.wsLock;
+    const wsProps = worksheetProtection.wsProps;
     const cellStyles = storeCellSettings.cellStyles;
     const styleName = storeCellSettings.styleName;
 
@@ -40,79 +44,82 @@ const EditCell = props => {
                     onFontSize: props.onFontSize,
                     onFontClick: props.onFontClick
                 }}/>
-                <ListItem className='buttons'>
+                {!wsLock && !wsProps.FormatCells && 
-                    <Row>
+                <>
-                        <a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
+                    <ListItem className='buttons'>
-                        <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
+                        <Row>
-                        <a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
+                            <a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
-                    </Row>
+                            <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
-                </ListItem>
+                            <a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
-                <ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{
+                        </Row>
-                    onTextColor: props.onTextColor
+                    </ListItem>
-                }}>
+                    <ListItem title={_t.textTextColor} link="/edit-cell-text-color/" routeProps={{
-                    {!isAndroid ?
+                        onTextColor: props.onTextColor
-                        <Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
+                    }}>
-                        fontColorPreview
+                        {!isAndroid ?
-                    }
+                            <Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
-                </ListItem>
+                            fontColorPreview
-                <ListItem title={_t.textFillColor} link="/edit-cell-fill-color/" routeProps={{
+                        }
-                    onFillColor: props.onFillColor
+                    </ListItem>
-                }}>
+                    <ListItem title={_t.textFillColor} link="/edit-cell-fill-color/" routeProps={{
-                    {!isAndroid ?
+                        onFillColor: props.onFillColor
-                        <Icon slot="media" icon="icon-fill-color">{fillColorPreview}</Icon> :
+                    }}>
-                        fillColorPreview
+                        {!isAndroid ?
-                    }
+                            <Icon slot="media" icon="icon-fill-color">{fillColorPreview}</Icon> :
-                </ListItem>
+                            fillColorPreview
-                <ListItem title={_t.textTextFormat} link="/edit-cell-text-format/" routeProps={{
+                        }
-                    onHAlignChange: props.onHAlignChange,
+                    </ListItem>
-                    onVAlignChange: props.onVAlignChange,
+                    <ListItem title={_t.textTextFormat} link="/edit-cell-text-format/" routeProps={{
-                    onWrapTextChange: props.onWrapTextChange
+                        onHAlignChange: props.onHAlignChange,
-                }}>
+                        onVAlignChange: props.onVAlignChange,
-                    {!isAndroid ?
+                        onWrapTextChange: props.onWrapTextChange
-                        <Icon slot="media" icon="icon-text-align-left"></Icon> : null
+                    }}>
-                    }
+                        {!isAndroid ?
-                </ListItem>
+                            <Icon slot="media" icon="icon-text-align-left"></Icon> : null
-                <ListItem title={_t.textTextOrientation} link="/edit-cell-text-orientation/" routeProps={{
+                        }
-                    onTextOrientationChange: props.onTextOrientationChange
+                    </ListItem>
-                }}>
+                    <ListItem title={_t.textTextOrientation} link="/edit-cell-text-orientation/" routeProps={{
-                    {!isAndroid ?
+                        onTextOrientationChange: props.onTextOrientationChange
-                        <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null
+                    }}>
-                    }
+                        {!isAndroid ?
-                </ListItem>
+                            <Icon slot="media" icon="icon-text-orientation-horizontal"></Icon> : null
-                <ListItem title={_t.textBorderStyle} link="/edit-cell-border-style/" routeProps={{
+                        }
-                    onBorderStyle: props.onBorderStyle
+                    </ListItem>
-                }}>
+                    <ListItem title={_t.textBorderStyle} link="/edit-cell-border-style/" routeProps={{
-                    {!isAndroid ?
+                        onBorderStyle: props.onBorderStyle
-                        <Icon slot="media" icon="icon-table-borders-all"></Icon> : null
+                    }}>
-                    }
+                        {!isAndroid ?
-                </ListItem>
+                            <Icon slot="media" icon="icon-table-borders-all"></Icon> : null
+                        }
+                    </ListItem>
+                    <List>
+                        <ListItem title={_t.textFormat} link="/edit-format-cell/" routeProps={{
+                            onCellFormat: props.onCellFormat,
+                            onCurrencyCellFormat: props.onCurrencyCellFormat,
+                            onAccountingCellFormat: props.onAccountingCellFormat,
+                            dateFormats: props.dateFormats,
+                            timeFormats: props.timeFormats
+                        }}>
+                            {!isAndroid ?
+                                <Icon slot="media" icon="icon-format-general"></Icon> : null
+                            }
+                        </ListItem>
+                    </List>
+                    <BlockTitle>{_t.textCellStyles}</BlockTitle>
+                    {cellStyles.length ? (
+                        <List className="cell-styles-list">
+                            {cellStyles.map((elem, index) => {
+                                return (
+                                    <ListItem key={index}
+                                        className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
+                                        <div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
+                                    </ListItem>
+                                )
+                            })}
+                        </List>
+                    ) : null}
+                </>}
             </List>    
-            <List>
-                <ListItem title={_t.textFormat} link="/edit-format-cell/" routeProps={{
-                    onCellFormat: props.onCellFormat,
-                    onCurrencyCellFormat: props.onCurrencyCellFormat,
-                    onAccountingCellFormat: props.onAccountingCellFormat,
-                    dateFormats: props.dateFormats,
-                    timeFormats: props.timeFormats
-                }}>
-                    {!isAndroid ?
-                        <Icon slot="media" icon="icon-format-general"></Icon> : null
-                    }
-                </ListItem>
-            </List>
-            <BlockTitle>{_t.textCellStyles}</BlockTitle>
-            {cellStyles.length ? (
-                <List className="cell-styles-list">
-                    {cellStyles.map((elem, index) => {
-                        return (
-                            <ListItem key={index}
-                                className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
-                                <div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
-                            </ListItem>
-                        )
-                    })}
-                </List>
-            ) : null}    
         </Fragment>
     )
 };
@@ -977,7 +984,7 @@ const PageTimeFormatCell = props => {
 }
 
 
-const PageEditCell = inject("storeCellSettings")(observer(EditCell));
+const PageEditCell = inject("storeCellSettings", "storeWorksheets")(observer(EditCell));
 const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageTextColorCell));
 const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell));
 const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell));