search

CivicCode / uReport-client

A redesigned front-end for Bloomington's citizen reporting application
MIT License
1 stars 1 forks source link

Create a Dynamic Form #4

Open mattbatman opened 6 years ago

mattbatman commented 6 years ago

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

API Interaction

On Load

On Submit

Styling

mattbatman commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

matt-a-t commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 notifications@github.com 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
  • 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 https://github.com/CivicCode/uReport-client/issues/4#issuecomment-381758819, or mute the thread https://github.com/notifications/unsubscribe-auth/ANAHSlL2NJKrrJgWEiwR69PePesPwnGtks5tpQ-ogaJpZM4TSueW .

dpalazz commented 6 years ago

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 notifications@github.com 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
  • 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 https://github.com/CivicCode/uReport-client/issues/4#issuecomment-381758819, or mute the thread https://github.com/notifications/unsubscribe-auth/ANAHSlL2NJKrrJgWEiwR69PePesPwnGtks5tpQ-ogaJpZM4TSueW .

mattbatman commented 6 years ago

I just started to.

dpalazz commented 6 years ago

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 notifications@github.com wrote:

I just started to.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CivicCode/uReport-client/issues/4#issuecomment-381795815, or mute the thread https://github.com/notifications/unsubscribe-auth/ANAHSqqBwnOSiXmGv791D-rQD_ptVJntks5tpT5CgaJpZM4TSueW .

mattbatman commented 6 years ago

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.

dpalazz commented 6 years ago

Cool, just pushed what I had for location picker.

On Mon, Apr 16, 2018 at 9:05 PM, Matt Batman notifications@github.com wrote:

Not directly. I just pushed a commit to try to fix how the form tracks state for each field.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CivicCode/uReport-client/issues/4#issuecomment-381796752, or mute the thread https://github.com/notifications/unsubscribe-auth/ANAHSmpoIidn68CLHdL4tvDExqY62Xulks5tpT_CgaJpZM4TSueW .

matt-a-t commented 6 years ago

If we can get state on the Form component set I will work out the post query tomorrow

mattbatman commented 6 years ago

If we can get state on the Form component set I will work out the post query tomorrow

I think the only thing left in terms of form state is to wire Dana's location picker into the form.

dpalazz commented 6 years ago

The location picker updates an

element dynamically with an address when the user moves the red pin. Could we use that to feed into the form?

On Mon, Apr 16, 2018 at 10:21 PM, Matt Batman notifications@github.com wrote:

If we can get state on the Form component set I will work out the post query tomorrow

I think the only thing left in terms of form state is to wire Dana's location picker into the form.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CivicCode/uReport-client/issues/4#issuecomment-381809465, or mute the thread https://github.com/notifications/unsubscribe-auth/ANAHSrY5VJE1yAwI6JIe8bP3XsgLF21-ks5tpVGrgaJpZM4TSueW .

mattbatman commented 6 years ago

The location picker updates an <h1> element dynamically with an address when the user moves the red pin. Could we use that to feed into the form?

Yep. Great job with this. I think we need either 1) the address string or 2) latitude and longitude coordinates. I'd imagine the address string is fine, and it seems slightly easier than the coordinates.

I'm guessing the correct way to do this is to pass a handler from the parent Form component as a prop to the MapPicker component.

dpalazz commented 6 years ago

Okay, I'm going to push some style changes (let me know if you don't like the direction I took) then I'll take a look at this. Thanks!

On Mon, Apr 16, 2018 at 10:33 PM, Matt Batman notifications@github.com wrote:

The location picker updates an element dynamically with an address when the user moves the red pin. Could we use that to feed into the form?

Yep. Great job with this. I think we need either 1) the address string or 2) latitude and longitude coordinates. I'd imagine the address string is fine, and it seems slightly easier than the coordinates.

I'm guessing the correct way to do this is to pass a handler from the parent Form component as a prop to the MapPicker component.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CivicCode/uReport-client/issues/4#issuecomment-381812206, or mute the thread https://github.com/notifications/unsubscribe-auth/ANAHSuYD4y3suuKxjTxMeBSfqn0BkmLtks5tpVSSgaJpZM4TSueW .

mattbatman commented 6 years ago

@dpalazz I have the location picker wired into the form. I'll wait to push it so you don't get a merge conflict.

dpalazz commented 6 years ago

Oops - sorry, taking a long time on this design. Longer than I should. I'm almost done and I'll push it after I pull down ur changes.

On Mon, Apr 16, 2018 at 11:07 PM, Matt Batman notifications@github.com wrote:

@dpalazz https://github.com/dpalazz I have the location picker wired into the form. I'll wait to push it so you don't get a merge conflict.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CivicCode/uReport-client/issues/4#issuecomment-381819601, or mute the thread https://github.com/notifications/unsubscribe-auth/ANAHSobVXZS2L3DEzEZA3FcQTztXvsPbks5tpVxegaJpZM4TSueW .

matt-a-t commented 6 years ago

Thanks for getting all this done tonight everybody. It looks like we should be in good shape to get things wired up tomorrow

dpalazz commented 6 years ago

Hittin' the sack for the night. Thanks ya'll!

On Mon, Apr 16, 2018 at 11:44 PM, Matt Armstrong-Totten < notifications@github.com> wrote:

Thanks for getting all this done tonight everybody. It looks like we should be in good shape to get things wired up tomorrow

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CivicCode/uReport-client/issues/4#issuecomment-381827428, or mute the thread https://github.com/notifications/unsubscribe-auth/ANAHStuJYf9bBEA9AGY1gDDXoImTbTECks5tpWUSgaJpZM4TSueW .