Create a Dynamic Form

[mattbatman]

We need to create a dynamic form component that can consume the response data from the queries (as described in #3) and populate itself with the correct fields. This will also involve making components for each individual field.

Handle Field Types

• Location selection (maybe just add an address input field)
• Input
• Text area
• Single drop-down selection
• Multi-selection drop-down
• Handle date inputs
• Media upload
• Make sure each field is compliant with React forms (e.g. controlled components where necessary)

API Interaction

On Load

• Make a call to the serviceDefinition if metadata was true (or undefined or null) in the call for serviceList
• Merge the response with the list of default fields

On Submit

• Make a call to the API to post

Styling

• Fields should be styled in a manner that are a functional, aesthetically pleasing, and consistent with the existing site
• Handle and display an errors received after an attempted post
• List fields in the correct order
• List fields in a logical group

[mattbatman]

I think the two most time intensive things left to do for the form before Tuesday night will be:

1. create/handle the Google map location selection
2. do something to for CAPTCHA (I think they use this

The other significant items remaining, I think, are just:

1. wire in the fields from our serviceDefinition once the return type is fixed
2. handle checkbox or multi-value selection fields
3. make a POST on form submission

[matt-a-t]

I was testing tonight, and I could not get multi-value selection fields to recognize more than one value in the api. I added a switch in to handle multivalue types in the same way as singlevalue types in the dropdown.

I also made some changes to the file submission process. When a file is uploaded it is sent to a Cloudinary account and the url of the image is returned. This will be submitted in the POST request as the media_url parameter, and is saved in the state of the Form that is currently returned on media submit.

This likely still needs some styling and we still need to resolve the POST request.

[mattbatman]

@dpalazz I saw your comment in the routing ticket. I'd say take your pick of:

• getting select (and multi-select) form fields to work
  • I was leaning towards installing react-select
• handling address/location input
  • they used a Google map picker thing
• handling date input
• creating a form POST on submit
• general form styling

[matt-a-t]

Multi-select form fields are working as well as they can with the API. The documentation says that multiple values can be submitted as attribute[code]=value&attribute[code]=value, but using Postman I was only able to get the last entry recognized by their server. So I have it handled in the same way as the singlevalue type in a dropdown menu.

[mattbatman]

I can look at this in-depth later tonight, but I do think there's a general bug somewhere on our current select set-up. I was messing around with this and I think that one of the multi-select fields was inserting values into a texarea.

[dpalazz]

When you say getting those select fields to work - what do you mean exactly? In the meantime I will look into the handling address/location input.

…

On Mon, Apr 16, 2018 at 5:39 PM, Matt Batman ***@***.***> wrote: @dpalazz <https://github.com/dpalazz> I saw your comment in the routing ticket. I'd say take your pick of: - getting select (and multi-select) form fields to work - I was leaning towards installing react-select <http://jedwatson.github.io/react-select/> - handling address/location input - they used a Google map picker thing - handling date input - creating a form POST on submit - general form styling — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANAHSlL2NJKrrJgWEiwR69PePesPwnGtks5tpQ-ogaJpZM4TSueW> .

[dpalazz]

Is anyone working on the app right now? On Mon, Apr 16, 2018 at 7:52 PM, Dana Palazzo <danapalazzo1@gmail.com> wrote:

…

When you say getting those select fields to work - what do you mean exactly? In the meantime I will look into the handling address/location input. On Mon, Apr 16, 2018 at 5:39 PM, Matt Batman ***@***.***> wrote: > @dpalazz <https://github.com/dpalazz> I saw your comment in the routing > ticket. I'd say take your pick of: > > - getting select (and multi-select) form fields to work > - I was leaning towards installing react-select > <http://jedwatson.github.io/react-select/> > - handling address/location input > - they used a Google map picker thing > - handling date input > - creating a form POST on submit > - general form styling > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#4 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ANAHSlL2NJKrrJgWEiwR69PePesPwnGtks5tpQ-ogaJpZM4TSueW> > . >

[mattbatman]

I just started to.

[dpalazz]

I was able to display the map using react-location-picker. Now we just need to translate that into the form submission. Are you working on that part yet (handlesubmit)?

…

On Mon, Apr 16, 2018 at 8:58 PM, Matt Batman ***@***.***> wrote: I just started to. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANAHSqqBwnOSiXmGv791D-rQD_ptVJntks5tpT5CgaJpZM4TSueW> .

[mattbatman]

Not directly. I just pushed a commit to try to fix how the form tracks state for each field. There's still a couple general bugs in the form I'm working on.