Parent-Children Chips System with auto Select/Unselect

[eliot1]

Want to create a chip system where users can select parent and children tags.
With this constraints:

• When a parent category is selected, all its children are selected too
• When the last of child of a parent is unselected, the parent is unselected too

Initial Setup

• 2 Types related in database
  • Level 1 (parent) can have n Level 2 in a sub field
  • Level 2 (child) is related to only one Level 1 in a parent field
• 2 Repeating Group on the page with respectively Search for Level 1 / Level 2
• 1 Custom state levelsIndex to store the chips selected by the users (this CS is placed on the page Index)

Setting the right state on click

• When Level 1 is clicked and Level 1 is not already selected:

  • Index’s levelsIndex doesn’t contain Current Cell’s Level 1 unique id
  • Set State: add a string with the parent id and all its children id before a level 1 separator and the rest of the custom state value
    
    

• When Level 1 is clicked and Level 1 already selected:

  • Index’s levelsIndex contains Current Cell’s Level 1 unique id
  • Set State: remove the entire string that starts with the parent id until the level 1 separator
    
    

• When Level 2 is clicked and it’s the first Level 2 among its parent Level 2 list

  • Index’s levelsIndex doesn’t contain Current Cell’s Level 2 unique id AND index’s levelsIndex doesn’t contain Current Cell’s Level 2 parent’s unique id
  • Set State: add a string with the parent id and only this child id before a level 1 separator and the rest of the custom state value
    
    

• When Level 2 is clicked and it’s not the first Level 2 among its parent Level 2 list

  • Index’s levelsIndex doesn’t contain Current Cell’s Level 2 unique id AND index’s levelsIndex contains Current Cell’s Level 2 parent’s unique id
  • Set State: find the parent id and add this child id before the other children
    
    

• When Level 2 is clicked and it’s already selected

  • Index’s levelsIndex contain Current Cell’s Level 2 unique id
  • 3 set state in a row:
    • remove the id if in the middle or at the end of the list
      
      
    • remove the id if at the first place in the list but not the only child left
      
      
    • remove the id if at the first place in the list and the only child left
      
      

Display the custom state values

To display the result use 2 Repeating Group

• The first one to display the list of Level 1. Search for Level 1 with id in the list of the custom state value completely splitted
  

  

• The second nested in the first one to display the list of Level 2 within Level 1. Search for Level 2 with id in the list of the custom state value completely splitted AND with a parent equal to the Current Cell’s Level 1
  

  

And here the result: