BE, FE Document #113
			
				
			
		
		
		
	| 
						 | 
				
			
			@ -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,
 | 
			
		||||
  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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue