{"action":"created","issue":{"url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/1685","repository_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website","labels_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/1685/labels{/name}","comments_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/1685/comments","events_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/1685/events","html_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/1685","id":145070577,"number":1685,"title":"Hca improve UI for adding children providers","user":{"login":"akainic","id":3886085,"avatar_url":"https://avatars.githubusercontent.com/u/3886085?v=3","gravatar_id":"","url":"https://api.github.com/users/akainic","html_url":"https://github.com/akainic","followers_url":"https://api.github.com/users/akainic/followers","following_url":"https://api.github.com/users/akainic/following{/other_user}","gists_url":"https://api.github.com/users/akainic/gists{/gist_id}","starred_url":"https://api.github.com/users/akainic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/akainic/subscriptions","organizations_url":"https://api.github.com/users/akainic/orgs","repos_url":"https://api.github.com/users/akainic/repos","events_url":"https://api.github.com/users/akainic/events{/privacy}","received_events_url":"https://api.github.com/users/akainic/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/labels/2-in-progress","name":"2-in-progress","color":"5319e7"}],"state":"open","locked":false,"assignee":{"login":"crwallace","id":3453669,"avatar_url":"https://avatars.githubusercontent.com/u/3453669?v=3","gravatar_id":"","url":"https://api.github.com/users/crwallace","html_url":"https://github.com/crwallace","followers_url":"https://api.github.com/users/crwallace/followers","following_url":"https://api.github.com/users/crwallace/following{/other_user}","gists_url":"https://api.github.com/users/crwallace/gists{/gist_id}","starred_url":"https://api.github.com/users/crwallace/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/crwallace/subscriptions","organizations_url":"https://api.github.com/users/crwallace/orgs","repos_url":"https://api.github.com/users/crwallace/repos","events_url":"https://api.github.com/users/crwallace/events{/privacy}","received_events_url":"https://api.github.com/users/crwallace/received_events","type":"User","site_admin":false},"milestone":null,"comments":3,"created_at":"2016-04-01T02:43:44Z","updated_at":"2016-04-04T18:06:55Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/pulls/1685","html_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/1685","diff_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/1685.diff","patch_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/1685.patch"},"body":"Feedback we received from user testing was that users expected that checking the checkbox to indicate they have insurance/children should expand the first field for adding a provider/child. In order to do this, I had to change both the UI and the functionality of `GrowableTable`. \r\n\r\n<img width=\"1066\" alt=\"screenshot 2016-03-31 22 36 25\" src=\"https://cloud.githubusercontent.com/assets/3886085/14196400/00686b92-f792-11e5-9fc0-ad0b19e18a4c.png\">\r\n<img width=\"1109\" alt=\"screenshot 2016-03-31 22 36 15\" src=\"https://cloud.githubusercontent.com/assets/3886085/14196401/02087d3e-f792-11e5-89d4-36d55b5abe5d.png\">\r\n\r\nI also changed the validations for that section in the event a user checks the checkbox, the provider/child fields are expanded, they try to continue, they get validation errors, and then uncheck the checkbox. While this will hide the fields, it does not delete the entry in state and therefore will still be invalid, preventing the user from continuing onto the next page. It could be confusing to be unable to continue without seeing any actual validation errors, so I changed the validation to be valid if the checkbox is unchecked. I also added a TODO to remove providers/children if the checkbox value is `false` when the form is finally submitted. \r\n\r\nI would like input on the design, specifically on the \"Remove\" and \"Add\" buttons placement.\r\n<img width=\"820\" alt=\"screenshot 2016-03-31 22 35 58\" src=\"https://cloud.githubusercontent.com/assets/3886085/14196397/f8f48f12-f791-11e5-9bdc-6ce317d478c8.png\">"},"comment":{"url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/comments/205424354","html_url":"https://github.com/department-of-veterans-affairs/vets-website/pull/1685#issuecomment-205424354","issue_url":"https://api.github.com/repos/department-of-veterans-affairs/vets-website/issues/1685","id":205424354,"user":{"login":"akainic","id":3886085,"avatar_url":"https://avatars.githubusercontent.com/u/3886085?v=3","gravatar_id":"","url":"https://api.github.com/users/akainic","html_url":"https://github.com/akainic","followers_url":"https://api.github.com/users/akainic/followers","following_url":"https://api.github.com/users/akainic/following{/other_user}","gists_url":"https://api.github.com/users/akainic/gists{/gist_id}","starred_url":"https://api.github.com/users/akainic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/akainic/subscriptions","organizations_url":"https://api.github.com/users/akainic/orgs","repos_url":"https://api.github.com/users/akainic/repos","events_url":"https://api.github.com/users/akainic/events{/privacy}","received_events_url":"https://api.github.com/users/akainic/received_events","type":"User","site_admin":false},"created_at":"2016-04-04T18:06:55Z","updated_at":"2016-04-04T18:06:55Z","body":"@awong-dev I could use another set of eyes on this. What I'm trying to accomplish is to collapse children forms once they are added, and prevent additional children from being added until the most current one is validated. What I have now is a bit of a mess, but it accomplishes both of these tasks. The problem I'm coming up against, though, is how to determine which children forms should be expanded and which should be collapsed. Currently I use index number as a proxy for which form is currently being worked on (the assumption is that once the \"Add\" button is clicked, a new row is added to the array, so the last row of the array should always be the current form, and therefore should be expanded). This is a problem if the user deletes the current form because it results in the previous child that is already completed being expanded. I think I may need 2 things. 1) Adding a \"Save Child\" button that is unique from \"Add Child\" button. This would help separate the functionality of collapsing a completed child form (\"Save\") from adding a new child form (\"Add\"), both of which are currently performed by the \"Add Child\" button. 2) I need to figure out how to pass to the Child component which view to use, either collapsed or expanded. I'm currently handling this by hard-coding a prop based on the index number, but if it is instead tied to when a \"Save\" button or \"Add\" button is clicked, I need to pass that information to the appropriate instance of the Child component. Only way I can think of is storing it in state, but I know we've been avoiding storing anything that is not form data in state."}}