feat: add dnd from dimensions to specific position in layout axis

packages/app/i18n/en.pot

@@ -44,6 +44,9 @@ msgid ""
 "items. Only the first {{maxNumber}} items will be used and saved."
 msgstr ""
 
+msgid "Search dimensions"
+msgstr ""
+
 msgid "Download"
 msgstr ""
 

packages/app/src/components/App.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 
+import DndContext from './DndContext'
 import Snackbar from '../components/Snackbar/Snackbar'
 import MenuBar from './MenuBar/MenuBar'
 import TitleBar from './TitleBar/TitleBar'
@@ -169,22 +170,24 @@ export class App extends Component {
                         </div>
                     </div>
                     <div className="section-main flex-grow-1 flex-ct">
-                        <div className="main-left">
-                            <DimensionsPanel />
-                        </div>
-                        <div className="main-center flex-grow-1 flex-basis-0 flex-ct flex-dir-col">
-                            <div className="main-center-layout">
-                                <Layout />
-                            </div>
-                            <div className="main-center-titlebar">
-                                <TitleBar />
+                        <DndContext>
+                            <div className="main-left">
+                                <DimensionsPanel />
                             </div>
-                            <div className="main-center-canvas flex-grow-1">
-                                {this.state.initialLoadIsComplete && (
-                                    <Visualization />
-                                )}
+                            <div className="main-center flex-grow-1 flex-basis-0 flex-ct flex-dir-col">
+                                <div className="main-center-layout">
+                                    <Layout />
+                                </div>
+                                <div className="main-center-titlebar">
+                                    <TitleBar />
+                                </div>
+                                <div className="main-center-canvas flex-grow-1">
+                                    {this.state.initialLoadIsComplete && (
+                                        <Visualization />
+                                    )}
+                                </div>
                             </div>
-                        </div>
+                        </DndContext>
                         {this.props.ui.rightSidebarOpen && this.props.current && (
                             <div className="main-right">
                                 <Interpretations

packages/app/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/AddToLayoutButton.js

@@ -30,7 +30,7 @@ export class AddToLayoutButton extends Component {
 
     onUpdate = axisId => {
         this.props.onAddDimension({
-            [this.props.dialogId]: axisId,
+            [this.props.dialogId]: { axisId },
         })
 
         this.props.onClick()

packages/app/src/components/DimensionsPanel/DimensionsPanel.js

@@ -1,19 +1,14 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import {
-    DimensionsPanel,
     DimensionMenu,
-    getDisallowedDimensions,
-    getAllLockedDimensionIds,
     DIMENSION_ID_ASSIGNED_CATEGORIES,
 } from '@dhis2/analytics'
 import PropTypes from 'prop-types'
 
 import DialogManager from './Dialogs/DialogManager'
-import { SOURCE_DIMENSIONS } from '../../modules/layout'
-import { setDataTransfer } from '../../modules/dnd'
+import DndDimensionsPanel from './DndDimensionsPanel'
 import * as fromReducers from '../../reducers'
-import * as fromActions from '../../actions'
 
 import { styles } from './styles/DimensionsPanel.style'
 import { AXIS_SETUP_DIALOG_ID } from '../AxisSetup/AxisSetup'
@@ -22,59 +17,36 @@ import {
     acAddUiLayoutDimensions,
     acRemoveUiLayoutDimensions,
 } from '../../actions/ui'
-import { sGetUiType } from '../../reducers/ui'
-import { createSelector } from 'reselect'
 
 export class Dimensions extends Component {
     state = {
         dimensionMenuAnchorEl: null,
         dimensionId: null,
     }
 
-    onDimensionOptionsClick = (event, id) => {
+    openOptionsMenuForDimension = (event, id) => {
         event.stopPropagation()
 
-        // set anchor for options menu
-        // open menu
         this.setState({
             dimensionMenuAnchorEl: event.currentTarget,
             dimensionId: id,
         })
     }
 
-    onDimensionOptionsClose = () =>
+    closeOptionsMenuForDimension = () =>
         this.setState({
             dimensionMenuAnchorEl: null,
             dimensionId: null,
         })
 
-    onDimensionDragStart = e => {
-        setDataTransfer(e, SOURCE_DIMENSIONS)
-    }
-
-    disabledDimension = dimensionId =>
-        this.props.disallowedDimensions.includes(dimensionId)
-
-    lockedDimension = dimensionId =>
-        this.props.lockedDimensions.includes(dimensionId)
-
     getNumberOfDimensionItems = () =>
         (this.props.itemsByDimension[this.state.dimensionId] || []).length
 
     render() {
         return (
             <div style={styles.divContainer}>
-                <DimensionsPanel
-                    dimensions={Object.values(this.props.dimensions)}
-                    selectedIds={this.props.selectedIds}
-                    disabledDimension={this.disabledDimension}
-                    lockedDimension={this.lockedDimension}
-                    recommendedDimension={dimensionId =>
-                        this.props.recommendedIds.includes(dimensionId)
-                    }
-                    onDimensionOptionsClick={this.onDimensionOptionsClick}
-                    onDimensionDragStart={this.onDimensionDragStart}
-                    onDimensionClick={this.props.onDimensionClick}
+                <DndDimensionsPanel
+                    onDimensionOptionsClick={this.openOptionsMenuForDimension}
                 />
                 <DimensionMenu
                     dimensionId={this.state.dimensionId}
@@ -96,48 +68,30 @@ export class Dimensions extends Component {
                     axisItemHandler={this.props.axisItemHandler}
                     removeItemHandler={this.props.removeItemHandler}
                     anchorEl={this.state.dimensionMenuAnchorEl}
-                    onClose={this.onDimensionOptionsClose}
+                    onClose={this.closeOptionsMenuForDimension}
                 />
                 <DialogManager />
             </div>
         )
     }
 }
 
-const getDisallowedDimensionsMemo = createSelector([sGetUiType], type =>
-    getDisallowedDimensions(type)
-)
-
-const getLockedDimensionsMemo = createSelector([sGetUiType], type =>
-    getAllLockedDimensionIds(type)
-)
-
 Dimensions.propTypes = {
     assignedCategoriesItemHandler: PropTypes.func,
     axisItemHandler: PropTypes.func,
-    dimensions: PropTypes.object,
-    disallowedDimensions: PropTypes.array,
     dualAxisItemHandler: PropTypes.func,
     getCurrentAxisId: PropTypes.func,
     itemsByDimension: PropTypes.object,
     layoutHasAssignedCategories: PropTypes.bool,
-    lockedDimensions: PropTypes.array,
-    recommendedIds: PropTypes.array,
     removeItemHandler: PropTypes.func,
-    selectedIds: PropTypes.array,
     ui: PropTypes.object,
-    onDimensionClick: PropTypes.func,
 }
 
 const mapStateToProps = state => ({
     ui: fromReducers.fromUi.sGetUi(state),
     dimensions: fromReducers.fromDimensions.sGetDimensions(state),
-    selectedIds: fromReducers.fromUi.sGetDimensionIdsFromLayout(state),
-    recommendedIds: fromReducers.fromRecommendedIds.sGetRecommendedIds(state),
     layout: fromReducers.fromUi.sGetUiLayout(state),
     itemsByDimension: fromReducers.fromUi.sGetUiItems(state),
-    disallowedDimensions: getDisallowedDimensionsMemo(state),
-    lockedDimensions: getLockedDimensionsMemo(state),
     layoutHasAssignedCategories: fromReducers.fromUi.sLayoutHasAssignedCategories(
         state
     ),
@@ -146,12 +100,10 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-    onDimensionClick: id =>
-        dispatch(fromActions.fromUi.acSetUiActiveModalDialog(id)),
     dualAxisItemHandler: () =>
         dispatch(acSetUiActiveModalDialog(AXIS_SETUP_DIALOG_ID)),
-    axisItemHandler: (dimensionId, targetAxisId, numberOfDimensionItems) => {
-        dispatch(acAddUiLayoutDimensions({ [dimensionId]: targetAxisId }))
+    axisItemHandler: (dimensionId, axisId, numberOfDimensionItems) => {
+        dispatch(acAddUiLayoutDimensions({ [dimensionId]: { axisId } }))
 
         if (numberOfDimensionItems > 0) {
             dispatch(acSetUiActiveModalDialog(dimensionId))
@@ -160,15 +112,12 @@ const mapDispatchToProps = dispatch => ({
     removeItemHandler: dimensionId => {
         dispatch(acRemoveUiLayoutDimensions(dimensionId))
     },
-    assignedCategoriesItemHandler: (
-        layoutHasAssignedCategories,
-        destination
-    ) => {
+    assignedCategoriesItemHandler: (layoutHasAssignedCategories, axisId) => {
         dispatch(
             layoutHasAssignedCategories
                 ? acRemoveUiLayoutDimensions(DIMENSION_ID_ASSIGNED_CATEGORIES)
                 : acAddUiLayoutDimensions({
-                      [DIMENSION_ID_ASSIGNED_CATEGORIES]: destination,
+                      [DIMENSION_ID_ASSIGNED_CATEGORIES]: { axisId },
                   })
         )
     },

packages/app/src/components/DimensionsPanel/DndDimensionItem.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Draggable } from 'react-beautiful-dnd'
+import { DimensionItem } from '@dhis2/analytics'
+
+import styles from './styles/DndDimensionItem.module.css'
+
+export class DndDimensionItem extends Component {
+    render = () => {
+        const {
+            id,
+            index,
+            name,
+            isSelected,
+            isLocked,
+            isDeactivated,
+            isRecommended,
+            onClick,
+            onOptionsClick,
+        } = this.props
+
+        const itemCommonProps = {
+            name,
+            isSelected,
+            isLocked,
+            isDeactivated,
+            isRecommended,
+        }
+
+        return (
+            <Draggable
+                draggableId={id}
+                index={index}
+                isDragDisabled={isSelected || isDeactivated || isLocked}
+            >
+                {(provided, snapshot) => (
+                    <>
+                        <DimensionItem
+                            innerRef={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            id={id}
+                            className={
+                                snapshot.isDragging ? styles.dragging : null
+                            }
+                            onClick={onClick}
+                            onOptionsClick={onOptionsClick}
+                            {...itemCommonProps}
+                        />
+                        {snapshot.isDragging && (
+                            <DimensionItem
+                                id={`dimension-item-clone-${id}`}
+                                className={styles.dimensionItemClone}
+                                {...itemCommonProps}
+                            />
+                        )}
+                    </>
+                )}
+            </Draggable>
+        )
+    }
+}
+
+DndDimensionItem.propTypes = {
+    id: PropTypes.string,
+    index: PropTypes.number,
+    isDeactivated: PropTypes.bool,
+    isLocked: PropTypes.bool,
+    isRecommended: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    name: PropTypes.string,
+    onClick: PropTypes.func,
+    onOptionsClick: PropTypes.func,
+}
+
+export default DndDimensionItem