OPTTs - Objectives

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 objectives 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 an objective, they will always see those objectives. If the user has OrganisationPermission::MANAGE_PROJECTS permission, they will also see organisation-wide objectives in addition to the objectives where they are owner/creator. This permission allows them to mark other objectives as "Approved" by clicking on the approve checkbox under the "Awaiting Approval" tab.

Objectives dashboard

This is the main dashboard for objectives 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 objective controller uses the SearchOrSortTrait which is defined on the objective model. It also uses FilterTrait allowing filtering by column value at the same time.

Since the display of the objectives is similar to that of a gantt chart, the solution on the frontend is to use Tailwind's grid display, which makes it simple to set the column span of each card, referred to as <gantt-card />.

Because objectives can start in one year and end in another, there are calculations made on the frontend to check whether the objective should overlap into the next year, or should have already started in the previous year. In these circumstances, the card display changes slightly to illustrate this. For example, an objective may start in Q4 of 2023 and end in Q2 of 2024.

Objectives creation

Objectives can be created by clicking the "Add Objective" 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.