All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 4m30s
4.7 KiB
4.7 KiB
Feature: Chores can be scheduled to occur on certain calendar days or weeks and have a time during the day where they must be finished by.
Overview
Goal: Chores can be edited to only show up in child mode on particular days and during certain times. This encourages a child to perform chores on those days before a certain time of day.
User Story:
- As a parent, I will be able to select an assigned chore and configure it to occur on any combination of the days of the week. I will also be able to configure the latest possible time of day on each of those configured days that the chore must be done.
- As a child, I will not see the chore appear if it was configured for a different day of the week. I will also not be able to see a chore if the current time of day is past the configured latest time of the chore.
Rules:
- Follow instructions from .github/copilot-instructions.md
Data Model Changes
Backend Model
Frontend Model
Frontend Design
Chore card
- Currently, when a chore is pressed on the ParentView, it shows an icon that represents an edit button. This is shown in .github/feat-calendar-chore/feat-calendar-chore-component01.png outlined in red.
- I would like for this icon button to be changed to a kebab menu that drops down the following:
- Edit points
- Schedule
- Extend Time
- The look and feel of the dropdown should follow the design of kebab-menu in ChildrenListView
- Penalties and Rewards will keep the current edit icon for now and it will function the same.
- When the parent selects 'Edit points' for a chore, the current functionality for editing override points will occur.
- When the parent selects 'Schedule' a new form modal(or view) will appear that allows the parent to schedule the chore.
- In ParentView, when a chore is either scheduled for a different day than the current day or the current time is past the chore's time, the chore card will appear 'grayed out' (or should it have a badge instead?) This just let's the parent know that the chore is not scheduled or past the point of the time for the day. The chore can still show the kebab menu and it can still be activated by the parent.
- In ChildView, when a chore is either scheduled for a different day than the current day it will not appear. This makes it simple for the child to focus on the current day's chores.
- In ChildView, when a chore is scheduled for the current day, but it is past the lastest possible time, the chore should appear 'grayed out', and a text stamp should appear on the card that says 'TOO LATE' This is similar to when a reward is PENDING in ChildView.vue with the 'pending' class.
- Once a time of day is past the chore's time, the chore will not 'reset' again until the next day it is scheduled or until the parent edit's the chore and changes the time or until the parent selects the 'Extend Time' option from ParentView.
- The 'Extend Time' menu item should only be shown if the chore being 'edited' has a timeout time and that timeout time has expired.
- When 'Extend Time' is selected, the chore will 'reset' and shown as normal for the remainder of the day.
- 'Extend Time' only cancels the timeout for a chore on that single day.
Schedule Modal (or View)
- When 'Schedule' is selected from the dropdown menu, a new modal or view will appear.
- The component will have a title of 'Schedule Chore' and a subtitle of the chore's name and icon. It should look like ModalDialog. Should it use EntityEditForm?
- The component will allow the user to make a choice between scheduling the chore on certain days of the week, or occur every X days [2-7] starting on [Day of the week] This way a chore can either be consistent every week, or follow a pattern of X days.
- If scheduling for certain days, there should be checkbox buttons with the labels (Sunday - Saturday) This let's the parent select on what days the chore will be valid. Checking a box next to a day should show a time selector next to the day. This time selector will show an hour, minute, and AM/PM selector that will change in 15 minute increments. We have to also consider mobile devices. Up/Down arrows to increment and decrement the time?
- There should be a Save and Cancel button on the bottom of the form
- If scheduling for every X days, then there should only be one time selector. In this mode, the chore will only have one configurable time no matter what day of the week it is.
Time Selector
- The time selector should function like the 'Time Only' component in https://primevue.org/datepicker/#time