Skip to content

Commit

Permalink
Enhance nodes UI to display useful information at a glance (#93)
Browse files Browse the repository at this point in the history 
* Enhance ui for freelancer, member and root nodes

* Add label on sequential node handle to show if interrupt is enabled

* Change edit member button color to same as connnection line. Make interrupt text smaller but bold
  • Loading branch information
@StreetLamb
StreetLamb authored Aug 1, 2024
1 parent e1e2125 commit d583f23
Show file tree
Hide file tree
Showing 3 changed files with 169 additions and 77 deletions.
93 changes: 69 additions & 24 deletions frontend/src/components/ReactFlow/Nodes/FreelancerNode.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import {
Box,
Icon,
IconButton,
Stack,
useColorModeValue,
useDisclosure,
Text,
Grid,
GridItem,
Tag,
} from "@chakra-ui/react"
import type { NodeProps } from "reactflow"
import { Position } from "reactflow"
import { EditMember } from "../../Members/EditMember"
import type { MemberOut } from "../../../client"
import { FiEdit2 } from "react-icons/fi"
import { GrUserWorker } from "react-icons/gr"
import LimitConnectionHandle from "../Handles/LimitConnectionHandle"

export type FreelancerNodeData = {
Expand All @@ -25,32 +24,64 @@ export function FreelancerNode({ data }: NodeProps<FreelancerNodeData>) {
const bgColor = useColorModeValue("gray.50", "ui.darkSlate")

return (
<Box w="15rem" p={2} boxShadow="base" borderRadius="lg" bgColor={bgColor}>
<Stack direction="row" spacing={2} align="center" w="full">
<Icon as={GrUserWorker} boxSize={5} color="gray.400" />
<Stack spacing={0} w="70%">
<Text fontWeight="bold" noOfLines={1}>
{data.member.name}
</Text>
<Text fontSize="x-small" noOfLines={2}>
{data.member.role}
</Text>
</Stack>
<Grid
w="15rem"
templateColumns={"repeat(6,1fr)"}
templateRows={"repeat(auto-fill, 0.5fr)"}
p={1.5}
boxShadow="base"
borderRadius="lg"
bgColor={bgColor}
gap={1}
>
<GridItem colSpan={5}>
<Text fontWeight={"bold"} noOfLines={1}>
{data.member.name}
</Text>
</GridItem>
<GridItem colStart={6} justifySelf={"end"}>
<IconButton
color="#009688"
size="xs"
fontSize={"xx-small"}
aria-label="Edit Member"
icon={<FiEdit2 />}
onClick={editMemberModal.onOpen}
variant="outline"
colorScheme="blue"
/>
</Stack>
<EditMember
isOpen={editMemberModal.isOpen}
onClose={editMemberModal.onClose}
teamId={data.teamId}
member={data.member}
/>
<EditMember
isOpen={editMemberModal.isOpen}
onClose={editMemberModal.onClose}
teamId={data.teamId}
member={data.member}
/>
</GridItem>
<GridItem colSpan={6}>
<Text fontSize="xx-small" noOfLines={2}>
{data.member.role}
</Text>
</GridItem>
<GridItem colSpan={6} maxW={"full"}>
<Tag size="sm" colorScheme="blue" mt="0.2rem" mb={0}>
<Text fontSize="xx-small" noOfLines={1}>
{data.member.model}
</Text>
</Tag>
</GridItem>
<GridItem colSpan={6} maxW={"full"} noOfLines={1}>
{data.member.skills.map((skill, index) => (
<Tag
key={index}
size="sm"
fontSize="xx-small"
colorScheme="purple"
mr={0.5}
>
{skill.name}
</Tag>
))}
</GridItem>
{data.member.type !== "freelancer_root" && (
<LimitConnectionHandle
type="target"
Expand All @@ -62,7 +93,21 @@ export function FreelancerNode({ data }: NodeProps<FreelancerNodeData>) {
type="source"
position={Position.Bottom}
connectionLimit={1}
/>
</Box>
>
{data.member.interrupt && (
<Text
fontSize="xx-small"
fontWeight={"bold"}
color="orange"
position={"absolute"}
left="3"
top="1"
width="10rem"
>
Approval Required
</Text>
)}
</LimitConnectionHandle>
</Grid>
)
}
89 changes: 59 additions & 30 deletions frontend/src/components/ReactFlow/Nodes/MemberNode.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import {
Box,
Icon,
IconButton,
Stack,
useColorModeValue,
useDisclosure,
Text,
Grid,
Tag,
GridItem,
} from "@chakra-ui/react"
import type { NodeProps } from "reactflow"
import { Handle, Position } from "reactflow"
import { EditMember } from "../../Members/EditMember"
import type { MemberOut } from "../../../client"
import { FiEdit2 } from "react-icons/fi"
import { GrUserManager, GrUserWorker } from "react-icons/gr"
import LimitConnectionHandle from "../Handles/LimitConnectionHandle"

export type MemberNodeData = {
Expand All @@ -24,45 +23,75 @@ export function MemberNode({ data }: NodeProps<MemberNodeData>) {
const editMemberModal = useDisclosure()
const bgColor = useColorModeValue("gray.50", "ui.darkSlate")

const isLeader = data.member.type === "leader"

return (
<Box w="15rem" p={2} boxShadow="base" borderRadius="lg" bgColor={bgColor}>
<Stack direction="row" spacing={2} align="center" w="full">
{data.member.type === "worker" ? (
<Icon as={GrUserWorker} boxSize={5} color="gray.400" />
) : (
<Icon as={GrUserManager} boxSize={5} color="gray.400" />
)}
<Stack spacing={0} w="70%">
<Text fontWeight={"bold"} noOfLines={1}>
{data.member.name}
</Text>
<Text fontSize={"x-small"} noOfLines={2}>
{data.member.role}
</Text>
</Stack>
<Grid
w="15rem"
templateColumns={"repeat(6,1fr)"}
templateRows={"repeat(auto-fill, 0.5fr)"}
p={1.5}
boxShadow="base"
borderRadius="lg"
bgColor={bgColor}
gap={1}
>
<GridItem colSpan={5}>
<Text fontWeight={"bold"} noOfLines={1}>
{data.member.name}
</Text>
</GridItem>
<GridItem colStart={6} justifySelf={"end"}>
<IconButton
color="#009688"
size="xs"
fontSize={"xx-small"}
aria-label="Edit Member"
icon={<FiEdit2 />}
onClick={editMemberModal.onOpen}
variant="outline"
colorScheme="blue"
/>
</Stack>
<EditMember
isOpen={editMemberModal.isOpen}
onClose={editMemberModal.onClose}
teamId={data.teamId}
member={data.member}
/>
<EditMember
isOpen={editMemberModal.isOpen}
onClose={editMemberModal.onClose}
teamId={data.teamId}
member={data.member}
/>
</GridItem>
<GridItem colSpan={6}>
<Text fontSize="xx-small" noOfLines={2}>
{data.member.role}
</Text>
</GridItem>
<GridItem colSpan={6} maxW={"full"}>
<Tag size="sm" colorScheme="blue" mt="0.2rem" mb={0}>
<Text fontSize="xx-small" noOfLines={1}>
{data.member.model}
</Text>
</Tag>
</GridItem>
{!isLeader && (
<GridItem colSpan={6} maxW={"full"} noOfLines={1}>
{data.member.skills.map((skill, index) => (
<Tag
key={index}
size="sm"
fontSize="xx-small"
colorScheme="purple"
mr={0.5}
>
{skill.name}
</Tag>
))}
</GridItem>
)}
<LimitConnectionHandle
type="target"
position={Position.Top}
connectionLimit={1}
/>
{data.member.type === "leader" && (
<Handle type="source" position={Position.Bottom} />
)}
</Box>
{isLeader && <Handle type="source" position={Position.Bottom} />}
</Grid>
)
}
64 changes: 41 additions & 23 deletions frontend/src/components/ReactFlow/Nodes/RootNode.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import {
Box,
Icon,
IconButton,
Stack,
useColorModeValue,
useDisclosure,
Text,
Grid,
GridItem,
Tag,
} from "@chakra-ui/react"
import type { NodeProps } from "reactflow"
import { Handle, Position } from "reactflow"
import { EditMember } from "../../Members/EditMember"
import type { MemberOut } from "../../../client"
import { FiEdit2 } from "react-icons/fi"
import { GrUserManager } from "react-icons/gr"

export type RootNodeData = {
teamId: number
Expand All @@ -24,33 +23,52 @@ export function RootNode({ data }: NodeProps<RootNodeData>) {
const bgColor = useColorModeValue("gray.50", "ui.darkSlate")

return (
<Box w="15rem" p={2} boxShadow="base" borderRadius="lg" bgColor={bgColor}>
<Stack direction="row" spacing={2} align="center" w="full">
<Icon as={GrUserManager} boxSize={5} color="gray.400" />
<Stack spacing={0} w="70%">
<Text fontWeight="bold" noOfLines={1}>
{data.member.name}
</Text>
<Text fontSize="x-small" noOfLines={2}>
{data.member.role}
</Text>
</Stack>
<Grid
w="15rem"
templateColumns={"repeat(6,1fr)"}
templateRows={"repeat(auto-fill, 0.5fr)"}
p={1.5}
boxShadow="base"
borderRadius="lg"
bgColor={bgColor}
gap={1}
>
<GridItem colSpan={5}>
<Text fontWeight={"bold"} noOfLines={1}>
{data.member.name}
</Text>
</GridItem>
<GridItem colStart={6} justifySelf={"end"}>
<IconButton
color="#009688"
size="xs"
fontSize={"xx-small"}
aria-label="Edit Member"
icon={<FiEdit2 />}
onClick={editMemberModal.onOpen}
variant="outline"
colorScheme="blue"
/>
</Stack>
<EditMember
isOpen={editMemberModal.isOpen}
onClose={editMemberModal.onClose}
teamId={data.teamId}
member={data.member}
/>
<EditMember
isOpen={editMemberModal.isOpen}
onClose={editMemberModal.onClose}
teamId={data.teamId}
member={data.member}
/>
</GridItem>
<GridItem colSpan={6}>
<Text fontSize="xx-small" noOfLines={2}>
{data.member.role}
</Text>
</GridItem>
<GridItem colSpan={6} maxW={"full"}>
<Tag size="sm" colorScheme="blue" mt="0.2rem" mb={0}>
<Text fontSize="xx-small" noOfLines={1}>
{data.member.model}
</Text>
</Tag>
</GridItem>
<Handle type="source" position={Position.Bottom} />
</Box>
</Grid>
)
}

0 comments on commit d583f23

Please sign in to comment.