react_ui: ユーザの属性をバッジとして表示

Changes

1 changed files (+19/-3)

• packages/react_ui/src/pages/users/page.tsx
  • @@ -5,6 +5,7 @@ import "../../polyfill.ts";
    import { createClient } from "@connectrpc/connect"; import { + Badge, Button, Container, DropdownMenu,
  • @@ -134,10 +135,13 @@ />
    )} <Flex direction="column" gap="4" role="list"> {users.data.map((user, i) => { + const isLoginUser = loginUser.id?.value === user.id?.value; + const deletable = - user.id?.value === loginUser.id?.value || user.isAdmin + !isLoginUser && + (user.isAdmin ? loginUser.isAdmin - : !!loginUser.permissions?.canDeleteRegularUser; + : !!loginUser.permissions?.canDeleteRegularUser); return ( <Fragment key={user.id?.value}>
  • @@ -145,7 +149,19 @@ {i > 0 && <Separator size="4" />}
    <DeleteDialog.Root> <DropdownMenu.Root> <Flex gap="2" align="center" justify="between" role="listitem"> - <Text weight="bold">{user.displayName}</Text> + <Flex direction="column" gap="1"> + <Text weight="bold">{user.displayName}</Text> + <Flex + gap="1" + align="center" + wrap="wrap" + justify="start" + role="list" + > + {user.isAdmin && <Badge color="red">管理者</Badge>} + {isLoginUser && <Badge color="blue">ログイン中</Badge>} + </Flex> + </Flex> <DropdownMenu.Trigger disabled={users.isFetching}> <Button variant="soft"> 操作