OPTTs - Projects

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 projects for the current year being viewed, optionally filtered by division and department.

My Priorities Dashboard

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

Projects dashboard

This is the main dashboard for projects which shows the selected month divided into 5 weeks, and is contained within a particular year. This year does not necessarily run from January through December but depends on the financial year that has been configured on the organisation.

In order to filter results, the project 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 projects 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 projects can run for longer than a month, there are calculations made on the frontend to check whether the project should overlap into the next month, or should have already started in the previous month. In these circumstances, the card display changes slightly to illustrate this.

Projects creation

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