OPTTs - Tasks

OPTTs is simply an acronym for four distinct but similar models: Objectives, Projects, Tasks, and Targets. They all share similarities meaning some code reuse is required, but also can differ in significant ways.

Overview Dashboard

The summary section on the "Organisation Overview" view of the dashboard provides an overview of the tasks for the current year being viewed, optionally filtered by division and department.

My Priorities Dashboard

This screen shows tasks in a way more specific to the current logged-in user. If the user is the creator or owner of a task, they will always see those tasks. If the user has OrganisationPermission::MANAGE_TASKS permission, they will also see organisation-wide completed tasks in addition to the tasks where they are owner/creator.

Tasks dashboard

This is the main dashboard for Tasks which shows the full year. This is not necessarily from January through December but depends on the financial year that has been configured on the organisation.

In order to filter results, the tasks controller uses the SearchOrSortTrait which is defined on the task model. It also uses FilterTrait allowing filtering by column value at the same time. It also uses a scope dueBetween to ensure that only tasks within the viewed timeframe are shown.

Tasks differ from objectives and projects in that they are displayed in 2 different tables arranged using tabs - incomplete and complete. Changing between these tabs has no effect on the pie graph, but it does change the contents of the table. Changes to the filters affect both the graph and the table.

Tasks creation

Tasks can be created by clicking the "Add Task" button on the main dashboard, or by clicking the OPTTs button when inside an element of a catalogue, and then completing the fields of the form.

The form is organised as an accordion, and because many of the fields are reused across OPTTs, the fields are often organised into "Fieldsets", which can be found in the Components/App/Common/Fieldsets folder of the vue files.

The data these fieldsets need are often provided through using provide as opposed to prop drilling. It's a simple concept and just allows variables to be provided at a higher level and then injected at a lower as and when they are needed. This data includes for example, the list of users, divisions, departments, and more that needs to be made available to dropdowns in all cases of OPTTs.

Timelines and Progress on Tasks

For tasks, the TimelinesProgressTask Vue component plays an essential role in visualizing task progress over time. It provides a visual summary of task progress as a horizontal progress bar, a due date selector and various action buttons for the user to change the task status.

How it Works

The TimelinesProgressTask component receives the task form object as a prop. It then extracts the necessary data such as the task's status and progress values. The component uses this data to calculate the position and width of the progress bar and which of the action buttons to show or hide.

Task Statuses and Visibility of Action Buttons

Tasks in OPTTs can have several statuses that represent the state of the task. Each status also affects the visibility of action buttons related to the task.

The visibility of action buttons and the status changes are handled through a combination of Vue computed properties and methods, and backend logic in Laravel controllers. On the front-end the handleProgressChange and handleStatusChange functions in the TimeLinesProgressTask.vue component play a critical role in this, as they update the task status and progress values based on the interplay between a task's due date, its active action button/s and its progress value.

Here are the different task statuses:

Not Started

Tasks that are newly created and have not yet started (have a progress value of 0) are given this status.

On Track

This is the default status assigned when a user changes a task's progress value to between the range of greater than 0 and less than 100. This status is for tasks that have been started and are making progress as expected. When in this state, users see the 'On Track', 'Behind' and 'Complete' action buttons.

Behind

A user may manually change a task's status to 'Behind' if they feel that the task is not making progress as expected. When in this state, users see the 'On Track', 'Behind' and 'Complete' action buttons.

Overdue

If a task's due date is in the past then its status will automatically change to 'Overdue'. There is a app/Jobs/UpdateTaskStatus.php job which runs every six hours which performs this change in the database. The same change will also be made immediately via the UI if a user changes the task's due date to a date in the past. When in this state, users only see the 'Complete' action button, because if a task is overdue the user may only take two actions - either change the due date (to one in the future) or mark the task as complete.

Complete

A user may set the task's status to 'Complete' in one of two ways, either by marking the progress as 100% or by clicking the 'Complete' action button. When in this state, users see the 'On Track', 'Behind' and 'Complete' action buttons.