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

refactor: [DHIS2-17840]replace Material UI Grid #3763

Merged
merged 6 commits into from
Aug 20, 2024
Merged

refactor: [DHIS2-17840]replace Material UI Grid #3763

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4c83d75
feat: remove Grid
henrikmv Aug 18, 2024
2e691bd
feat: remove grid from cardlistitem
henrikmv Aug 18, 2024
8bf9a07
feat: remove grid from incompleteselectionsmessage
henrikmv Aug 18, 2024
a42d519
feat: remove grid registration data entry form
henrikmv Aug 19, 2024
c6324ce
fix: remove use of media for responsiveness
henrikmv Aug 19, 2024
04a0a33
fix: revert code clean up
henrikmv Aug 19, 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
93 changes: 43 additions & 50 deletions src/core_modules/capture-core/components/CardList/CardListItem.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n';
import React from 'react';
import moment from 'moment';
import type { ComponentType } from 'react';
import { Grid, withStyles } from '@material-ui/core';
import { withStyles } from '@material-ui/core';
import { colors, Tag, IconCheckmark16, Tooltip } from '@dhis2/ui';
import { useTimeZoneConversion } from '@dhis2/app-runtime';
import { CardImage } from '../../../capture-ui/CardImage/CardImage.component';
Expand All @@ -18,21 +18,20 @@ import { dataElementTypes, getTrackerProgramThrowIfNotFound } from '../../metaDa
import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName';
import type { ListItem, RenderCustomCardActions } from './CardList.types';


type OwnProps = $ReadOnly<{|
item: ListItem,
currentSearchScopeName?: string,
currentProgramId?: string,
currentSearchScopeType?: string,
renderCustomCardActions?: RenderCustomCardActions,
profileImageDataElement: ?CardProfileImageElementInformation,
dataElements: CardDataElementsInformation,
currentSearchScopeName ?: string,
currentProgramId ?: string,
currentSearchScopeType ?: string,
renderCustomCardActions ?: RenderCustomCardActions,
profileImageDataElement: ?CardProfileImageElementInformation,
dataElements: CardDataElementsInformation,
|}>;

type Props = $ReadOnly<{|
...OwnProps,
...CssClasses
|}>;
|}>;

const getStyles = (theme: Theme) => ({
itemContainer: {
Expand All @@ -44,6 +43,7 @@ const getStyles = (theme: Theme) => ({
borderRadius: theme.typography.pxToRem(5),
border: `1px solid ${colors.grey400}`,
backgroundColor: colors.grey050,
position: 'relative',
},
itemDataContainer: {
display: 'flex',
Expand All @@ -52,6 +52,9 @@ const getStyles = (theme: Theme) => ({
fontSize: theme.typography.pxToRem(12),
color: colors.grey700,
paddingBottom: theme.typography.pxToRem(8),
position: 'absolute',
top: theme.typography.pxToRem(8),
right: theme.typography.pxToRem(8),
},
enrolled: {
display: 'flex',
Expand Down Expand Up @@ -213,49 +216,39 @@ const CardListItemIndex = ({
return (
<div data-test="card-list-item" className={classes.itemContainer}>
<div className={classes.itemDataContainer}>

<div className={classes.itemValuesContainer}>
<Grid container >
<Grid item>
{renderImageDataElement(profileImageDataElement)}
</Grid>
<Grid item sm container>
<Grid item xs container direction="column" >
{dataElements
.map(({ id, name, type }) => (
<ListEntry
key={id}
name={name}
value={item.values[id]}
type={type}
/>))
}

{renderEnrollmentDetails()}
</Grid>
<Grid item>
{
item.tei && item.tei.updatedAt &&
<div className={classes.smallerLetters}>
{ i18n.t('Last updated') } {' '}
{ item.tei && <Tooltip content={fromServerDate(item.tei.updatedAt).toLocaleString()}>
{ moment(fromServerDate(item.tei.updatedAt)).fromNow() }
</Tooltip>}
</div>
}

<div className={classes.enrolled}>
{renderTag()}
</div>
</Grid>
</Grid>
</Grid>
{renderImageDataElement(profileImageDataElement)}
<div>
{dataElements
.map(({ id, name, type }) => (
<ListEntry
key={id}
name={name}
value={item.values[id]}
type={type}
/>
))
}
{renderEnrollmentDetails()}
</div>
<div>
<div className={classes.enrolled}>
{renderTag()}
</div>
</div>
</div>
</div>

{
renderCustomCardActions
&&
{item.tei && item.tei.updatedAt && (
<div className={classes.smallerLetters}>
{i18n.t('Last updated')}{' '}
{item.tei && (
<Tooltip content={fromServerDate(item.tei.updatedAt).toLocaleString()}>
{moment(fromServerDate(item.tei.updatedAt)).fromNow()}
</Tooltip>
)}
</div>
)}
{renderCustomCardActions && (
<div className={classes.buttonMargin}>
{
renderCustomCardActions({
Expand All @@ -270,7 +263,7 @@ const CardListItemIndex = ({
})
}
</div>
}
)}
</div>
);
};
Expand Down
24 changes: 12 additions & 12 deletions src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import Paper from '@material-ui/core/Paper/Paper';
import Grid from '@material-ui/core/Grid/Grid';
import { withStyles } from '@material-ui/core';
import { colors } from '@dhis2/ui';

Expand All @@ -15,15 +14,16 @@ const StyledPaper = withStyles({
},
})(Paper);

export const IncompleteSelectionsMessage = ({ children, dataTest = 'informative-paper' }) => (
<Grid container justify="center">
<Grid item>
<StyledPaper
data-test={dataTest}
elevation={0}
>
{children}
</StyledPaper>
</Grid>
</Grid>);
const containerStyle = {
display: 'flex',
justifyContent: 'center',
width: '100%',
};

export const IncompleteSelectionsMessage = ({ children, dataTest = 'informative-paper' }) => (
<div style={containerStyle}>
<StyledPaper data-test={dataTest} elevation={0}>
{children}
</StyledPaper>
</div>
);
21 changes: 9 additions & 12 deletions src/core_modules/capture-core/components/InfoIconText/InfoIconText.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
import React, { type ComponentType, type Node } from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import { IconInfo16, colors } from '@dhis2/ui';
import Grid from '@material-ui/core/Grid';


type OwnProps = {| children: string | Node |}

Expand All @@ -15,6 +13,8 @@ const styles = () => ({
container: {
marginTop: 12,
marginBottom: 12,
display: 'flex',
alignItems: 'center',
},
text: {
fontSize: 14,
Expand All @@ -24,18 +24,15 @@ const styles = () => ({
},
});


const InfoIconTextPlain = ({ classes, children }) => (
<Grid container direction="row" alignItems="center" className={classes.container}>
<Grid item>
<span className={classes.icon}>
<IconInfo16 color={colors.grey800} />
</span>
</Grid>
<Grid item className={classes.text}>
<div className={classes.container}>
<span className={classes.icon}>
<IconInfo16 color={colors.grey800} />
</span>
<span className={classes.text}>
{children}
</Grid>
</Grid>
</span>
</div>
);

export const InfoIconText: ComponentType<OwnProps> = withStyles(styles)(InfoIconTextPlain);
Loading
Loading