@dhis2-ui/transfer 10.16.2 → 10.16.3-alpha.1

package/src/features/transferring-items/index.js

@@ -0,0 +1,375 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { parseSelectorWithDataTest } from '../../../../../cypress/support/common/parseSelectorWithDataTest.js'
+import { extractOptionFromElement } from '../common/index.js'
+
+Given('some options are selectable', () => {
+    cy.visitStory('Transfer Transferring Items', 'Has Options')
+})
+
+Given('some options are selected', () => {
+    cy.visitStory('Transfer Transferring Items', 'Some Selected')
+})
+
+Given('one or more items in the options list are highlighted', () => {
+    cy.get('{transfer-sourceoptions} {transferoption}')
+        .filter((index) => index < 3)
+        // shuffle order so we can check they're added in the right order
+        .then(($options) => cy.wrap([$options[2], $options[0], $options[1]]))
+        .each(($option) => cy.wrap($option).clickWith('ctrl'))
+        .then(($options) => $options.toArray().map(extractOptionFromElement))
+        .as('itemsToBeSelected')
+})
+
+Given('some items in the options list are highlighted', () => {
+    cy.get('{transfer-sourceoptions} {transferoption}')
+        .filter((index) => index < 3)
+        // shuffle order so we can check they're added in the right order
+        .then(($options) => cy.wrap([$options[2], $options[0], $options[1]]))
+        .each(($option) => cy.wrap($option).clickWith('ctrl'))
+        .then(($options) => $options.toArray().map(extractOptionFromElement))
+        .as('itemsToBeSelected')
+})
+
+Given('some items in the selected list are highlighted', () => {
+    cy.get('{transfer-pickedoptions} {transferoption}')
+        .filter((index) => index < 3)
+        // shuffle order so we can check they're added in the right order
+        .then(($options) => cy.wrap([$options[2], $options[0], $options[1]]))
+        .each(($option) => cy.wrap($option).clickWith('ctrl'))
+        .then(($options) => $options.toArray().map(extractOptionFromElement))
+        .as('itemsToBeDeselected')
+})
+
+When("the user clicks the 'move to selected list' button", () => {
+    cy.get('{transfer-actions-addindividual}').click()
+})
+
+When("the user clicks the 'move to options list' button", () => {
+    cy.get('{transfer-actions-removeindividual}').click()
+})
+
+When("the user clicks the 'move all to selected list' button", () => {
+    cy.get('{transfer-sourceoptions} {transferoption}')
+        .then(($options) => $options.toArray().map(extractOptionFromElement))
+        .as('itemsToBeSelected')
+    cy.get('{transfer-actions-addall}').click()
+})
+
+When("the user clicks the 'move all to options list' button", () => {
+    cy.get('{transfer-pickedoptions} {transferoption}')
+        .then(($options) => $options.toArray().map(extractOptionFromElement))
+        .as('itemsToBeDeselected')
+    cy.get('{transfer-actions-removeall}').click()
+})
+
+When('the user double clicks an item in the options list', () => {
+    cy.get('{transfer-sourceoptions} {transferoption}')
+        .first()
+        .dblclick()
+        .then(extractOptionFromElement)
+        .as('doubleClickedPlainOption')
+})
+
+When('the user double clicks an item in the selected list', () => {
+    cy.get('{transfer-pickedoptions} {transferoption}')
+        .first()
+        .dblclick()
+        .then(extractOptionFromElement)
+        .as('doubleClickedPlainOption')
+})
+
+Then('the highlighted items should be removed from the options list', () => {
+    cy.all(
+        () => cy.get('@itemsToBeSelected'),
+        () => cy.get('{transfer-sourceoptions} {transferoption}')
+    ).should(([itemsToBeSelected, $selectableSourceOptions]) => {
+        const selectableSourceOptions = $selectableSourceOptions
+            .toArray()
+            .map(extractOptionFromElement)
+        const itemsStillSelectable = itemsToBeSelected.every(
+            (itemToBeSelected) => {
+                const result = selectableSourceOptions.find(
+                    ({ label, value }) =>
+                        label === itemToBeSelected.label &&
+                        value === itemToBeSelected.value
+                )
+
+                return result
+            }
+        )
+
+        expect(itemsStillSelectable).to.equal(false)
+    })
+})
+
+Then('the highlighted items should be visible in the selected list', () => {
+    cy.all(
+        () => cy.get('@itemsToBeSelected'),
+        () => cy.get('{transfer-pickedoptions} {transferoption}')
+    ).should(([itemsToBeSelected, $selectedOptions]) => {
+        const selectedOptions = $selectedOptions
+            .toArray()
+            .map(extractOptionFromElement)
+        const itemsSelected = itemsToBeSelected.every((itemToBeSelected) =>
+            selectedOptions.find(
+                ({ label, value }) =>
+                    label === itemToBeSelected.label &&
+                    value === itemToBeSelected.value
+            )
+        )
+
+        expect(itemsSelected).to.equal(true)
+    })
+})
+
+Then(
+    'the highlighted items should be appended to the selected list in the order they were highlighted',
+    () => {
+        cy.all(
+            () => cy.get('@itemsToBeSelected'),
+            () => cy.get('{transfer-pickedoptions} {transferoption}')
+        ).should(([itemsToBeSelected, $selectedOptions]) => {
+            const lastNSelectedOptions = $selectedOptions
+                .toArray()
+                .map(extractOptionFromElement)
+                .slice(itemsToBeSelected.length * -1)
+
+            expect(itemsToBeSelected).to.eql(lastNSelectedOptions)
+        })
+    }
+)
+
+Then('the highlighted items should be removed from the selected list', () => {
+    cy.all(
+        () => cy.get('@itemsToBeDeselected'),
+        () => cy.get('{transfer-pickedoptions} {transferoption}')
+    ).should(([itemsToBeDeselected, $selectedOptions]) => {
+        const selectedOptions = $selectedOptions
+            .toArray()
+            .map(extractOptionFromElement)
+        const itemsStillSelected = itemsToBeDeselected.every(
+            (itemToBeSelected) => {
+                const result = selectedOptions.find(
+                    ({ label, value }) =>
+                        label === itemToBeSelected.label &&
+                        value === itemToBeSelected.value
+                )
+
+                return result
+            }
+        )
+
+        expect(itemsStillSelected).to.equal(false)
+    })
+})
+
+Then('the highlighted items should be visible in the options list', () => {
+    cy.all(
+        () => cy.get('@itemsToBeDeselected'),
+        () => cy.get('{transfer-sourceoptions} {transferoption}')
+    ).should(([itemsToBeDeselected, $selectedOptions]) => {
+        const selectedOptions = $selectedOptions
+            .toArray()
+            .map(extractOptionFromElement)
+        const itemsSelectable = itemsToBeDeselected.every(
+            (itemToBeSelected) => {
+                const result = selectedOptions.find(
+                    ({ label, value }) =>
+                        label === itemToBeSelected.label &&
+                        value === itemToBeSelected.value
+                )
+
+                return result
+            }
+        )
+
+        expect(itemsSelectable).to.equal(true)
+    })
+})
+
+Then(
+    'the highlighted items should be in the original options list ordering',
+    () => {
+        cy.all(
+            () => cy.window(),
+            () => cy.get('{transfer-sourceoptions} {transferoption}'),
+            () => cy.get('{transfer-pickedoptions} {transferoption}')
+        ).should(([win, $selectableSourceOptions, $selectedOptions]) => {
+            const selectedOptions = $selectedOptions
+                .toArray()
+                .map(extractOptionFromElement)
+            const selectableSourceOptions = $selectableSourceOptions
+                .toArray()
+                .map(extractOptionFromElement)
+            const allOptionsWithoutSelected = win.options.filter((option) => {
+                return !selectedOptions.find(
+                    ({ label, value }) =>
+                        option.label === label && option.value === value
+                )
+            })
+
+            expect(allOptionsWithoutSelected).to.eql(selectableSourceOptions)
+        })
+    }
+)
+
+Then('all items should be removed from the options list', () => {
+    cy.get('{transfer-sourceoptions} {transferoption}').should('not.exist')
+})
+
+Then(
+    'all items removed from options list should be visible in the selected list',
+    () => {
+        cy.all(
+            () => cy.get('@itemsToBeSelected'),
+            () => cy.get('{transfer-pickedoptions} {transferoption}')
+        ).should(([itemsToBeSelected, $selectedOptions]) => {
+            const selectedOptions = $selectedOptions
+                .toArray()
+                .map(extractOptionFromElement)
+            const allSelected = itemsToBeSelected.every((option) => {
+                return selectedOptions.find(
+                    ({ label, value }) =>
+                        option.label === label && option.value === value
+                )
+            })
+
+            expect(allSelected).to.equal(true)
+        })
+    }
+)
+
+Then('all items should be removed from the selected list', () => {
+    cy.get('{transfer-pickedoptions} {transferoption}').should('not.exist')
+})
+
+Then(
+    'all items removed from selected list should be visible in the options list',
+    () => {
+        cy.all(
+            () => cy.get('@itemsToBeDeselected'),
+            () => cy.get('{transfer-sourceoptions} {transferoption}')
+        ).should(([itemsToBeDeselected, $selectableSourceOptions]) => {
+            const selectableSourceOptions = $selectableSourceOptions
+                .toArray()
+                .map(extractOptionFromElement)
+            const allSelectable = itemsToBeDeselected.every((option) => {
+                return selectableSourceOptions.find(
+                    ({ label, value }) =>
+                        option.label === label && option.value === value
+                )
+            })
+
+            expect(allSelectable).to.equal(true)
+        })
+    }
+)
+
+Then(
+    'the transferred items should be appended to the selected list in the order they were displayed in the options list',
+    () => {
+        cy.all(
+            () => cy.get('@itemsToBeSelected'),
+            () => cy.get('{transfer-pickedoptions} {transferoption}')
+        ).should(([itemsToBeSelected, $selectedOptions]) => {
+            const selectedOptions = $selectedOptions
+                .toArray()
+                .map(extractOptionFromElement)
+            const previouslySelectedSubset = selectedOptions.slice(
+                -1 * itemsToBeSelected.length
+            )
+
+            expect(itemsToBeSelected).to.eql(previouslySelectedSubset)
+        })
+    }
+)
+
+Then('the options list items should be ordered in the original order', () => {
+    cy.all(
+        () => cy.window(),
+        () => cy.get('{transfer-sourceoptions} {transferoption}'),
+        () =>
+            cy.get('{transfer-pickedoptions}').then(($pickedOptions) => {
+                return $pickedOptions.find(
+                    parseSelectorWithDataTest('{transferoption}')
+                )
+            })
+    ).should(([win, $selectableSourceOptions, $pickedOptions]) => {
+        const pickedPlainOptions = $pickedOptions
+            .toArray()
+            .map(extractOptionFromElement)
+
+        const originalOrderWithoutSelected = win.options.filter(
+            (originalOption) => {
+                return !pickedPlainOptions.find(
+                    (pickedPlainOption) =>
+                        pickedPlainOption.value === originalOption.value &&
+                        pickedPlainOption.label === originalOption.label
+                )
+            }
+        )
+
+        const selectableSourceOptions = $selectableSourceOptions
+            .toArray()
+            .map(extractOptionFromElement)
+
+        expect(originalOrderWithoutSelected).to.eql(selectableSourceOptions)
+    })
+})
+
+Then('the item should be removed from its options list', () => {
+    cy.all(
+        () => cy.get('@doubleClickedPlainOption'),
+        () => cy.get('{transfer-sourceoptions} {transferoption}')
+    ).should(([doubleClickedPlainOption, $sourceOptions]) => {
+        const sourcePlainOptions = $sourceOptions
+            .toArray()
+            .map(extractOptionFromElement)
+
+        const found = sourcePlainOptions.find(
+            (sourcePlainOption) =>
+                sourcePlainOption.value === doubleClickedPlainOption.value &&
+                sourcePlainOption.label === doubleClickedPlainOption.label
+        )
+
+        expect(found).to.not.equal(true)
+    })
+})
+
+Then('the item should be visible at the bottom of the selected list', () => {
+    cy.all(
+        () => cy.get('@doubleClickedPlainOption'),
+        () => cy.get('{transfer-pickedoptions} {transferoption}')
+    ).should(([doubleClickedPlainOption, $pickedOptions]) => {
+        const lastSourcePlainOption = $pickedOptions
+            .last()
+            .toArray()
+            .map(extractOptionFromElement)
+            .pop()
+
+        const doubleClickedOptionIsLast =
+            lastSourcePlainOption.value === doubleClickedPlainOption.value &&
+            lastSourcePlainOption.label === doubleClickedPlainOption.label
+
+        expect(doubleClickedOptionIsLast).to.equal(true)
+    })
+})
+
+Then('the item should be removed from the selected list', () => {
+    cy.all(
+        () => cy.get('@doubleClickedPlainOption'),
+        () => cy.get('{transfer-pickedoptions} {transferoption}')
+    ).should(([doubleClickedPlainOption, $pickedOptions]) => {
+        const pickedPlainOptions = $pickedOptions
+            .toArray()
+            .map(extractOptionFromElement)
+
+        const found = pickedPlainOptions.find(
+            (sourcePlainOption) =>
+                sourcePlainOption.value === doubleClickedPlainOption.value &&
+                sourcePlainOption.label === doubleClickedPlainOption.label
+        )
+
+        expect(found).to.not.equal(true)
+    })
+})

package/src/features/transferring-items.feature

@@ -0,0 +1,44 @@
+@component-transfer @transferring
+Feature: Transferring items between lists
+
+    Scenario: The user selects multiple items
+        Given some options are selectable
+        And some items in the options list are highlighted
+        When the user clicks the 'move to selected list' button
+        Then the highlighted items should be removed from the options list
+        And the highlighted items should be visible in the selected list
+        And the highlighted items should be appended to the selected list in the order they were highlighted
+
+    Scenario: The user deselects multiple items
+        Given some options are selected
+        And some items in the selected list are highlighted
+        When the user clicks the 'move to options list' button
+        Then the highlighted items should be removed from the selected list
+        And the highlighted items should be visible in the options list
+        And the highlighted items should be in the original options list ordering
+
+    Scenario: The user selects all items
+        Given some options are selected
+        When the user clicks the 'move all to selected list' button
+        Then all items should be removed from the options list
+        And all items removed from options list should be visible in the selected list
+        And the transferred items should be appended to the selected list in the order they were displayed in the options list
+
+    Scenario: The user deselects all items
+        Given some options are selected
+        When the user clicks the 'move all to options list' button
+        Then all items should be removed from the selected list
+        And all items removed from selected list should be visible in the options list
+        And the options list items should be ordered in the original order
+
+    Scenario: The user double clicks an item in the options list
+        Given some options are selectable
+        When the user double clicks an item in the options list
+        Then the item should be removed from its options list
+        And the item should be visible at the bottom of the selected list
+
+    Scenario: The user double clicks an item in the selected list
+        Given some options are selected
+        When the user double clicks an item in the selected list
+        Then the item should be removed from the selected list
+        And the options list items should be ordered in the original order

package/src/filter.js

@@ -0,0 +1,38 @@
+import { spacers } from '@dhis2/ui-constants'
+import { Field } from '@dhis2-ui/field'
+import { Input } from '@dhis2-ui/input'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Filter = ({ dataTest, filter, onChange, label, placeholder }) => (
+    <div data-test={dataTest}>
+        <Field label={label} name={dataTest} dataTest={`${dataTest}-field`}>
+            <Input
+                dense
+                dataTest={`${dataTest}-input`}
+                type="search"
+                placeholder={placeholder}
+                value={filter}
+                onChange={onChange}
+            />
+        </Field>
+
+        <style jsx>{`
+            div {
+                padding-bottom: ${spacers.dp8};
+            }
+
+            div:first-child {
+                padding-top: ${spacers.dp8};
+            }
+        `}</style>
+    </div>
+)
+
+Filter.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    filter: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    label: PropTypes.string,
+    placeholder: PropTypes.string,
+}

package/src/icons.js

@@ -0,0 +1,194 @@
+import { colors, theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import css from 'styled-jsx/css'
+
+const centerButtonStyles = css`
+    svg {
+        min-width: 20px;
+    }
+    div.centerButton:dir(rtl) {
+        transform: rotate(180deg) translateX(4px);
+    }
+`
+
+export const IconAddAll = ({ dataTest, disabled }) => (
+    <div className="centerButton">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+            fill={disabled ? theme.disabled : colors.grey800}
+        >
+            <g fillRule="evenodd">
+                <polygon
+                    fillRule="nonzero"
+                    points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
+                />
+
+                <polygon
+                    fillRule="nonzero"
+                    points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
+                />
+            </g>
+        </svg>
+        <style jsx>{centerButtonStyles}</style>
+    </div>
+)
+
+IconAddAll.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+}
+
+export const IconAddIndividual = ({ dataTest, disabled }) => (
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : colors.grey800}
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+        >
+            <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
+        </svg>
+        <style jsx>{centerButtonStyles}</style>
+    </div>
+)
+
+IconAddIndividual.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+}
+
+export const IconRemoveAll = ({ dataTest, disabled }) => (
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : colors.grey800}
+            width="16px"
+            height="16px"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g fillRule="evenodd">
+                <polygon
+                    fillRule="nonzero"
+                    points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
+                    transform="matrix(-1 0 0 1 20 0)"
+                />
+
+                <polygon
+                    fillRule="nonzero"
+                    points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
+                    transform="matrix(-1 0 0 1 7.06 0)"
+                />
+            </g>
+        </svg>
+        <style jsx>{centerButtonStyles}</style>
+    </div>
+)
+
+IconRemoveAll.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+}
+
+export const IconRemoveIndividual = ({ dataTest, disabled }) => (
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : colors.grey800}
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+        >
+            <polygon
+                points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
+                transform="matrix(-1 0 0 1 16 0)"
+            />
+        </svg>
+        <style jsx>{centerButtonStyles}</style>
+    </div>
+)
+
+IconRemoveIndividual.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+}
+
+export const IconMoveDown = ({ dataTest, disabled }) => (
+    <svg
+        fill={disabled ? colors.grey500 : colors.grey800}
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        data-test={dataTest}
+    >
+        <path d="M13.5303 8.53027L12.4697 7.46973L8.75 11.1895V2H7.25V11.1895L3.53027 7.46973L2.46973 8.53027L8 14.0605L13.5303 8.53027Z" />
+    </svg>
+)
+
+IconMoveDown.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+}
+
+export const IconMoveUp = ({ dataTest, disabled }) => (
+    <svg
+        fill={disabled ? colors.grey500 : colors.grey800}
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        data-test={dataTest}
+    >
+        <path d="M13.5303 7.46973L12.4697 8.53027L8.75 4.81055V14H7.25V4.81055L3.53027 8.53027L2.46973 7.46973L8 1.93945L13.5303 7.46973Z" />
+    </svg>
+)
+
+IconMoveUp.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+}
+
+export const IconMoveToTop = ({ dataTest, disabled }) => (
+    <svg
+        fill={disabled ? colors.grey500 : colors.grey800}
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        data-test={dataTest}
+    >
+        <path d="M13.5303 10.4697L12.4697 11.5303L8.75 7.81055V14H7.25V7.81055L3.53027 11.5303L2.46973 10.4697L8 4.93945L13.5303 10.4697ZM13.5303 6.46973L12.4697 7.53027L8 3.06055L3.53027 7.53027L2.46973 6.46973L8 0.939453L13.5303 6.46973Z" />
+    </svg>
+)
+
+IconMoveToTop.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+}
+
+export const IconMoveToBottom = ({ dataTest, disabled }) => (
+    <svg
+        fill={disabled ? colors.grey500 : colors.grey800}
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        data-test={dataTest}
+    >
+        <path d="M13.5303 5.53027L12.4697 4.46973L8.75 8.18945V2H7.25V8.18945L3.53027 4.46973L2.46973 5.53027L8 11.0605L13.5303 5.53027ZM13.5303 9.53027L12.4697 8.46973L8 12.9395L3.53027 8.46973L2.46973 9.53027L8 15.0605L13.5303 9.53027Z" />
+    </svg>
+)
+
+IconMoveToBottom.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+}

package/src/index.js

@@ -0,0 +1,2 @@
+export { Transfer } from './transfer.js'
+export { TransferOption } from './transfer-option.js'

package/src/left-footer.js

@@ -0,0 +1,22 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const LeftFooter = ({ children, dataTest }) => (
+    <div data-test={dataTest}>
+        {children}
+
+        <style jsx>{`
+            div {
+                flex-grow: 0;
+                border-top: 1px solid ${colors.grey400};
+                padding: 0 ${spacers.dp8};
+            }
+        `}</style>
+    </div>
+)
+
+LeftFooter.propTypes = {
+    children: PropTypes.node,
+    dataTest: PropTypes.string,
+}