Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Conversation

jenniferarnesen
Copy link
Collaborator

@jenniferarnesen jenniferarnesen commented Jan 28, 2020

In order to drag/drop a dimension item from the dimension panel to a specific position in a layout axis, both the dimension panel and the layout components need to share the same dnd library (react-beautiful-dnd "rbd").

  • The rbd context has been moved up in the hierarchy to App.js, to contain both the dimension panel and layout as children, so they can drag/drop to each other
  • DndContext component sets up the rbd context and handles the drop events
  • Created custom dnd dimension panel/list/item components to properly configure rbd
  • DimensionsPanel is simpler, as all the item properties have been moved to the DndDimensionList component
  • DndDimensionItem sets up a clone item that will stay in the Dimension Panel while the original item is being dragged (due to rbd not supporting this "toolbox" behaviour out-of-the-box)
  • styles for the dnd dimension list and panel are copied from the shared components in @dhis2/analytics

Implements [DHIS2-8121]

@jenniferarnesen
Copy link
Collaborator Author

@edoardo I've added new commits to implement your suggestions, use css modules and add some tests.

@jenniferarnesen jenniferarnesen changed the title [WIP] feat: add dnd from dimensions to specific position in layout axis feat: add dnd from dimensions to specific position in layout axis Jan 29, 2020
@jenniferarnesen jenniferarnesen merged commit 7c573b7 into epic/merge-dv-and-pt-apps-DHIS2-7687 Jan 30, 2020
@jenniferarnesen jenniferarnesen deleted the feat/react-dnd-between-layout-dimpanel branch January 30, 2020 05:43
dhis2-bot added a commit that referenced this pull request Feb 12, 2020
# [33.0.0](v32.0.3...v33.0.0) (2020-02-12)

### Bug Fixes

* @dhis2/analytics 2.6.11 ([#448](#448)) ([231bcd8](231bcd8))
* added icons to tooltip for warning and locked ([#447](#447)) ([26a95e8](26a95e8))
* added lint, commit message and test commit/push hooks ([#526](#526)) ([0292a63](0292a63))
* adjust options dialog for easier scanning ([#580](#580)) ([b0393ff](b0393ff))
* assigned categories and new dimension types ([#576](#576)) ([2faae50](2faae50))
* avoid infinite loading and make chart plugin use hooks (DHIS2-8290) ([#653](#653)) ([9de60dd](9de60dd))
* avoid React warning about required proptype ([#311](#311)) ([5dda862](5dda862))
* changed height to min-height for the axes area ([#361](#361)) ([8c0ed13](8c0ed13))
* changed incorrect prop types and tests ([#372](#372)) ([c96ac09](c96ac09))
* chip cursor ([#566](#566)) ([8701256](8701256))
* convert numeric options to strings to silence ui-core warnings ([#617](#617)) ([c3fe18d](c3fe18d))
* correctly set showDimensionLabels option ([#621](#621)) ([01427ac](01427ac))
* d2-ui-analytics 1.0.2 ([#277](#277)) ([62241f8](62241f8))
* dashboard items resize should trigger chart reload ([#282](#282)) ([86070ae](86070ae))
* dimension dialog update validation ([#486](#486)) ([429c51e](429c51e))
* dimensions panel divided in to sections ([#581](#581)) ([3a9627a](3a9627a))
* do not run default adapter for pivot tables ([#616](#616)) ([27d8ab7](27d8ab7))
* don't render pivot table before data has loaded ([#635](#635)) ([844d989](844d989))
* download menu options for PT ([#624](#624)) ([c131970](c131970))
* dynamic axis names based on vis type ([#623](#623)) ([24510e0](24510e0))
* equal padding for the AO title bar ([#567](#567)) ([17238ed](17238ed))
* Fetching analytics for analytical object with undefined aggregationType in plugin ([#232](#232)) ([bfe41b4](bfe41b4))
* Fetching analytics for year over year charts in plugin ([#231](#231)) ([16853ef](16853ef))
* fix prop type for value in SortOrder option component ([#568](#568)) ([8379621](8379621))
* fix styling issues in options ([#585](#585)) ([d4c5bc6](d4c5bc6))
* fix values for topLimit option ([#579](#579)) ([3d249a6](3d249a6))
* fixes for DND between axes ([#554](#554)) ([886de23](886de23))
* fixes for options with numeric values and toggleable Select ([#583](#583)) ([8a40296](8a40296))
* gauge now follows the behaviour of single value instead of pie ([#489](#489)) ([9969e61](9969e61))
* gauge plot lines and range values in options ([#654](#654)) ([7736b29](7736b29))
* i18n merge conflict ([ac8c383](ac8c383))
* impl max dims rule ([#517](#517)) ([241de69](241de69))
* implemented the error code for assigned categories ([#557](#557)) ([7b9f52b](7b9f52b))
* layout for pivot tables ([#577](#577)) ([033be21](033be21))
* loading spinner for plugins (DHIS2-8117) ([#587](#587)) ([f8be30b](f8be30b))
* locked dims not array ([#491](#491)) ([15ae8a8](15ae8a8))
* long names for dimensions, chip and tooltip (DHIS2-7932) ([#556](#556)) ([2212398](2212398))
* manifest credentials bug in chrome ([#233](#233)) ([a0032e0](a0032e0))
* map is not vis type ([#371](#371)) ([22c36e2](22c36e2))
* merge conflicts ([3eb1c77](3eb1c77))
* only point series to axes for certain types ([#264](#264)) ([24b6ac0](24b6ac0))
* only run empty check after all values have been added ([#627](#627)) ([75b6ae4](75b6ae4))
* open modal for empty dims ([#625](#625)) ([e07d786](e07d786))
* options with numeric values (sortOrder) ([#564](#564)) ([94ad11d](94ad11d))
* org unit selector - only act on path if it exists ([#276](#276)) ([9299038](9299038))
* pie tooltip DHIS2-7532 ([#330](#330)) ([72eb5db](72eb5db))
* pin to analytics@2.6.11 ([#495](#495)) ([5f21406](5f21406))
* pin to analytics@2.6.11 ([#495](#495)) ([25b4545](25b4545))
* properly set layout on vis type change for all vis types ([#586](#586)) ([489fbf9](489fbf9))
* provide useful error messages (DHIS2-5029) ([#552](#552)) ([ef16c68](ef16c68))
* remove api.baseUrl duplicate ([#573](#573)) ([ac05af6](ac05af6))
* remove code climate config for now ([80c891a](80c891a))
* remove colon from chip if no selection ([#312](#312)) ([e667134](e667134))
* remove custom title when Auto is selected (DHIS2-8252) ([#636](#636)) ([44ed1a5](44ed1a5))
* remove ripple effect in dimension list when drag starts/ends ([#584](#584)) ([c91ed3b](c91ed3b))
* rename axis name constants ([#445](#445)) ([b75967a](b75967a))
* rules dim handling ([#446](#446)) ([445f1d8](445f1d8))
* single value without dx items ([#313](#313)) ([f1fbe22](f1fbe22))
* start screen icons ([#558](#558)) ([841c9c7](841c9c7))
* swap full axis dims to filter ([#518](#518)) ([a79e329](a79e329))
* tooltip message ([#449](#449)) ([ca55b7e](ca55b7e))
* turn class vars into functions ([#569](#569)) ([236885b](236885b))
* ui glitches ([#618](#618)) ([2788daf](2788daf))
* ui updates to the start screen ([#548](#548)) ([20dd6ca](20dd6ca))
* ui updates to the start screen ([#548](#548)) ([fee2153](fee2153))
* update @dhis2/analytics dependency ([#319](#319)) ([5752bea](5752bea))
* update analytics and plugin dep ([#324](#324)) ([8bb0202](8bb0202))
* update charts api dep ([#297](#297)) ([ab13e1c](ab13e1c))
* update gradient colors check ([#261](#261)) ([b39cec2](b39cec2))
* update plugin dependency ([#318](#318)) ([452a287](452a287))
* update plugin version ([#320](#320)) ([3921334](3921334))
* update recuder to handle empty axes ([#630](#630)) ([077dd68](077dd68))
* updated proptype for error ([#553](#553)) ([21a9b4a](21a9b4a))
* upgrade @dhis2/analytics to fix dimension dialog styling ([#551](#551)) ([c90f2b8](c90f2b8))
* upgrade @dhis2/cli-app-scripts and use platform-provided height ([#550](#550)) ([b6ffdfb](b6ffdfb))
* upgrade cli-app-scripts to fix package resolution ([#540](#540)) ([a52f7f3](a52f7f3))
* use a doc-like icon for PT downloads ([#626](#626)) ([a407372](a407372))
* use axisName instead of axisKey ([204fe7a](204fe7a))
* use layout type to get the right layout comp ([#563](#563)) ([17c26ba](17c26ba))
* use locked dimensions rule from analytics ([#444](#444)) ([883304f](883304f))
* use max items rule ([#373](#373)) ([ded0ee9](ded0ee9))
* use shared vis types ([#368](#368)) ([26d12c6](26d12c6))
* viewport layout with visible interpretations panel ([#323](#323)) ([2e2803b](2e2803b))
* vis type imports ([#496](#496)) ([2a1daaf](2a1daaf))

### chore

* **github-actions:** add workflows for lint and publish ([#638](#638)) ([739bb13](739bb13))

### Features

* add dnd from dimensions to specific position in layout axis ([#575](#575)) ([7c573b7](7c573b7))
* assigned categories DHIS2-7701 ([#539](#539)) ([636b365](636b365))
* drag 'n drop for reordering dimension items in layout ([#519](#519)) ([efd4acb](efd4acb))
* dual axis support ([#239](#239)) ([a50075c](a50075c))
* multiple orgunit roots support ([#328](#328)) ([e85668f](e85668f))
* show most viewed saved AO (DHIS2-7835) ([#547](#547)) ([97b0622](97b0622))
* summarize chart filters that have orgunit levels and/or groups ([#298](#298)) ([e5e0a7b](e5e0a7b))
* use layout rules for add-to-layout ui ([#362](#362)) ([a3dbb9f](a3dbb9f))
* use new pivot engine ([#574](#574)) ([f4ccef1](f4ccef1))
* WIP pivot table type ([#335](#335)) ([626f447](626f447))

### Reverts

* Revert "fix: use lerna to share code instead of copying resources (#214)" (#216) ([de00b4f](de00b4f)), closes [#214](#214) [#216](#216)

### BREAKING CHANGES

* **github-actions:** Ensure that the plugin and app versions are locked to each other.
@dhis2-bot
Copy link
Contributor

🎉 This PR is included in version 33.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@alariqi alariqi restored the feat/react-dnd-between-layout-dimpanel branch September 6, 2021 16:50
@jenniferarnesen jenniferarnesen deleted the feat/react-dnd-between-layout-dimpanel branch June 6, 2023 12:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

Successfully merging this pull request may close these issues.

None yet

3 participants