Merge pull request #559 from knowit/folk-504-org-struktur

folk-504 Oppdatert org struktur grafen
knowit · Mar 7, 2024 · a31f442 · a31f442
2 parents 8ae086d + 2180abe
commit a31f442
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 105 deletions.
diff --git a/apps/web/src/components/sortableTable/MUITable.tsx b/apps/web/src/components/sortableTable/MUITable.tsx
@@ -137,7 +137,7 @@ const MUITable = <T extends object>({
     >
       {(config || []).map((column, index) =>
         column.header ? (
-          column.header()
+          column.header
         ) : (
           <TableCellStyled key={index}>
             <HeaderRoot>

diff --git a/apps/web/src/components/sortableTable/SortableMUITable.tsx b/apps/web/src/components/sortableTable/SortableMUITable.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { ArrowDownIcon, ArrowUpIcon } from '../../assets/Icons'
 import useSort from './hooks/use-sort'
 
@@ -36,6 +37,19 @@ const SortableTable = <T extends object>(props: MUITableProps<T>) => {
     config,
     initialSort
   )
+  const getIcon = useCallback(
+    (label: string, sortBy: string | null, sortOrder: SortOrder | null) => {
+      if (label === sortBy) {
+        if (sortOrder === SortOrder.Asc) {
+          return <ArrowDownIcon />
+        } else if (sortOrder === SortOrder.Desc) {
+          return <ArrowUpIcon />
+        }
+      }
+      return undefined
+    },
+    []
+  )
 
   const updatedConfig = config.map((column) => {
     if (!column.sortValue) {
@@ -44,12 +58,12 @@ const SortableTable = <T extends object>(props: MUITableProps<T>) => {
 
     return {
       ...column,
-      header: () => (
+      header: (
         <TableCellStyled key={`head-${column.label}`}>
           <HeaderRoot>
             <HeaderTitle onClick={() => setSortColumn(column.label)}>
               {column.label}
-              {getIcons(column.label, sortBy, sortOrder)}
+              {getIcon(column.label, sortBy, sortOrder)}
             </HeaderTitle>
 
             {column.checkBox ? <CellCheckbox {...column.checkBox} /> : null}
@@ -59,32 +73,6 @@ const SortableTable = <T extends object>(props: MUITableProps<T>) => {
     }
   })
 
-  const getIcons = (
-    label: string,
-    sortBy: string | null,
-    sortOrder: SortOrder | null
-  ) => {
-    if (label !== sortBy) {
-      return <div></div>
-    }
-
-    if (sortOrder === null) {
-      return <div></div>
-    } else if (sortOrder === SortOrder.Asc) {
-      return (
-        <div>
-          <ArrowDownIcon />
-        </div>
-      )
-    } else if (sortOrder === SortOrder.Desc) {
-      return (
-        <div>
-          <ArrowUpIcon />
-        </div>
-      )
-    }
-  }
-
   return (
     <div>
       <MUITable {...props} config={updatedConfig} data={sortedData}></MUITable>

diff --git a/apps/web/src/components/sortableTable/cells/ConsultantCell.tsx b/apps/web/src/components/sortableTable/cells/ConsultantCell.tsx
@@ -87,7 +87,10 @@ export default function ConsultantCell({
         </ButtonSubRoot>
         <ButtonSubRoot>
           {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-          <Link to={'/ansatt/' + consultant.email} target="_blank">
+          <Link
+            to={'/ansatt/' + consultant.email}
+            target={'employee_' + consultant.email}
+          >
             <OpenInNewIcon />
           </Link>
         </ButtonSubRoot>

diff --git a/apps/web/src/components/sortableTable/tableTypes.tsx b/apps/web/src/components/sortableTable/tableTypes.tsx
@@ -35,14 +35,14 @@ export interface MUITableConfig<T> {
   ) => ReactNode
   width?: number
   additionalCellStyle?: React.CSSProperties
-  header?: () => ReactNode
+  header?: ReactNode
   checkBox?: CheckBoxHeader
   sortValue?: sortValueFn<T>
   searchValue?: GetColumnValueFn
   sortFn?: (a: T, b: T) => number
 }
 
-export interface MUITableProps<T> {
+export interface MUITableProps<T extends object> {
   data: T[]
   config: MUITableConfig<T>[]
   keyFn: (rowData: T) => string

diff --git a/apps/web/src/pages/employee/EmployeePage.tsx b/apps/web/src/pages/employee/EmployeePage.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Grid } from '@mui/material'
 import { EmployeeTable } from './table/EmployeeTable'
 import { pageTitle } from '../../utils/pagetitle'

diff --git a/apps/web/src/pages/employee/table/SortableEmployeeTable.tsx b/apps/web/src/pages/employee/table/SortableEmployeeTable.tsx
@@ -208,8 +208,7 @@ export const EmployeeTableForCustomer = (props: {
 }
 
 function transformEmployeeForCustomerList(row: EmployeeForCustomerList) {
-  const rowData = row['rowData']
-  const rowId = row['rowId']
+  const { rowId, rowData } = row
 
   return {
     rowId,

diff --git a/apps/web/src/pages/organizationStructure/Components/Filter/Filter.tsx b/apps/web/src/pages/organizationStructure/Components/Filter/Filter.tsx
@@ -8,7 +8,9 @@ const FilterWrapper = styled('div')(({ theme }) => ({
   boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.25)',
   borderRadius: '4px',
   display: 'flex',
-  float: 'right',
+  position: 'absolute',
+  right: 0,
+  'z-index': 5,
 }))
 
 const StyledText = styled('p')({

diff --git a/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx b/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx
@@ -1,17 +1,14 @@
 import React from 'react'
 import { Link } from '../../type'
 import { linkColor } from '../../util'
-import { useTheme } from '@mui/material'
+import NameText from '../NameText'
 
 interface Props {
   link: Link
   searchTerm: string
 }
 
 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
   return (
     <React.Fragment key={link.target.data.employee.email}>
       <path
@@ -21,21 +18,7 @@ const LinkElement = ({ link, searchTerm }: Props) => {
         id={link.target.data.employee.email}
       />
       {link.innerLink && (
-        <text
-          stroke={halo}
-          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
-          }
-        >
+        <NameText employee={link.target.data.employee} searchTerm={searchTerm}>
           <textPath
             xlinkHref={'#' + link.target.data.employee.email}
             startOffset={link.inverted ? '100%' : null}
@@ -45,7 +28,7 @@ const LinkElement = ({ link, searchTerm }: Props) => {
               {link.target.children ? link.target.data.employee.name : ''}
             </tspan>
           </textPath>
-        </text>
+        </NameText>
       )}
     </React.Fragment>
   )

diff --git a/apps/web/src/pages/organizationStructure/Components/NameText.tsx b/apps/web/src/pages/organizationStructure/Components/NameText.tsx
@@ -0,0 +1,43 @@
+import { useTheme } from '@mui/material'
+import { ReactNode } from 'react'
+import { EmployeeProfileInformation } from 'server/routers/employees/employeesTypes'
+
+interface Props {
+  children: ReactNode
+  employee: EmployeeProfileInformation
+  searchTerm: string
+  [k: string]: any
+}
+const NameText = ({ children, employee, searchTerm, ...rest }: 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
+
+  return (
+    <text
+      onClick={() =>
+        window.open(
+          window.location.origin + '/ansatt/' + employee.email,
+          'employee_' + employee.email
+        )
+      }
+      style={{ cursor: 'hand' }}
+      stroke={halo}
+      strokeWidth={haloWidth}
+      paintOrder="stroke"
+      fill={theme.palette.text.primary}
+      opacity={
+        searchTerm.length < 0
+          ? 1
+          : employee.name.toLowerCase().includes(searchTerm)
+          ? 1
+          : 0.3
+      }
+      {...rest}
+    >
+      {children}
+    </text>
+  )
+}
+
+export default NameText
diff --git a/apps/web/src/pages/organizationStructure/Components/Nodes/EmployeeTreeNode.tsx b/apps/web/src/pages/organizationStructure/Components/Nodes/EmployeeTreeNode.tsx
@@ -1,12 +1,6 @@
 import { Node } from '../../type'
-import { useTheme } from '@mui/material'
-import {
-  checkRotateDegree,
-  fill,
-  haloWidth,
-  nodeSizeNormal,
-  nodeStroke,
-} from '../../util'
+import { checkRotateDegree, fill, nodeSizeNormal, nodeStroke } from '../../util'
+import NameText from '../NameText'
 
 interface Props {
   node: Node
@@ -23,9 +17,6 @@ const EmployeeTreeNode = ({
   clickedParents,
   searchTerm,
 }: Props) => {
-  const theme = useTheme()
-  const halo = theme.palette.background.paper
-
   const rotate =
     !node.children && node.depth !== 0
       ? checkRotateDegree(degree, rotateValue)
@@ -48,25 +39,16 @@ const EmployeeTreeNode = ({
             strokeWidth={1}
             r={nodeSizeNormal(node)}
           />
-          <text
+          <NameText
+            employee={node.data.employee}
+            searchTerm={searchTerm}
             transform={`rotate(${rotate ? 0 : 180})`}
             dy={node.depth === 0 ? '10px' : '0.32em'}
             x={rotate ? nodeSizeNormal(node) + 3 : -nodeSizeNormal(node) - 3}
             textAnchor={rotate ? 'start' : 'end'}
-            paintOrder="stroke"
-            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>
+          </NameText>
         </g>
       )}
     </>

diff --git a/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx b/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx
@@ -1,15 +1,14 @@
 import { Node } from '../../type'
-import { useTheme } from '@mui/material'
 import {
   checkRotateDegree,
   fill,
-  haloWidth,
   nodeSizeNormal,
   nodeSizeBig,
   nodeStroke,
 } from '../../util'
 import ChildrenCount from './ChildrenCount'
 import { styled } from '@mui/material'
+import NameText from '../NameText'
 
 interface Props {
   node: Node
@@ -45,9 +44,6 @@ const LeaderTreeNode = ({
   rotateValue,
   searchTerm,
 }: Props) => {
-  const theme = useTheme()
-  const halo = theme.palette.background.paper
-
   const showHiddenChildsCount = clickedParents.some(
     (employee) => employee === node.data.employee.email
   )
@@ -70,27 +66,18 @@ const LeaderTreeNode = ({
         hasChildren={childrenOuterLayerCount() > 0}
       />
       {node.depth === 0 && (
-        <text
+        <NameText
+          employee={node.data.employee}
+          searchTerm={searchTerm}
           transform={`rotate(${
             checkRotateDegree(degree, rotateValue) ? 0 : 180
           })`}
           dy={checkRotateDegree(degree, rotateValue) ? '10' : '-5'}
           x={checkRotateDegree(degree, rotateValue) ? 22 : -22}
           textAnchor={checkRotateDegree(degree, rotateValue) ? 'start' : 'end'}
-          paintOrder="stroke"
-          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>
+        </NameText>
       )}
       <ChildrenCount
         node={node}

diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx
@@ -92,7 +92,7 @@ const OrganizationStructureTree = ({
 
   return (
     <>
-      <div>
+      <AbsolutelyPositionedBox>
         <SearchFieldStyled>
           <SearchInput
             placeholder={'Søk i ansatte'}
@@ -114,10 +114,10 @@ const OrganizationStructureTree = ({
           setZoomTransformValue={setZoomTransformValue}
           rotateValue={rotateValue}
         />
-      </div>
+      </AbsolutelyPositionedBox>
       <svg
         viewBox={`${-margin - radius}  ${-margin - radius} ${width} ${height}`}
-        style={{ maxWidth: '100%', height: 'auto' }}
+        style={{ maxWidth: '100%', height: 'auto', position: 'absolute' }}
         fontFamily={'sans-serif'}
         ref={svgRef}
         fontSize={12}
@@ -159,3 +159,8 @@ const OrganizationStructureTree = ({
 }
 
 export default OrganizationStructureTree
+
+const AbsolutelyPositionedBox = styled('div')({
+  position: 'absolute',
+  'z-index': '5',
+})
diff --git a/apps/web/src/pages/organizationStructure/Components/Zooming.tsx b/apps/web/src/pages/organizationStructure/Components/Zooming.tsx
@@ -14,14 +14,15 @@ interface Props {
   rotateValue: number
 }
 
-const ButtonWrapper = styled('div')({
+const ButtonWrapper = styled('div')(({ theme }) => ({
   border: '1px solid',
   boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.25)',
   borderRadius: '4px',
   width: '200px',
   display: 'flex',
   justifyContent: 'center',
-})
+  backgroundColor: theme.palette.background.default,
+}))
 
 const Percent = styled('div')({
   fontSize: '24px',