How Should I Set Up Worksheet Insert/Delete Column Permission?

[frankcrc]

Hello everyone,

I'm a frontend beginner and also new to Univer. I'm exploring whether Univer's features can meet my needs. I want to prevent users from adding or deleting columns in a worksheet. From Univer's documentation (https://docs.univer.ai/zh-CN/guides/sheets/features/core/permission), I see there are two approaches: using API calls or executing commands. I’m building a React app and initializing it within useEffect. Below is my code,

import React, {useEffect, useRef, useState} from "react";
import {createUniver, defaultTheme, IPermissionService, LocaleType, merge} from '@univerjs/presets'
import {FUniver} from '@univerjs/core/facade'
import {FWorkbook, FWorksheet} from '@univerjs/sheets/facade'
import {ICommandService} from '@univerjs/core'
import {AddWorksheetProtectionMutation, WorksheetInsertColumnPermission} from '@univerjs/sheets'
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core'
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN'
import { UniverSheetsFilterPreset } from '@univerjs/presets/preset-sheets-filter';
import UniverPresetSheetsFilterZhCN from '@univerjs/presets/preset-sheets-filter/locales/zh-CN';
import { UniverSheetsSortPreset } from '@univerjs/presets/preset-sheets-sort';
import SheetsSortZhCN from '@univerjs/presets/preset-sheets-sort/locales/zh-CN';
import { UniverSheetsDataValidationPreset } from '@univerjs/presets/preset-sheets-data-validation';
import UniverPresetSheetsDataValidationZhCN from '@univerjs/presets/preset-sheets-data-validation/locales/zh-CN';

import '@univerjs/presets/lib/styles/preset-sheets-core.css'
import '@univerjs/presets/lib/styles/preset-sheets-filter.css'
import '@univerjs/presets/lib/styles/preset-sheets-sort.css'
import '@univerjs/presets/lib/styles/preset-sheets-data-validation.css'

import {BASE_DATA, PURCHASE_REQUEST_RECORD_WORKSHEET_ID, WORKBOOK_ID} from '../constants/base_data.ts'
import {Button} from "antd";

const DatabasePage: React.FC = () => {
    const univerAPIRef = useRef<FUniver>();
    const workbookRef = useRef<FWorkbook>();

    useEffect(() => {
        const {univer, univerAPI } = createUniver({
            locale: LocaleType.ZH_CN,
            locales: {
                [LocaleType.ZH_CN]: merge(
                    {},
                    UniverPresetSheetsCoreZhCN,
                    UniverPresetSheetsFilterZhCN,
                    SheetsSortZhCN,
                    UniverPresetSheetsDataValidationZhCN
                ),
            },
            theme: defaultTheme,
            presets: [
                UniverSheetsCorePreset({
                    container: 'app',
                }),
                UniverSheetsFilterPreset(),
                UniverSheetsSortPreset(),
                UniverSheetsDataValidationPreset()
            ],
        })

        univerAPIRef.current = univerAPI;
        // workbookRef.current = univerAPI.createWorkbook(BASE_DATA);
        workbookRef.current = univerAPI.createWorkbook({id: WORKBOOK_ID});

        // set up permission
        const permission = workbookRef.current?.getPermission();
        const unitId = WORKBOOK_ID;
        const subUnitId = workbookRef.current?.getActiveSheet().getSheetId();
        // workbook permissions
        // disable add worksheet
        permission.setWorkbookPermissionPoint(unitId, permission.permissionPointsDefinition.WorkbookCreateSheetPermission, false);
        // disable delete worksheet
        permission.setWorkbookPermissionPoint(unitId, permission.permissionPointsDefinition.WorkbookDeleteSheetPermission, false);

        // sheet permissions
        // API method
        permission.addWorksheetBasePermission(unitId, subUnitId).then((permissionId) => {
            console.log('permissionId', permissionId);

            permission.sheetRuleChangedAfterAuth$.subscribe((currentPermissionId) => {
                console.log('currentPermissionId', currentPermissionId);
                if (currentPermissionId === permissionId) {
                      // disable insert column
                      permission.setWorksheetPermissionPoint(unitId, subUnitId, 
                          permission.permissionPointsDefinition.WorksheetInsertColumnPermission, false);
                      // disable delete column
                      permission.setWorksheetPermissionPoint(unitId, subUnitId, 
                          permission.permissionPointsDefinition.WorksheetDeleteColumnPermission, false);
                }
            });
        });

        // Command method
        // const accessor = univer.__getInjector();
        // const commandService = accessor.get<ICommandService>(ICommandService);
        //
        // commandService.executeCommand(AddWorksheetProtectionMutation.id, {
        //     unitId,
        //     subUnitId,
        //     rule: {
        //         permissionId: 'abxxa23',
        //         name: "ps",
        //         unitType: 2,
        //         unitId,
        //         subUnitId,
        //     }
        // });
        //
        // const permissionService = accessor.get<IPermissionService>(IPermissionService);
        // permissionService.updatePermissionPoint(new WorksheetInsertColumnPermission(WORKBOOK_ID, PURCHASE_REQUEST_RECORD_WORKSHEET_ID).id, false);
    }, []);

    return (
        <>
            <div
                style={{
                    height: '100%',
                    display: 'flex',
                    flexDirection: 'column',
                }}>

                <Button onClick={() => {
                    if (univerAPIRef.current != undefined) {
                        const activeWorkbook = univerAPIRef.current.getActiveWorkbook();
                        const workbookData = activeWorkbook?.save();
                        console.log(workbookData)
                    }
                }}>Default Button</Button>

                <div id="app"
                     style={{
                         flex: 1
                     }}
                />
            </div>

        </>
        )

};

export default DatabasePage;

For the first approach (API calls), the examples use await, but since useEffect doesn’t support async directly, I tried using .then().

I registered events inside this block, but they don’t seem to trigger. After calling addWorksheetBasePermission, a lock icon appears on the worksheet tab (indicating protection), and the worksheet background changes to a slashed pattern. However, I can still insert/delete rows and columns.

The second approach (commands) behaves similarly, but I’m unsure if I implemented it correctly. Could you help me identify where the issue might be? Thank you!