From 862ec682b4e693d0aefe1e502b922d74ee24921a Mon Sep 17 00:00:00 2001 From: henrikmv Date: Sat, 20 Jul 2024 14:51:02 +0200 Subject: [PATCH 01/14] feat: change to dhis ui components --- .../DragDropList/DragDropList.component.js | 19 +++---- .../DragDropListItem.component.js | 56 +++++++++---------- 2 files changed, 35 insertions(+), 40 deletions(-) diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js index a9f242fa89..bf05a1c3bd 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js @@ -4,12 +4,7 @@ import React, { Component } from 'react'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import update from 'react-addons-update'; - -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; +import { DataTable, TableHead, TableBody, DataTableRow, DataTableColumnHeader } from '@dhis2/ui'; import i18n from '@dhis2/d2-i18n'; @@ -47,11 +42,13 @@ export class DragDropList extends Component { return ( - + - - {i18n.t('Column')} - + + + {i18n.t('Column')} + + {listItems.map((item, i) => ( @@ -66,7 +63,7 @@ export class DragDropList extends Component { /> ))} -
+ ); } diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js index d7f63bde76..2475da53ed 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js @@ -1,14 +1,20 @@ // @flow import React, { Component } from 'react'; import { DragSource, DropTarget } from 'react-dnd'; -import { Checkbox, IconReorder24, spacersNum } from '@dhis2/ui'; -import TableCell from '@material-ui/core/TableCell'; +import { Checkbox, DataTableRow, DataTableCell } from '@dhis2/ui'; import { withStyles } from '@material-ui/core/styles'; const styles = () => ({ - checkbox: { - marginTop: spacersNum.dp12, - marginBottom: spacersNum.dp12, + container: { + cursor: 'move', + width: '100%', + }, + row: { + display: 'flex', + }, + checkboxContainer: { + flex: 1, + display: 'flex', }, }); @@ -21,15 +27,12 @@ type Props = { connectDragSource: (any) => void, connectDropTarget: (any) => void, classes: { - checkbox: string, + container: string, + row: string, + checkboxContainer: string, } }; -const style = { - cursor: 'move', - outline: 'none', -}; - const ItemTypes = { LISTITEM: 'listItem', }; @@ -71,24 +74,19 @@ class Index extends Component { // $FlowFixMe[incompatible-extend] automated comment return connectDropTarget(connectDragSource( - - - - - - - - - - , +
+ + + + + +
, )); } } From 68b3f871e485b82622fc096c7ad068dccd24f8be Mon Sep 17 00:00:00 2001 From: henrikmv Date: Mon, 29 Jul 2024 18:38:47 +0200 Subject: [PATCH 02/14] fix: define drag source and drop target --- i18n/en.pot | 7 +- .../DragDropList/DragDropList.component.js | 12 +- .../DragDropListItem.component.js | 141 +++++++----------- 3 files changed, 63 insertions(+), 97 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index abaccb285f..d7b234c8f2 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-06-28T11:23:02.970Z\n" -"PO-Revision-Date: 2024-06-28T11:23:02.970Z\n" +"POT-Creation-Date: 2024-07-29T16:38:48.947Z\n" +"PO-Revision-Date: 2024-07-29T16:38:48.947Z\n" msgid "Choose one or more dates..." msgstr "Choose one or more dates..." @@ -568,6 +568,9 @@ msgstr "Columns to show in table" msgid "Column" msgstr "Column" +msgid "Visible" +msgstr "Visible" + msgid "Update" msgstr "Update" diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js index bf05a1c3bd..f8607a8635 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js @@ -1,11 +1,9 @@ // @flow import React, { Component } from 'react'; - import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import update from 'react-addons-update'; import { DataTable, TableHead, TableBody, DataTableRow, DataTableColumnHeader } from '@dhis2/ui'; - import i18n from '@dhis2/d2-i18n'; import { DragDropListItem } from './DragDropListItem.component'; @@ -38,16 +36,16 @@ export class DragDropList extends Component { } render() { - const { listItems } = this.props; + const { listItems, handleToggle } = this.props; return ( - - {i18n.t('Column')} - + + {i18n.t('Column')} + {i18n.t('Visible')} @@ -58,7 +56,7 @@ export class DragDropList extends Component { id={item.id} text={item.header} moveListItem={this.moveListItem} - handleToggle={this.props.handleToggle} + handleToggle={handleToggle} visible={item.visible} /> ))} diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js index 2475da53ed..5100e324e1 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js @@ -1,105 +1,70 @@ // @flow -import React, { Component } from 'react'; -import { DragSource, DropTarget } from 'react-dnd'; -import { Checkbox, DataTableRow, DataTableCell } from '@dhis2/ui'; -import { withStyles } from '@material-ui/core/styles'; +import React, { useRef } from 'react'; +import { useDrag, useDrop } from 'react-dnd'; +import { DataTableRow, DataTableCell, Checkbox } from '@dhis2/ui'; -const styles = () => ({ - container: { - cursor: 'move', - width: '100%', - }, - row: { - display: 'flex', - }, - checkboxContainer: { - flex: 1, - display: 'flex', - }, -}); +const ItemTypes = { + LISTITEM: 'listItem', +}; -type Props = { +type DragDropListItemProps = { id: string, - visible: boolean, + index: number, text: string, + visible: boolean, handleToggle: (id: string) => void, - isDragging: () => void, - connectDragSource: (any) => void, - connectDropTarget: (any) => void, - classes: { - container: string, - row: string, - checkboxContainer: string, - } + moveListItem: (dragIndex: number, hoverIndex: number) => void, }; -const ItemTypes = { - LISTITEM: 'listItem', -}; +const DragDropListItem = ({ id, index, text, visible, handleToggle, moveListItem }: DragDropListItemProps) => { + const ref = useRef(null); -const cardSource = { - beginDrag(props) { - return { - id: props.id, - index: props.index, - }; - }, -}; + const [, drop] = useDrop({ + accept: ItemTypes.LISTITEM, + hover(item: { id: string, index: number }) { + const dragIndex = item.index; + const hoverIndex = index; -const cardTarget = { - hover(props, monitor) { - const dragIndex = monitor.getItem().index; - const hoverIndex = props.index; + if (dragIndex === hoverIndex) { + return; + } - // Don't replace items with themselves. - if (dragIndex === hoverIndex) { - return; - } + // Time to actually perform the action. + moveListItem(dragIndex, hoverIndex); - // Time to actually perform the action. - props.moveListItem(dragIndex, hoverIndex); + // Note: we're mutating the monitor item here! + // Generally it's better to avoid mutations, + // but it's good here for the sake of performance + // to avoid expensive index searches. + item.index = hoverIndex; + }, + }); - // Note: we're mutating the monitor item here! - // Generally it's better to avoid mutations, - // but it's good here for the sake of performance - // to avoid expensive index searches. - monitor.getItem().index = hoverIndex; - }, -}; + const [{ isDragging }, drag] = useDrag({ + type: ItemTypes.LISTITEM, + item: { id, index }, + collect: monitor => ({ + isDragging: monitor.isDragging(), + }), + }); -class Index extends Component { - render() { - const { text, isDragging, connectDragSource, connectDropTarget } = this.props; - const opacity = isDragging ? 0 : 1; + drag(drop(ref)); - // $FlowFixMe[incompatible-extend] automated comment - return connectDropTarget(connectDragSource( -
- - - - - -
, - )); - } -} + const opacity = isDragging ? 0.5 : 1; -export const DragDropListItemPlain = - DragSource( - ItemTypes.LISTITEM, - cardSource, - (connect, monitor) => ({ connectDragSource: connect.dragSource(), isDragging: monitor.isDragging() }), - )(DropTarget( - ItemTypes.LISTITEM, - cardTarget, - connect => ({ connectDropTarget: connect.dropTarget() }), - )(Index)); + return ( + + {text} + + + + + ); +}; -export const DragDropListItem = withStyles(styles)(DragDropListItemPlain); +export default DragDropListItem; From 5daf98e65651c69fd49b51d94f35f083c69d02b3 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Mon, 29 Jul 2024 19:25:08 +0200 Subject: [PATCH 03/14] fix: ts error --- .../DragDropList/DragDropList.component.js | 10 +++++----- .../DragDropList/DragDropListItem.component.js | 16 ++++------------ 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js index f8607a8635..3c825903fe 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js @@ -5,7 +5,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import update from 'react-addons-update'; import { DataTable, TableHead, TableBody, DataTableRow, DataTableColumnHeader } from '@dhis2/ui'; import i18n from '@dhis2/d2-i18n'; - import { DragDropListItem } from './DragDropListItem.component'; type Props = { @@ -15,13 +14,14 @@ type Props = { }; export class DragDropList extends Component { - moveListItem: (dragIndex: any, hoverIndex: any) => void; + moveListItem: (dragIndex: number, hoverIndex: number) => void; + constructor(props: Props) { super(props); this.moveListItem = this.moveListItem.bind(this); } - moveListItem(dragIndex: any, hoverIndex: any) { + moveListItem(dragIndex: number, hoverIndex: number) { const { listItems } = this.props; const dragListItem = listItems[dragIndex]; let sortedList = []; @@ -36,7 +36,7 @@ export class DragDropList extends Component { } render() { - const { listItems, handleToggle } = this.props; + const { listItems } = this.props; return ( @@ -56,7 +56,7 @@ export class DragDropList extends Component { id={item.id} text={item.header} moveListItem={this.moveListItem} - handleToggle={handleToggle} + handleToggle={this.props.handleToggle} visible={item.visible} /> ))} diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js index 5100e324e1..168c1c5c8f 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js @@ -7,16 +7,16 @@ const ItemTypes = { LISTITEM: 'listItem', }; -type DragDropListItemProps = { +type Props = { id: string, - index: number, - text: string, visible: boolean, + text: string, + index: number, handleToggle: (id: string) => void, moveListItem: (dragIndex: number, hoverIndex: number) => void, }; -const DragDropListItem = ({ id, index, text, visible, handleToggle, moveListItem }: DragDropListItemProps) => { +export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveListItem }: Props) => { const ref = useRef(null); const [, drop] = useDrop({ @@ -29,13 +29,7 @@ const DragDropListItem = ({ id, index, text, visible, handleToggle, moveListItem return; } - // Time to actually perform the action. moveListItem(dragIndex, hoverIndex); - - // Note: we're mutating the monitor item here! - // Generally it's better to avoid mutations, - // but it's good here for the sake of performance - // to avoid expensive index searches. item.index = hoverIndex; }, }); @@ -66,5 +60,3 @@ const DragDropListItem = ({ id, index, text, visible, handleToggle, moveListItem ); }; - -export default DragDropListItem; From 60cdfab8b377ba9ac3c8dbcc5cff80bdaba4378b Mon Sep 17 00:00:00 2001 From: henrikmv Date: Mon, 29 Jul 2024 19:28:10 +0200 Subject: [PATCH 04/14] fix: ts error --- .../ColumnSelector/DragDropList/DragDropList.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js index 3c825903fe..7c55c27b03 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js @@ -10,7 +10,7 @@ import { DragDropListItem } from './DragDropListItem.component'; type Props = { listItems: Array, handleUpdateListOrder: (sortedList: Array) => void, - handleToggle: (id: string) => () => void, + handleToggle: (id: string) => () => any, }; export class DragDropList extends Component { From 65b4157674a17fb4bebf0d3171d6f6e401eb6663 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Mon, 29 Jul 2024 19:29:03 +0200 Subject: [PATCH 05/14] fix: ts --- .../ColumnSelector/DragDropList/DragDropListItem.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js index 168c1c5c8f..35266ac6fe 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js @@ -12,7 +12,7 @@ type Props = { visible: boolean, text: string, index: number, - handleToggle: (id: string) => void, + handleToggle: (id: string) => any, moveListItem: (dragIndex: number, hoverIndex: number) => void, }; From 23c9b75acdaf6f8de561f35e94f588c811f6bb80 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 08:59:07 +0200 Subject: [PATCH 06/14] fix: restore comments --- .../DragDropList/DragDropListItem.component.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js index 35266ac6fe..dd20dc72e8 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js @@ -25,11 +25,18 @@ export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveL const dragIndex = item.index; const hoverIndex = index; + // Don't replace items with themselves. if (dragIndex === hoverIndex) { return; } + // Time to actually perform the action moveListItem(dragIndex, hoverIndex); + + // Note: we're mutating the item here! + // Generally it's better to avoid mutations, + // but it's good here for the sake of performance + // to avoid expensive index searches. item.index = hoverIndex; }, }); From e1b969fdae1e35b3e11cc38f0f5029478ca6db5d Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 09:22:33 +0200 Subject: [PATCH 07/14] fix: breaking cypress test --- .../EventWorkingListsUser/EventWorkingListsUser.js | 3 ++- .../ColumnSelector/DragDropList/DragDropListItem.component.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js index f931718570..49d9c8c3b7 100644 --- a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js +++ b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js @@ -149,7 +149,8 @@ When('you open the column selector', () => { When('you select Household location and save from the column selector', () => { cy.get('aside[role="dialog"]') .contains('Household location') - .find('input') + .parents('tr') + .find('input[type="checkbox"]') .click(); cy.get('aside[role="dialog"]') diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js index dd20dc72e8..23e147eb1e 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js @@ -25,7 +25,7 @@ export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveL const dragIndex = item.index; const hoverIndex = index; - // Don't replace items with themselves. + // Don't replace items with themselves. if (dragIndex === hoverIndex) { return; } From b129920ae3b8595126de63eb422d3b040b57acf3 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 09:59:06 +0200 Subject: [PATCH 08/14] fix: cypress --- .../TeiWorkingListsUser/TeiWorkingListsUser.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/TeiWorkingListsUser.js b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/TeiWorkingListsUser.js index ccbda13971..548432b3cb 100644 --- a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/TeiWorkingListsUser.js +++ b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/TeiWorkingListsUser.js @@ -251,7 +251,8 @@ When('you open the column selector', () => { When('you select the organisation unit and save from the column selector', () => { cy.get('aside[role="dialog"]') .contains('Organisation unit') - .find('input') + .parents('tr') + .find('input[type="checkbox"]') .click(); cy.get('aside[role="dialog"]') @@ -613,7 +614,8 @@ When('you select the Foci response program stage', () => { When('you select a data element columns and save from the column selector', () => { cy.get('aside[role="dialog"]') .contains('People included') - .find('input') + .parents('tr') + .find('input[type="checkbox"]') .click(); cy.get('aside[role="dialog"]') @@ -674,7 +676,8 @@ Then('you see scheduledAt filter', () => { When('you select a scheduledAt column and save from the column selector', () => { cy.get('aside[role="dialog"]') .contains('Appointment date') - .find('input') + .parents('tr') + .find('input[type="checkbox"]') .click(); cy.get('aside[role="dialog"]') From 60303e21e22dbdea2972587d269d96e9a9d81bb2 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 10:18:52 +0200 Subject: [PATCH 09/14] fix: cypress test --- .../e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js b/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js index 9ea6ac3f02..c3ea9bf574 100644 --- a/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js +++ b/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js @@ -45,7 +45,8 @@ When('edits and save the form', () => { cy.contains('[data-test="form-field"]', 'WHOMCH Hemoglobin value') - .find('input') + .parents('tr') + .find('input[type="checkbox"]') .clear() .type('99') .blur(); From c609f1a06a8d8a2db83a49a74c852c0a2406a004 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 11:08:16 +0200 Subject: [PATCH 10/14] fix: rolleback cypress change in fil --- .../e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js b/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js index c3ea9bf574..9ea6ac3f02 100644 --- a/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js +++ b/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js @@ -45,8 +45,7 @@ When('edits and save the form', () => { cy.contains('[data-test="form-field"]', 'WHOMCH Hemoglobin value') - .parents('tr') - .find('input[type="checkbox"]') + .find('input') .clear() .type('99') .blur(); From 5b54ae376ef734389b9be927713e10feeff35c14 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 14:10:50 +0200 Subject: [PATCH 11/14] Revert "fix: rolleback cypress change in fil" This reverts commit c609f1a06a8d8a2db83a49a74c852c0a2406a004. --- .../e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js b/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js index 9ea6ac3f02..c3ea9bf574 100644 --- a/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js +++ b/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js @@ -45,7 +45,8 @@ When('edits and save the form', () => { cy.contains('[data-test="form-field"]', 'WHOMCH Hemoglobin value') - .find('input') + .parents('tr') + .find('input[type="checkbox"]') .clear() .type('99') .blur(); From 3259138bd70e3441143b0efc177a7a563df95273 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Tue, 30 Jul 2024 14:17:41 +0200 Subject: [PATCH 12/14] fix: cypress --- .../e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js b/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js index c3ea9bf574..dbf29a6a8c 100644 --- a/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js +++ b/cypress/e2e/AllAccessibleRecordsPage/AllAccessibleRecordsPage.js @@ -45,8 +45,7 @@ When('edits and save the form', () => { cy.contains('[data-test="form-field"]', 'WHOMCH Hemoglobin value') - .parents('tr') - .find('input[type="checkbox"]') + .find('input') .clear() .type('99') .blur(); @@ -62,6 +61,8 @@ Then('the working list should be updated', () => { .click(); cy.contains('WHOMCH Hemoglobin value') + .parents('tr') + .find('input[type="checkbox"]') .click(); cy.contains('Save') From 60ae38e4a2042582beec9c468bcba8968cae49cb Mon Sep 17 00:00:00 2001 From: henrikmv Date: Wed, 31 Jul 2024 11:42:45 +0200 Subject: [PATCH 13/14] fix: review change for opacity --- .../ColumnSelector/DragDropList/DragDropListItem.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js index 23e147eb1e..3d258163a4 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js @@ -51,7 +51,7 @@ export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveL drag(drop(ref)); - const opacity = isDragging ? 0.5 : 1; + const opacity = isDragging ? 0 : 1; return ( From 3002d39f1ae5466085edd45705db0cb3ea2ccc21 Mon Sep 17 00:00:00 2001 From: henrikmv Date: Wed, 31 Jul 2024 16:15:37 +0200 Subject: [PATCH 14/14] fix: review change for hover --- .../DragDropList/DragDropList.component.js | 29 +++++++++++---- .../DragDropListItem.component.js | 37 ++++++++++++++++++- 2 files changed, 56 insertions(+), 10 deletions(-) diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js index 7c55c27b03..e8cf16e2ed 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropList.component.js @@ -13,15 +13,16 @@ type Props = { handleToggle: (id: string) => () => any, }; -export class DragDropList extends Component { - moveListItem: (dragIndex: number, hoverIndex: number) => void; +type State = { + isDraggingAny: boolean, +}; - constructor(props: Props) { - super(props); - this.moveListItem = this.moveListItem.bind(this); - } +export class DragDropList extends Component { + state = { + isDraggingAny: false, + }; - moveListItem(dragIndex: number, hoverIndex: number) { + moveListItem = (dragIndex: number, hoverIndex: number) => { const { listItems } = this.props; const dragListItem = listItems[dragIndex]; let sortedList = []; @@ -33,10 +34,19 @@ export class DragDropList extends Component { }); this.props.handleUpdateListOrder(sortedList); - } + }; + + handleDragStart = () => { + this.setState({ isDraggingAny: true }); + }; + + handleDragEnd = () => { + this.setState({ isDraggingAny: false }); + }; render() { const { listItems } = this.props; + const { isDraggingAny } = this.state; return ( @@ -58,6 +68,9 @@ export class DragDropList extends Component { moveListItem={this.moveListItem} handleToggle={this.props.handleToggle} visible={item.visible} + isDraggingAny={isDraggingAny} + onDragStart={this.handleDragStart} + onDragEnd={this.handleDragEnd} /> ))} diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js index 3d258163a4..2f9087aa2f 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js +++ b/src/core_modules/capture-core/components/ListView/ColumnSelector/DragDropList/DragDropListItem.component.js @@ -2,11 +2,20 @@ import React, { useRef } from 'react'; import { useDrag, useDrop } from 'react-dnd'; import { DataTableRow, DataTableCell, Checkbox } from '@dhis2/ui'; +import { withStyles } from '@material-ui/core/styles'; const ItemTypes = { LISTITEM: 'listItem', }; +const styles = { + rowWithoutHover: { + '&:hover > td': { + backgroundColor: 'transparent !important', + }, + }, +}; + type Props = { id: string, visible: boolean, @@ -14,9 +23,24 @@ type Props = { index: number, handleToggle: (id: string) => any, moveListItem: (dragIndex: number, hoverIndex: number) => void, + isDraggingAny: boolean, + onDragStart: () => void, + onDragEnd: () => void, + classes: any, }; -export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveListItem }: Props) => { +const DragDropListItemPlain = ({ + id, + index, + text, + visible, + handleToggle, + moveListItem, + isDraggingAny, + onDragStart, + onDragEnd, + classes, +}: Props) => { const ref = useRef(null); const [, drop] = useDrop({ @@ -54,7 +78,14 @@ export const DragDropListItem = ({ id, index, text, visible, handleToggle, moveL const opacity = isDragging ? 0 : 1; return ( - + {text} ); }; + +export const DragDropListItem = withStyles(styles)(DragDropListItemPlain);