Content
View differences
Updated by Marc Alcobé 9 months ago
**As** a user
**I want to** be able to track my time on the go
**so that** I don't need to grab a train backwards to the office or get fired
### **Acceptance criteria**
* [ ] A new module is added in the bottom bar centre position: `Time tracking`
#### Module view
* [ ] A widget with the progress of logged time this week indicating the total amount of hours logged in and a graphic [FL Chart Bar Chart Sample 1 (Mingguan)](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample1.dart). This will display the logged time per day, having the day with more time logged in as the maximum of the bars for all the days.
* [ ] All the days of the week in collapsable sections with the information of how much time has been logged for each day.
* [ ] By default, Today will be expanded and the rest of the days collapsed.
* [ ] The order is reverse until the current day of the week.
* [ ] When expanded, the sections containing logged time will have a BorderBox list with all the logged times in it, including the following information:
* [ ] Time logged.
* [ ] Activity (if any).
* [ ] Project.
* [ ] Work package type and name (ensure to use the truncation implemented in <mention class="mention" data-id="66240" data-type="work_package" data-text="#66240">#66240</mention>).
* [ ] Comment (if any).
* [ ] More icon with the actions to edit the log time and delete.
* [ ] A button will be available at the bottom of each list to log time without specific timing or starting a timer.
* [ ] A rectangular FAB button allows the user to start a timer. If a timer is running already this button must be hidden.
#### Timer running view
* [ ] When a timer is started, a full screen modal is open with a running timer and a spinner indicator.
* [ ] The spinner indicator re-runs every 60m completed of timer.
* [ ] Below the spinner, a link allows the user to quickly add a related work package to the timer. This opens the bottom sheet for selecting work packages.
* [ ] At the bottom, two buttons are centred to pause and stop the timer.
* [ ] When a timer is running, a card with blue background is added on top of the week progress snippet with the running time and the linked work package (if any). When tapped, it opens the full screen modal of the timer.
#### Log time modal
* [ ] Once the user stops a timer, the log time full screen modal appears.
* [ ] Here the user can edit the information for the related work package, the time, the date, start, and finish time (if active), the activity and add a comment.
* [ ] The user can select to add exact times to the log or not. This is only available if the administration settings to be able to log specific times is enabled. There is also the possibility that this is enforced by the administrator of the instance through a setting, in that case the checkbox should not be visible, and the time field should take the full width.
* [ ] The list of activities available depends on the work package selected, so the field needs to be inactive until the user selects a work package to log time on.
* [ ] Ensure that the options displayed as activities are the correct ones for the work package selected as in the web app.
* [ ] At the bottom bar of the modal, there are the options to resume the tracking, cancel it or save it.
#### Work packages
* [ ] Ensure the full screen log time modal used thought the work packages details view (using the three dots menu in the top bar) for login time also opens this modal now and not the previous non-full screen modal.
* [ ] Add a new option in the more menu of the work packages view to start a timer for that work package that will open the timer running modal (with the spinner).
###
### **Technical notes**
* All the time logged needs to be sent to the web app, and we should be able to receive all the data of the logged time from the app also.
###
### **Permissions and visibility considerations**
* Tracking time with specific times (start and finish) is a setting that can be activated or deactivated at an administration level. This control both the visibility of the checkbox on the modal and the input fields of start and finish time.
* This setting can also be marked as mandatory. In that case, the checkbox to not use specific times to log time should not be visible.
* Users should have the permission to log time in order to see the time tracking tab.
### **Visual reference**
<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774774/content"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774775/content"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774776/content"></p></td></tr></tbody></table></figure>
### **Out of scope**
* ###
**I want to** be able to track my time on the go
**so that** I don't need to grab a train backwards to the office or get fired
### **Acceptance criteria**
* [ ] A new module is added in the bottom bar centre position: `Time tracking`
#### Module view
* [ ] A widget with the progress of logged time this week indicating the total amount of hours logged in and a graphic [FL Chart Bar Chart Sample 1 (Mingguan)](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample1.dart). This will display the logged time per day, having the day with more time logged in as the maximum of the bars for all the days.
* [ ] All the days of the week in collapsable sections with the information of how much time has been logged for each day.
* [ ] By default, Today will be expanded and the rest of the days collapsed.
* [ ] The order is reverse until the current day of the week.
* [ ] When expanded, the sections containing logged time will have a BorderBox list with all the logged times in it, including the following information:
* [ ] Time logged.
* [ ] Activity (if any).
* [ ] Project.
* [ ] Work package type and name (ensure to use the truncation implemented in <mention class="mention" data-id="66240" data-type="work_package" data-text="#66240">#66240</mention>).
* [ ] Comment (if any).
* [ ] More icon with the actions to edit the log time and delete.
* [ ] A button will be available at the bottom of each list to log time without specific timing or starting a timer.
* [ ] A rectangular FAB button allows the user to start a timer. If a timer is running already this button must be hidden.
#### Timer running view
* [ ] When a timer is started, a full screen modal is open with a running timer and a spinner indicator.
* [ ] The spinner indicator re-runs every 60m completed of timer.
* [ ] Below the spinner, a link allows the user to quickly add a related work package to the timer. This opens the bottom sheet for selecting work packages.
* [ ] At the bottom, two buttons are centred to pause and stop the timer.
* [ ] When a timer is running, a card with blue background is added on top of the week progress snippet with the running time and the linked work package (if any). When tapped, it opens the full screen modal of the timer.
#### Log time modal
* [ ] Once the user stops a timer, the log time full screen modal appears.
* [ ] Here the user can edit the information for the related work package, the time, the date, start, and finish time (if active), the activity and add a comment.
* [ ] The user can select to add exact times to the log or not. This is only available if the administration settings to be able to log specific times is enabled. There is also the possibility that this is enforced by the administrator of the instance through a setting, in that case the checkbox should not be visible, and the time field should take the full width.
* [ ] The list of activities available depends on the work package selected, so the field needs to be inactive until the user selects a work package to log time on.
* [ ] Ensure that the options displayed as activities are the correct ones for the work package selected as in the web app.
* [ ] At the bottom bar of the modal, there are the options to resume the tracking, cancel it or save it.
#### Work packages
* [ ] Ensure the full screen log time modal used thought the work packages details view (using the three dots menu in the top bar) for login time also opens this modal now and not the previous non-full screen modal.
* [ ] Add a new option in the more menu of the work packages view to start a timer for that work package that will open the timer running modal (with the spinner).
###
###
* All the time logged needs to be sent to the web app, and we should be able to receive all the data of the logged time from the app also.
* Tracking time with specific times (start and finish) is a setting that can be activated or deactivated at an administration level. This control both the visibility of the checkbox on the modal and the input fields of start and finish time.
* This setting can also be marked as mandatory. In that case, the checkbox to not use specific times to log time should not be visible.
* Users should have the permission to log time in order to see the time tracking tab.
### **Visual reference**
<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774774/content"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774775/content"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774776/content"></p></td></tr></tbody></table></figure>
### **Out of scope**
* ###