Archer
@@ -1,12 +1,20 @@
|
||||
import { IconProps } from '@chakra-ui/react';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import type { IconNameType } from '@fastgpt/web/components/common/Icon/type';
|
||||
|
||||
function IconButton({ name, onClick }: { name: IconNameType; onClick: () => void }) {
|
||||
function IconButton({
|
||||
name,
|
||||
w = '1rem',
|
||||
h = '1rem',
|
||||
...props
|
||||
}: {
|
||||
name: IconNameType;
|
||||
} & IconProps) {
|
||||
return (
|
||||
<MyIcon
|
||||
name={name}
|
||||
w={'1rem'}
|
||||
h={'1rem'}
|
||||
w={w}
|
||||
h={h}
|
||||
transition={'background 0.1s'}
|
||||
cursor={'pointer'}
|
||||
p="1"
|
||||
@@ -15,7 +23,7 @@ function IconButton({ name, onClick }: { name: IconNameType; onClick: () => void
|
||||
bg: 'myGray.05',
|
||||
color: 'primary.600'
|
||||
}}
|
||||
onClick={onClick}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,86 +4,95 @@ import { postCreateOrg, putUpdateOrg } from '@/web/support/user/team/org/api';
|
||||
import { Button, HStack, Input, ModalBody, ModalFooter, Textarea } from '@chakra-ui/react';
|
||||
import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
|
||||
import { DEFAULT_ORG_AVATAR } from '@fastgpt/global/common/system/constants';
|
||||
import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
|
||||
import Avatar from '@fastgpt/web/components/common/Avatar';
|
||||
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
|
||||
import MyModal from '@fastgpt/web/components/common/MyModal';
|
||||
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useEffect } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
export type OrgFormType = {
|
||||
_id: string;
|
||||
avatar: string;
|
||||
description?: string;
|
||||
name: string;
|
||||
path: string;
|
||||
parentId?: string;
|
||||
};
|
||||
|
||||
export const defaultOrgForm: OrgFormType = {
|
||||
_id: '',
|
||||
avatar: '',
|
||||
description: '',
|
||||
name: '',
|
||||
path: ''
|
||||
};
|
||||
|
||||
function OrgInfoModal({
|
||||
editOrg,
|
||||
createOrgParentId: parentId,
|
||||
onClose,
|
||||
onSuccess
|
||||
}: {
|
||||
editOrg?: OrgType;
|
||||
createOrgParentId?: string;
|
||||
editOrg: OrgFormType;
|
||||
onClose: () => void;
|
||||
onSuccess?: () => void;
|
||||
onSuccess: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { File: AvatarSelect, onOpen: onOpenSelectAvatar } = useSelectFile({
|
||||
fileType: '.jpg, .jpeg, .png',
|
||||
multiple: false
|
||||
});
|
||||
|
||||
const { register, handleSubmit, getValues, setValue } = useForm<OrgFormType>({
|
||||
const isEdit = !!editOrg._id;
|
||||
|
||||
const { register, handleSubmit, setValue, watch } = useForm<OrgFormType>({
|
||||
defaultValues: {
|
||||
name: '',
|
||||
avatar: DEFAULT_ORG_AVATAR,
|
||||
description: undefined
|
||||
name: editOrg.name,
|
||||
avatar: editOrg.avatar,
|
||||
description: editOrg.description
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setValue('name', editOrg?.name ?? '');
|
||||
setValue('avatar', editOrg?.avatar || DEFAULT_ORG_AVATAR);
|
||||
setValue('description', editOrg?.description);
|
||||
}, [editOrg, setValue]);
|
||||
const avatar = watch('avatar');
|
||||
|
||||
const { run: onCreate, loading: isLoadingCreate } = useRequest2(
|
||||
(data: OrgFormType, parentId: string) => {
|
||||
async (data: OrgFormType) => {
|
||||
if (!editOrg.parentId) return;
|
||||
return postCreateOrg({
|
||||
name: data.name,
|
||||
avatar: data.avatar,
|
||||
parentId,
|
||||
parentId: editOrg.parentId,
|
||||
description: data.description
|
||||
});
|
||||
},
|
||||
{
|
||||
successToast: t('common:common.Create Success'),
|
||||
onSuccess: () => {
|
||||
onClose();
|
||||
onSuccess?.();
|
||||
onSuccess();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const { run: onUpdate, loading: isLoadingUpdate } = useRequest2(
|
||||
(data: OrgFormType, orgId: string) => {
|
||||
async (data: OrgFormType) => {
|
||||
if (!editOrg._id) return;
|
||||
return putUpdateOrg({
|
||||
orgId,
|
||||
orgId: editOrg._id,
|
||||
name: data.name,
|
||||
avatar: data.avatar,
|
||||
description: data.description
|
||||
});
|
||||
},
|
||||
{
|
||||
successToast: t('common:common.Update Success'),
|
||||
onSuccess: () => {
|
||||
onClose();
|
||||
onSuccess?.();
|
||||
onSuccess();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const { File: AvatarSelect, onOpen: onOpenSelectAvatar } = useSelectFile({
|
||||
fileType: '.jpg, .jpeg, .png',
|
||||
multiple: false
|
||||
});
|
||||
const { loading: uploadingAvatar, run: onSelectAvatar } = useRequest2(
|
||||
async (file: File[]) => {
|
||||
const src = await compressImgFileAndUpload({
|
||||
@@ -101,20 +110,20 @@ function OrgInfoModal({
|
||||
}
|
||||
);
|
||||
|
||||
const isLoading = uploadingAvatar;
|
||||
const isLoading = uploadingAvatar || isLoadingUpdate || isLoadingCreate;
|
||||
|
||||
return (
|
||||
<MyModal
|
||||
isOpen={!!(editOrg || parentId)}
|
||||
isOpen
|
||||
onClose={onClose}
|
||||
title={editOrg ? t('account_team:edit_org_info') : t('account_team:create_org')}
|
||||
iconSrc={editOrg?.avatar || DEFAULT_ORG_AVATAR}
|
||||
title={isEdit ? t('account_team:edit_org_info') : t('account_team:create_org')}
|
||||
iconSrc={'modal/edit'}
|
||||
>
|
||||
<ModalBody flex={1} overflow={'auto'} display={'flex'} flexDirection={'column'} gap={4}>
|
||||
<FormLabel w="80px">{t('user:team.avatar_and_name')}</FormLabel>
|
||||
<HStack>
|
||||
<Avatar
|
||||
src={getValues('avatar') || DEFAULT_ORG_AVATAR}
|
||||
src={avatar || DEFAULT_ORG_AVATAR}
|
||||
onClick={onOpenSelectAvatar}
|
||||
cursor={'pointer'}
|
||||
borderRadius={'md'}
|
||||
@@ -132,14 +141,14 @@ function OrgInfoModal({
|
||||
<Button
|
||||
isLoading={isLoading}
|
||||
onClick={handleSubmit((data) => {
|
||||
if (editOrg) {
|
||||
onUpdate(data, editOrg._id);
|
||||
} else if (parentId) {
|
||||
onCreate(data, parentId);
|
||||
if (isEdit) {
|
||||
onUpdate(data);
|
||||
} else {
|
||||
onCreate(data);
|
||||
}
|
||||
})}
|
||||
>
|
||||
{editOrg ? t('common:common.Save') : t('common:new_create')}
|
||||
{isEdit ? t('common:common.Save') : t('common:new_create')}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
<AvatarSelect onSelect={onSelectAvatar} />
|
||||
@@ -147,4 +156,4 @@ function OrgInfoModal({
|
||||
);
|
||||
}
|
||||
|
||||
export default OrgInfoModal;
|
||||
export default dynamic(() => Promise.resolve(OrgInfoModal), { ssr: false });
|
||||
|
||||
@@ -18,9 +18,11 @@ import MyModal from '@fastgpt/web/components/common/MyModal';
|
||||
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import type React from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useContextSelector } from 'use-context-selector';
|
||||
import { TeamContext } from '../context';
|
||||
import { OrgType } from '@fastgpt/global/support/user/team/org/type';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
export type GroupFormType = {
|
||||
members: {
|
||||
@@ -39,69 +41,67 @@ function CheckboxIcon({
|
||||
return <MyIcon name={name} w="12px" />;
|
||||
}
|
||||
|
||||
function OrgMemberModal({ onClose, editOrgId }: { onClose: () => void; editOrgId?: string }) {
|
||||
// 1. Owner can not be deleted, toast
|
||||
// 2. Owner/Admin can manage members
|
||||
// 3. Owner can add/remove admins
|
||||
function OrgMemberManageModal({
|
||||
currentOrg,
|
||||
refetchOrgs,
|
||||
onClose
|
||||
}: {
|
||||
currentOrg: OrgType;
|
||||
refetchOrgs: () => void;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
members: allMembers,
|
||||
orgs,
|
||||
refetchOrgs,
|
||||
refetchMembers
|
||||
} = useContextSelector(TeamContext, (v) => v);
|
||||
const allMembers = useContextSelector(TeamContext, (v) => v.members);
|
||||
|
||||
const org = useMemo(() => orgs.find((item) => item._id === editOrgId), [editOrgId, orgs]);
|
||||
|
||||
const [members, setMembers] = useState<{ tmbId: string }[]>(org?.members || []);
|
||||
|
||||
useEffect(() => {
|
||||
setMembers(org?.members || []);
|
||||
}, [org]);
|
||||
const [selectedMembers, setSelectedMembers] = useState<string[]>(
|
||||
currentOrg.members.map((item) => item.tmbId)
|
||||
);
|
||||
|
||||
const [searchKey, setSearchKey] = useState('');
|
||||
const filtered = useMemo(() => {
|
||||
return [
|
||||
...allMembers.filter((member) => {
|
||||
if (member.memberName.toLowerCase().includes(searchKey.toLowerCase())) return true;
|
||||
return false;
|
||||
})
|
||||
];
|
||||
const filterMembers = useMemo(() => {
|
||||
if (!searchKey) return allMembers;
|
||||
const regx = new RegExp(searchKey, 'i');
|
||||
return allMembers.filter((member) => regx.test(member.memberName));
|
||||
}, [searchKey, allMembers]);
|
||||
|
||||
const { run: onUpdate, loading: isLoadingUpdate } = useRequest2(
|
||||
async () => {
|
||||
if (!editOrgId) return;
|
||||
() => {
|
||||
return putUpdateOrgMembers({
|
||||
orgId: editOrgId,
|
||||
members
|
||||
orgId: currentOrg._id,
|
||||
members: selectedMembers.map((tmbId) => ({
|
||||
tmbId
|
||||
}))
|
||||
});
|
||||
},
|
||||
{
|
||||
onSuccess: () => Promise.all([onClose(), refetchOrgs(), refetchMembers()])
|
||||
successToast: t('common:common.Update Success'),
|
||||
onSuccess() {
|
||||
refetchOrgs();
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const isSelected = (memberId: string) => {
|
||||
return members.find((item) => item.tmbId === memberId);
|
||||
return selectedMembers.find((tmbId) => tmbId === memberId);
|
||||
};
|
||||
|
||||
const handleToggleSelect = (memberId: string) => {
|
||||
if (isSelected(memberId)) {
|
||||
setMembers(members.filter((item) => item.tmbId !== memberId));
|
||||
setSelectedMembers((state) => state.filter((tmbId) => tmbId !== memberId));
|
||||
} else {
|
||||
setMembers([...members, { tmbId: memberId }]);
|
||||
setSelectedMembers((state) => [...state, memberId]);
|
||||
}
|
||||
};
|
||||
|
||||
const isLoading = isLoadingUpdate;
|
||||
|
||||
return (
|
||||
<MyModal
|
||||
onClose={onClose}
|
||||
isOpen={!!editOrgId}
|
||||
isOpen
|
||||
title={t('user:team.group.manage_member')}
|
||||
iconSrc={org?.avatar}
|
||||
iconColor="primary.600"
|
||||
iconSrc={currentOrg?.avatar}
|
||||
minW="800px"
|
||||
h={'100%'}
|
||||
isCentered
|
||||
@@ -124,7 +124,7 @@ function OrgMemberModal({ onClose, editOrgId }: { onClose: () => void; editOrgId
|
||||
}}
|
||||
/>
|
||||
<Flex flexDirection="column" mt={3} flexGrow="1" overflow={'auto'} maxH={'400px'}>
|
||||
{filtered.map((member) => {
|
||||
{filterMembers.map((member) => {
|
||||
return (
|
||||
<HStack
|
||||
py="2"
|
||||
@@ -153,35 +153,30 @@ function OrgMemberModal({ onClose, editOrgId }: { onClose: () => void; editOrgId
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex borderLeft="1px" borderColor="myGray.200" flexDirection="column" p="4" h={'100%'}>
|
||||
<Box mt={2}>{`${t('common:chosen')}:${members.length}`}</Box>
|
||||
<Box mt={2}>{`${t('common:chosen')}:${selectedMembers.length}`}</Box>
|
||||
<Flex mt={3} flexDirection="column" flexGrow="1" overflow={'auto'} maxH={'400px'}>
|
||||
{members.map((member) => {
|
||||
{selectedMembers.map((tmbId) => {
|
||||
const member = allMembers.find((item) => item.tmbId === tmbId)!;
|
||||
return (
|
||||
<HStack
|
||||
justifyContent="space-between"
|
||||
py="2"
|
||||
px={3}
|
||||
borderRadius={'md'}
|
||||
key={member.tmbId}
|
||||
key={tmbId}
|
||||
_hover={{ bg: 'myGray.50' }}
|
||||
_notLast={{ mb: 2 }}
|
||||
>
|
||||
<HStack>
|
||||
<Avatar
|
||||
src={allMembers.find((item) => item.tmbId === member.tmbId)?.avatar}
|
||||
w="1.5rem"
|
||||
borderRadius={'md'}
|
||||
/>
|
||||
<Box>
|
||||
{allMembers.find((item) => item.tmbId === member.tmbId)?.memberName}
|
||||
</Box>
|
||||
<Avatar src={member?.avatar} w="1.5rem" borderRadius={'md'} />
|
||||
<Box>{member?.memberName}</Box>
|
||||
</HStack>
|
||||
<MyIcon
|
||||
name={'common/closeLight'}
|
||||
w={'1rem'}
|
||||
cursor={'pointer'}
|
||||
_hover={{ color: 'red.600' }}
|
||||
onClick={() => handleToggleSelect(member.tmbId)}
|
||||
onClick={() => handleToggleSelect(tmbId)}
|
||||
/>
|
||||
</HStack>
|
||||
);
|
||||
@@ -199,4 +194,4 @@ function OrgMemberModal({ onClose, editOrgId }: { onClose: () => void; editOrgId
|
||||
);
|
||||
}
|
||||
|
||||
export default OrgMemberModal;
|
||||
export default dynamic(() => Promise.resolve(OrgMemberManageModal), { ssr: false });
|
||||
@@ -1,75 +1,69 @@
|
||||
import { putMoveOrg, putMoveOrgMember } from '@/web/support/user/team/org/api';
|
||||
import { putMoveOrg } from '@/web/support/user/team/org/api';
|
||||
import { Button, ModalBody, ModalFooter } from '@chakra-ui/react';
|
||||
import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
|
||||
import type { TeamTmbItemType } from '@fastgpt/global/support/user/team/type';
|
||||
import MyModal from '@fastgpt/web/components/common/MyModal';
|
||||
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useState } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import OrgTree from './OrgTree';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useUserStore } from '@/web/support/user/useUserStore';
|
||||
|
||||
function OrgMoveModal({
|
||||
movingOrg,
|
||||
movingTmb,
|
||||
orgs,
|
||||
team,
|
||||
onClose,
|
||||
onSuccess
|
||||
}: {
|
||||
movingOrg?: OrgType;
|
||||
movingTmb?: { tmbId: string; orgId: string };
|
||||
movingOrg: OrgType;
|
||||
orgs: OrgType[];
|
||||
team: TeamTmbItemType;
|
||||
onClose: () => void;
|
||||
onSuccess: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [selectedOrg, selectOrg] = useState<OrgType>();
|
||||
const [selectedOrg, setSelectedOrg] = useState<OrgType>();
|
||||
const { userInfo } = useUserStore();
|
||||
const team = userInfo?.team!;
|
||||
|
||||
const { runAsync: moveOrg, loading: loadingOrg } = useRequest2(putMoveOrg, {
|
||||
const { runAsync: onMoveOrg, loading } = useRequest2(putMoveOrg, {
|
||||
onSuccess: () => {
|
||||
onClose();
|
||||
onSuccess();
|
||||
}
|
||||
});
|
||||
|
||||
const { runAsync: moveTmb, loading: loadingTmb } = useRequest2(putMoveOrgMember, {
|
||||
onSuccess: () => {
|
||||
onClose();
|
||||
onSuccess();
|
||||
}
|
||||
});
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!selectedOrg) return;
|
||||
if (movingTmb) {
|
||||
moveTmb({ orgId: movingTmb.orgId, tmbId: movingTmb.tmbId, newOrgId: selectedOrg._id });
|
||||
} else if (movingOrg) {
|
||||
moveOrg(movingOrg._id, selectedOrg._id);
|
||||
}
|
||||
};
|
||||
|
||||
const loading = loadingOrg || loadingTmb;
|
||||
const filterMovingOrgs = useMemo(
|
||||
() => orgs.filter((org) => org._id !== movingOrg._id),
|
||||
[movingOrg._id, orgs]
|
||||
);
|
||||
|
||||
return (
|
||||
<MyModal
|
||||
isOpen={!!movingOrg || !!movingTmb}
|
||||
isOpen
|
||||
onClose={onClose}
|
||||
title={movingOrg ? t('account_team:move_org') : t('account_team:move_member')}
|
||||
title={t('account_team:move_org')}
|
||||
iconSrc="common/file/move"
|
||||
iconColor="blue.600"
|
||||
iconColor="primary.600"
|
||||
>
|
||||
<ModalBody>
|
||||
<OrgTree
|
||||
orgs={orgs}
|
||||
teamName={team.teamName}
|
||||
teamAvatar={team.avatar}
|
||||
orgs={filterMovingOrgs}
|
||||
selectedOrg={selectedOrg}
|
||||
selectOrg={selectOrg}
|
||||
setSelectedOrg={setSelectedOrg}
|
||||
/>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button isDisabled={!selectedOrg} isLoading={loading} onClick={() => handleConfirm()}>
|
||||
<Button
|
||||
isDisabled={!selectedOrg}
|
||||
isLoading={loading}
|
||||
onClick={() => {
|
||||
if (!selectedOrg) return;
|
||||
return onMoveOrg({
|
||||
orgId: movingOrg._id,
|
||||
targetOrgId: selectedOrg._id
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t('common:common.Confirm')}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
@@ -77,4 +71,4 @@ function OrgMoveModal({
|
||||
);
|
||||
}
|
||||
|
||||
export default OrgMoveModal;
|
||||
export default dynamic(() => Promise.resolve(OrgMoveModal), { ssr: false });
|
||||
|
||||
@@ -1,114 +1,101 @@
|
||||
import { Box, HStack, Text, VStack } from '@chakra-ui/react';
|
||||
import { Box, HStack, VStack } from '@chakra-ui/react';
|
||||
import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
|
||||
import Avatar from '@fastgpt/web/components/common/Avatar';
|
||||
import { useToggle } from 'ahooks';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import IconButton from './IconButton';
|
||||
|
||||
function OrgTreeNode({
|
||||
org,
|
||||
list,
|
||||
selectedOrg,
|
||||
selectOrg,
|
||||
indent = 0
|
||||
setSelectedOrg,
|
||||
index = 0
|
||||
}: {
|
||||
org: OrgType;
|
||||
list: OrgType[];
|
||||
selectedOrg?: OrgType;
|
||||
selectOrg?: (org?: OrgType) => void;
|
||||
indent?: number;
|
||||
setSelectedOrg: (org?: OrgType) => void;
|
||||
index?: number;
|
||||
}) {
|
||||
const children = useMemo(
|
||||
() => list.filter((item) => item.path === `${org.path}/${org._id}`),
|
||||
[org, list]
|
||||
);
|
||||
const [isExpanded, toggleIsExpanded] = useToggle(false);
|
||||
const [isExpanded, toggleIsExpanded] = useToggle(index === 0);
|
||||
|
||||
return (
|
||||
<VStack alignItems={'start'} w="full" gap={'8px'}>
|
||||
<Box userSelect={'none'}>
|
||||
<HStack
|
||||
w="full"
|
||||
_hover={{ bgColor: selectedOrg === org ? 'blue.200' : 'gray.100' }}
|
||||
borderRadius="4px"
|
||||
boxSizing="border-box"
|
||||
py="4px"
|
||||
pl={`calc(${indent}rem + 4px)`}
|
||||
transition={'background 0.1s'}
|
||||
{...(selectedOrg === org ? { bgColor: 'blue.100' } : {})}
|
||||
borderRadius="sm"
|
||||
_hover={{ bg: 'myGray.100' }}
|
||||
py={1}
|
||||
pr={2}
|
||||
pl={index === 0 ? '0.5rem' : `${1.75 * (index - 1) + 0.5}rem`}
|
||||
cursor={'pointer'}
|
||||
{...(selectedOrg === org
|
||||
? {
|
||||
bg: 'primary.50 !important',
|
||||
onClick: () => setSelectedOrg(undefined)
|
||||
}
|
||||
: {
|
||||
onClick: () => setSelectedOrg(org)
|
||||
})}
|
||||
>
|
||||
{children.length > 0 ? (
|
||||
{index > 0 && (
|
||||
<IconButton
|
||||
name={isExpanded ? 'common/downArrowFill' : 'common/rightArrowFill'}
|
||||
onClick={() => toggleIsExpanded.toggle()}
|
||||
color={'myGray.500'}
|
||||
p={0}
|
||||
w={'1.25rem'}
|
||||
visibility={children.length > 0 ? 'visible' : 'hidden'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleIsExpanded.toggle();
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Box w={'1rem'} h={'1rem'} m="1" />
|
||||
)}
|
||||
<HStack onClick={() => selectOrg?.(org)} cursor="pointer">
|
||||
<Avatar src={org.avatar} w="20px" h="20px" rounded={'50%'} />
|
||||
<Text>{org.name}</Text>
|
||||
<HStack
|
||||
flex={'1 0 0'}
|
||||
onClick={() => setSelectedOrg(org)}
|
||||
cursor={'pointer'}
|
||||
borderRadius={'xs'}
|
||||
>
|
||||
<Avatar src={org.avatar} w={'1.25rem'} borderRadius={'xs'} />
|
||||
<Box>{org.name}</Box>
|
||||
</HStack>
|
||||
</HStack>
|
||||
{isExpanded &&
|
||||
children.length > 0 &&
|
||||
children.map((child) => (
|
||||
<OrgTreeNode
|
||||
key={child._id}
|
||||
org={child}
|
||||
indent={indent + 1}
|
||||
list={list}
|
||||
selectedOrg={selectedOrg}
|
||||
selectOrg={selectOrg}
|
||||
/>
|
||||
<Box key={child._id} mt={0.5}>
|
||||
<OrgTreeNode
|
||||
org={child}
|
||||
index={index + 1}
|
||||
list={list}
|
||||
selectedOrg={selectedOrg}
|
||||
setSelectedOrg={setSelectedOrg}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function OrgTree({
|
||||
orgs,
|
||||
teamName,
|
||||
teamAvatar,
|
||||
selectedOrg,
|
||||
selectOrg
|
||||
setSelectedOrg
|
||||
}: {
|
||||
orgs: OrgType[];
|
||||
teamAvatar: string;
|
||||
teamName: string;
|
||||
selectedOrg?: OrgType;
|
||||
selectOrg?: (org?: OrgType) => void;
|
||||
setSelectedOrg: (org?: OrgType) => void;
|
||||
}) {
|
||||
const root = orgs[0];
|
||||
if (!root) return null;
|
||||
const children = useMemo(
|
||||
() => orgs.filter((item) => item.path === `${root.path}/${root._id}`),
|
||||
[root, orgs]
|
||||
);
|
||||
if (!root) return;
|
||||
|
||||
return (
|
||||
<VStack alignItems={'start'} gap={'8px'}>
|
||||
<HStack
|
||||
w="full"
|
||||
onClick={() => selectOrg?.(root)}
|
||||
cursor="pointer"
|
||||
_hover={{ bgColor: selectedOrg === root ? 'blue.200' : 'gray.100' }}
|
||||
borderRadius="4px"
|
||||
p="4px"
|
||||
transition={'background 0.1s'}
|
||||
{...(selectedOrg === root ? { bgColor: 'blue.100' } : {})}
|
||||
>
|
||||
<Avatar src={teamAvatar} w="20px" h="20px" rounded={'50%'} />
|
||||
<Text>{teamName}</Text>
|
||||
</HStack>
|
||||
{children.map((child) => (
|
||||
<OrgTreeNode
|
||||
key={child._id}
|
||||
org={child}
|
||||
list={orgs}
|
||||
selectOrg={selectOrg}
|
||||
selectedOrg={selectedOrg}
|
||||
/>
|
||||
))}
|
||||
</VStack>
|
||||
<OrgTreeNode org={root} list={orgs} setSelectedOrg={setSelectedOrg} selectedOrg={selectedOrg} />
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -2,22 +2,18 @@ import { deleteOrg, deleteOrgMember } from '@/web/support/user/team/org/api';
|
||||
import { useUserStore } from '@/web/support/user/useUserStore';
|
||||
import {
|
||||
Box,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
Divider,
|
||||
Flex,
|
||||
HStack,
|
||||
Table,
|
||||
TableContainer,
|
||||
Tag,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tr,
|
||||
VStack,
|
||||
useDisclosure
|
||||
VStack
|
||||
} from '@chakra-ui/react';
|
||||
import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
|
||||
import Avatar from '@fastgpt/web/components/common/Avatar';
|
||||
@@ -27,14 +23,21 @@ import MyMenu from '@fastgpt/web/components/common/MyMenu';
|
||||
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
|
||||
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useContextSelector } from 'use-context-selector';
|
||||
import MemberTag from '../../../../../components/support/user/team/Info/MemberTag';
|
||||
import MemberTag from '@/components/support/user/team/Info/MemberTag';
|
||||
import { TeamContext } from '../context';
|
||||
import { getOrgList } from '@/web/support/user/team/org/api';
|
||||
|
||||
import IconButton from './IconButton';
|
||||
import OrgInfoModal from './OrgInfoModal';
|
||||
import OrgMemberModal from './OrgMemberModal';
|
||||
import OrgInfoModal, { defaultOrgForm, OrgFormType } from './OrgInfoModal';
|
||||
import OrgMemberManageModal from './OrgMemberManageModal';
|
||||
|
||||
import OrgMoveModal from './OrgMoveModal';
|
||||
import dynamic from 'next/dynamic';
|
||||
import MyBox from '@fastgpt/web/components/common/MyBox';
|
||||
import Path from '@/components/common/folder/Path';
|
||||
import { ParentTreePathItemType } from '@fastgpt/global/common/parentFolder/type';
|
||||
|
||||
function ActionButton({
|
||||
icon,
|
||||
@@ -59,118 +62,101 @@ function ActionButton({
|
||||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
<MyIcon name={icon} w="16px" h="16px" p="1" />
|
||||
<Text fontSize={'12px'} lineHeight={'16px'}>
|
||||
{text}
|
||||
</Text>
|
||||
<MyIcon name={icon} w="1rem" h="1rem" />
|
||||
<Box fontSize={'sm'}>{text}</Box>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
|
||||
function MemberTable() {
|
||||
const { t } = useTranslation();
|
||||
const { userInfo } = useUserStore();
|
||||
const { userInfo, isTeamAdmin } = useUserStore();
|
||||
|
||||
const { orgs, refetchOrgs, members, refetchMembers, isLoading } = useContextSelector(
|
||||
TeamContext,
|
||||
(v) => v
|
||||
);
|
||||
const [currentOrg, setCurrentOrg] = useState<OrgType>();
|
||||
const { members } = useContextSelector(TeamContext, (v) => v);
|
||||
|
||||
// Set current org by hash
|
||||
useEffect(() => {
|
||||
const hash = window.location.hash.substring(1);
|
||||
const initialOrg = orgs.find((org) => org._id === hash) || orgs[0];
|
||||
setCurrentOrg(initialOrg);
|
||||
}, [orgs, isLoading]);
|
||||
// Update hash when current org changes
|
||||
useEffect(() => {
|
||||
if (currentOrg) {
|
||||
window.location.hash = currentOrg._id;
|
||||
const [parentPath, setParentPath] = useState('');
|
||||
const {
|
||||
data: orgs = [],
|
||||
loading: isLoadingOrgs,
|
||||
refresh: refetchOrgs
|
||||
} = useRequest2(getOrgList, {
|
||||
manual: false,
|
||||
refreshDeps: [userInfo?.team?.teamId]
|
||||
});
|
||||
const currentOrgs = useMemo(() => {
|
||||
if (orgs.length === 0) return [];
|
||||
if (parentPath === '') {
|
||||
setParentPath(`/${orgs[0]._id}`);
|
||||
return [];
|
||||
}
|
||||
}, [currentOrg]);
|
||||
return orgs
|
||||
.filter((org) => org.path === parentPath)
|
||||
.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
count:
|
||||
item.members.length +
|
||||
orgs.filter((org) => org.path === `${item.path}/${item._id}`).length
|
||||
};
|
||||
});
|
||||
}, [orgs, parentPath]);
|
||||
const currentOrg = useMemo(() => {
|
||||
const splitPath = parentPath.split('/');
|
||||
const currentOrgId = splitPath[splitPath.length - 1];
|
||||
if (!currentOrgId) return;
|
||||
|
||||
const currentPath = useMemo<{ path: string; parents: OrgType[] }>(
|
||||
() => ({
|
||||
path: currentOrg ? `${currentOrg.path}/${currentOrg._id}` : '',
|
||||
parents: currentOrg
|
||||
? currentOrg.path
|
||||
.split('/')
|
||||
.filter(Boolean)
|
||||
.map((orgId) => orgs.find((org) => org._id === orgId)!)
|
||||
: []
|
||||
}),
|
||||
[orgs, currentOrg]
|
||||
);
|
||||
return orgs.find((org) => org._id === currentOrgId);
|
||||
}, [orgs, parentPath]);
|
||||
const paths = useMemo(() => {
|
||||
const splitPath = parentPath.split('/').filter(Boolean);
|
||||
return splitPath
|
||||
.map((id) => {
|
||||
const org = orgs.find((org) => org._id === id)!;
|
||||
|
||||
const orgList = useMemo(
|
||||
() =>
|
||||
orgs
|
||||
.filter((org) => org.path === currentPath.path)
|
||||
.map((org) => {
|
||||
// calc org members count
|
||||
let count = org.members.length;
|
||||
for (const item of orgs.filter((item) =>
|
||||
item.path.startsWith(`${org.path}/${org._id}`)
|
||||
)) {
|
||||
count += item.members.length;
|
||||
}
|
||||
if (org.path === '') return;
|
||||
|
||||
return { ...org, count };
|
||||
}),
|
||||
[orgs, currentPath]
|
||||
);
|
||||
return {
|
||||
parentId: `${org.path}/${org._id}`,
|
||||
parentName: org.name
|
||||
};
|
||||
})
|
||||
.filter(Boolean) as ParentTreePathItemType[];
|
||||
}, [parentPath, orgs]);
|
||||
|
||||
const [editOrg, setEditOrg] = useState<OrgType | undefined>();
|
||||
const [editMemberOrgId, setEditMemberOrgId] = useState<string | undefined>();
|
||||
const [movingOrg, setMovingOrg] = useState<OrgType | undefined>();
|
||||
const [movingTmb, setMovingTmb] = useState<{ tmbId: string; orgId: string } | undefined>();
|
||||
const [createOrgParentId, setCreateOrgParentId] = useState<string | undefined>();
|
||||
const [editOrg, setEditOrg] = useState<OrgFormType>();
|
||||
const [manageMemberOrg, setManageMemberOrg] = useState<OrgType>();
|
||||
const [movingOrg, setMovingOrg] = useState<OrgType>();
|
||||
|
||||
// Delete org
|
||||
const { ConfirmModal: ConfirmDeleteOrgModal, openConfirm: openDeleteOrgModal } = useConfirm({
|
||||
type: 'delete',
|
||||
content: t('account_team:confirm_delete_org')
|
||||
});
|
||||
const deleteOrgHandler = (orgId: string) => openDeleteOrgModal(() => deleteOrgReq(orgId))();
|
||||
const { runAsync: deleteOrgReq } = useRequest2(deleteOrg, {
|
||||
onSuccess: () => {
|
||||
refetchOrgs();
|
||||
}
|
||||
});
|
||||
|
||||
// Delete member
|
||||
const { ConfirmModal: ConfirmDeleteMember, openConfirm: openDeleteMemberModal } = useConfirm({
|
||||
type: 'delete',
|
||||
content: t('account_team:confirm_delete_member')
|
||||
});
|
||||
|
||||
const { runAsync: deleteOrgReq } = useRequest2(deleteOrg, {
|
||||
onSuccess: () => {
|
||||
refetchOrgs();
|
||||
refetchMembers();
|
||||
}
|
||||
});
|
||||
const { runAsync: deleteMemberReq } = useRequest2(deleteOrgMember, {
|
||||
onSuccess: () => {
|
||||
refetchOrgs();
|
||||
refetchMembers();
|
||||
}
|
||||
});
|
||||
|
||||
const deleteOrgHandler = (orgId: string) => openDeleteOrgModal(() => deleteOrgReq(orgId))();
|
||||
const deleteMemberHandler = (orgId: string, tmbId: string) =>
|
||||
openDeleteMemberModal(() => deleteMemberReq(orgId, tmbId))();
|
||||
|
||||
return (
|
||||
<VStack>
|
||||
<Breadcrumb mr={'auto'}>
|
||||
{currentPath.parents.map((parent) => (
|
||||
<BreadcrumbItem key={parent._id}>
|
||||
<BreadcrumbLink onClick={() => setCurrentOrg(parent)}>
|
||||
{parent.path === '' ? userInfo?.team.teamName : parent.name}
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
))}
|
||||
<BreadcrumbItem isCurrentPage>
|
||||
<BreadcrumbLink color="myGray.900" fontWeight={500}>
|
||||
{currentOrg?.path === '' ? userInfo?.team.teamName : currentOrg?.name}
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
<HStack w={'100%'} gap={'16px'} alignItems={'start'}>
|
||||
<MyBox isLoading={isLoadingOrgs}>
|
||||
<Box mb={3}>
|
||||
<Path paths={paths} rootName={userInfo?.team?.teamName} onClick={setParentPath} />
|
||||
</Box>
|
||||
<Flex w={'100%'} gap={'4'}>
|
||||
{/* Table */}
|
||||
<TableContainer overflow={'unset'} fontSize={'sm'} flexGrow={1}>
|
||||
<Table overflow={'unset'}>
|
||||
<Thead>
|
||||
@@ -184,94 +170,86 @@ function MemberTable() {
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{orgList.map((org) => (
|
||||
{currentOrgs.map((org) => (
|
||||
<Tr key={org._id} overflow={'unset'}>
|
||||
<Td>
|
||||
<HStack w="fit-content" cursor={'pointer'} onClick={() => setCurrentOrg(org)}>
|
||||
<HStack
|
||||
cursor={'pointer'}
|
||||
onClick={() => setParentPath(`${org.path}/${org._id}`)}
|
||||
>
|
||||
<MemberTag name={org.name} avatar={org.avatar} />
|
||||
<Tag size="sm">{org.count}</Tag>
|
||||
<MyIcon
|
||||
name="core/chat/chevronRight"
|
||||
w={'12px'}
|
||||
h={'12px'}
|
||||
color={'myGray.400'}
|
||||
w={'1rem'}
|
||||
h={'1rem'}
|
||||
color={'myGray.500'}
|
||||
/>
|
||||
</HStack>
|
||||
</Td>
|
||||
|
||||
<Td w={'6rem'}>
|
||||
<MyMenu
|
||||
trigger="click"
|
||||
Button={
|
||||
<MyIcon name="more" w={'1rem'} cursor={'pointer'} p="1" rounded={'sm'} />
|
||||
}
|
||||
menuList={[
|
||||
{
|
||||
children: [
|
||||
{
|
||||
icon: 'edit',
|
||||
label: t('account_team:edit_info'),
|
||||
onClick: () => setEditOrg(org)
|
||||
},
|
||||
{
|
||||
icon: 'common/file/move',
|
||||
label: t('common:Move'),
|
||||
onClick: () => setMovingOrg(org)
|
||||
},
|
||||
{
|
||||
icon: 'delete',
|
||||
label: t('account_team:delete'),
|
||||
type: 'danger',
|
||||
onClick: () => deleteOrgHandler(org._id)
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
{isTeamAdmin && (
|
||||
<MyMenu
|
||||
trigger="hover"
|
||||
Button={<IconButton name="more" />}
|
||||
menuList={[
|
||||
{
|
||||
children: [
|
||||
{
|
||||
icon: 'edit',
|
||||
label: t('account_team:edit_info'),
|
||||
onClick: () => setEditOrg(org)
|
||||
},
|
||||
{
|
||||
icon: 'common/file/move',
|
||||
label: t('common:Move'),
|
||||
onClick: () => setMovingOrg(org)
|
||||
},
|
||||
{
|
||||
icon: 'delete',
|
||||
label: t('account_team:delete'),
|
||||
type: 'danger',
|
||||
onClick: () => deleteOrgHandler(org._id)
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
{currentOrg?.members.map((member) => {
|
||||
const memberInfo = members.find((m) => m.tmbId === member.tmbId);
|
||||
if (!memberInfo) return null;
|
||||
|
||||
return (
|
||||
<Tr key={member.tmbId} overflow={'unset'}>
|
||||
<Tr key={member.tmbId}>
|
||||
<Td>
|
||||
<MemberTag name={memberInfo.memberName} avatar={memberInfo.avatar} />
|
||||
</Td>
|
||||
<Td w={'6rem'}>
|
||||
<MyMenu
|
||||
trigger={'click'}
|
||||
Button={
|
||||
<MyIcon name="more" w={'1rem'} cursor={'pointer'} p="1" rounded={'sm'} />
|
||||
}
|
||||
menuList={[
|
||||
{
|
||||
children: [
|
||||
// {
|
||||
// icon: 'edit',
|
||||
// label: t('account_team:remark'),
|
||||
// onClick: () => {
|
||||
// // TODO
|
||||
// console.log(member.tmbId);
|
||||
// }
|
||||
// },
|
||||
{
|
||||
icon: 'common/file/move',
|
||||
label: t('common:Move'),
|
||||
onClick: () =>
|
||||
setMovingTmb({ tmbId: member.tmbId, orgId: currentOrg!._id })
|
||||
},
|
||||
{
|
||||
icon: 'delete',
|
||||
label: t('account_team:delete'),
|
||||
type: 'danger',
|
||||
onClick: () => deleteMemberHandler(currentOrg!._id, member.tmbId)
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
{isTeamAdmin && (
|
||||
<MyMenu
|
||||
trigger={'hover'}
|
||||
Button={<IconButton name="more" />}
|
||||
menuList={[
|
||||
{
|
||||
children: [
|
||||
{
|
||||
icon: 'delete',
|
||||
label: t('account_team:delete'),
|
||||
type: 'danger',
|
||||
onClick: () =>
|
||||
openDeleteMemberModal(() =>
|
||||
deleteMemberReq(currentOrg._id, member.tmbId)
|
||||
)()
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
@@ -279,92 +257,87 @@ function MemberTable() {
|
||||
</Tbody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<VStack w={'220px'} alignItems={'start'}>
|
||||
{/* Slider */}
|
||||
<VStack w={'180px'} alignItems={'start'}>
|
||||
<HStack gap={'6px'}>
|
||||
<Avatar
|
||||
src={currentOrg?.path === '' ? userInfo?.team.avatar : currentOrg?.avatar}
|
||||
w={'16px'}
|
||||
h={'16px'}
|
||||
rounded={'20%'}
|
||||
/>
|
||||
<Text fontWeight={500} fontSize={'14px'} color={'myGray.900'} lineHeight={'20px'}>
|
||||
{currentOrg?.path === '' ? userInfo?.team.teamName : currentOrg?.name}
|
||||
</Text>
|
||||
<Avatar src={currentOrg?.avatar} w={'1rem'} h={'1rem'} rounded={'xs'} />
|
||||
<Box fontWeight={500} color={'myGray.900'}>
|
||||
{currentOrg?.name}
|
||||
</Box>
|
||||
{currentOrg?.path !== '' && (
|
||||
<IconButton name="edit" onClick={() => setEditOrg(currentOrg)} />
|
||||
)}
|
||||
</HStack>
|
||||
<Text fontSize={12} lineHeight={'16px'} w={'full'}>
|
||||
{currentOrg?.description ?? t('common:common.no_intro')}
|
||||
</Text>
|
||||
<Box fontSize={'xs'}>{currentOrg?.description || t('common:common.no_intro')}</Box>
|
||||
|
||||
<Divider my={'20px'} />
|
||||
|
||||
<Text fontWeight={500} mb="13px" fontSize="14px" color="myGray.900" lineHeight="20px">
|
||||
<Box fontWeight={500} fontSize="sm" color="myGray.900">
|
||||
{t('common:common.Action')}
|
||||
</Text>
|
||||
<VStack gap="13px" w="100%">
|
||||
<ActionButton
|
||||
icon="common/add2"
|
||||
text={t('account_team:create_sub_org')}
|
||||
onClick={() => {
|
||||
setCreateOrgParentId(currentOrg?._id);
|
||||
}}
|
||||
/>
|
||||
<ActionButton
|
||||
icon="common/administrator"
|
||||
text={t('account_team:manage_member')}
|
||||
onClick={() => setEditMemberOrgId(currentOrg?._id)}
|
||||
/>
|
||||
{currentOrg?.path !== '' && (
|
||||
<>
|
||||
<ActionButton
|
||||
icon="common/file/move"
|
||||
text={t('account_team:move_org')}
|
||||
onClick={() => setMovingOrg(currentOrg)}
|
||||
/>
|
||||
<ActionButton
|
||||
icon="delete"
|
||||
text={t('account_team:delete_org')}
|
||||
onClick={() => deleteOrgHandler(currentOrg?._id ?? '')}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
{currentOrg && isTeamAdmin && (
|
||||
<VStack gap="13px" w="100%">
|
||||
<ActionButton
|
||||
icon="common/add2"
|
||||
text={t('account_team:create_sub_org')}
|
||||
onClick={() => {
|
||||
setEditOrg({
|
||||
...defaultOrgForm,
|
||||
parentId: currentOrg?._id
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{currentOrg?.path !== '' && (
|
||||
<>
|
||||
<ActionButton
|
||||
icon="common/administrator"
|
||||
text={t('account_team:manage_member')}
|
||||
onClick={() => setManageMemberOrg(currentOrg)}
|
||||
/>
|
||||
<ActionButton
|
||||
icon="common/file/move"
|
||||
text={t('account_team:move_org')}
|
||||
onClick={() => setMovingOrg(currentOrg)}
|
||||
/>
|
||||
<ActionButton
|
||||
icon="delete"
|
||||
text={t('account_team:delete_org')}
|
||||
onClick={() => deleteOrgHandler(currentOrg._id)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
)}
|
||||
</VStack>
|
||||
</HStack>
|
||||
<OrgInfoModal
|
||||
editOrg={editOrg}
|
||||
createOrgParentId={createOrgParentId}
|
||||
onClose={() => {
|
||||
setEditOrg(undefined);
|
||||
setCreateOrgParentId(undefined);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
refetchOrgs();
|
||||
refetchMembers();
|
||||
}}
|
||||
/>
|
||||
<OrgMoveModal
|
||||
orgs={orgs}
|
||||
team={userInfo?.team!}
|
||||
movingOrg={movingOrg}
|
||||
movingTmb={movingTmb}
|
||||
onClose={() => {
|
||||
setMovingOrg(undefined);
|
||||
setMovingTmb(undefined);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
refetchOrgs();
|
||||
refetchMembers();
|
||||
}}
|
||||
/>
|
||||
<OrgMemberModal editOrgId={editMemberOrgId} onClose={() => setEditMemberOrgId(undefined)} />
|
||||
</Flex>
|
||||
|
||||
{!!editOrg && (
|
||||
<OrgInfoModal
|
||||
editOrg={editOrg}
|
||||
onClose={() => setEditOrg(undefined)}
|
||||
onSuccess={refetchOrgs}
|
||||
/>
|
||||
)}
|
||||
{!!movingOrg && (
|
||||
<OrgMoveModal
|
||||
orgs={orgs}
|
||||
movingOrg={movingOrg}
|
||||
onClose={() => setMovingOrg(undefined)}
|
||||
onSuccess={refetchOrgs}
|
||||
/>
|
||||
)}
|
||||
{!!manageMemberOrg && (
|
||||
<OrgMemberManageModal
|
||||
currentOrg={manageMemberOrg}
|
||||
refetchOrgs={refetchOrgs}
|
||||
onClose={() => setManageMemberOrg(undefined)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ConfirmDeleteOrgModal />
|
||||
<ConfirmDeleteMember />
|
||||
</VStack>
|
||||
</MyBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default MemberTable;
|
||||
export default dynamic(() => Promise.resolve(MemberTable), { ssr: false });
|
||||
|
||||
Reference in New Issue
Block a user