diff --git a/frontend/fixtures/programs/fakeApolloAllPrograms.ts b/frontend/fixtures/programs/fakeApolloAllPrograms.ts index ce57098174..b968860318 100644 --- a/frontend/fixtures/programs/fakeApolloAllPrograms.ts +++ b/frontend/fixtures/programs/fakeApolloAllPrograms.ts @@ -1,9 +1,9 @@ -import { AllProgramsDocument } from '../../src/__generated__/graphql'; +import { AllProgramsForTableDocument } from '../../src/__generated__/graphql'; export const fakeApolloAllPrograms = [ { request: { - query: AllProgramsDocument, + query: AllProgramsForTableDocument, variables: { businessArea: 'afghanistan', search: '', @@ -34,8 +34,7 @@ export const fakeApolloAllPrograms = [ { cursor: 'YXJyYXljb25uZWN0aW9uOjA=', node: { - id: - 'UHJvZ3JhbU5vZGU6ZDM4YWI4MTQtOTQyNy00ZmJkLTg4ODctOGUyYzlkMzcxYjg2', + id: 'UHJvZ3JhbU5vZGU6ZDM4YWI4MTQtOTQyNy00ZmJkLTg4ODctOGUyYzlkMzcxYjg2', name: 'Notice hair fall college enough perhaps.', startDate: '2020-01-20', endDate: '2020-08-19', @@ -48,7 +47,6 @@ export const fakeApolloAllPrograms = [ populationGoal: 507376, sector: 'EDUCATION', totalNumberOfHouseholds: 12, - totalNumberOfHouseholdsWithTpInProgram: 12, __typename: 'ProgramNode', }, __typename: 'ProgramNodeEdge', diff --git a/frontend/src/__generated__/graphql.tsx b/frontend/src/__generated__/graphql.tsx index e4426548b0..79818672d3 100644 --- a/frontend/src/__generated__/graphql.tsx +++ b/frontend/src/__generated__/graphql.tsx @@ -11085,6 +11085,26 @@ export type AllProgramsForChoicesQueryVariables = Exact<{ export type AllProgramsForChoicesQuery = { __typename?: 'Query', allPrograms?: { __typename?: 'ProgramNodeConnection', totalCount?: number | null, edgeCount?: number | null, pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean, hasPreviousPage: boolean, endCursor?: string | null, startCursor?: string | null }, edges: Array<{ __typename?: 'ProgramNodeEdge', cursor: string, node?: { __typename?: 'ProgramNode', id: string, name: string, status: ProgramStatus, dataCollectingType?: { __typename?: 'DataCollectingTypeNode', id: string, code: string, type?: DataCollectingTypeType | null, label: string, active: boolean, individualFiltersAvailable: boolean, householdFiltersAvailable: boolean, description: string } | null, pduFields?: Array<{ __typename?: 'PeriodicFieldNode', id: string } | null> | null } | null } | null> } | null }; +export type AllProgramsForTableQueryVariables = Exact<{ + before?: InputMaybe; + after?: InputMaybe; + first?: InputMaybe; + last?: InputMaybe; + status?: InputMaybe> | InputMaybe>; + sector?: InputMaybe> | InputMaybe>; + businessArea: Scalars['String']['input']; + search?: InputMaybe; + numberOfHouseholds?: InputMaybe; + budget?: InputMaybe; + startDate?: InputMaybe; + endDate?: InputMaybe; + orderBy?: InputMaybe; + dataCollectingType?: InputMaybe; +}>; + + +export type AllProgramsForTableQuery = { __typename?: 'Query', allPrograms?: { __typename?: 'ProgramNodeConnection', totalCount?: number | null, edgeCount?: number | null, pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean, hasPreviousPage: boolean, endCursor?: string | null, startCursor?: string | null }, edges: Array<{ __typename?: 'ProgramNodeEdge', cursor: string, node?: { __typename?: 'ProgramNode', id: string, name: string, startDate: any, endDate: any, status: ProgramStatus, budget?: any | null, sector: ProgramSector, totalNumberOfHouseholds?: number | null } | null } | null> } | null }; + export type ProgramQueryVariables = Exact<{ id: Scalars['ID']['input']; }>; @@ -21956,6 +21976,94 @@ export type AllProgramsForChoicesQueryHookResult = ReturnType; export type AllProgramsForChoicesSuspenseQueryHookResult = ReturnType; export type AllProgramsForChoicesQueryResult = Apollo.QueryResult; +export const AllProgramsForTableDocument = gql` + query AllProgramsForTable($before: String, $after: String, $first: Int, $last: Int, $status: [String], $sector: [String], $businessArea: String!, $search: String, $numberOfHouseholds: String, $budget: String, $startDate: Date, $endDate: Date, $orderBy: String, $dataCollectingType: String) { + allPrograms( + before: $before + after: $after + first: $first + last: $last + status: $status + sector: $sector + businessArea: $businessArea + search: $search + numberOfHouseholds: $numberOfHouseholds + budget: $budget + orderBy: $orderBy + startDate: $startDate + endDate: $endDate + dataCollectingType: $dataCollectingType + ) { + pageInfo { + hasNextPage + hasPreviousPage + endCursor + startCursor + } + totalCount + edgeCount + edges { + cursor + node { + id + name + startDate + endDate + status + budget + sector + totalNumberOfHouseholds + } + } + } +} + `; + +/** + * __useAllProgramsForTableQuery__ + * + * To run a query within a React component, call `useAllProgramsForTableQuery` and pass it any options that fit your needs. + * When your component renders, `useAllProgramsForTableQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useAllProgramsForTableQuery({ + * variables: { + * before: // value for 'before' + * after: // value for 'after' + * first: // value for 'first' + * last: // value for 'last' + * status: // value for 'status' + * sector: // value for 'sector' + * businessArea: // value for 'businessArea' + * search: // value for 'search' + * numberOfHouseholds: // value for 'numberOfHouseholds' + * budget: // value for 'budget' + * startDate: // value for 'startDate' + * endDate: // value for 'endDate' + * orderBy: // value for 'orderBy' + * dataCollectingType: // value for 'dataCollectingType' + * }, + * }); + */ +export function useAllProgramsForTableQuery(baseOptions: Apollo.QueryHookOptions & ({ variables: AllProgramsForTableQueryVariables; skip?: boolean; } | { skip: boolean; }) ) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(AllProgramsForTableDocument, options); + } +export function useAllProgramsForTableLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(AllProgramsForTableDocument, options); + } +export function useAllProgramsForTableSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(AllProgramsForTableDocument, options); + } +export type AllProgramsForTableQueryHookResult = ReturnType; +export type AllProgramsForTableLazyQueryHookResult = ReturnType; +export type AllProgramsForTableSuspenseQueryHookResult = ReturnType; +export type AllProgramsForTableQueryResult = Apollo.QueryResult; export const ProgramDocument = gql` query Program($id: ID!) { program(id: $id) { diff --git a/frontend/src/apollo/queries/program/AllProgramsForTable.ts b/frontend/src/apollo/queries/program/AllProgramsForTable.ts new file mode 100644 index 0000000000..e0c91b36c3 --- /dev/null +++ b/frontend/src/apollo/queries/program/AllProgramsForTable.ts @@ -0,0 +1,59 @@ +import { gql } from '@apollo/client'; + +export const AllProgramsForTable = gql` + query AllProgramsForTable( + $before: String + $after: String + $first: Int + $last: Int + $status: [String] + $sector: [String] + $businessArea: String! + $search: String + $numberOfHouseholds: String + $budget: String + $startDate: Date + $endDate: Date + $orderBy: String + $dataCollectingType: String + ) { + allPrograms( + before: $before + after: $after + first: $first + last: $last + status: $status + sector: $sector + businessArea: $businessArea + search: $search + numberOfHouseholds: $numberOfHouseholds + budget: $budget + orderBy: $orderBy + startDate: $startDate + endDate: $endDate + dataCollectingType: $dataCollectingType + ) { + pageInfo { + hasNextPage + hasPreviousPage + endCursor + startCursor + } + totalCount + edgeCount + edges { + cursor + node { + id + name + startDate + endDate + status + budget + sector + totalNumberOfHouseholds + } + } + } + } +`; diff --git a/frontend/src/containers/tables/ProgrammesTable/ProgrammesHeadCells.tsx b/frontend/src/containers/tables/ProgrammesTable/ProgrammesHeadCells.tsx index d64076c10f..e097fa6939 100644 --- a/frontend/src/containers/tables/ProgrammesTable/ProgrammesHeadCells.tsx +++ b/frontend/src/containers/tables/ProgrammesTable/ProgrammesHeadCells.tsx @@ -1,8 +1,8 @@ -import { AllProgramsQuery } from '@generated/graphql'; +import { AllProgramsForTableQuery } from '@generated/graphql'; import { HeadCell } from '@components/core/Table/EnhancedTableHead'; export const headCells: HeadCell< -AllProgramsQuery['allPrograms']['edges'][number]['node'] + AllProgramsForTableQuery['allPrograms']['edges'][number]['node'] >[] = [ { disablePadding: false, diff --git a/frontend/src/containers/tables/ProgrammesTable/ProgrammesTable.test.tsx b/frontend/src/containers/tables/ProgrammesTable/ProgrammesTable.test.tsx index b6047cc59e..1c55846b08 100644 --- a/frontend/src/containers/tables/ProgrammesTable/ProgrammesTable.test.tsx +++ b/frontend/src/containers/tables/ProgrammesTable/ProgrammesTable.test.tsx @@ -3,10 +3,9 @@ import * as React from 'react'; import { act } from '@testing-library/react'; import wait from 'waait'; import { ProgrammesTable } from '.'; -import { render, ApolloLoadingLink } from '../../../testUtils/testUtils'; +import { render } from '../../../testUtils/testUtils'; import { fakeProgramChoices } from '../../../../fixtures/programs/fakeProgramChoices'; import { fakeApolloAllPrograms } from '../../../../fixtures/programs/fakeApolloAllPrograms'; -import {ApolloLink} from "@apollo/client"; describe('containers/tables/ProgrammesTable', () => { const initialFilter = { @@ -39,10 +38,7 @@ describe('containers/tables/ProgrammesTable', () => { it('should render loading', () => { const { container } = render( - + title={t('Programmes')} headCells={headCells} - query={useAllProgramsQuery} + query={useAllProgramsForTableQuery} queriedObjectName="allPrograms" initialVariables={initialVariables} renderRow={(row) => ( diff --git a/frontend/src/containers/tables/ProgrammesTable/ProgrammesTableRow.tsx b/frontend/src/containers/tables/ProgrammesTable/ProgrammesTableRow.tsx index 63499e274f..af6dc5fe32 100644 --- a/frontend/src/containers/tables/ProgrammesTable/ProgrammesTableRow.tsx +++ b/frontend/src/containers/tables/ProgrammesTable/ProgrammesTableRow.tsx @@ -1,7 +1,10 @@ import TableCell from '@mui/material/TableCell'; import * as React from 'react'; import { useNavigate } from 'react-router-dom'; -import { AllProgramsQuery, ProgrammeChoiceDataQuery } from '@generated/graphql'; +import { + AllProgramsForTableQuery, + ProgrammeChoiceDataQuery, +} from '@generated/graphql'; import { BlackLink } from '@components/core/BlackLink'; import { StatusBox } from '@components/core/StatusBox'; import { ClickableTableRow } from '@components/core/Table/ClickableTableRow'; @@ -14,7 +17,7 @@ import { } from '@utils/utils'; interface ProgrammesTableRowProps { - program: AllProgramsQuery['allPrograms']['edges'][number]['node']; + program: AllProgramsForTableQuery['allPrograms']['edges'][number]['node']; choicesData: ProgrammeChoiceDataQuery; }