From 2180abe34f05f3632d532da9d7af2854108a6634 Mon Sep 17 00:00:00 2001 From: "anders.dahlin@knowit.no" Date: Thu, 7 Mar 2024 11:18:04 +0100 Subject: [PATCH] =?UTF-8?q?folk-504=20Oppdatert=20org=20struktur=20grafen?= =?UTF-8?q?=20til=20=C3=A5=20ta=20litt=20mer=20plass=20og=20lenke=20til=20?= =?UTF-8?q?ansatte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/sortableTable/MUITable.tsx | 2 +- .../sortableTable/SortableMUITable.tsx | 44 +++++++------------ .../sortableTable/cells/ConsultantCell.tsx | 5 ++- .../components/sortableTable/tableTypes.tsx | 4 +- apps/web/src/pages/employee/EmployeePage.tsx | 1 - .../employee/table/SortableEmployeeTable.tsx | 3 +- .../Components/Filter/Filter.tsx | 4 +- .../Components/Links/LinkElement.tsx | 23 ++-------- .../Components/NameText.tsx | 43 ++++++++++++++++++ .../Components/Nodes/EmployeeTreeNode.tsx | 30 +++---------- .../Components/Nodes/LeaderTreeNode.tsx | 23 +++------- .../Components/OrganizationStructureTree.tsx | 11 +++-- .../Components/Zooming.tsx | 5 ++- .../OrganizationStructurePage.tsx | 9 +++- 14 files changed, 102 insertions(+), 105 deletions(-) create mode 100644 apps/web/src/pages/organizationStructure/Components/NameText.tsx diff --git a/apps/web/src/components/sortableTable/MUITable.tsx b/apps/web/src/components/sortableTable/MUITable.tsx index b31514d4..fe36678c 100644 --- a/apps/web/src/components/sortableTable/MUITable.tsx +++ b/apps/web/src/components/sortableTable/MUITable.tsx @@ -137,7 +137,7 @@ const MUITable = ({ > {(config || []).map((column, index) => column.header ? ( - column.header() + column.header ) : ( diff --git a/apps/web/src/components/sortableTable/SortableMUITable.tsx b/apps/web/src/components/sortableTable/SortableMUITable.tsx index 4a36218a..a328027f 100644 --- 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 = (props: MUITableProps) => { config, initialSort ) + const getIcon = useCallback( + (label: string, sortBy: string | null, sortOrder: SortOrder | null) => { + if (label === sortBy) { + if (sortOrder === SortOrder.Asc) { + return + } else if (sortOrder === SortOrder.Desc) { + return + } + } + return undefined + }, + [] + ) const updatedConfig = config.map((column) => { if (!column.sortValue) { @@ -44,12 +58,12 @@ const SortableTable = (props: MUITableProps) => { return { ...column, - header: () => ( + header: ( setSortColumn(column.label)}> {column.label} - {getIcons(column.label, sortBy, sortOrder)} + {getIcon(column.label, sortBy, sortOrder)} {column.checkBox ? : null} @@ -59,32 +73,6 @@ const SortableTable = (props: MUITableProps) => { } }) - const getIcons = ( - label: string, - sortBy: string | null, - sortOrder: SortOrder | null - ) => { - if (label !== sortBy) { - return
- } - - if (sortOrder === null) { - return
- } else if (sortOrder === SortOrder.Asc) { - return ( -
- -
- ) - } else if (sortOrder === SortOrder.Desc) { - return ( -
- -
- ) - } - } - return (
diff --git a/apps/web/src/components/sortableTable/cells/ConsultantCell.tsx b/apps/web/src/components/sortableTable/cells/ConsultantCell.tsx index 40a991ef..7c061852 100644 --- 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({ {isExpanded ? : } - + diff --git a/apps/web/src/components/sortableTable/tableTypes.tsx b/apps/web/src/components/sortableTable/tableTypes.tsx index 57ad39b2..7cb8d028 100644 --- a/apps/web/src/components/sortableTable/tableTypes.tsx +++ b/apps/web/src/components/sortableTable/tableTypes.tsx @@ -35,14 +35,14 @@ export interface MUITableConfig { ) => ReactNode width?: number additionalCellStyle?: React.CSSProperties - header?: () => ReactNode + header?: ReactNode checkBox?: CheckBoxHeader sortValue?: sortValueFn searchValue?: GetColumnValueFn sortFn?: (a: T, b: T) => number } -export interface MUITableProps { +export interface MUITableProps { data: T[] config: MUITableConfig[] keyFn: (rowData: T) => string diff --git a/apps/web/src/pages/employee/EmployeePage.tsx b/apps/web/src/pages/employee/EmployeePage.tsx index c074063d..a3b81402 100644 --- 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 index 405431b6..58db3ee7 100644 --- 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 index 84925ef8..d1a61ccd 100644 --- 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 index 6222020f..4477da8d 100644 --- a/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx +++ b/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx @@ -1,7 +1,7 @@ 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 @@ -9,9 +9,6 @@ interface 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 return ( { id={link.target.data.employee.email} /> {link.innerLink && ( - + { {link.target.children ? link.target.data.employee.name : ''} - + )} ) diff --git a/apps/web/src/pages/organizationStructure/Components/NameText.tsx b/apps/web/src/pages/organizationStructure/Components/NameText.tsx new file mode 100644 index 00000000..fff1e7bd --- /dev/null +++ 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 ( + + 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} + + ) +} + +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 index 9d4ddbb3..2e3fddf5 100644 --- 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)} /> - {node.data.employee.name} - + )} diff --git a/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx b/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx index d988bfd8..02689113 100644 --- 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 && ( - {node.data.employee.name} - + )} -
+ -
+ ({ 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', diff --git a/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx b/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx index 05c65cc2..60c138e4 100644 --- a/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx +++ b/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx @@ -5,6 +5,7 @@ import { FallbackMessage } from '../employee/components/FallbackMessage' import { pageTitle } from '../../utils/pagetitle' import { useState } from 'react' import Filter from './Components/Filter/Filter' +import styled from '@emotion/styled' export default function OrganizationStructurePage() { const { data, isLoading, error } = useEmployeeStructure() @@ -27,7 +28,7 @@ export default function OrganizationStructurePage() { } return ( - <> + - + ) } + +const RelativePositionedBox = styled('div')({ + position: 'relative', +})