Skip to content

Components: Implemented single select and text input components#3

Merged
natalialuzuriaga merged 4 commits intomainfrom
nat/more-components
Dec 13, 2024
Merged

Components: Implemented single select and text input components#3
natalialuzuriaga merged 4 commits intomainfrom
nat/more-components

Conversation

@natalialuzuriaga
Copy link
Copy Markdown
Contributor

Problem

Currently, the form only supports text fields. For collect information for fields like laborHours, vcs, and status, we need to implement more components.

Solution

This PR implements all single select and text input components. Now the form can create the following components:

  • Number
  • Radio
  • Text Fields

Result

Users can generate forms using json schemas that have fields with type: string, 'type: number' and 'enum'.

When users fill out the form and click submit, the code.json is generated and downloaded onto their machine.

Test Plan

  1. Start up a HTTP server using python: python3 -m http.server 8000
  2. Click on form.html
  3. Here is the form! Right click -> Inspect to open dev tools
  4. Fill out the form
  5. Click submit and downloads code.json. File contents should match what was submitted in the form!

Will create unit tests in a separate PR after OSAB

Signed-off-by: Natalia Luzuriaga <natalia.luzuriaga@cms.hhs.gov>
@natalialuzuriaga natalialuzuriaga marked this pull request as ready for review December 11, 2024 20:06
@natalialuzuriaga natalialuzuriaga changed the base branch from main to nat/mvp December 11, 2024 20:07
@natalialuzuriaga natalialuzuriaga changed the base branch from nat/mvp to main December 11, 2024 20:08
switch (fieldObject["type"]) {
case "string":
var componentType = determineType(fieldObject);
switch (componentType) {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

love the use of a switch here 👍

Copy link
Copy Markdown
Collaborator

@sachin-panayil sachin-panayil left a comment

Choose a reason for hiding this comment

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

tested and it looks and works great! one minor suggestion is that maybe there could be some visual differentiation when the textField is type: String and type: Number

@natalialuzuriaga
Copy link
Copy Markdown
Contributor Author

tested and it looks and works great! one minor suggestion is that maybe there could be some visual differentiation when the textField is type: String and type: Number

For sure, noted! Will address when I start working on the form styling more

@natalialuzuriaga natalialuzuriaga merged commit 6249dc5 into main Dec 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants