Work Hours editor converted to Vue JavaScript Framework

Access to the Work Hours editor is normally restricted to Superuser roles and above. Superusers can perform all the actions of other end-users and manage team member work hours (at an individual, service line or country-wide level).

We've continued with the re-platforming of the Dayshape UI by implementing the Vue JavaScript framework for the Work Hours editor. Although operation of the editor is fundamentally unchanged, this enhancement introduces a better user experience through added features and visual indicators, in particular:

• Multi-select button - a multi-select button is shown at the top of the tree-picker to enable one-click mouse selection of multiple Business Units and/or Resources. Shift and Ctrl on the keyboard in conjunction with the mouse to multi-select entities is not possible in the tree-picker.
  Note: that if multiple business units/resources are selected, the work hours details are not displayed.

• Breadcrumbs - colour-coded breadcrumbs have been added to the tree-picker and to the work hours table to identify Business Units and/or Resources that have been edited but are as yet unsaved. A green tick is appended to entities on the tree structure if they have unsaved changes and work hours cells within the table will contain a green disc to show unsaved changes.
  

  

• Key to cell colour-code - clicking the information icon displays the key to the colours used for the work hours table cells.
  
  

The Work Hours editor is still located in Environment | Work Hoursand operation is unchanged. In summary, Business Unit(s) and/or Resource(s) are selected in the tree-picker, and with these selected, you can click a cell or multi-select a range, then adjust the Day Start or Time Worked fields as necessary. When finished, click Update. Repeat this operation until all changes are made then click Save at the top-right-hand side.

Operation of the Work Hours editor is fully described in Work Hours management.