Merge pull request 'truong-frame-drawio' (#111) from truong-frame-drawio into dev

Reviewed-on: #111
This commit is contained in:
joseph 2025-02-21 19:23:35 +11:00
commit 35ecaa802d
2 changed files with 74 additions and 24 deletions

View File

@ -1 +1,3 @@
VITE_BACKEND_URL=http://localhost:8000/
VITE_BACKEND_URL=http://localhost:8000/
VITE_URL_DRAWIO="https://viewer.diagrams.net/?tags=%7B%7D&lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=Test%20Draw.drawio&dark=auto#Uhttps%3A%2F%2Fdrive.google.com%2Fuc%3Fid%3D1LmB9wCac9DonQPFU-53g1nhI9SfvWuWK%26export%3Ddownload"

View File

@ -10,6 +10,7 @@ import {
Popover,
Text,
Tooltip,
Switch,
} from '@mantine/core'
import { IconInnerShadowTopRightFilled } from '@tabler/icons-react'
import { useEffect, useState } from 'react'
@ -80,6 +81,31 @@ const Allocation = () => {
const [opened, setOpened] = useState(false)
const [issDetail, setIssDetail] = useState('')
const [data, setData] = useState<any>({})
const [showDrawio, setShowDrawio] = useState(true)
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)
}
return () => {
const iframe = document.querySelector('#drawio iframe')
if (iframe) {
iframe.remove()
}
}
}, [])
const getAll = async () => {
try {
const res = await get(getAllUserDoing)
@ -117,6 +143,14 @@ const Allocation = () => {
}, [])
return (
<div>
<Box style={{ display: 'flex', alignItems: 'center', margin: '10px' }}>
<Switch
label="Show Diagram"
checked={showDrawio}
onChange={(event) => setShowDrawio(event.currentTarget.checked)}
/>
</Box>
<div id="drawio" style={{ display: showDrawio ? 'block' : 'none' }}></div>
<div>
<Box
style={{
@ -138,12 +172,12 @@ const Allocation = () => {
}}
>
<Box>
<Text fw={600} fz={'md'}>
{/* <Text fw={600} fz={'md'}>
Admin/
</Text>
<Text fw={700} fz={'lg'}>
Personnel Allocation
</Text>
</Text> */}
<Text fw={600} fz={'sm'} c={'gray'} fs={'italic'} ml={'md'}>
"P:" is the timspent/timeestimate number within the project itself
</Text>
@ -224,27 +258,38 @@ const Allocation = () => {
alignItems: 'center',
}}
>
<Box w='10%'>
<IconInnerShadowTopRightFilled
style={{ color: 'orange' }}
height={20}
width={20}
display={userData.issues?.filter(
(iss: Issue) =>
iss.fields.status.name === 'In Progress' &&
((Date.now() - (new Date(iss.changelog?.histories[0]?.created)).getTime()) > 172800000)
).length > 0 ? 'block' :'none'}
/>
<Box w="10%">
<IconInnerShadowTopRightFilled
style={{ color: 'orange' }}
height={20}
width={20}
display={
userData.issues?.filter(
(iss: Issue) =>
iss.fields.status.name ===
'In Progress' &&
Date.now() -
new Date(
iss.changelog?.histories[0]?.created,
).getTime() >
172800000,
).length > 0
? 'block'
: 'none'
}
/>
</Box>
<Box display={'flex'}>
<Avatar
size={'sm'}
ml={'5px'}
src={userData.user.avatarUrls['48x48']}
/>
<Text ml={'md'} fw={600}>
{user}
</Text>
<Avatar
size={'sm'}
ml={'5px'}
src={
userData.user.avatarUrls['48x48']
}
/>
<Text ml={'md'} fw={600}>
{user}
</Text>
</Box>
</Box>
<Box
@ -260,9 +305,12 @@ const Allocation = () => {
}}
ml={'md'}
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'}>{`${
userData.p_total_spent / 60 / 60
}h/`}</Text>