Feature: Make repeating sections aka "Add multiple things"

[delaynesr]

Is your feature request related to a problem? Please describe. Need expressed for a feature that allows designers using the form builder to link question pages that can be repeated if the user (completing the form) specifies. This would be used, for example, to add the details of multiple tenants to a property, or adding past addresses. The same questions need to be answered for multiple entries. At the moment, the designer using the form builder has to make the series of pages over again which is labour intensive and creates an unnecessarily long form that is hard to digest in the current designer interface.

Describe the solution you'd like Adding the ability to make linked question pages into a repeating section. The idea is to make the section repeat, since this is a feature already in the designer that groups pages. I am suggesting adding a simple checkbox to the "Add a new section" page and the "Edit section" page which would make the pages in the given section repeat until the user decides to stop adding information. In the future, there will probably need to be settings designed for this, such as setting the maximum number of entries a user can make. I haven't applied this to the design yet though. There will also need to be notifications to tell the designer using the form builder that a particular section is repeating and indication on the main designer interface the signify what sections are repeating. I have made some design suggestions for how we could do this below. You will notice some changes to other parts of creating and managing/editing section tasks but I will outline these in a separate post.

New design with make repeating section feature

Additional Comments GDS - "Add multiple things": https://design.homeoffice.gov.uk/patterns/add-multiple-things

In the process of designing this feature, I have made adjustments/design suggestions for the whole process of creating and managing sections. TBC for linked post containing this info.

[jenbutongit]

I've done a spike into this.. it's a bit of a monster but manageable. There are a few refactors that are necessary otherwise it would bloat the PR.

To do:

Section definition / class

• Add a new property to sections, .isRepeating
• The class would contain a few methods to help with processing/rendering
  • Section.isRepeating
  • Section.firstPage - to help determine where to loop the user back to. This will be dynamically calculated
  • Section.lastPage - to help determine where to loop the user back to. This will be dynamically calculated
  • Section.getSummaryViewModel - To render the mini summary page after an iteration is complete
  • Section.getSummaryDetailItem - To render the blocks on the end summary page
  • The class is to be registered on a Page, and in a Sections class, which will be registered to the FormModel.
    • e.g. PageControllerBase.section and FormModel.sections
    • Sections will contain all sections, and contain Sections.get(..) which is a Map<string, Section>, where string is the section name.
    • Sections will recursively create sections from a start page and form model.
  • Both Section and Sections will have a _PAGES property, which is a Map<string, PageControllerBase>, to help with accessing pages. They will be references from FormModel.

State changes

Currently, the state appears like so

{
  caz: "Bristol",
  registration: { // section called "registration"
    registrationNumber: "OUTATIME",
    registrationDate: "1985-10-01",
    colour: "silver",
  },
};

When a section is repeated, the state will appear as an array

{
  caz: "Bristol",
  registration: [{ 
    registrationNumber: "OUTATIME",
    registrationDate: "1985-10-01",
    colour: "silver",
  },
  { 
    registrationNumber: "OU7A7IM3",
    registrationDate: "2000-10-01",
    colour: "red",
  }],
};

Mini summary

• A mini summary needs to be displayed to the user. It will allow users to delete iterations, change values, add another, or continue.
• A PageController to render these pages
• A new route /{formId}/{sectionName}/summary

Summary page

• Render the repeated sections
• Refactor the SummaryViewModel. It is tightly coupled with the output models, but shouldn't be. There are quite a few nested iterations which make it confusing/difficult to work with when dealing with the new state format mentioned above
  • This will need some tests to make sure it does not break after changes.
  • The SummaryViewModel should just be responsible for generating what is needed to render the summary view.

https://github.com/XGovFormBuilder/digital-form-builder/assets/22080510/4e5fae43-c978-4d0b-9189-ccd4a0f3ad9d