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(sectionedForm): initial architecture and base components #431

Merged
merged 25 commits into from
Dec 2, 2024

Conversation

Birkbjo
Copy link
Member

@Birkbjo Birkbjo commented Nov 4, 2024

https://dhis2.atlassian.net/browse/DHIS2-18334

Implements base components for SectionedForms. These are forms with a sidebar, with links to different sections.
In a recent meeting it was decided we probably want to keep most section in a "scrollable"-view - ie. all fields should render.

This also implements some fields for dataSet "New"-forms, to showcase the use of the components.

  • Introduces a concept of formDescriptor. This is put in to context to allow sub-component to retrieve it.
    • The main purpose of this is to able to get labels for fields and sections, as well as describe which fields belong to what section.
    • I believe it's important to have the ability to imperatively be able to fetch which section a certain field belongs to. This is useful for showing error-indicators in the "Section-sidebar" to communicate to the user which section has errors. It's also useful to show a summary of errors fields - because previously the label was grabbed through the DOM, which is not really ideal.
    • The context also includes some helper-functions, to eg. get a field label. The structure needed to keep order of sections/fields, so regular keyed objects couldn't be used to key them.

Copy link

netlify bot commented Nov 4, 2024

Deploy Preview for dhis2-maintenance-app-beta ready!

Name Link
🔨 Latest commit 76840b1
🔍 Latest deploy log https://app.netlify.com/sites/dhis2-maintenance-app-beta/deploys/67486d2cfc9d3a0008676b22
😎 Deploy Preview https://deploy-preview-431--dhis2-maintenance-app-beta.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Birkbjo Birkbjo changed the title feat(sectionedForm): initial SectionedForm architecture feat(sectionedForm): initial architecture and base components Nov 6, 2024

export const FORM_SECTION_PARAM_KEY = 'section'

export const getSectionSearchParam = (section: string) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused

@codecov-commenter
Copy link

codecov-commenter commented Nov 7, 2024

Codecov Report

Attention: Patch coverage is 18.23204% with 148 lines in your changes missing coverage. Please review.

Project coverage is 58.77%. Comparing base (79a1892) to head (156b9bb).
Report is 5 commits behind head on master.

Files with missing lines Patch % Lines
src/lib/form/sectionedForm/useSelectedSection.ts 10.86% 41 Missing ⚠️
...ponents/sectionedForm/SectionedFormErrorNotice.tsx 0.00% 19 Missing ⚠️
...nents/sectionedForm/DefaultSectionedFormFooter.tsx 5.26% 18 Missing ⚠️
...rc/lib/form/sectionedForm/SectionedFormContext.tsx 14.28% 18 Missing ⚠️
src/components/form/DefaultFormErrorNotice.tsx 26.66% 11 Missing ⚠️
.../components/sectionedForm/SectionedFormSidebar.tsx 18.18% 9 Missing ⚠️
...c/components/sectionedForm/SectionedFormLayout.tsx 46.66% 8 Missing ⚠️
src/components/form/FormBase.tsx 0.00% 5 Missing ⚠️
src/components/form/useFormStateErrors.ts 28.57% 5 Missing ⚠️
...ents/sectionedForm/DefaultSectionedFormSidebar.tsx 16.66% 5 Missing ⚠️
... and 2 more
Additional details and impacted files
@@            Coverage Diff             @@
##           master     #431      +/-   ##
==========================================
- Coverage   60.67%   58.77%   -1.90%     
==========================================
  Files         210      221      +11     
  Lines        3354     3515     +161     
  Branches      750      766      +16     
==========================================
+ Hits         2035     2066      +31     
- Misses       1311     1441     +130     
  Partials        8        8              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@Birkbjo Birkbjo marked this pull request as ready for review November 11, 2024 18:32
* Update the selected section (in searchParams) based on the section that is in view
* This keeps the selected section in sync with the section that is in view.
*/
export const useSyncSelectedSectionWithScroll = () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not super happy about this, but I couldn't find a better way.

@flaminic flaminic force-pushed the feat/sectioned-form branch 2 times, most recently from 3536e6e to 0fc665a Compare November 28, 2024 07:42
@Birkbjo Birkbjo merged commit 74acd06 into master Dec 2, 2024
10 checks passed
@Birkbjo Birkbjo deleted the feat/sectioned-form branch December 2, 2024 13:22
dhis2-bot added a commit that referenced this pull request Dec 2, 2024
# [0.19.0](v0.18.0...v0.19.0) (2024-12-02)

### Features

* **sectionedForm:** initial architecture and base components ([#431](#431)) ([74acd06](74acd06))
@dhis2-bot
Copy link
Contributor

🎉 This PR is included in version 0.19.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants