joseph
/
ManagementSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bổ sung biểu đồ drawio cho trang allocation

This commit is contained in:
Truong Vo 2025-02-21 10:51:27 +07:00
parent a2e36501bb
commit 281c8ad98a
1 changed files with 63 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
FRONTEND/src/pages/Allocation/Allocation.tsx
View File

@ -80,6 +80,31 @@ const Allocation = () => {
const [opened, setOpened] = useState(false) const [opened, setOpened] = useState(false)
const [issDetail, setIssDetail] = useState('') const [issDetail, setIssDetail] = useState('')
const [data, setData] = useState<any>({}) const [data, setData] = useState<any>({})
useEffect(() => {
// Check if iframe already exists
const existingIframe = document.querySelector('#drawio iframe')
if (existingIframe) return
// Add iframe only if it doesn't exist
const iframe = document.createElement('iframe')
iframe.src = import.meta.env.VITE_URL_DRAWIO
iframe.style.width = '100%'
iframe.style.height = '500px'
const drawioDiv = document.getElementById('drawio')
if (drawioDiv) {
drawioDiv.appendChild(iframe)
}
// Cleanup function to remove iframe when component unmounts
return () => {
const iframe = document.querySelector('#drawio iframe')
if (iframe) {
iframe.remove()
}
}
}, [])
const getAll = async () => { const getAll = async () => {
try { try {
const res = await get(getAllUserDoing) const res = await get(getAllUserDoing)
@ -117,6 +142,7 @@ const Allocation = () => {
}, []) }, [])
return ( return (
<div> <div>
<div id="drawio"></div>
<div> <div>
<Box <Box
style={{ style={{
@ -138,12 +164,12 @@ const Allocation = () => {
}} }}
> >
<Box> <Box>
<Text fw={600} fz={'md'}> {/* <Text fw={600} fz={'md'}>
Admin/ Admin/
</Text> </Text>
<Text fw={700} fz={'lg'}> <Text fw={700} fz={'lg'}>
Personnel Allocation Personnel Allocation
</Text> </Text> */}
<Text fw={600} fz={'sm'} c={'gray'} fs={'italic'} ml={'md'}> <Text fw={600} fz={'sm'} c={'gray'} fs={'italic'} ml={'md'}>
"P:" is the timspent/timeestimate number within the project itself "P:" is the timspent/timeestimate number within the project itself
</Text> </Text>
@ -224,27 +250,38 @@ const Allocation = () => {
alignItems: 'center', alignItems: 'center',
}} }}
> >
<Box w='10%'> <Box w="10%">
<IconInnerShadowTopRightFilled <IconInnerShadowTopRightFilled
style={{ color: 'orange' }} style={{ color: 'orange' }}
height={20} height={20}
width={20} width={20}
display={userData.issues?.filter( display={
(iss: Issue) => userData.issues?.filter(
iss.fields.status.name === 'In Progress' && (iss: Issue) =>
((Date.now() - (new Date(iss.changelog?.histories[0]?.created)).getTime()) > 172800000) iss.fields.status.name ===
).length > 0 ? 'block' :'none'} 'In Progress' &&
/> Date.now() -
new Date(
iss.changelog?.histories[0]?.created,
).getTime() >
172800000,
).length > 0
? 'block'
: 'none'
}
/>
</Box> </Box>
<Box display={'flex'}> <Box display={'flex'}>
<Avatar <Avatar
size={'sm'} size={'sm'}
ml={'5px'} ml={'5px'}
src={userData.user.avatarUrls['48x48']} src={
/> userData.user.avatarUrls['48x48']
<Text ml={'md'} fw={600}> }
{user} />
</Text> <Text ml={'md'} fw={600}>
{user}
</Text>
</Box> </Box>
</Box> </Box>
<Box <Box
@ -260,9 +297,12 @@ const Allocation = () => {
}} }}
ml={'md'} ml={'md'}
p="0 20px" p="0 20px"
> >
<Text ml={'md'} fw={700} fz={'sm'}>{`P: `}</Text> <Text
ml={'md'}
fw={700}
fz={'sm'}
>{`P: `}</Text>
<Text fw={700} c="green" fz={'sm'}>{`${ <Text fw={700} c="green" fz={'sm'}>{`${
userData.p_total_spent / 60 / 60 userData.p_total_spent / 60 / 60
}h/`}</Text> }h/`}</Text>