Skip to content

Commit

Permalink
feat: [DHIS2-16992] Fixed size for changelog modal and columns (#3834)
Browse files Browse the repository at this point in the history
* feat: temp

* feat: fixed size table and columns

* fix: remove console log

* fix: fixed size improvement
  • Loading branch information
henrikmv authored Oct 21, 2024
1 parent bf2f1ca commit 3b021cf
Show file tree
Hide file tree
Showing 8 changed files with 118 additions and 44 deletions.
6 changes: 6 additions & 0 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -1498,6 +1498,9 @@ msgstr "Changelog"
msgid "No changes to display"
msgstr "No changes to display"

msgid "Updated"
msgstr "Updated"

msgid "Created"
msgstr "Created"

Expand All @@ -1516,6 +1519,9 @@ msgstr "Data item"
msgid "Change"
msgstr "Change"

msgid "Value"
msgstr "Value"

msgid "New {{trackedEntityTypeName}} relationship"
msgstr "New {{trackedEntityTypeName}} relationship"

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ export const ChangelogComponent = ({

<ModalContent>
<DataTable
fixed
dataTest={'changelog-data-table'}
layout="fixed"
>
<ChangelogTableHeader
sortDirection={sortDirection}
Expand Down Expand Up @@ -64,7 +66,7 @@ export const ChangelogComponent = ({
{pager && (
<DataTableFoot>
<DataTableRow>
<DataTableCell colSpan="4">
<DataTableCell colSpan="5">
<Pagination
page={pager.page}
pageSize={pager.pageSize}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// @flow
import React from 'react';
import log from 'loglevel';
import { Tag } from '@dhis2/ui';
import i18n from '@dhis2/d2-i18n';
import { CHANGE_TYPES } from '../../Changelog/Changelog.constants';
import { errorCreator } from '../../../../../../capture-core-utils';

type Config = {
label: string,
variant: {
neutral?: boolean,
positive?: boolean,
negative?: boolean,
},
};

const changeTypeConfigs = {
[CHANGE_TYPES.UPDATED]: { label: i18n.t('Updated'), variant: { neutral: true } },
[CHANGE_TYPES.CREATED]: { label: i18n.t('Created'), variant: { positive: true } },
[CHANGE_TYPES.DELETED]: { label: i18n.t('Deleted'), variant: { negative: true } },
};

const ChangelogChangeComponent = ({ label, variant }: Config) => (
<Tag {...variant}>
{label}
</Tag>
);


export const ChangelogChangeCell = ({ changeType }: Object) => {
const config = changeTypeConfigs[changeType];

if (!config) {
log.error(errorCreator('Changelog component not found')({ changeType }));
return null;
}

return (
<ChangelogChangeComponent {...config} />
);
};

Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
// @flow
import React from 'react';
import log from 'loglevel';
import { colors, IconArrowRight16, spacers, Tag } from '@dhis2/ui';
import i18n from '@dhis2/d2-i18n';
import { colors, IconArrowRight16, spacers } from '@dhis2/ui';
import { withStyles } from '@material-ui/core/styles';
import { CHANGE_TYPES } from '../Changelog/Changelog.constants';
import { errorCreator } from '../../../../../capture-core-utils';
import { CHANGE_TYPES } from '../../Changelog/Changelog.constants';
import { errorCreator } from '../../../../../../capture-core-utils';

type Props = {
changeType: $Values<typeof CHANGE_TYPES>,
Expand All @@ -15,43 +14,55 @@ type Props = {
container: string,
previousValue: string,
currentValue: string,
updatePreviousValue: string,
updateCurrentValue: string,
updateArrow: string,
}
}

const styles = {
container: {
display: 'flex',
alignItems: 'center',
gap: spacers.dp4,
display: 'flex',
},
previousValue: {
color: colors.grey700,
},
currentValue: {
color: colors.grey900,
},
updatePreviousValue: {
color: colors.grey700,
maxWidth: '45%',
},
updateCurrentValue: {
color: colors.grey900,
maxWidth: '45%',
},
updateArrow: {
display: 'inline-flex',
alignItems: 'center',
margin: `${spacers.dp4}`,
},
};

const Updated = ({ previousValue, currentValue, classes }) => (
<div className={classes.container}>
<span className={classes.previousValue}>{previousValue}</span>
<span><IconArrowRight16 /></span>
<span className={classes.currentValue}>{currentValue}</span>
<span className={classes.updatePreviousValue}>{previousValue}</span>
<span className={classes.updateArrow}><IconArrowRight16 /></span>
<span className={classes.updateCurrentValue}>{currentValue}</span>
</div>
);

const Created = ({ currentValue, classes }) => (
<div className={classes.container}>
<Tag>{i18n.t('Created')}</Tag>
<span className={classes.currentValue}>{currentValue}</span>
</div>
);

const Deleted = ({ previousValue, classes }) => (
<div className={classes.container}>
<span className={classes.previousValue}>{previousValue}</span>
<span><IconArrowRight16 /></span>
<Tag negative>{i18n.t('Deleted')}</Tag>
</div>
);

Expand All @@ -61,7 +72,7 @@ const ChangelogComponentsByType = {
[CHANGE_TYPES.DELETED]: Deleted,
};

const ChangelogChangeCellPlain = ({ changeType, currentValue, previousValue, classes }: Props) => {
const ChangelogValueCellPlain = ({ changeType, currentValue, previousValue, classes }: Props) => {
const ChangelogComponent = ChangelogComponentsByType[changeType];

if (!ChangelogComponent) {
Expand All @@ -78,4 +89,4 @@ const ChangelogChangeCellPlain = ({ changeType, currentValue, previousValue, cla
);
};

export const ChangelogChangeCell = withStyles(styles)(ChangelogChangeCellPlain);
export const ChangelogValueCell = withStyles(styles)(ChangelogValueCellPlain);
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// @flow

export { ChangelogChangeCell } from './ChangelogChangeCell';
export { ChangelogValueCell } from './ChangelogValueCell';
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,30 @@ type Props = {
setSortDirection: SetSortDirection,
};

export const ChangelogTableHeader = ({
sortDirection,
setSortDirection,
}: Props) => (
export const ChangelogTableHeader = ({ sortDirection, setSortDirection }: Props) => (
<DataTableHead>
<DataTableRow>
<DataTableColumnHeader
onSortIconClick={({ direction }) => setSortDirection(direction)}
sortDirection={sortDirection}
fixed
top="0"
width="140px"
>
{i18n.t('Date')}
</DataTableColumnHeader>
<DataTableColumnHeader>
<DataTableColumnHeader fixed top="0" width="125px">
{i18n.t('User')}
</DataTableColumnHeader>
<DataTableColumnHeader>
<DataTableColumnHeader fixed top="0" width="125px">
{i18n.t('Data item')}
</DataTableColumnHeader>
<DataTableColumnHeader>
<DataTableColumnHeader fixed top="0" width="85px">
{i18n.t('Change')}
</DataTableColumnHeader>
<DataTableColumnHeader fixed top="0" width="275px">
{i18n.t('Value')}
</DataTableColumnHeader>
</DataTableRow>
</DataTableHead>
);
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
// @flow
import React from 'react';
import { DataTableCell, DataTableRow } from '@dhis2/ui';
import { ChangelogChangeCell } from './ChangelogChangeCell';
import type { ChangelogRecord } from '../Changelog/Changelog.types';
import { withStyles } from '@material-ui/core/styles';
import { ChangelogChangeCell, ChangelogValueCell } from './ChangelogCells';

type Props = {|
record: ChangelogRecord,
|}
type Props = {
record: {
date: string,
user: string,
dataItemLabel: string,
changeType: string,
},
classes: {
dataItemColumn: string,
valueColumn: string,
},
};

export const ChangelogTableRow = ({ record }: Props) => (
<DataTableRow>
<DataTableCell>
{record.date}
</DataTableCell>
<DataTableCell>
{record.user}
</DataTableCell>
<DataTableCell>
{record.dataItemLabel}
</DataTableCell>
const styles = {
dataItemColumn: { wordWrap: 'break-word', hyphens: 'auto' },
valueColumn: { wordWrap: 'break-word' },
};

<DataTableCell>
<ChangelogChangeCell
{...record}
/>
</DataTableCell>
const ChangelogTableRowPlain = ({ record, classes }: Props) => (
<DataTableRow>
<DataTableCell>{record.date}</DataTableCell>
<DataTableCell>{record.user}</DataTableCell>
<DataTableCell className={classes.dataItemColumn}>{record.dataItemLabel}</DataTableCell>
<DataTableCell><ChangelogChangeCell changeType={record.changeType} /></DataTableCell>
<DataTableCell className={classes.valueColumn}><ChangelogValueCell {...record} /></DataTableCell>
</DataTableRow>
);

export const ChangelogTableRow = withStyles(styles)(ChangelogTableRowPlain);
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// @flow

export { ChangelogTableHeader } from './ChangelogTableHeader';
export { ChangelogChangeCell } from './ChangelogChangeCell';
export { ChangelogTableRow } from './ChangelogTableRow';

0 comments on commit 3b021cf

Please sign in to comment.