feat(sheets-ui): add reactive user list for permission management (#4760

)
dream-num · Mar 3, 2025 · 1bd2cca · 1bd2cca
1 parent 4eed277
commit 1bd2cca
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/sheets-ui/src/services/permission/sheet-permission-user-list.service.ts b/packages/sheets-ui/src/services/permission/sheet-permission-user-list.service.ts
@@ -19,6 +19,9 @@ import { BehaviorSubject } from 'rxjs';
 
 export class SheetPermissionUserManagerService {
     private _userList: ICollaborator[] = [];
+    private _userList$ = new BehaviorSubject<ICollaborator[]>(this._userList);
+    userList$ = this._userList$.asObservable();
+
     private _oldCollaboratorList: ICollaborator[] = [];
 
     private _selectUserList: ICollaborator[] = [];
@@ -32,6 +35,7 @@ export class SheetPermissionUserManagerService {
     // Set all editable users of this unit
     setCanEditUserList(userList: ICollaborator[]) {
         this._userList = userList;
+        this._userList$.next(userList);
     }
 
     reset() {

diff --git a/packages/sheets-ui/src/views/permission/user-dialog/index.tsx b/packages/sheets-ui/src/views/permission/user-dialog/index.tsx
@@ -19,7 +19,7 @@ import { LocaleService } from '@univerjs/core';
 import { Avatar, Button, clsx, Input } from '@univerjs/design';
 import { CheckMarkSingle } from '@univerjs/icons';
 import { UnitRole } from '@univerjs/protocol';
-import { IDialogService, useDependency } from '@univerjs/ui';
+import { IDialogService, useDependency, useObservable } from '@univerjs/ui';
 import { useState } from 'react';
 import { UNIVER_SHEET_PERMISSION_USER_DIALOG_ID } from '../../../consts/permission';
 import { SheetPermissionUserManagerService } from '../../../services/permission/sheet-permission-user-list.service';
@@ -31,10 +31,10 @@ export const SheetPermissionUserDialog = () => {
     const localeService = useDependency(LocaleService);
     const dialogService = useDependency(IDialogService);
     const sheetPermissionUserManagerService = useDependency(SheetPermissionUserManagerService);
-    const userList = sheetPermissionUserManagerService.userList;
-    const searchUserList = userList.filter((item) => {
+    const userList = useObservable(sheetPermissionUserManagerService.userList$, sheetPermissionUserManagerService.userList);
+    const searchUserList = userList?.filter((item) => {
         return item.subject?.name.toLocaleLowerCase().includes(inputValue.toLocaleLowerCase()) && item.role === UnitRole.Editor;
-    });
+    }) ?? [];
     const [selectUserInfo, setSelectUserInfo] = useState<ICollaborator[]>(sheetPermissionUserManagerService.selectUserList);
 
     const handleChangeUser = (item: ICollaborator) => {