Ryan/docmost-ryan
1
0
Fork 0
mirror of https://github.com/Shadowfita/docmost.git synced 2025-11-24 05:31:19 +10:00
Code Issues Packages Projects Releases Wiki Activity

Add avatar and status to table

Browse Source
This commit is contained in:
Philipinho
2023-09-26 13:06:35 +01:00
parent 3a53a7ea30
commit bea107d8a6
1 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/features/settings/workspace/members/components/workspace-members-table.tsx
View File

@ -4,7 +4,7 @@ import { useAtom } from 'jotai';
import { currentUserAtom } from '@/features/user/atoms/current-user-atom'; import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { getWorkspaceUsers } from '@/features/workspace/services/workspace-service'; import { getWorkspaceUsers } from '@/features/workspace/services/workspace-service';
import { Table } from '@mantine/core'; import { Group, Table, Avatar, Text, Badge } from '@mantine/core';
export default function WorkspaceMembersTable() { export default function WorkspaceMembersTable() {
const [currentUser] = useAtom(currentUserAtom); const [currentUser] = useAtom(currentUserAtom);
@ -22,11 +22,11 @@ export default function WorkspaceMembersTable() {
<> <>
{isSuccess && {isSuccess &&
<Table> <Table verticalSpacing="sm">
<Table.Thead> <Table.Thead>
<Table.Tr> <Table.Tr>
<Table.Th>Name</Table.Th> <Table.Th>Name</Table.Th>
<Table.Th>Email</Table.Th> <Table.Th>Status</Table.Th>
<Table.Th>Role</Table.Th> <Table.Th>Role</Table.Th>
</Table.Tr> </Table.Tr>
</Table.Thead> </Table.Thead>
@ -36,8 +36,27 @@ export default function WorkspaceMembersTable() {
{ {
data['users']?.map((user, index) => ( data['users']?.map((user, index) => (
<Table.Tr key={index}> <Table.Tr key={index}>
<Table.Td>{user.name}</Table.Td>
<Table.Td>{user.email}</Table.Td> <Table.Td>
<Group gap="sm">
<Avatar size={40} src={user.name} radius={40} />
<div>
<Text fz="sm" fw={500}>
{user.name}
</Text>
<Text fz="xs" c="dimmed">
{user.email}
</Text>
</div>
</Group>
</Table.Td>
<Table.Td>
<Badge variant="light">
Active
</Badge>
</Table.Td>
<Table.Td>{user.workspaceRole}</Table.Td> <Table.Td>{user.workspaceRole}</Table.Td>
</Table.Tr> </Table.Tr>
)) ))