From 4c1b32f93f491502a3a8b92ae9d9033c9418352c Mon Sep 17 00:00:00 2001 From: Joacim Delfin Sveen Date: Mon, 8 Apr 2024 08:03:16 +0200 Subject: [PATCH 1/3] Ny ansattkort-popup i organsisasjonsstrukturen --- .../Components/NameText.tsx | 165 +++++++++++++++--- 1 file changed, 140 insertions(+), 25 deletions(-) diff --git a/apps/web/src/pages/organizationStructure/Components/NameText.tsx b/apps/web/src/pages/organizationStructure/Components/NameText.tsx index 65a87929..15b3825a 100644 --- a/apps/web/src/pages/organizationStructure/Components/NameText.tsx +++ b/apps/web/src/pages/organizationStructure/Components/NameText.tsx @@ -1,6 +1,75 @@ -import { useTheme } from '@mui/material' -import { ReactNode } from 'react' +import { Box, Button, Modal, styled, useTheme } from '@mui/material' +import { ReactNode, useState } from 'react' import { EmployeeProfileInformation } from 'server/routers/employees/employeesTypes' +import { useEmployeeProfile } from '../../../api/data/employee/employeeQueries' + +const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 400, + bgcolor: 'background.paper', + border: '2px solid black', + boxShadow: 24, + pl: 4, + pr: 4, + pt: 2, + pb: 2, +} + +const EmployeeCard = styled('div')({ + display: 'flex', + flexDirection: 'column', + gap: 16, +}) + +const EmployeeCardName = styled('div')({ + fontSize: 20, + fontWeight: 600, +}) + +const EmployeeCardContent = styled('div')({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + gap: 16, + width: '100%', +}) + +const EmployeeCardContentLeft = styled('div')({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'start', + gap: 8, + width: '65%', +}) + +const EmployeeCardContentRight = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'space-between', + gap: 16, + width: '35%', +}) + +const EmployeeCardField = styled('div')({ + display: 'flex', + flexDirection: 'column', + flexWrap: 'wrap', +}) + +const EmployeeCardFieldLabel = styled('div')({ + fontWeight: 600, +}) + +const EmployeeCardFieldValue = styled('div')({}) + +const EmployeeCardImage = styled('img')({ + borderRadius: 90, + width: '100%', +}) interface Props { children: ReactNode @@ -8,35 +77,81 @@ interface Props { searchTerm: string [k: string]: any } + const NameText = ({ children, employee, searchTerm, ...rest }: Props) => { + const [openEmployeeCard, setOpenEmployeeCard] = useState(false) + const handleOpenEmployeeCard = () => setOpenEmployeeCard(true) + const handleCloseEmployeeCard = () => setOpenEmployeeCard(false) + + const employeeUrl = `${window.location.origin}/ansatt/${employee.email}` + + const employeeProfile = useEmployeeProfile(employee.email) + const employeeImageUrl = employeeProfile.data?.image + 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} - + <> + + {children} + + + + + {employee.name} + + + + {'Tittel: '} + + {employee.title ?? 'Ingen'} + + + + + {'Nærmeste leder: '} + + + {employee.manager} + + + + + + + + + + + + ) } From ffbe23c9447825ce8ae9bc5c6cd85610cc21512c Mon Sep 17 00:00:00 2001 From: Joacim Delfin Sveen Date: Mon, 8 Apr 2024 08:40:12 +0200 Subject: [PATCH 2/3] Endret properties til rem-verdier --- .../organizationStructure/Components/NameText.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/web/src/pages/organizationStructure/Components/NameText.tsx b/apps/web/src/pages/organizationStructure/Components/NameText.tsx index 15b3825a..648a5381 100644 --- a/apps/web/src/pages/organizationStructure/Components/NameText.tsx +++ b/apps/web/src/pages/organizationStructure/Components/NameText.tsx @@ -21,11 +21,11 @@ const style = { const EmployeeCard = styled('div')({ display: 'flex', flexDirection: 'column', - gap: 16, + gap: '1rem', }) const EmployeeCardName = styled('div')({ - fontSize: 20, + fontSize: '1.25rem', fontWeight: 600, }) @@ -33,7 +33,7 @@ const EmployeeCardContent = styled('div')({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', - gap: 16, + gap: '1rem', width: '100%', }) @@ -41,7 +41,7 @@ const EmployeeCardContentLeft = styled('div')({ display: 'flex', flexDirection: 'column', justifyContent: 'start', - gap: 8, + gap: '0.5rem', width: '65%', }) @@ -50,7 +50,7 @@ const EmployeeCardContentRight = styled('div')({ flexDirection: 'column', alignItems: 'center', justifyContent: 'space-between', - gap: 16, + gap: '1rem', width: '35%', }) @@ -67,7 +67,7 @@ const EmployeeCardFieldLabel = styled('div')({ const EmployeeCardFieldValue = styled('div')({}) const EmployeeCardImage = styled('img')({ - borderRadius: 90, + borderRadius: '50%', width: '100%', }) From fa7a539e74baeb30e957918e469f51a2b7651034 Mon Sep 17 00:00:00 2001 From: Joacim Delfin Sveen Date: Mon, 8 Apr 2024 08:40:55 +0200 Subject: [PATCH 3/3] =?UTF-8?q?Endret=20verdi=20s=C3=A5=20musepeker=20vise?= =?UTF-8?q?s=20som=20h=C3=A5nd=20over=20hovering=20av=20navn.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/src/pages/organizationStructure/Components/NameText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/pages/organizationStructure/Components/NameText.tsx b/apps/web/src/pages/organizationStructure/Components/NameText.tsx index 648a5381..e2fe1d80 100644 --- a/apps/web/src/pages/organizationStructure/Components/NameText.tsx +++ b/apps/web/src/pages/organizationStructure/Components/NameText.tsx @@ -96,7 +96,7 @@ const NameText = ({ children, employee, searchTerm, ...rest }: Props) => { <>