From 7e0a09ed6d7cf9cd7e95a3cbb3060c0adf30088f Mon Sep 17 00:00:00 2001 From: palmanshaus Date: Wed, 28 Jun 2023 13:47:35 +0200 Subject: [PATCH 1/4] Add textfield and make searchresults bold --- .../Components/Links/LinkElement.tsx | 9 ++++++++- .../Components/Links/Links.tsx | 5 +++-- .../Components/Nodes/EmployeeTreeNode.tsx | 8 ++++++++ .../Components/Nodes/LeaderTreeNode.tsx | 8 ++++++++ .../Components/OrganizationStructureTree.tsx | 5 +++++ .../organizationStructure/LeadersOverview.tsx | 3 +++ .../OrganizationStructurePage.tsx | 18 ++++++++++++++++++ 7 files changed, 53 insertions(+), 3 deletions(-) diff --git a/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx b/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx index ba1087b8..3a4b0bfa 100644 --- 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,12 @@ const LinkElement = ({ link }: Props) => { strokeWidth={haloWidth} paintOrder="stroke" fill={theme.palette.text.primary} + fontWeight={ + link.target.data.employee.name.toLowerCase().includes(searchTerm) && + searchTerm.length > 0 + ? 'bold' + : 'italic' + } > { +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 ( {links.map((link, i) => ( - + ))} ) diff --git a/apps/web/src/pages/organizationStructure/Components/Nodes/EmployeeTreeNode.tsx b/apps/web/src/pages/organizationStructure/Components/Nodes/EmployeeTreeNode.tsx index d56ef416..ca23448b 100644 --- a/apps/web/src/pages/organizationStructure/Components/Nodes/EmployeeTreeNode.tsx +++ b/apps/web/src/pages/organizationStructure/Components/Nodes/EmployeeTreeNode.tsx @@ -13,6 +13,7 @@ interface Props { rotateValue: number degree: number clickedParents: string[] + searchTerm: string } const EmployeeTreeNode = ({ @@ -20,6 +21,7 @@ const EmployeeTreeNode = ({ rotateValue, degree, clickedParents, + searchTerm, }: Props) => { const theme = useTheme() const halo = theme.palette.background.paper @@ -55,6 +57,12 @@ const EmployeeTreeNode = ({ stroke={halo} fill={theme.palette.text.primary} strokeWidth={haloWidth} + fontWeight={ + node.data.employee.name.toLowerCase().includes(searchTerm) && + searchTerm.length > 0 + ? 'bold' + : 'italic' + } > {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 38821f77..89cafc16 100644 --- a/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx +++ b/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,12 @@ const LeaderTreeNode = ({ stroke={halo} fill={theme.palette.text.primary} strokeWidth={haloWidth} + fontWeight={ + node.data.employee.name.toLowerCase().includes(searchTerm) && + searchTerm.length > 0 + ? 'bold' + : 'italic' + } > {node.data.employee.name} diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx index 484b4f0d..44503ef2 100644 --- a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx +++ b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx @@ -16,6 +16,7 @@ interface Props { height: number margin: number hideEmployeesWithoutChildren: boolean + searchTerm: string } const OrganizationStructureTree = ({ @@ -24,6 +25,7 @@ const OrganizationStructureTree = ({ height, margin, hideEmployeesWithoutChildren, + searchTerm, }: Props) => { const [clickedParents, setClickedParents] = useState([]) const [rotateValue, setRotateValue] = useState(0) @@ -111,6 +113,7 @@ const OrganizationStructureTree = ({ links={linksSorted} clickedParents={clickedParents} rotateValue={rotateValue} + searchTerm={searchTerm} /> {descendantsWithoutChildrenSorted.map((node, i) => { @@ -121,6 +124,7 @@ const OrganizationStructureTree = ({ rotateValue={rotateValue} degree={(i + 1) * countChildren} clickedParents={clickedParents} + searchTerm={searchTerm} /> ) })} @@ -130,6 +134,7 @@ const OrganizationStructureTree = ({ clickedParents={clickedParents} setClickedParents={setClickedParents} rotateValue={rotateValue} + searchTerm={searchTerm} /> diff --git a/apps/web/src/pages/organizationStructure/LeadersOverview.tsx b/apps/web/src/pages/organizationStructure/LeadersOverview.tsx index a49ef339..91165ab4 100644 --- a/apps/web/src/pages/organizationStructure/LeadersOverview.tsx +++ b/apps/web/src/pages/organizationStructure/LeadersOverview.tsx @@ -9,6 +9,7 @@ interface Props { setClickedParents: any rotateValue: number hideEmployeesWithoutChildren: boolean + searchTerm: string } const LeadersOverview = ({ descendants, @@ -16,6 +17,7 @@ const LeadersOverview = ({ 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} /> ) })} diff --git a/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx b/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx index a9dda337..420adc38 100644 --- a/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx +++ b/apps/web/src/pages/organizationStructure/OrganizationStructurePage.tsx @@ -5,11 +5,19 @@ import { FallbackMessage } from '../employee/components/FallbackMessage' import { pageTitle } from '../../utils/pagetitle' import { useState } from 'react' import Filter from './Components/Filter/Filter' +import SearchInput from '../../components/SearchInput' +import { styled } from '@mui/material/styles' + +const FilterWrapper = styled('div')(() => ({ + display: 'flex', + float: 'right', +})) export default function OrganizationStructurePage() { const { data, isLoading, error } = useEmployeeStructure() const [hideEmployeesWithoutChildren, setHideEmployeesWithoutChildren] = useState(false) + const [searchTerm, setSearchTerm] = useState('') function toggleEmployees() { setHideEmployeesWithoutChildren(!hideEmployeesWithoutChildren) @@ -29,6 +37,15 @@ export default function OrganizationStructurePage() { return ( <> + + { + setSearchTerm(searchTerm) + }} + onClear={() => setSearchTerm('')} + /> + ) From 482ff4cd2682ba029acc7672c175fc2c21786cff Mon Sep 17 00:00:00 2001 From: palmanshaus Date: Wed, 28 Jun 2023 15:09:23 +0200 Subject: [PATCH 2/4] Finish --- .../Components/OrganizationStructureTree.tsx | 11 +++++++++-- .../OrganizationStructurePage.tsx | 18 ------------------ 2 files changed, 9 insertions(+), 20 deletions(-) diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx index 44503ef2..c258b1f4 100644 --- a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx +++ b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx @@ -9,6 +9,7 @@ import Rotating from './Rotating' import LeadersOverview from '../LeadersOverview' import EmployeeTreeNode from './Nodes/EmployeeTreeNode' import { spliceArray } from '../util' +import SearchInput from '../../../components/SearchInput' interface Props { data: EmployeeNode @@ -16,7 +17,6 @@ interface Props { height: number margin: number hideEmployeesWithoutChildren: boolean - searchTerm: string } const OrganizationStructureTree = ({ @@ -25,7 +25,6 @@ const OrganizationStructureTree = ({ height, margin, hideEmployeesWithoutChildren, - searchTerm, }: Props) => { const [clickedParents, setClickedParents] = useState([]) const [rotateValue, setRotateValue] = useState(0) @@ -34,6 +33,7 @@ const OrganizationStructureTree = ({ x: 0, y: 0, }) + const [searchTerm, setSearchTerm] = useState('') const svgRef = useRef(null) const groupRef = useRef(null) const root = hierarchy(data) @@ -88,6 +88,13 @@ const OrganizationStructureTree = ({ return ( <>
+ { + setSearchTerm(searchTerm) + }} + onClear={() => setSearchTerm('')} + /> ({ - display: 'flex', - float: 'right', -})) export default function OrganizationStructurePage() { const { data, isLoading, error } = useEmployeeStructure() const [hideEmployeesWithoutChildren, setHideEmployeesWithoutChildren] = useState(false) - const [searchTerm, setSearchTerm] = useState('') function toggleEmployees() { setHideEmployeesWithoutChildren(!hideEmployeesWithoutChildren) @@ -37,15 +29,6 @@ export default function OrganizationStructurePage() { return ( <> - - { - setSearchTerm(searchTerm) - }} - onClear={() => setSearchTerm('')} - /> - ) From a155fe05f0ae88fa73c0e00ccdf9895cc26beb7c Mon Sep 17 00:00:00 2001 From: palmanshaus Date: Thu, 29 Jun 2023 10:28:40 +0200 Subject: [PATCH 3/4] Resolve comments --- .../Components/Links/LinkElement.tsx | 13 ++++++++----- .../Components/Nodes/EmployeeTreeNode.tsx | 11 ++++++----- .../Components/Nodes/LeaderTreeNode.tsx | 11 ++++++----- .../Components/OrganizationStructureTree.tsx | 15 +++++++++++++-- 4 files changed, 33 insertions(+), 17 deletions(-) diff --git a/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx b/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx index 3a4b0bfa..6222020f 100644 --- a/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx +++ b/apps/web/src/pages/organizationStructure/Components/Links/LinkElement.tsx @@ -26,11 +26,14 @@ const LinkElement = ({ link, searchTerm }: Props) => { strokeWidth={haloWidth} paintOrder="stroke" fill={theme.palette.text.primary} - fontWeight={ - link.target.data.employee.name.toLowerCase().includes(searchTerm) && - searchTerm.length > 0 - ? 'bold' - : 'italic' + opacity={ + searchTerm.length < 0 + ? 1 + : link.target.data.employee.name + .toLowerCase() + .includes(searchTerm) + ? 1 + : 0.3 } > 0 - ? 'bold' - : 'italic' + opacity={ + searchTerm.length < 0 + ? 1 + : node.data.employee.name.toLowerCase().includes(searchTerm) + ? 1 + : 0.3 } > {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 89cafc16..d29f5400 100644 --- a/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx +++ b/apps/web/src/pages/organizationStructure/Components/Nodes/LeaderTreeNode.tsx @@ -60,11 +60,12 @@ const LeaderTreeNode = ({ stroke={halo} fill={theme.palette.text.primary} strokeWidth={haloWidth} - fontWeight={ - node.data.employee.name.toLowerCase().includes(searchTerm) && - searchTerm.length > 0 - ? 'bold' - : 'italic' + opacity={ + searchTerm.length < 0 + ? 1 + : node.data.employee.name.toLowerCase().includes(searchTerm) + ? 1 + : 0.3 } > {node.data.employee.name} diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx index c258b1f4..07ee54f0 100644 --- a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx +++ b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx @@ -10,6 +10,15 @@ 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 @@ -87,14 +96,16 @@ const OrganizationStructureTree = ({ return ( <> -
+ { - setSearchTerm(searchTerm) + setSearchTerm(searchTerm.toLowerCase()) }} onClear={() => setSearchTerm('')} /> + +
Date: Thu, 29 Jun 2023 16:26:18 +0200 Subject: [PATCH 4/4] Styling --- apps/web/src/components/SearchInput.tsx | 1 + .../Components/OrganizationStructureTree.tsx | 26 ++++++++----------- 2 files changed, 12 insertions(+), 15 deletions(-) diff --git a/apps/web/src/components/SearchInput.tsx b/apps/web/src/components/SearchInput.tsx index 4884471f..1ab5a8b9 100644 --- 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/OrganizationStructureTree.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx index 8eec8bda..11deafa2 100644 --- a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx +++ b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx @@ -12,12 +12,8 @@ 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', +const SearchFieldStyled = styled('div')(() => ({ + marginBottom: '5px', })) interface Props { @@ -96,16 +92,16 @@ const OrganizationStructureTree = ({ return ( <> - - { - setSearchTerm(searchTerm.toLowerCase()) - }} - onClear={() => setSearchTerm('')} - /> -
+ + { + setSearchTerm(searchTerm.toLowerCase()) + }} + onClear={() => setSearchTerm('')} + /> +