components.layout.dashboard.DashboardSidebar.js Maven / Gradle / Ivy

Go to download
import { useQuery } from '@apollo/client';
import {
  Box, IconButton, ListItemButton, ListItemText, Menu,
  Slide, Typography
} from '@mui/material';
import { useConfig, useDashboardMenuItems } from 'hooks/config';
import { GET_COUNTS } from 'queries/task';
import { useEffect, useRef, useState } from 'react';
import Settings from 'helpers/settings';
import { env, useDebouncedState } from 'utils/utils';
import SidebarContextProvider from 'contexts/SidebarContext';
import { useSidebarItemSX } from 'hooks/sidebar';
import { useLayoutContext } from 'hooks/layout';
import { useCurrentUser } from 'authentication/main';
import { AccountMenuItems } from 'components/layout/dashboard/DashboardMenu';
import UserSettingsProvider from 'contexts/UserSettings';
import { SidebarIcon, SidebarList } from 'components/layout/sidebar/SidebarList';
import useClickAway from 'hooks/clickaway';
import {
  TextField,
  InputAdornment,
  SvgIcon,
} from '@mui/material';
import { getEventValue } from 'components/form/utils/validate-utils';
import { useTranslation } from 'react-i18next';
import { Search as SearchIcon } from '@mui/icons-material';
import ClearIcon from '@mui/icons-material/Clear';
import { toRegex } from 'utils/option-utils';
import { useGearsIconInfo } from 'components/process/GearsIcon';


const badge_interval = env('BADGE_REFRESH_INTERVAL')

export const DashboardSidebarItems = () => {
  const countResult                               = useQuery(GET_COUNTS)
  let   counts                                    = getCounts(countResult)
  const [filter, setFilter, setCurrentFilter]     = useDebouncedState('', 500)
  const { sidebarState, props: {transitionTime} } = useLayoutContext()
  const filteredMenu                              = useConfigMenu(filter)

  useEffect(() => {
    setCurrentFilter("")
  }, [sidebarState.expandState])

  if (countResult.loading) {
    counts = Settings.session.read('drawer.badges', counts)
  } else {
    Settings.session.write('drawer.badges', counts)
  }

  useEffect(() => {
    countResult.startPolling(badge_interval)
    console.log("Updating badges with interval: %o", badge_interval)
    return () => { countResult.stopPolling() }
  }, [countResult.startPolling, countResult.stopPolling])

  const getTransition = () => {
    if (sidebarState.expandState == "expanded")
      return `height ${transitionTime} ease, opacity ${transitionTime} ${transitionTime} ease`
    else
      return `height ${transitionTime} ${transitionTime} ease, opacity ${transitionTime} ease`
  }

  return (
    
      
        
          
        
      
      
        
      
    
  )
}

const useConfigMenu = (filter) => {
  const menu         = useDashboardMenuItems()
  const filteredMenu = filterMenu(menu, filter)

  return filteredMenu
}

export const isSidebarMatchFunction = (filter) => {
  const regex   = toRegex(filter)
  const check   = (value) => regex.test(value)
  const isMatch = (item) => !!check(item.label)

  return isMatch
}

function filterMenu(menu, filter) {
  const isMatch = isSidebarMatchFunction(filter)
  const hasChildren = (item) => Array.isArray(item?.children)

  const applyFilter = (menu) => {
    return menu.map(item => {
      if (hasChildren(item) && item.children.length > 0) {
        if (isMatch(item))
          return item
        else
          return { ...item, children: applyFilter(item.children) }
      }
      else
        return item
    })
    .filter(item => isMatch(item) || (hasChildren(item) && item.children.length > 0))
  }

  if (filter && Array.isArray(menu))
    return applyFilter(menu)
  else 
    return menu
}

const SidebarFilter = ({value: filter, setValue: setFilter, setCurrentValue: setCurrentFilter }) => {
  const { t } = useTranslation()
  const [value, setValue] = useState(filter)
  const placeholder=t('filter.search', { item: t('filter.menu') })

  useEffect(() => {
    setValue(filter) 
  }, [filter])

  const handleChange = (event) => {
    const input = getEventValue(event)
    setValue(input)
    setFilter(input)
  }

  const handleKeyDown = (e) => {
    switch (e.key) {
      case "Enter": // enter completion
        e.preventDefault();
        setCurrentFilter(value)
        break;

      default:
    }
  };
  
  const handleClear = (e) => {
    setValue("")
    setCurrentFilter("")
  }

  const EndAdornment = () => {
    const disabled = !value
    return (
      
        
          
            
          
        
      
    )
  }


  return (
    
            
              
            
          
        ),
        endAdornment: 
      }}
      placeholder={placeholder}
      variant="standard"
      onChange={handleChange}
      value={value}
    />
  )
}

const SidebarSettingMenu = ({anchorEl, setAnchorEl}) => {
  const handleClose = (e) => { 
    e.stopPropagation()
    e.preventDefault()
    setAnchorEl(null) 
  }

  const ref = useClickAway(handleClose)
  const { sidebarState} = useLayoutContext()

  return (
    
      
        
          
        
      
    
  )
}

export const DashboardSidebarFooter = () => {
  const { user }  = useCurrentUser()
  const ref       = useRef()

  const iconName = !user ? "NoAccounts" : user.isAdmin ? "AdminPanelSettings" : "AccountCircle"
  const item = {
    label: "Account",
    key: "settings",
    type: "item",
    icon: iconName,
    activeIcon: iconName
  }
 
  const { itemSx, textSx } = useSidebarItemSX(item)
  const { bannerState, sidebarState } = useLayoutContext()
  const [anchorEl, setAnchorEl] = useState(null);

  const onClick = (e) => {
    e.preventDefault()
    e.stopPropagation()

    setAnchorEl(ref.current)
  }

  return (
    
       {onClick(e);}} 
        sx={{...itemSx, paddingRight: "45px", width: "100%"}} 
        ref={ref}
      >
          
        
        
              {item.label}
            
          } 
        />
      
      
  )
}

const Watermark = () => {
  const { project } = useConfig()

  return (
    
      
      
      
        {project}
      
      
    
  )
}

function getCounts(result) {
  return {
    messagesBadge : getBadge(result, "myMessagesCount"),
    processBadge  : getBadge(result, "myActiveProcessInstancesCount"),
    allBadge      : getBadge(result, "allTasksCount"),
    assignedBadge : getBadge(result, "assignedTasksCount"),
    groupBadge    : getBadge(result, "groupTasksCount")
  }
}

function getBadge(result, name) {
  const count = result?.data ? result.data[name] : 0
  const badge = count >= 0 ? count : 0
  return badge
}