Implement task form (basic)
Closed this issue · 2 comments
The form is composed by 7 fields, the timer, and a dropdown of additional actions:
- Template (not stored, used only to pre-fill the values) [dropdown0
- Project [dropdown]
- Task type [dropdown]
- Timer
- Story [text]
- From [time picker]
- To [time picker]
- Description [text area]
- More actions [dropdown]
This will be a component that will be used by all 3 main views (day, week, month). In the day view is in inline on the page next to the list of tasks already added for the day.
In the week and month views, the form will be inside a modal and appear when a user adds or edits a task.
Since the timer will have more complex logic, it is okay to simply add a placeholder to the form for this issue. We will have a separate issue to implement the timer. Likewise, the 'More Actions' dropdown can be added as a placeholder and additional issues will be added to implement the functionality.
Action buttons on form: Clear, Save
We need 3 endpoints:
- list templates (global and user's custom templates)
- list projects: need to decide how to list all projects vs. projects the user is assigned to
- list active task types
Requirements:
- All fields must have labels
- As in the design, labels appear inside the fields (I believe this style is called a 'floating label'), but they should be discernible and not as faint as placeholder text would be
- Even though there will be a 'clear' button for the whole form, make sure it is easy for a user to clear out any particular field, as well. In our prototype, the dropdowns were hard to clear once something was selected.
- When a field gains focus, highlight the field with a focus ring (this should come standard with whichever frontend framework we're using for inputs, but I'm noting it in case it doesn't)
- When a user selects a template, the values from the template are populated in the form