Required component set

[HendrikThePendric]

We should discuss and document which components are needed in this repo. I will suggest a list below, which can be be discussed and edited until we are all happy with it:

• [x] Switch: Toggle a single property false/true
• [x] Checkbox: Toggle a single property false/true
• [x] RadioGroup: Select a single value from a short list of options (use a select if there is a longer list)
• [x] CheckboxGroup: Select multiple values from a short list of options (use a multi-select if the list is longer)
• [x] SingleSelect: Select a single value from a list of options (if the list of options is very long a searchable select would be preferred)
• [x] MultiSelect: Select multiple values from a list of options (if the list of options is very long a searchable select would be preferred)
• [ ] SearchableSelect: Select a single value or multiple values from a long list. Should include a text input for filtering, and quite likely support async searching.
• [x] Input / InputField: Enter a single line of text, a password, email, number, url
• [x] TextArea: Enter multiple lines of text
• [ ] RichText: Enter multiple lines of formatted text
• [ ] FormulaEditor: Edit a formula (text)
• [ ] Expression manager: Edit an expression (text)
• [x] File: Upload a file
• [ ] DatePicker: Pick a date (perhaps incl. support for time and date/time)
• [ ] PeriodPicker: Select a single period
• [ ] PeriodSelector: Select multiple periods
• [ ] OrgUnitTree: Select a single, or multiple org-units
• [ ] Coordinate/Location: x,y coordinates for a location. Possible to be entered manually or picked from a map inside a modal dialog.
• [ ] Polygon: similar to x,y coordinates, but this is a set of coordinates that form a polygon on a map. Picked from a map, not possible to enter manually.
• [ ] Age: currently this is handled with a frankenstein combo of a date selector (date of birth) and several number inputs (46 years, 10 months, 2 days). This is a tough component because a lot of patients do not know their date of birth, so a simple calendar/date input does not fulfill requirements, there needs to be functionality for approximate values. (Of course, you could approximately pick from a calendar, but that has proven unintuitive).
• [ ] Photo/image: technically a subset of the File type you listed above, but different in how it is displayed: a thumbnail is shown when an image is set / is selected for upload.
• [ ] Time: I saw you mentioned this on the datePicker, just a note to say we definitely do need a date/time and time only input.

Obviously, for some of these there is still a long road ahead, but I just wanted to make this a comprehensive list.

Reg. multi-select: as @cooper-joe @Mohammer5 and I discussed on Slack, we already have multi-select component, which is the GroupEditor.

---

Edit (by @Mohammer5):

I converted the list of this issue into a checkbox list. Let's make this a living issue that reflects the current state of development and decision making.

---

Edit (by @HendrikThePendric):

Added the points that @cooper-joe suggested to the living list

---

Edit (by @HendrikThePendric) (9-12-2019):

Updated the list to reflect the current progress (PR still in review ATM)

[cooper-joe]

Great work @HendrikThePendric, it's good to get an overview of what will be included. I've been working in the old/new Tracker apps and I've seen some other types of data being captured there. I'm not sure if they are generic enough to be included in ui-forms, but for discussion:

• Coordinate/Location: x,y coordinates for a location. Possible to be entered manually or picked from a map inside a modal dialog.
• Polygon: similar to x,y coordinates, but this is a set of coordinates that form a polygon on a map. Picked from a map, not possible to enter manually.
• Age: currently this is handled with a frankenstein combo of a date selector (date of birth) and several number inputs (46 years, 10 months, 2 days). This is a tough component because a lot of patients do not know their date of birth, so a simple calendar/date input does not fulfill requirements, there needs to be functionality for approximate values. (Of course, you could approximately pick from a calendar, but that has proven unintuitive).
• Photo/image: technically a subset of the File type you listed above, but different in how it is displayed: a thumbnail is shown when an image is set / is selected for upload.
• Time: I saw you mentioned this on the datePicker, just a note to say we definitely do need a date/time and time only input.

There are some other defined types such as URL, Email, but they could be handled with validation on a text-input.

[Mohammer5]

I've found the following 2 input groups in the import-export app, we need to think about how we'd structure the component api to allow this while keeping everything being flexible. Ideally this is something that's not built into the component and is simple to set up with what ui-forms provides:

grouped sections with headline:

(it has select all / deselect all buttons)

Multi-select with checkboxes:

(it has select all / deselect all buttons)

[HendrikThePendric]

Thanks for providing that example @Mohammer5

Ideally this is something that's not built into the component and is simple to set up with what ui-forms provides:

I agree that that this type of component should be a custom form component that is easy to build. However, I disagree that is should be build from components in ui-forms. I would like to use this distinction:

• Components in ui-forms, by definition, are ready to use as a component prop on a Field. They are stand-alone and fully composed of components from ui-core. ui-forms should not expose building-blocks to build custom form-components with
• ui-core should contain all the building blocks to easily construct a custom form-component with, in the similar way that the components in ui-forms have been built.

[Mohammer5]

@HendrikThePendric sorry for not making that clear, I 100% agree with you! Just wanted to say that ui-forms shouldn't put a spoke in the dev's wheel and should offer components that are effortlessly composable with ui-core/ui-widget