Add projects filter

uktrade · Jan 8, 2024 · 91547fd · 91547fd
1 parent ddd27ad
commit 91547fd
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/src/client/components/Dashboard/my-tasks/MyTasks.jsx b/src/client/components/Dashboard/my-tasks/MyTasks.jsx
@@ -12,7 +12,7 @@ import ContentWithHeading from '../../ContentWithHeading'
 import MyTasksTable from './MyTasksTable'
 import TaskListSelect from './TaskListSelect'
 import SpacedSectionBreak from '../../SpacedSectionBreak'
-import { companyOptions } from './transformers'
+import { companyAndProjectOptions } from './transformers'
 import { BLUE } from '../../../utils/colours'
 import urls from '../../../../lib/urls'
 import { TaskCompaniesAndProjectsResource } from '../../Resource'
@@ -25,7 +25,7 @@ const FiltersContainer = styled.div`
   column-gap: 2px;
   margin-bottom: ${SPACING.SCALE_3};
 
-  grid-template-columns: repeat(4, ${SELECT_WIDTH}) 19.5% ${SELECT_WIDTH};
+  grid-template-columns: repeat(5, ${SELECT_WIDTH}) 3.5% ${SELECT_WIDTH};
   @media (max-width: ${SITE_WIDTH}) {
     grid-template-columns: repeat(2, 50%);
     span.task-select-spacer {
@@ -62,7 +62,7 @@ export const MyTasksContent = ({ myTasks }) => (
 const MyTasks = ({ myTasks, filters, payload }) => (
   <>
     <TaskCompaniesAndProjectsResource>
-      {({ companies }) => (
+      {({ companies, projects }) => (
         <FiltersContainer>
           <TaskListSelect
             label="Status"
@@ -82,7 +82,12 @@ const MyTasks = ({ myTasks, filters, payload }) => (
           <TaskListSelect
             label="Company"
             qsParam="company"
-            options={companyOptions(companies)}
+            options={companyAndProjectOptions(companies)}
+          />
+          <TaskListSelect
+            label="Project"
+            qsParam="project"
+            options={companyAndProjectOptions(projects)}
           />
           <span className="task-select-spacer" id="task-select-spacer" />
           <TaskListSelect

diff --git a/src/client/components/Dashboard/my-tasks/state.js b/src/client/components/Dashboard/my-tasks/state.js
@@ -49,6 +49,7 @@ export const state2props = ({ router, ...state }) => {
     archived: undefined,
     sortby: 'due_date:asc',
     company: undefined,
+    project: undefined,
   }
 
   const assignedToMapping = {
@@ -68,6 +69,10 @@ export const state2props = ({ router, ...state }) => {
     payload.company = queryParams.company
   }
 
+  if (queryParams.project && queryParams.project !== SHOW_ALL_OPTION.value) {
+    payload.project = queryParams.project
+  }
+
   Object.assign(payload, assignedToMapping[queryParams.assigned_to])
   Object.assign(payload, createdByMapping[queryParams.created_by])
   Object.assign(payload, statusMapping[queryParams.status])

diff --git a/src/client/components/Dashboard/my-tasks/tasks.js b/src/client/components/Dashboard/my-tasks/tasks.js
@@ -9,6 +9,7 @@ export const getMyTasks = ({
   archived,
   sortby = 'due_date:asc',
   company,
+  project,
 }) =>
   apiProxyAxios
     .post('/v4/search/task', {
@@ -22,5 +23,6 @@ export const getMyTasks = ({
       archived,
       sortby,
       company,
+      investment_project: project,
     })
     .then(({ data }) => data)
diff --git a/src/client/components/Dashboard/my-tasks/transformers.js b/src/client/components/Dashboard/my-tasks/transformers.js
@@ -1,10 +1,10 @@
 import { SHOW_ALL_OPTION } from './constants'
 
-export const companyOptions = (companies) => {
-  const companiesList = companies.map((company) => ({
-    label: company.name,
-    value: company.id,
+export const companyAndProjectOptions = (options) => {
+  const optionsList = options.map((option) => ({
+    label: option.name,
+    value: option.id,
   }))
 
-  return [SHOW_ALL_OPTION, ...companiesList]
+  return [SHOW_ALL_OPTION, ...optionsList]
 }