Skip to content

Commit

Permalink
refactor: [DHIS2-17840]replace Material UI Grid (#3763)
Browse files Browse the repository at this point in the history 
* feat: remove Grid

* feat: remove grid from cardlistitem

* feat: remove grid from incompleteselectionsmessage

* feat: remove grid registration data entry form

* fix: remove use of media for responsiveness

* fix: revert code clean up
  • Loading branch information
@henrikmv
henrikmv authored Aug 20, 2024
1 parent 52008c8 commit 9dc3ef5
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 141 deletions.
93 changes: 43 additions & 50 deletions src/core_modules/capture-core/components/CardList/CardListItem.component.js
View file
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
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
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

0 comments on commit 9dc3ef5

Please sign in to comment.