feat: add vertical tab rendering of sections in a data set #389
Conversation
|
🚀 Deployed on https://pr-389--dhis2-data-entry.netlify.app |
| @@ -11,12 +12,17 @@ export const SectionForm = ({ dataSet, globalFilterText }) => { | |||
| ? dataSet.sections.filter((s) => s.id === sectionId) | |||
| : dataSet.sections | |||
|
|
|||
| const { displayOptions: displayOptionString } = dataSet | |||
| const displayOptions = | |||
| displayOptionString && JSON.parse(displayOptionString) | |||
There was a problem hiding this comment.
handle the JSON.parse
…n the wrong format
flaminic
force-pushed
the
DHIS2-17506/vertical-and-horizontal-tabs
branch
from
c00171e to
09e253b
Compare
There was a problem hiding this comment.
looks great to me! I like how you've achieved this with some css updates, so that we don't need to wait on a ui change for now 😎
I assume that you'd going to merge this after the backend change? If we're also updating the maintenance app, it would be nice to update the maintenance app to differentiate between the tab orientation and the "Render vertically" option (which is not relevant to the Data Entry Beta App because it only applies to multi-orgunit forms which are not implemented in the newer app). Otherwise, I guess people could potentially get confused between these.
|
🎉 This PR is included in version 100.6.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Implements DHIS2-17506.
This PR switched the direction of a dataset section tabs if the user has configures the dataset this way (in separate PR).
Implementation details
The displayOptions was added as a JSON type in the BE to allow us flexibility to add more options without updating the back-end, similarly to what was done for sections. See discussion in dhis2/dhis2-core#16562
In the end, I played a bit with the CSS to diplay vertical tabs without having to touch the UI library. Once we get comfortable with the API and UI, and once we get confirmation from design that this should go into the UI library, we can move it.
Background
We are aiming to add more form configuration options as part of an initiative to provide configurations natively to data entry forms to reduce the necessity for custom forms. Users are currently building custom forms as a workaround for shortcomings of the configuration options (ability to transpose, or customise a cell design) or implementation (such to avoid issues with RTL issues).
This is an RFC that describes the approach and the priorities for form configuration options. This is based on a thorough investigation by the functional design team for custom form use cases in real-life implementations. Based on that investigation, the ability to show section tabs vertically were one of the main reasons people choose to go the custom forms route so we're tackling these first.
UI
The ui is still work in progress but it will look like similar to this:
Screen.Recording.2024-06-25.at.16.05.35.mov
Related PRs:
backend
maintenance app