truong-frame-drawio #111
			
				
			
		
		
		
	| 
						 | 
				
			
			@ -80,6 +80,31 @@ const Allocation = () => {
 | 
			
		|||
  const [opened, setOpened] = useState(false)
 | 
			
		||||
  const [issDetail, setIssDetail] = useState('')
 | 
			
		||||
  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 () => {
 | 
			
		||||
    try {
 | 
			
		||||
      const res = await get(getAllUserDoing)
 | 
			
		||||
| 
						 | 
				
			
			@ -117,6 +142,7 @@ const Allocation = () => {
 | 
			
		|||
  }, [])
 | 
			
		||||
  return (
 | 
			
		||||
    <div>
 | 
			
		||||
      <div id="drawio"></div>
 | 
			
		||||
      <div>
 | 
			
		||||
        <Box
 | 
			
		||||
          style={{
 | 
			
		||||
| 
						 | 
				
			
			@ -138,12 +164,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 +250,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 +297,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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue