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.

Sign up for GitHub

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

Jump to bottom

Implement repeating group (editgrid) #36

Open
1 of 15 tasks
joeribekker opened this issue May 8, 2023 · 0 comments · May be fixed by #85
Open
1 of 15 tasks

Implement repeating group (editgrid) #36

joeribekker opened this issue May 8, 2023 · 0 comments · May be fixed by #85
Assignees
@sergei-maertens

Comments

@joeribekker
Copy link

joeribekker commented May 8, 2023 •
edited by sergei-maertens
Loading

See also: open-formulieren/open-forms#2441

Tasks

  • Implement React primitives/components
  • Find solution for icon library
  • Implement formio component + its features

Expected properties/features

  • Nested components
  • label
  • key
  • groupLabel
  • description
  • tooltip
  • hideLabel
  • disableAddingRemovingRows
  • addAnother (text)
  • saveRow (text)
  • removeRow (text)
  • Evaluating logic for an item inside the list of items
@sergei-maertens sergei-maertens self-assigned this Mar 11, 2025
@sergei-maertens sergei-maertens moved this from Todo to In Progress in Development Mar 11, 2025
sergei-maertens added a commit that referenced this issue Mar 11, 2025
@sergei-maertens
✨ [#36] Port EditGrid building blocks from SDK
fcd3dc9 
This an almost verbatim copy of the EditGrid components, with some
re-organized SCSS and improved documentation.
@sergei-maertens sergei-maertens linked a pull request Mar 11, 2025 that will close this issue
Draft
sergei-maertens added a commit that referenced this issue Mar 12, 2025
@sergei-maertens
➕ [#36] Add font-awesome dependency for icons
245e909 
It's a bit annoying that the icon library leaks down into everything,
but for the time being we're not planning on supporting other icons.

It would be possible to refactor this in the future to make it more
pluggable, so the code to include an icon will be generalized a bit
to make that clear.

It's up to the downstream project to ensure the necessary stylesheets
are loaded - we leave that out of scope because the complexities of
font assets paths are a headache.
sergei-maertens added a commit that referenced this issue Mar 12, 2025
@sergei-maertens
✨ [#36] Add an MVP icon library support implementation
a3bf3b3 
For the time being, we stick to font-awesome, but it should possible
in the future to bring in your own SVG-based icons to render or
alternative libraries, so the Icon component has been named in a
generic way to make future expansion more natural.

Plenty of challenges there that we will *not* tackle right now.
sergei-maertens added a commit that referenced this issue Mar 12, 2025
@sergei-maertens
✨ [#36] Ensure edit grid add button has 'add' icon
46d3d93
sergei-maertens added a commit that referenced this issue Mar 12, 2025
@sergei-maertens
⚗️ [#36] Experiment with FieldArray encapsulation
4bd5d5d
sergei-maertens added a commit that referenced this issue Mar 12, 2025
@sergei-maertens
✨ [#36] Encapsulate in FieldArray
1757a89 
The editgrid state is now encapsulated in FieldArray, which provides the
helpers to update/replace individual items at a particular index and/or
remove them. It's up to the developer to still properly provide the
array of items, using the same source of form state, but this allows
automatic wrapping in EditGridItem components so that the implementation
details don't have to leak to the outside too much.

This actually unlocks a new feature where we can make per-item decisions
about which controls for saving/removing are available, a thing we need
for the appointment flow with products where you cannot remove the only
product if there's only one.

To enable adding items, only a blueprint/blank item needs to be provided
as a prop (which can also change depending on the state, that's up to
the outer component). Providing `null` for this blueprint disables the
add button.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sergei-maertens sergei-maertens

Labels
None yet
Projects
Development
Status: In Progress
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Implement editgrid (repeating groups) - part 1 open-formulieren/formio-renderer
2 participants
@joeribekker @sergei-maertens