feat: finish team permission

labring · Sep 10, 2024 · 8dce4f6 · 8dce4f6
1 parent c4c28e2
commit 8dce4f6
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 20 deletions.
diff --git a/packages/web/i18n/zh/common.json b/packages/web/i18n/zh/common.json
@@ -1474,12 +1474,14 @@
       },
       "role": {
         "Admin": "管理员",
-        "Owner": "创建者"
+        "writer": "可写成员",
+        "Owner": "创建者",
+        "Visitor": "访客"
       }
     },
     "type": "类型"
   },
   "verification": "验证",
   "xx_search_result": "{{key}} 的搜索结果",
   "yes": "是"
-}
+}
diff --git a/packages/web/i18n/zh/user.json b/packages/web/i18n/zh/user.json
@@ -24,7 +24,9 @@
   "bind_inform_account_success": "绑定通知账号成功",
   "delete": {
     "admin_failed": "删除管理员失败",
-    "admin_success": "删除管理员成功"
+    "admin_success": "删除管理员成功",
+    "success": "删除成功",
+    "failed": "删除失败"
   },
   "has_chosen": "已选择",
   "individuation": "个性化",
@@ -94,6 +96,7 @@
   },
   "team": {
     "Add manager": "添加管理员",
+    "add_writer": "添加可写成员",
     "add_collaborator": "添加协作者",
     "manage_collaborators": "管理协作者",
     "no_collaborators": "暂无协作者",

diff --git a/...omponents/PermissionManage/AddManager.tsx → .../components/PermissionManage/AddModal.tsx b/...omponents/PermissionManage/AddManager.tsx → .../components/PermissionManage/AddModal.tsx
@@ -5,16 +5,29 @@ import { useTranslation } from 'next-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { updateMemberPermission } from '@/web/support/user/team/api';
-import { ManagePermissionVal } from '@fastgpt/global/support/permission/constant';
+import {
+  ManagePermissionVal,
+  WritePermissionVal
+} from '@fastgpt/global/support/permission/constant';
 import { TeamModalContext } from '../../context';
 import { useI18n } from '@/web/context/I18n';
 import SelectMember from '../SelectMember';
 import { useForm } from 'react-hook-form';
 
-function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
+type addType = 'writer' | 'manager';
+
+function AddManagerModal({
+  onClose,
+  onSuccess,
+  addType
+}: {
+  onClose: () => void;
+  onSuccess: () => void;
+  addType: addType;
+}) {
   const { t } = useTranslation();
   const { userT } = useI18n();
-  const { members, refetchMembers, groups, refetchGroups } = useContextSelector(
+  const { members, refetchMembers, groups, refetchGroups, refetchClbs } = useContextSelector(
     TeamModalContext,
     (v) => v
   );
@@ -32,10 +45,10 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
       updateMemberPermission({
         members: member,
         groups: group,
-        permission: ManagePermissionVal
+        permission: addType === 'manager' ? ManagePermissionVal : WritePermissionVal
       }),
     {
-      onSuccess: () => Promise.all([refetchMembers(), refetchGroups(), onSuccess()])
+      onSuccess: () => Promise.all([refetchMembers(), refetchGroups(), onSuccess(), refetchClbs()])
     }
   );
 

diff --git a/...pp/src/components/support/user/team/TeamManageModal/components/PermissionManage/index.tsx b/...pp/src/components/support/user/team/TeamManageModal/components/PermissionManage/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Button, Flex, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { useContextSelector } from 'use-context-selector';
@@ -15,30 +15,133 @@ import MyBox from '@fastgpt/web/components/common/MyBox';
 import MyTag from '@fastgpt/web/components/common/Tag/index';
 import { TeamPermission } from '@fastgpt/global/support/permission/user/controller';
 
-const AddManagerModal = dynamic(() => import('./AddManager'));
+const AddModal = dynamic(() => import('./AddModal'));
 
 function PermissionManage() {
   const { t } = useTranslation();
   const { userInfo } = useUserStore();
   const { groups, refetchMembers, refetchGroups, isLoading, clbs, refetchClbs, members } =
     useContextSelector(TeamModalContext, (v) => v);
 
+  const [addType, setAddType] = useState<'writer' | 'manager'>('writer');
+
   const {
     isOpen: isOpenAddManager,
     onOpen: onOpenAddManager,
     onClose: onCloseAddManager
   } = useDisclosure();
 
-  const { runAsync: removeManager, loading: isRemovingManager } = useRequest2(delMemberPermission, {
-    successToast: t('user:delete.admin_success'),
-    errorToast: t('user:delete.admin_failed'),
-    onSuccess: () => Promise.all([refetchMembers(), refetchGroups(), refetchClbs()])
-  });
+  const { runAsync: removePermission, loading: isRemovingPermission } = useRequest2(
+    delMemberPermission,
+    {
+      successToast: t('user:delete.success'),
+      errorToast: t('user:delete.failed'),
+      onSuccess: () => Promise.all([refetchMembers(), refetchGroups(), refetchClbs()])
+    }
+  );
 
   return (
-    <MyBox h={'100%'} isLoading={isRemovingManager || isLoading} bg={'white'}>
+    <MyBox h={'100%'} isLoading={isRemovingPermission || isLoading} bg={'white'}>
+      <Flex
+        mx={'5'}
+        flexDirection={'row'}
+        alignItems={'center'}
+        rowGap={'8'}
+        justifyContent={'space-between'}
+      >
+        <Flex>
+          <Box fontSize={['sm', 'md']} fontWeight={'bold'} alignItems={'center'}>
+            {t('common:user.team.role.writer')}
+          </Box>
+          <Box
+            fontSize={['xs']}
+            color={'myGray.500'}
+            bgColor={'myGray.100'}
+            alignItems={'center'}
+            alignContent={'center'}
+            px={'3'}
+            ml={3}
+            borderRadius={'sm'}
+          >
+            {TeamPermissionList['write'].description}
+          </Box>
+        </Flex>
+        {userInfo?.team.role === 'owner' && (
+          <Button
+            variant={'whitePrimary'}
+            size="sm"
+            borderRadius={'md'}
+            ml={3}
+            leftIcon={<MyIcon name={'common/inviteLight'} w={'14px'} color={'primary.500'} />}
+            onClick={() => {
+              setAddType('writer');
+              onOpenAddManager();
+            }}
+          >
+            {t('user:team.add_writer')}
+          </Button>
+        )}
+      </Flex>
+      <Flex mt="4" mx="4" flexWrap={'wrap'} gap={3}>
+        {groups.map((group) => {
+          if (group.permission.hasWritePer && !group.permission.hasManagePer) {
+            return (
+              <MyTag key={group._id} px="4" py="2" type="fill" colorSchema="gray">
+                <Avatar src={group.avatar} w="1.25rem" />
+                <Box fontSize={'sm'} ml={1}>
+                  {group.name}
+                </Box>
+                {userInfo?.team.role === 'owner' && (
+                  <MyIcon
+                    ml={4}
+                    name="common/trash"
+                    w="1rem"
+                    color="myGray.500"
+                    cursor="pointer"
+                    _hover={{ color: 'red.600' }}
+                    onClick={() => {
+                      removePermission({
+                        groupId: group._id
+                      });
+                    }}
+                  />
+                )}
+              </MyTag>
+            );
+          }
+        })}
+        {clbs.map((clb) => {
+          const per = new TeamPermission({ per: clb.permission });
+          if (per.hasWritePer && !per.isOwner && !per.hasManagePer) {
+            return (
+              <MyTag key={clb.tmbId} px="4" py="2" type="fill" colorSchema="gray">
+                <Avatar src={members.find((m) => m.tmbId === clb.tmbId)?.avatar} w="1.25rem" />
+                <Box fontSize={'sm'} ml={1}>
+                  {members.find((m) => m.tmbId === clb.tmbId)?.memberName}
+                </Box>
+                {userInfo?.team.role === 'owner' && (
+                  <MyIcon
+                    ml={4}
+                    name="common/trash"
+                    w="1rem"
+                    color="myGray.500"
+                    cursor="pointer"
+                    _hover={{ color: 'red.600' }}
+                    onClick={() => {
+                      removePermission({
+                        tmbId: clb.tmbId
+                      });
+                    }}
+                  />
+                )}
+              </MyTag>
+            );
+          }
+        })}
+      </Flex>
       <Flex
         mx={'5'}
+        mt={'8'}
         flexDirection={'row'}
         alignItems={'center'}
         rowGap={'8'}
@@ -69,6 +172,7 @@ function PermissionManage() {
             ml={3}
             leftIcon={<MyIcon name={'common/inviteLight'} w={'14px'} color={'primary.500'} />}
             onClick={() => {
+              setAddType('manager');
               onOpenAddManager();
             }}
           >
@@ -94,7 +198,7 @@ function PermissionManage() {
                     cursor="pointer"
                     _hover={{ color: 'red.600' }}
                     onClick={() => {
-                      removeManager({
+                      removePermission({
                         groupId: group._id
                       });
                     }}
@@ -122,7 +226,7 @@ function PermissionManage() {
                     cursor="pointer"
                     _hover={{ color: 'red.600' }}
                     onClick={() => {
-                      removeManager({
+                      removePermission({
                         tmbId: clb.tmbId
                       });
                     }}
@@ -133,9 +237,8 @@ function PermissionManage() {
           }
         })}
       </Flex>
-
       {isOpenAddManager && (
-        <AddManagerModal onClose={onCloseAddManager} onSuccess={onCloseAddManager} />
+        <AddModal onClose={onCloseAddManager} onSuccess={onCloseAddManager} addType={addType} />
       )}
     </MyBox>
   );