File size: 1,927 Bytes
17d873a
 
 
 
 
 
d80b399
17d873a
 
 
d80b399
17d873a
 
 
 
d80b399
657bc8a
598945f
17d873a
 
 
 
 
 
 
 
d80b399
 
 
 
 
88e5a61
17d873a
88e5a61
17d873a
 
 
a5bdd87
d80b399
 
17d873a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d80b399
 
657bc8a
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import {
  useFetchUserInfo,
  useListTenantUser,
} from '@/hooks/user-setting-hooks';
import { Button, Card, Flex, Space } from 'antd';
import { useTranslation } from 'react-i18next';

import { TeamOutlined, UserAddOutlined, UserOutlined } from '@ant-design/icons';
import AddingUserModal from './add-user-modal';
import { useAddUser } from './hooks';
import styles from './index.less';
import TenantTable from './tenant-table';
import UserTable from './user-table';

const iconStyle = { fontSize: 20, color: '#1677ff' };

const UserSettingTeam = () => {
  const { data: userInfo } = useFetchUserInfo();
  const { t } = useTranslation();
  useListTenantUser();
  const {
    addingTenantModalVisible,
    hideAddingTenantModal,
    showAddingTenantModal,
    handleAddUserOk,
  } = useAddUser();

  return (
    <div className={styles.teamWrapper}>
      <Card className={styles.teamCard}>
        <Flex align="center" justify={'space-between'}>
          <span>
            {userInfo.nickname} {t('setting.workspace')}
          </span>
          <Button type="primary" onClick={showAddingTenantModal}>
            <UserAddOutlined />
            {t('setting.invite')}
          </Button>
        </Flex>
      </Card>
      <Card
        title={
          <Space>
            <UserOutlined style={iconStyle} /> {t('setting.teamMembers')}
          </Space>
        }
        bordered={false}
      >
        <UserTable></UserTable>
      </Card>
      <Card
        title={
          <Space>
            <TeamOutlined style={iconStyle} /> {t('setting.joinedTeams')}
          </Space>
        }
        bordered={false}
      >
        <TenantTable></TenantTable>
      </Card>
      {addingTenantModalVisible && (
        <AddingUserModal
          visible
          hideModal={hideAddingTenantModal}
          onOk={handleAddUserOk}
        ></AddingUserModal>
      )}
    </div>
  );
};

export default UserSettingTeam;