Merge pull request 'truong-frame-drawio' (#111) from truong-frame-drawio into dev
Reviewed-on: #111
This commit is contained in:
commit
35ecaa802d
|
|
@ -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"
|
||||||
|
|
@ -10,6 +10,7 @@ import {
|
||||||
Popover,
|
Popover,
|
||||||
Text,
|
Text,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
|
Switch,
|
||||||
} from '@mantine/core'
|
} from '@mantine/core'
|
||||||
import { IconInnerShadowTopRightFilled } from '@tabler/icons-react'
|
import { IconInnerShadowTopRightFilled } from '@tabler/icons-react'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
|
|
@ -80,6 +81,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>({})
|
||||||
|
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 () => {
|
const getAll = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await get(getAllUserDoing)
|
const res = await get(getAllUserDoing)
|
||||||
|
|
@ -117,6 +143,14 @@ const Allocation = () => {
|
||||||
}, [])
|
}, [])
|
||||||
return (
|
return (
|
||||||
<div>
|
<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>
|
<div>
|
||||||
<Box
|
<Box
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -138,12 +172,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 +258,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 +305,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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue