Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MPDX-0000 - fix phone numbers - style updates #994

Merged
merged 15 commits into from
Aug 13, 2024
Merged

MPDX-0000 - fix phone numbers - style updates #994

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
800445f
Adds Card MUI components.
wjames111 Aug 5, 2024
12b2982
Adjust centering on buttons.
wjames111 Aug 5, 2024
a7dc641
Add confirm button to ContactHeader.
wjames111 Aug 5, 2024
4384ca7
Adds avatar to Contact Card.
wjames111 Aug 8, 2024
6563e7e
Adds avatar to Contact Card.
wjames111 Aug 8, 2024
6459f15
Makes Textfield and text elements smaller.
wjames111 Aug 8, 2024
e1dc09b
Adds totalCount for phone numbers to confirm.
wjames111 Aug 8, 2024
9fae07a
Adds tooltip to buttons.
wjames111 Aug 8, 2024
538b8e8
Cleans up merge conflicts.
wjames111 Aug 8, 2024
951ed8e
Fix lock icon styles.
wjames111 Aug 9, 2024
54d21cd
Center align primary icons.
wjames111 Aug 9, 2024
fc5f4b4
Uses Select over NativeSelect.
wjames111 Aug 9, 2024
ffacf57
Fix types Select onChange event handler.
wjames111 Aug 9, 2024
988d49a
Remove buttonBlue class.
wjames111 Aug 13, 2024
268630f
Added variant to confirm all button.
wjames111 Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components/Tool/FixPhoneNumbers/Contact.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Contact from './Contact';

const testData = {
name: 'Test Contact',
avatar: 'https://www.example.com',
id: 'testid',
numbers: [
{
Expand Down Expand Up @@ -50,6 +51,7 @@ describe('FixPhoneNumbers-Contact', () => {
handleAdd={handleAddMock}
handleChangePrimary={handleChangePrimaryMock}
setContactFocus={setContactFocus}
avatar={testData.avatar}
/>
</TestWrapper>
</ThemeProvider>,
Expand Down Expand Up @@ -82,6 +84,7 @@ describe('FixPhoneNumbers-Contact', () => {
handleAdd={handleAddMock}
handleChangePrimary={handleChangePrimaryMock}
setContactFocus={setContactFocus}
avatar={testData.avatar}
/>
</TestWrapper>
</ThemeProvider>,
Expand Down Expand Up @@ -118,6 +121,7 @@ describe('FixPhoneNumbers-Contact', () => {
handleAdd={handleAddMock}
handleChangePrimary={handleChangePrimaryMock}
setContactFocus={setContactFocus}
avatar={testData.avatar}
/>
</TestWrapper>
</ThemeProvider>,
Expand Down
211 changes: 117 additions & 94 deletions src/components/Tool/FixPhoneNumbers/Contact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Fragment, useState } from 'react';
import styled from '@emotion/styled';
import { mdiCheckboxMarkedCircle, mdiDelete, mdiLock, mdiPlus } from '@mdi/js';
import { Icon } from '@mdi/react';
import StarIcon from '@mui/icons-material/Star';
Expand All @@ -7,11 +8,16 @@ import {
Avatar,
Box,
Button,
Card,
CardContent,
CardHeader,
FormControl,
Grid,
Hidden,
Link,
TextField,
Theme,
Tooltip,
Typography,
} from '@mui/material';
import clsx from 'clsx';
Expand All @@ -26,26 +32,21 @@ import theme from '../../../theme';
import { PhoneNumberData } from './FixPhoneNumbers';

const useStyles = makeStyles()((theme: Theme) => ({
left: {
[theme.breakpoints.up('md')]: {
border: `1px solid ${theme.palette.cruGrayMedium.main}`,
},
},
left: {},
container: {
display: 'flex',
alignItems: 'center',
marginBottom: theme.spacing(2),
[theme.breakpoints.down('sm')]: {
border: `1px solid ${theme.palette.cruGrayMedium.main}`,
},
},
boxBottom: {
backgroundColor: theme.palette.cruGrayLight.main,
width: '100%',
[theme.breakpoints.down('xs')]: {
paddingTop: theme.spacing(2),
},
},
contactCard: {
marginBottom: theme.spacing(2),
},
buttonTop: {
marginLeft: theme.spacing(2),
[theme.breakpoints.down('sm')]: {
Expand Down Expand Up @@ -82,24 +83,31 @@ const useStyles = makeStyles()((theme: Theme) => ({
paddingRight: theme.spacing(2),
},
paddingY: {
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
},
paddingB2: {
paddingBottom: theme.spacing(2),
paddingBottom: theme.spacing(1),
},
hoverHighlight: {
'&:hover': {
color: theme.palette.mpdxBlue.main,
cursor: 'pointer',
},
},
avatar: {
width: theme.spacing(7),
height: theme.spacing(7),
}));

const ContactHeader = styled(CardHeader)(() => ({
'.MuiCardHeader-action': {
alignSelf: 'center',
},
}));

const ContactAvatar = styled(Avatar)(() => ({
width: theme.spacing(4),
height: theme.spacing(4),
}));

interface Props {
name: string;
numbers: PhoneNumberData[];
Expand All @@ -114,6 +122,7 @@ interface Props {
handleAdd: (personId: string, number: string) => void;
handleChangePrimary: (personId: string, numberIndex: number) => void;
setContactFocus: SetContactFocus;
avatar: string;
}

const Contact: React.FC<Props> = ({
Expand All @@ -127,6 +136,7 @@ const Contact: React.FC<Props> = ({
// Remove below line when function is being used.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
setContactFocus,
avatar,
}) => {
const { t } = useTranslation();
const locale = useLocale();
Expand Down Expand Up @@ -158,38 +168,49 @@ const Contact: React.FC<Props> = ({
return (
<Grid container className={classes.container}>
<Grid container>
<Grid item md={10} xs={12}>
<Card className={classes.contactCard}>
<Box display="flex" alignItems="center" className={classes.left}>
<Grid container>
<Grid item xs={12}>
<Box
display="flex"
alignItems="center"
style={{ height: '100%' }}
p={2}
>
<Avatar src="" className={classes.avatar} />
<Box display="flex" flexDirection="column" ml={2}>
<ContactHeader
avatar={
<ContactAvatar
src={avatar || ''}
aria-label="Contact Avatar"
onClick={handleContactNameClick}
/>
}
title={
<Link underline="hover" onClick={handleContactNameClick}>
<Typography variant="h6">{name}</Typography>
<Typography variant="subtitle1">{name}</Typography>
</Link>
</Box>
</Box>
}
action={
<Button variant="contained" style={{ width: '100%' }}>
<Icon
path={mdiCheckboxMarkedCircle}
size={0.8}
className={classes.buttonIcon}
/>
{t('Confirm')}
</Button>
}
></ContactHeader>
</Grid>

<Grid item xs={12} className={classes.boxBottom}>
<Grid container>
<CardContent className={(classes.paddingX, classes.paddingY)}>
<Grid container display="flex" alignItems="center">
<Hidden xsDown>
<Grid item xs={12} sm={6} className={classes.paddingY}>
<Box
display="flex"
justifyContent="space-between"
className={classes.paddingX}
>
<Typography>
<Typography variant="body2">
<strong>{t('Source')}</strong>
</Typography>
<Typography>
<Typography variant="body2">
<strong>{t('Primary')}</strong>
</Typography>
</Box>
Expand All @@ -200,7 +221,7 @@ const Contact: React.FC<Props> = ({
justifyContent="flex-start"
className={classes.paddingX}
>
<Typography>
<Typography variant="body2">
<strong>{t('Phone Number')}</strong>
</Typography>
</Box>
Expand All @@ -216,11 +237,11 @@ const Contact: React.FC<Props> = ({
>
<Box>
<Hidden smUp>
<Typography display="inline">
<Typography display="inline" variant="body2">
<strong>{t('Source')}: </strong>
</Typography>
</Hidden>
<Typography display="inline">
<Typography display="inline" variant="body2">
{`${phoneNumber.source} (${dateFormatShort(
DateTime.fromISO(phoneNumber.updatedAt),
locale,
Expand All @@ -234,13 +255,15 @@ const Contact: React.FC<Props> = ({
className={classes.hoverHighlight}
/>
) : (
<StarOutlineIcon
data-testid={`starOutlineIcon-${personId}-${index}`}
className={classes.hoverHighlight}
onClick={() =>
handleChangePrimary(personId, index)
}
/>
<Tooltip title="Set as Primary">
<StarOutlineIcon
wjames111 marked this conversation as resolved.
Show resolved Hide resolved
data-testid={`starOutlineIcon-${personId}-${index}`}
className={classes.hoverHighlight}
onClick={() =>
handleChangePrimary(personId, index)
}
/>
</Tooltip>
)}
</Typography>
</Box>
Expand All @@ -254,28 +277,36 @@ const Contact: React.FC<Props> = ({
classes.paddingX,
)}
>
<TextField
style={{ width: '100%' }}
inputProps={{
'data-testid': `textfield-${personId}-${index}`,
}}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => handleChange(personId, index, event)}
value={phoneNumber.number}
disabled={phoneNumber.source !== 'MPDX'}
/>
<FormControl fullWidth>
<TextField
style={{ width: '100%' }}
size="small"
inputProps={{
'data-testid': `textfield-${personId}-${index}`,
}}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => handleChange(personId, index, event)}
value={phoneNumber.number}
disabled={phoneNumber.source !== 'MPDX'}
/>
</FormControl>

{phoneNumber.source === 'MPDX' ? (
<Box
display="flex"
alignItems="center"
data-testid={`delete-${personId}-${index}`}
onClick={() => handleDelete(personId, index)}
className={classes.paddingX}
>
<Icon
path={mdiDelete}
size={1}
className={classes.hoverHighlight}
/>
<Tooltip title="Delete Number">
<Icon
path={mdiDelete}
size={1}
className={classes.hoverHighlight}
/>
</Tooltip>
</Box>
) : (
<Icon
Expand All @@ -298,11 +329,13 @@ const Contact: React.FC<Props> = ({
>
<Box>
<Hidden smUp>
<Typography display="inline">
<Typography display="inline" variant="body2">
<strong>{t('Source')}: </strong>
</Typography>
</Hidden>
<Typography display="inline">MPDX</Typography>
<Typography display="inline" variant="body2">
MPDX
</Typography>
</Box>
</Box>
</Grid>
Expand All @@ -315,51 +348,41 @@ const Contact: React.FC<Props> = ({
classes.paddingX,
)}
>
<TextField
style={{ width: '100%' }}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => updateNewPhoneNumber(event)}
inputProps={{
'data-testid': `addNewNumberInput-${personId}`,
}}
value={newPhoneNumber}
/>
<FormControl fullWidth>
<TextField
style={{ width: '100%' }}
size="small"
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => updateNewPhoneNumber(event)}
inputProps={{
'data-testid': `addNewNumberInput-${personId}`,
}}
value={newPhoneNumber}
/>
</FormControl>
<Box
className={classes.paddingX}
display="flex"
alignItems="center"
onClick={() => addNewPhoneNumber()}
data-testid={`addButton-${personId}`}
>
<Icon
path={mdiPlus}
size={1}
className={classes.hoverHighlight}
/>
<Tooltip title="Add Number">
<Icon
path={mdiPlus}
size={1}
className={classes.hoverHighlight}
/>
</Tooltip>
</Box>
</Box>
</Grid>
</Grid>
</Grid>
</CardContent>
</Grid>
</Box>
</Grid>
<Grid item xs={12} md={2}>
<Box
display="flex"
flexDirection="column"
style={{ paddingLeft: theme.spacing(1) }}
>
<Box className={classes.buttonTop}>
<Button variant="contained" style={{ width: '100%' }}>
<Icon
path={mdiCheckboxMarkedCircle}
size={0.8}
className={classes.buttonIcon}
/>
{t('Confirm')}
</Button>
</Box>
</Box>
</Grid>
</Card>
</Grid>
</Grid>
);
Expand Down
Loading