Merge pull request #512 from knowit/Orgstruktur_search_for_employees

Orgstruktur search for employees
knowit · Jun 30, 2023 · 233f593 · 233f593
2 parents 6630cb4 + e0c663f
commit 233f593
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 3 deletions.
diff --git a/apps/web/src/components/SearchInput.tsx b/apps/web/src/components/SearchInput.tsx
@@ -12,6 +12,7 @@ const InputBaseStyled = styled(InputBase)(({ theme }) => ({
   paddingLeft: 15,
   paddingRight: 15,
   fontSize: 16,
+  border: `1px solid ${theme.palette.background.darker}`,
 }))
 const SearchIconStyled = styled(SearchIcon)(() => ({
   borderRadius: 0,

diff --git a/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx b/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx
@@ -5,9 +5,10 @@ import { useTheme } from '@mui/material'
 
 interface Props {
   link: Link
+  searchTerm: string
 }
 
-const LinkElement = ({ link }: Props) => {
+const LinkElement = ({ link, searchTerm }: Props) => {
   const theme = useTheme()
   const halo = theme.palette.background.paper // Stroke around the labels in case they overlap with a link
   const haloWidth = 0.2
@@ -25,6 +26,15 @@ const LinkElement = ({ link }: Props) => {
           strokeWidth={haloWidth}
           paintOrder="stroke"
           fill={theme.palette.text.primary}
+          opacity={
+            searchTerm.length < 0
+              ? 1
+              : link.target.data.employee.name
+                  .toLowerCase()
+                  .includes(searchTerm)
+              ? 1
+              : 0.3
+          }
         >
           <textPath
             xlinkHref={'#' + link.target.data.employee.email}

diff --git a/apps/web/src/pages/organizationStructure/Components/Links/Links.tsx b/apps/web/src/pages/organizationStructure/Components/Links/Links.tsx
@@ -9,9 +9,10 @@ interface Props {
   links: Link[]
   clickedParents: any
   rotateValue: number
+  searchTerm: string
 }
 
-const Links = ({ links, clickedParents, rotateValue }: Props) => {
+const Links = ({ links, clickedParents, rotateValue, searchTerm }: Props) => {
   const LinksCount = 360 / links.length
 
   links.forEach((d: Link, i: number) => {
@@ -77,7 +78,7 @@ const Links = ({ links, clickedParents, rotateValue }: Props) => {
   return (
     <g>
       {links.map((link, i) => (
-        <LinkElement link={link} key={i} />
+        <LinkElement link={link} key={i} searchTerm={searchTerm} />
       ))}
     </g>
   )

diff --git a/apps/web/src/pages/organizationStructure/Components/Nodes/EmployeeTreeNode.tsx b/apps/web/src/pages/organizationStructure/Components/Nodes/EmployeeTreeNode.tsx
@@ -13,13 +13,15 @@ interface Props {
   rotateValue: number
   degree: number
   clickedParents: string[]
+  searchTerm: string
 }
 
 const EmployeeTreeNode = ({
   node,
   rotateValue,
   degree,
   clickedParents,
+  searchTerm,
 }: Props) => {
   const theme = useTheme()
   const halo = theme.palette.background.paper
@@ -55,6 +57,13 @@ const EmployeeTreeNode = ({
             stroke={halo}
             fill={theme.palette.text.primary}
             strokeWidth={haloWidth}
+            opacity={
+              searchTerm.length < 0
+                ? 1
+                : node.data.employee.name.toLowerCase().includes(searchTerm)
+                ? 1
+                : 0.3
+            }
           >
             {node.data.employee.name}
           </text>

diff --git a/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx b/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx
@@ -17,6 +17,7 @@ interface Props {
   showChildren: (node: Node) => void
   degree: number
   rotateValue: number
+  searchTerm: string
 }
 
 const StyledNode = styled('circle', {
@@ -42,6 +43,7 @@ const LeaderTreeNode = ({
   clickedParents,
   degree,
   rotateValue,
+  searchTerm,
 }: Props) => {
   const theme = useTheme()
   const halo = theme.palette.background.paper
@@ -79,6 +81,13 @@ const LeaderTreeNode = ({
           stroke={halo}
           fill={theme.palette.text.primary}
           strokeWidth={haloWidth}
+          opacity={
+            searchTerm.length < 0
+              ? 1
+              : node.data.employee.name.toLowerCase().includes(searchTerm)
+              ? 1
+              : 0.3
+          }
         >
           {node.data.employee.name}
         </text>

diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx
@@ -9,6 +9,12 @@ import Rotating from './Rotating'
 import LeadersOverview from '../LeadersOverview'
 import EmployeeTreeNode from './Nodes/EmployeeTreeNode'
 import { spliceArray } from '../util'
+import SearchInput from '../../../components/SearchInput'
+import { styled } from '@mui/material/styles'
+
+const SearchFieldStyled = styled('div')(() => ({
+  marginBottom: '5px',
+}))
 
 interface Props {
   data: EmployeeNode
@@ -32,6 +38,7 @@ const OrganizationStructureTree = ({
     x: 0,
     y: 0,
   })
+  const [searchTerm, setSearchTerm] = useState('')
   const svgRef = useRef<SVGSVGElement>(null)
   const groupRef = useRef<SVGGElement>(null)
   const root = hierarchy(data)
@@ -86,6 +93,15 @@ const OrganizationStructureTree = ({
   return (
     <>
       <div>
+        <SearchFieldStyled>
+          <SearchInput
+            placeholder={'Søk i ansatte'}
+            onSearch={(searchTerm) => {
+              setSearchTerm(searchTerm.toLowerCase())
+            }}
+            onClear={() => setSearchTerm('')}
+          />
+        </SearchFieldStyled>
         <Rotating
           groupRef={groupRef}
           zoomTransformValue={zoomTransformValue}
@@ -111,6 +127,7 @@ const OrganizationStructureTree = ({
             links={linksSorted}
             clickedParents={clickedParents}
             rotateValue={rotateValue}
+            searchTerm={searchTerm}
           />
           <g>
             {descendantsWithoutChildrenSorted.map((node, i) => {
@@ -121,6 +138,7 @@ const OrganizationStructureTree = ({
                   rotateValue={rotateValue}
                   degree={(i + 1) * countChildren}
                   clickedParents={clickedParents}
+                  searchTerm={searchTerm}
                 />
               )
             })}
@@ -130,6 +148,7 @@ const OrganizationStructureTree = ({
               clickedParents={clickedParents}
               setClickedParents={setClickedParents}
               rotateValue={rotateValue}
+              searchTerm={searchTerm}
             />
           </g>
         </g>

diff --git a/apps/web/src/pages/organizationStructure/LeadersOverview.tsx b/apps/web/src/pages/organizationStructure/LeadersOverview.tsx
@@ -8,13 +8,15 @@ interface Props {
   clickedParents: string[]
   setClickedParents: any
   rotateValue: number
+  searchTerm: string
   hideChildNodes: boolean
 }
 const LeadersOverview = ({
   descendants,
   clickedParents,
   setClickedParents,
   rotateValue,
+  searchTerm,
   hideChildNodes,
 }: Props) => {
   const antallParents = 360 / descendants.length
@@ -62,6 +64,7 @@ const LeadersOverview = ({
             clickedParents={clickedParents}
             degree={(i + 1) * antallParents}
             rotateValue={rotateValue}
+            searchTerm={searchTerm}
           />
         )
       })}