Orgstruktur search for employees

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}

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>
   )

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>

apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx

@@ -16,6 +16,7 @@ interface Props {
   showChildren: (node: Node) => void
   degree: number
   rotateValue: number
+  searchTerm: string
 }
 
 const LeaderTreeNode = ({
@@ -24,6 +25,7 @@ const LeaderTreeNode = ({
   clickedParents,
   degree,
   rotateValue,
+  searchTerm,
 }: Props) => {
   const theme = useTheme()
   const halo = theme.palette.background.paper
@@ -58,6 +60,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>

apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx

@@ -9,6 +9,16 @@ 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')(({ theme }) => ({
+  background: theme.palette.background.default,
+  border: '1px solid',
+  padding: '4px 7px',
+  boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.25)',
+  width: '320px',
+}))
 
 interface Props {
   data: EmployeeNode
@@ -32,6 +42,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)
@@ -85,6 +96,15 @@ const OrganizationStructureTree = ({
 
   return (
     <>
+      <SearchFieldStyled>
+        <SearchInput
+          placeholder={'Søk i ansatte'}
+          onSearch={(searchTerm) => {
+            setSearchTerm(searchTerm.toLowerCase())
+          }}
+          onClear={() => setSearchTerm('')}
+        />
+      </SearchFieldStyled>
       <div>
         <Rotating
           groupRef={groupRef}
@@ -111,6 +131,7 @@ const OrganizationStructureTree = ({
             links={linksSorted}
             clickedParents={clickedParents}
             rotateValue={rotateValue}
+            searchTerm={searchTerm}
           />
           <g>
             {descendantsWithoutChildrenSorted.map((node, i) => {
@@ -121,6 +142,7 @@ const OrganizationStructureTree = ({
                   rotateValue={rotateValue}
                   degree={(i + 1) * countChildren}
                   clickedParents={clickedParents}
+                  searchTerm={searchTerm}
                 />
               )
             })}
@@ -130,6 +152,7 @@ const OrganizationStructureTree = ({
               clickedParents={clickedParents}
               setClickedParents={setClickedParents}
               rotateValue={rotateValue}
+              searchTerm={searchTerm}
             />
           </g>
         </g>

apps/web/src/pages/organizationStructure/LeadersOverview.tsx

@@ -9,13 +9,15 @@ interface Props {
   setClickedParents: any
   rotateValue: number
   hideEmployeesWithoutChildren: boolean
+  searchTerm: string
 }
 const LeadersOverview = ({
   descendants,
   clickedParents,
   setClickedParents,
   rotateValue,
   hideEmployeesWithoutChildren,
+  searchTerm,
 }: Props) => {
   const antallParents = 360 / descendants.length
   const descendantsWithChildrenSorted = spliceArray(descendants)
@@ -62,6 +64,7 @@ const LeadersOverview = ({
             clickedParents={clickedParents}
             degree={(i + 1) * antallParents}
             rotateValue={rotateValue}
+            searchTerm={searchTerm}
           />
         )
       })}