A mobile first application serving Community Education Partnership (CEP) - https://www.cep.ngo/ . This volunteer used application works in collaboration with https://github.com/rubyforgood/inkind-admin .
As a volunteer, I want to be able to select the date and duration of my tutoring session.
Things to Consider
This story IS NOT about saving the data. The views below will come at the end of a session survey, and be affiliated with the selected student and volunteer.
This story IS about deciding on and integrating a datepicker (not a date time picker) that generally looks like the mockup. And building the UI for a dropdown to select the duration minutes.
These views will have to be attached to end of a survey and mutate this data on the backend in a future deliverable.
The mockup looks generally how this workflow will be, but is a little counterintuitive. Try to go with something that looks like just the first mockup, but has minute options of 30, 45, 60, 75, & 90 in the duration dropdown. The "Submit" button should NOT be clickable until the date and minutes have been selected (this is required data).
Please use react-hook-form. This view should use react router, but for now, it can be accessible only through putting in the URL directly (because transition survey pages still need to be built).
Criteria for Completion
[ ] Time and Date view looks like mockup
[ ] Date picker works. A date can be selected and appears in the input after it's been selected.
[ ] Duration dropdown works, contains the specified minutes above, and shows in the input after the user has selected them.
[ ] Submit button is disabled until both inputs have a value.
gillianwenhold
commented
3 years ago
Summary
As a volunteer, I want to be able to select the date and duration of my tutoring session.
Things to Consider
This story IS NOT about saving the data. The views below will come at the end of a session survey, and be affiliated with the selected student and volunteer.
This story IS about deciding on and integrating a datepicker (not a date time picker) that generally looks like the mockup. And building the UI for a dropdown to select the duration minutes.
These views will have to be attached to end of a survey and mutate this data on the backend in a future deliverable.
The mockup looks generally how this workflow will be, but is a little counterintuitive. Try to go with something that looks like just the first mockup, but has minute options of 30, 45, 60, 75, & 90 in the duration dropdown. The "Submit" button should NOT be clickable until the date and minutes have been selected (this is required data).
Please use
react-hook-form. This view should use react router, but for now, it can be accessible only through putting in the URL directly (because transition survey pages still need to be built).Criteria for Completion