928444 - Build the UI for a report submission form

Status: VERIFIED FIXED

(Mozilla Reps Graveyard :: reps.mozilla.org, task)

Description

[Justin Crawford [:hoosteeno] [:jcrawford]]

Mockups for the form are here:

http://cl.ly/image/2F2W0e2t3533

Comment 1

[Justin Crawford [:hoosteeno] [:jcrawford]]

Detailed specs for this form are below:

    The active report form will replace the existing monthly reporting form that Reps use. It is designed to take less time for a Rep to fill out, and the data reported is more structured and action-oriented. The form contains 6 fields, some of which are pre-filled and some which are required. In detail:

    What did you do? (required). A dropdown menu showing a dynamic list of activity types. This list is managed and updated by people in either the Council or Administrator groups.

    Which campaign did you participate in? (required). A dropdown menu showing a dynamic list of current campaigns. This list is managed and updated by people in either the Council or Administrator groups. This field is initially hidden and only becomes visible if the user selected 'Participated in a campaign' as the value for the 'What did you do?' field. If the user selects a different activity for that field, this campaign field is not visible and not required.

    When did you do this activity? (required). A datepicker field that is prepopulated with the current date. The date is displayed in DD/MM/YYYY format.

    Which contribution area(s) does your activity support? (Inputing at least one area is required). Initially, one dropdown list of functional areas is shown. There is a UI element to 'Add contribution area' to add another dropdown list below the existing dropdown(s). Each dropdown list can be removed by clicking the 'Remove' UI elements, with the exception of the top dropdown list, since that first one is required.

    Where did your contribution take place? (location picker). Pre-populate with the geo-coordinates from the Rep's profile. The Rep can click on the map icon to open a popup map with location picker to change their location value for this field.

    URL for your activity (text input). User can enter a URL that points to more information about their contribution, such as a page, photo album, or video.


Validation and error messages for the form:

    If a required field isn't completed: "This field is required."

    If the date value is not valid: "Enter a valid date."

    If the location is not valid: "Enter a valid location."

    If the URL is not a valid URL: "Enter a valid URL."

Comment 2

[Justin Crawford [:hoosteeno] [:jcrawford]]

Can we use an ISO date format to eliminate confusion?

Comment 3

[Alex Gibson [:agibson]]

Can I also ask are we specifically aiming for a single column design on this form, or is the mockup just concentrating on the individual UI elements? (happy to do single column or multi column, just wanted to check first...)

Comment 4

[Justin Crawford [:hoosteeno] [:jcrawford]]

Additional specs for this form:

It should be built to conditionally handle the "edit report" function, which means changing the title and adding a "delete" button:

http://cl.ly/image/1E13150N1V2X

Comment 5

[Alex Gibson [:agibson]]

As discussed in our previous meeting - I suggested that we could look to populate the location field on this form via a reverse look-up.

On page load, we will first take the Geo-coordinates from the reps profile and perform a reverse lookup to populate the field initially.

If the rep then opens the modal map and chooses a different set of geo-coordinate, we can then perform a further look-up to update the field.

Will look to use MapBox for the geocoding / map features on this page.

Comment 6

[William Reynolds [:williamr]]

Attachment: Add an activity v3.png

Here's an updated mockup that adds an optional description field.

Comment 7

[Giorgos Logiotatidis [:giorgos]]

Just to clarify: The description field is 'activity description' right?

Comment 8

[Alex Gibson [:agibson]]

Attachment: active-report-form.png

Attached a screen shot of the static form template as it stands to-date.

Let me know any feedback / updates needed - else I can publish the branch so it's ready for integration with the back end when needed.

I've also done the form JS and reverse lookup for the location field. Seems to work pretty well!

Thanks

Comment 9

[William Reynolds [:williamr]]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #7)
> Just to clarify: The description field is 'activity description' right?

Yes, that is correct.

(In reply to Alex Gibson [:agibson] from comment #8)
> Attached a screen shot of the static form template as it stands to-date.
> 
> Let me know any feedback / updates needed - else I can publish the branch so
> it's ready for integration with the back end when needed.

This looks great! Some small bits of feedback:
- Just to clarify, the question 'Which campaign did you participate in?' will only be visible and required if the user selects 'Participated in a campaign' as their response to the first question. This appears to be the case in your screen shot, which is splendid.

- For the activity date, I think we should use an ISO date format as Justin suggested. The format YYYY/MM/DD would be good. Clicking in this field should popup a datepicker (monthly calendar) UI element to make it easy for the user to select a valid date. The field should also be prepopulated with the current date.

- For the reverse location look up, can we display the City/Region/Country in the text input? That would give the user easy confirmation that they are reporting the correct location. We would still store the latitude and longitude coordinates. This field should be prepopulated with the latitude and longitude stored in the user's profile, and we would do a reverse lookup on those those coordinates. This might already match what you have created - I just can't tell.

- I suggest adding just a little more space between the the activity description text area and the Delete/Save buttons.

Happy to chat on IRC to clarify anything or if this differs from what you had in mind.

> I've also done the form JS and reverse lookup for the location field. Seems
> to work pretty well!

That is great news :)

Comment 10

[William Reynolds [:williamr]]

(In reply to William Reynolds [:williamr] from comment #9)
> - For the activity date, I think we should use an ISO date format as Justin
> suggested. The format YYYY/MM/DD would be good. 

Correction on the date format. YYYY-MM-DD is the iso8601 extended format (using dashes, not slashes) I suggest using.

http://en.wikipedia.org/wiki/ISO_8601#Calendar_dates

Comment 11

[Alex Gibson [:agibson]]

(In reply to William Reynolds [:williamr] from comment #9)
> - Just to clarify, the question 'Which campaign did you participate in?'
> will only be visible and required if the user selects 'Participated in a
> campaign' as their response to the first question. This appears to be the
> case in your screen shot, which is splendid.

Correct, the JS displays/hides the campaign input field based on the activity type selected. So we're all good there.

> - For the activity date, I think we should use an ISO date format as Justin
> suggested. The format YYYY/MM/DD would be good. Clicking in this field
> should popup a datepicker (monthly calendar) UI element to make it easy for
> the user to select a valid date. The field should also be prepopulated with
> the current date.

I'll see to changing this, thanks

> - For the reverse location look up, can we display the City/Region/Country
> in the text input? That would give the user easy confirmation that they are
> reporting the correct location. We would still store the latitude and
> longitude coordinates. This field should be prepopulated with the latitude
> and longitude stored in the user's profile, and we would do a reverse lookup
> on those those coordinates. This might already match what you have created -
> I just can't tell.

Yes that's pretty much what I've implemented. For the location placeholder text (when the field is empty) I'll change it to 'City, Region, Country' so they can get an idea of what should be filled in. That way, if the reverse look-up fails, or is incorrect for some reason - they can still easily populate the field manually.

I've included hidden input fields for lat/lon on the template that we can populate with the rep's geo-coordinates. The reverse look-up uses these field values to make the request.

> - I suggest adding just a little more space between the the activity
> description text area and the Delete/Save buttons.

Will see to this too, thanks!

Comment 12

[Alex Gibson [:agibson]]

Attachment: active-report-2.png

Changes to date all done so far, have attached an updated screenshot

Branch published here when it's ready to pick up (everything is all in the latest commit).

https://github.com/alexgibson/remo/tree/addreportsform

Thanks!

Comment 13

[Justin Crawford [:hoosteeno] [:jcrawford]]

It was missing from the mockup, but :tasos rightly pointed out that we'll want a time along with the date on this form. Tasos said he'd build it.

Comment 14

[William Reynolds [:williamr]]

(In reply to Justin Crawford [:hoosteeno] from comment #13)
> It was missing from the mockup, but :tasos rightly pointed out that we'll
> want a time along with the date on this form. Tasos said he'd build it.

I would prefer to only have a date field and not include a time field on the form. Knowing the time for a contribution is not very useful and the date is sufficient. For active reports we want to store the user-entered contribution date (date) and the report submission time (date time) that is handled in the backend code. So, we will still have the time that the form was submitted.

Comment 15

[[github robot]]

Commit pushed to master at https://github.com/mozilla/remo

https://github.com/mozilla/remo/commit/a11473f0ce4bff4012e10a7037bbc57ecdf175b1
[fix bug 928444] Build the UI for a report submission form

Comment 16

[Rebecca Billings [:rbillings]]

Verified able to add new report on dev