From 2fcc06fbc4169189b2e4e0ab3ec5bd053ce0e891 Mon Sep 17 00:00:00 2001 From: stampaaaron Date: Thu, 16 Jun 2022 09:01:54 +0200 Subject: [PATCH] feat: add pagination for verification assignment table --- graphql-types.ts | 270 +++++------------- src/configuration.ts | 3 +- src/utils/pagination.ts | 30 ++ .../verification/VerificationAssignment.tsx | 14 +- 4 files changed, 111 insertions(+), 206 deletions(-) create mode 100644 src/utils/pagination.ts diff --git a/graphql-types.ts b/graphql-types.ts index a62e687..94ff59c 100644 --- a/graphql-types.ts +++ b/graphql-types.ts @@ -56,10 +56,12 @@ export type ConferenceMutation = { updateConference?: Maybe; }; + export type ConferenceMutationCreateConferenceArgs = { conference: ConferenceInput; }; + export type ConferenceMutationUpdateConferenceArgs = { conference: ConferenceInput; }; @@ -177,17 +179,20 @@ export type Mutation = { verifications?: Maybe; }; + export type MutationPkorgArgs = { baseUrl: Scalars['String']; sessionToken: Scalars['String']; userAgent?: InputMaybe; }; + export type MutationUserLoginArgs = { email: Scalars['String']; password: Scalars['String']; }; + export type MutationVerificationFeedbackArgs = { changeGrading: Scalars['Boolean']; comment?: InputMaybe; @@ -227,6 +232,7 @@ export type PkorgMutation = { importDossiers?: Maybe; }; + export type PkorgMutationImportDossiersArgs = { dossiers: Array; }; @@ -237,6 +243,7 @@ export type PkorgQuery = { sessionUser?: Maybe; }; + export type PkorgQueryEvaluationArgs = { evaluationPath: Scalars['String']; }; @@ -252,30 +259,36 @@ export type Query = { verifications?: Maybe>; }; + export type QueryConferencesArgs = { id?: InputMaybe; }; + export type QueryDossiersArgs = { id?: InputMaybe; ids?: InputMaybe>; page?: InputMaybe; }; + export type QueryPkorgArgs = { baseUrl: Scalars['String']; sessionToken: Scalars['String']; userAgent?: InputMaybe; }; + export type QueryUsersArgs = { id?: InputMaybe; }; + export type QueryVerificationFeedbackArgs = { token: Scalars['String']; }; + export type QueryVerificationsArgs = { dossierId?: InputMaybe; id?: InputMaybe; @@ -343,14 +356,17 @@ export type UserMutation = { updateUser?: Maybe; }; + export type UserMutationCreateUserArgs = { user: UserInput; }; + export type UserMutationDeleteUserArgs = { id: Scalars['Int']; }; + export type UserMutationUpdateUserArgs = { id: Scalars['Int']; user: UserInput; @@ -391,6 +407,7 @@ export type VerificationMutation = { createVerification?: Maybe; }; + export type VerificationMutationCreateVerificationArgs = { verifications: Array; }; @@ -400,132 +417,61 @@ export type SignInMutationVariables = Exact<{ password: Scalars['String']; }>; -export type SignInMutation = { - __typename?: 'Mutation'; - userLogin?: { - __typename?: 'UserLoginPayload'; - authenticatable: { __typename?: 'User'; email: string; name?: string | null }; - credentials: { __typename?: 'Credential'; accessToken: string; client: string; expiry: number; tokenType: string; uid: string }; - } | null; -}; + +export type SignInMutation = { __typename?: 'Mutation', userLogin?: { __typename?: 'UserLoginPayload', authenticatable: { __typename?: 'User', email: string, name?: string | null }, credentials: { __typename?: 'Credential', accessToken: string, client: string, expiry: number, tokenType: string, uid: string } } | null }; export type ReadUserQueryVariables = Exact<{ id: Scalars['Int']; }>; -export type ReadUserQuery = { __typename?: 'Query'; users?: Array<{ __typename?: 'User'; id: number; email: string; name?: string | null; nickname?: string | null }> | null }; + +export type ReadUserQuery = { __typename?: 'Query', users?: Array<{ __typename?: 'User', id: number, email: string, name?: string | null, nickname?: string | null }> | null }; export type UpdateUserMutationVariables = Exact<{ id: Scalars['Int']; user: UserInput; }>; -export type UpdateUserMutation = { - __typename?: 'Mutation'; - users?: { - __typename?: 'UserMutation'; - updateUser?: { __typename?: 'UpdateUserMutationPayload'; user: { __typename?: 'User'; id: number; email: string; name?: string | null; nickname?: string | null } } | null; - } | null; -}; -export type IndexUsersQueryVariables = Exact<{ [key: string]: never }>; +export type UpdateUserMutation = { __typename?: 'Mutation', users?: { __typename?: 'UserMutation', updateUser?: { __typename?: 'UpdateUserMutationPayload', user: { __typename?: 'User', id: number, email: string, name?: string | null, nickname?: string | null } } | null } | null }; + +export type IndexUsersQueryVariables = Exact<{ [key: string]: never; }>; + -export type IndexUsersQuery = { __typename?: 'Query'; users?: Array<{ __typename?: 'User'; id: number; email: string; name?: string | null; nickname?: string | null }> | null }; +export type IndexUsersQuery = { __typename?: 'Query', users?: Array<{ __typename?: 'User', id: number, email: string, name?: string | null, nickname?: string | null }> | null }; export type DeleteUserMutationVariables = Exact<{ id: Scalars['Int']; }>; -export type DeleteUserMutation = { - __typename?: 'Mutation'; - users?: { __typename?: 'UserMutation'; deleteUser?: { __typename?: 'DeleteUserMutationPayload'; user: { __typename?: 'User'; id: number } } | null } | null; -}; + +export type DeleteUserMutation = { __typename?: 'Mutation', users?: { __typename?: 'UserMutation', deleteUser?: { __typename?: 'DeleteUserMutationPayload', user: { __typename?: 'User', id: number } } | null } | null }; export type CreateUserMutationVariables = Exact<{ user: UserInput; }>; -export type CreateUserMutation = { - __typename?: 'Mutation'; - users?: { - __typename?: 'UserMutation'; - createUser?: { __typename?: 'CreateUserMutationPayload'; user: { __typename?: 'User'; id: number; email: string; name?: string | null; nickname?: string | null } } | null; - } | null; -}; -export type IndexDossiersQueryVariables = Exact<{ [key: string]: never }>; +export type CreateUserMutation = { __typename?: 'Mutation', users?: { __typename?: 'UserMutation', createUser?: { __typename?: 'CreateUserMutationPayload', user: { __typename?: 'User', id: number, email: string, name?: string | null, nickname?: string | null } } | null } | null }; + +export type IndexDossiersQueryVariables = Exact<{ + page?: InputMaybe; +}>; + + +export type IndexDossiersQuery = { __typename?: 'Query', dossiers?: { __typename?: 'DossierCollection', collection: Array<{ __typename?: 'Dossier', id: number, submittedMark?: string | null, markDeduction?: boolean | null, tags: Array, dossierDownloadPath?: string | null, affiliation: { __typename?: 'Affiliation', tenantName: string }, candidate: { __typename?: 'Person', forename: string, surname: string, id: number }, conference: { __typename?: 'Conference', id: number, name: string } }>, metadata: { __typename?: 'CollectionMetadata', totalCount: number } } | null }; + +export type DossierVerificationExportQueryVariables = Exact<{ [key: string]: never; }>; -export type IndexDossiersQuery = { - __typename?: 'Query'; - dossiers?: { - __typename?: 'DossierCollection'; - collection: Array<{ - __typename?: 'Dossier'; - id: number; - submittedMark?: string | null; - markDeduction?: boolean | null; - tags: Array; - dossierDownloadPath?: string | null; - affiliation: { __typename?: 'Affiliation'; tenantName: string }; - candidate: { __typename?: 'Person'; forename: string; surname: string; id: number }; - conference: { __typename?: 'Conference'; id: number; name: string }; - }>; - } | null; -}; - -export type DossierVerificationExportQueryVariables = Exact<{ [key: string]: never }>; - -export type DossierVerificationExportQuery = { - __typename?: 'Query'; - dossiers?: { - __typename?: 'DossierCollection'; - collection: Array<{ - __typename?: 'Dossier'; - companyMarkA?: string | null; - companyMarkB?: string | null; - companyPointsA?: string | null; - companyPointsB?: string | null; - expertMarkA?: string | null; - expertMarkB?: string | null; - expertMarkC?: string | null; - expertPointsA?: string | null; - expertPointsB?: string | null; - finalMark?: string | null; - expertPointsC?: string | null; - id: number; - markDeduction?: boolean | null; - submittedMark?: string | null; - affiliation: { __typename?: 'Affiliation'; tenantName: string }; - candidate: { __typename?: 'Person'; forename: string; id: number; surname: string }; - companyContact?: { __typename?: 'Person'; forename: string; id: number; surname: string } | null; - conference: { __typename?: 'Conference'; id: number; name: string }; - primaryExpert?: { __typename?: 'Person'; forename: string; id: number; surname: string } | null; - secondaryExpert?: { __typename?: 'Person'; forename: string; id: number; surname: string } | null; - verifications?: Array<{ - __typename?: 'Verification'; - changeGrading?: boolean | null; - comment?: string | null; - id: number; - verifiedAt?: any | null; - participant: { __typename?: 'Participant'; forename: string; email: string; surname: string; id: number }; - }> | null; - }>; - } | null; -}; + +export type DossierVerificationExportQuery = { __typename?: 'Query', dossiers?: { __typename?: 'DossierCollection', collection: Array<{ __typename?: 'Dossier', companyMarkA?: string | null, companyMarkB?: string | null, companyPointsA?: string | null, companyPointsB?: string | null, expertMarkA?: string | null, expertMarkB?: string | null, expertMarkC?: string | null, expertPointsA?: string | null, expertPointsB?: string | null, finalMark?: string | null, expertPointsC?: string | null, id: number, markDeduction?: boolean | null, submittedMark?: string | null, affiliation: { __typename?: 'Affiliation', tenantName: string }, candidate: { __typename?: 'Person', forename: string, id: number, surname: string }, companyContact?: { __typename?: 'Person', forename: string, id: number, surname: string } | null, conference: { __typename?: 'Conference', id: number, name: string }, primaryExpert?: { __typename?: 'Person', forename: string, id: number, surname: string } | null, secondaryExpert?: { __typename?: 'Person', forename: string, id: number, surname: string } | null, verifications?: Array<{ __typename?: 'Verification', changeGrading?: boolean | null, comment?: string | null, id: number, verifiedAt?: any | null, participant: { __typename?: 'Participant', forename: string, email: string, surname: string, id: number } }> | null }> } | null }; export type ReadVerificationFeedbackQueryVariables = Exact<{ token: Scalars['String']; }>; -export type ReadVerificationFeedbackQuery = { - __typename?: 'Query'; - verificationFeedback?: { - __typename?: 'VerificationFeedback'; - changeGrading?: boolean | null; - comment?: string | null; - dossier: { __typename?: 'Dossier'; candidate: { __typename?: 'Person'; forename: string; surname: string } }; - } | null; -}; + +export type ReadVerificationFeedbackQuery = { __typename?: 'Query', verificationFeedback?: { __typename?: 'VerificationFeedback', changeGrading?: boolean | null, comment?: string | null, dossier: { __typename?: 'Dossier', candidate: { __typename?: 'Person', forename: string, surname: string } } } | null }; export type SendVerificationFeedbackMutationVariables = Exact<{ token: Scalars['String']; @@ -533,135 +479,69 @@ export type SendVerificationFeedbackMutationVariables = Exact<{ comment?: InputMaybe; }>; -export type SendVerificationFeedbackMutation = { - __typename?: 'Mutation'; - verificationFeedback?: { __typename?: 'VerificationFeedbackMutationPayload'; verification: { __typename?: 'VerificationFeedback'; id: number } } | null; -}; + +export type SendVerificationFeedbackMutation = { __typename?: 'Mutation', verificationFeedback?: { __typename?: 'VerificationFeedbackMutationPayload', verification: { __typename?: 'VerificationFeedback', id: number } } | null }; export type ReadDossiersQueryVariables = Exact<{ ids?: InputMaybe | Scalars['Int']>; }>; -export type ReadDossiersQuery = { - __typename?: 'Query'; - dossiers?: { - __typename?: 'DossierCollection'; - collection: Array<{ - __typename?: 'Dossier'; - id: number; - conference: { - __typename?: 'Conference'; - id: number; - name: string; - participants: Array<{ __typename?: 'Participant'; email: string; forename: string; surname: string; id: number }>; - }; - candidate: { __typename?: 'Person'; forename: string; surname: string }; - companyContact?: { __typename?: 'Person'; forename: string; surname: string } | null; - primaryExpert?: { __typename?: 'Person'; forename: string; surname: string } | null; - secondaryExpert?: { __typename?: 'Person'; forename: string; surname: string } | null; - }>; - } | null; -}; + +export type ReadDossiersQuery = { __typename?: 'Query', dossiers?: { __typename?: 'DossierCollection', collection: Array<{ __typename?: 'Dossier', id: number, conference: { __typename?: 'Conference', id: number, name: string, participants: Array<{ __typename?: 'Participant', email: string, forename: string, surname: string, id: number }> }, candidate: { __typename?: 'Person', forename: string, surname: string }, companyContact?: { __typename?: 'Person', forename: string, surname: string } | null, primaryExpert?: { __typename?: 'Person', forename: string, surname: string } | null, secondaryExpert?: { __typename?: 'Person', forename: string, surname: string } | null }> } | null }; export type CreateVerificationsMutationVariables = Exact<{ verifications: Array | VerificationInput; }>; -export type CreateVerificationsMutation = { - __typename?: 'Mutation'; - verifications?: { - __typename?: 'VerificationMutation'; - createVerification?: { __typename?: 'CreateVerificationMutationPayload'; verifications: Array<{ __typename?: 'Verification'; id: number }> } | null; - } | null; -}; + +export type CreateVerificationsMutation = { __typename?: 'Mutation', verifications?: { __typename?: 'VerificationMutation', createVerification?: { __typename?: 'CreateVerificationMutationPayload', verifications: Array<{ __typename?: 'Verification', id: number }> } | null } | null }; export type ReadDossierQueryVariables = Exact<{ id: Scalars['Int']; }>; -export type ReadDossierQuery = { - __typename?: 'Query'; - dossiers?: { - __typename?: 'DossierCollection'; - collection: Array<{ - __typename?: 'Dossier'; - conference: { __typename?: 'Conference'; id: number; participants: Array<{ __typename?: 'Participant'; email: string; forename: string; surname: string; id: number }> }; - companyContact?: { __typename?: 'Person'; forename: string; surname: string } | null; - primaryExpert?: { __typename?: 'Person'; forename: string; surname: string } | null; - secondaryExpert?: { __typename?: 'Person'; forename: string; surname: string } | null; - }>; - } | null; -}; + +export type ReadDossierQuery = { __typename?: 'Query', dossiers?: { __typename?: 'DossierCollection', collection: Array<{ __typename?: 'Dossier', conference: { __typename?: 'Conference', id: number, participants: Array<{ __typename?: 'Participant', email: string, forename: string, surname: string, id: number }> }, companyContact?: { __typename?: 'Person', forename: string, surname: string } | null, primaryExpert?: { __typename?: 'Person', forename: string, surname: string } | null, secondaryExpert?: { __typename?: 'Person', forename: string, surname: string } | null }> } | null }; export type CreateVerificationMutationVariables = Exact<{ verifications: Array | VerificationInput; }>; -export type CreateVerificationMutation = { - __typename?: 'Mutation'; - verifications?: { - __typename?: 'VerificationMutation'; - createVerification?: { __typename?: 'CreateVerificationMutationPayload'; verifications: Array<{ __typename?: 'Verification'; id: number }> } | null; - } | null; -}; + +export type CreateVerificationMutation = { __typename?: 'Mutation', verifications?: { __typename?: 'VerificationMutation', createVerification?: { __typename?: 'CreateVerificationMutationPayload', verifications: Array<{ __typename?: 'Verification', id: number }> } | null } | null }; export type IndexVerificationsQueryVariables = Exact<{ dossierId?: InputMaybe; }>; -export type IndexVerificationsQuery = { - __typename?: 'Query'; - verifications?: Array<{ - __typename?: 'Verification'; - id: number; - changeGrading?: boolean | null; - comment?: string | null; - verifiedAt?: any | null; - participant: { __typename?: 'Participant'; forename: string; surname: string; email: string }; - }> | null; -}; + +export type IndexVerificationsQuery = { __typename?: 'Query', verifications?: Array<{ __typename?: 'Verification', id: number, changeGrading?: boolean | null, comment?: string | null, verifiedAt?: any | null, participant: { __typename?: 'Participant', forename: string, surname: string, email: string } }> | null }; export type ReadConferenceQueryVariables = Exact<{ id: Scalars['Int']; }>; -export type ReadConferenceQuery = { - __typename?: 'Query'; - conferences?: Array<{ - __typename?: 'Conference'; - id: number; - name: string; - participants: Array<{ __typename?: 'Participant'; id: number; forename: string; surname: string; email: string }>; - }> | null; -}; + +export type ReadConferenceQuery = { __typename?: 'Query', conferences?: Array<{ __typename?: 'Conference', id: number, name: string, participants: Array<{ __typename?: 'Participant', id: number, forename: string, surname: string, email: string }> }> | null }; export type UpdateConferenceMutationVariables = Exact<{ conference: ConferenceInput; }>; -export type UpdateConferenceMutation = { - __typename?: 'Mutation'; - conferences?: { - __typename?: 'ConferenceMutation'; - updateConference?: { __typename?: 'UpdateConferenceMutationPayload'; conference: { __typename?: 'Conference'; id: number; name: string } } | null; - } | null; -}; -export type IndexConferencesQueryVariables = Exact<{ [key: string]: never }>; +export type UpdateConferenceMutation = { __typename?: 'Mutation', conferences?: { __typename?: 'ConferenceMutation', updateConference?: { __typename?: 'UpdateConferenceMutationPayload', conference: { __typename?: 'Conference', id: number, name: string } } | null } | null }; + +export type IndexConferencesQueryVariables = Exact<{ [key: string]: never; }>; -export type IndexConferencesQuery = { __typename?: 'Query'; conferences?: Array<{ __typename?: 'Conference'; id: number; name: string }> | null }; + +export type IndexConferencesQuery = { __typename?: 'Query', conferences?: Array<{ __typename?: 'Conference', id: number, name: string }> | null }; export type CreateConferenceMutationVariables = Exact<{ conference: ConferenceInput; }>; -export type CreateConferenceMutation = { - __typename?: 'Mutation'; - conferences?: { - __typename?: 'ConferenceMutation'; - createConference?: { __typename?: 'CreateConferenceMutationPayload'; conference: { __typename?: 'Conference'; id: number; name: string } } | null; - } | null; -}; + +export type CreateConferenceMutation = { __typename?: 'Mutation', conferences?: { __typename?: 'ConferenceMutation', createConference?: { __typename?: 'CreateConferenceMutationPayload', conference: { __typename?: 'Conference', id: number, name: string } } | null } | null }; export type CheckConnectionQueryVariables = Exact<{ baseUrl: Scalars['String']; @@ -669,19 +549,8 @@ export type CheckConnectionQueryVariables = Exact<{ userAgent: Scalars['String']; }>; -export type CheckConnectionQuery = { - __typename?: 'Query'; - pkorg?: { - __typename?: 'PkorgQuery'; - sessionUser?: { - __typename?: 'SessionUser'; - email: string; - forename: string; - surname: string; - affiliations: Array<{ __typename?: 'Affiliation'; tenantName: string; tenantId: string; role: string }>; - } | null; - } | null; -}; + +export type CheckConnectionQuery = { __typename?: 'Query', pkorg?: { __typename?: 'PkorgQuery', sessionUser?: { __typename?: 'SessionUser', email: string, forename: string, surname: string, affiliations: Array<{ __typename?: 'Affiliation', tenantName: string, tenantId: string, role: string }> } | null } | null }; export type ImportDossiersMutationVariables = Exact<{ baseUrl: Scalars['String']; @@ -690,10 +559,8 @@ export type ImportDossiersMutationVariables = Exact<{ dossiers: Array | DossierInput; }>; -export type ImportDossiersMutation = { - __typename?: 'Mutation'; - pkorg?: { __typename?: 'PkorgMutation'; importDossiers?: { __typename?: 'ImportMutationPayload'; importCount: number } | null } | null; -}; + +export type ImportDossiersMutation = { __typename?: 'Mutation', pkorg?: { __typename?: 'PkorgMutation', importDossiers?: { __typename?: 'ImportMutationPayload', importCount: number } | null } | null }; export type RetrieveEvaluationQueryVariables = Exact<{ baseUrl: Scalars['String']; @@ -702,4 +569,5 @@ export type RetrieveEvaluationQueryVariables = Exact<{ evaluationPath: Scalars['String']; }>; -export type RetrieveEvaluationQuery = { __typename?: 'Query'; pkorg?: { __typename?: 'PkorgQuery'; evaluation?: { __typename?: 'Evaluation'; result: any } | null } | null }; + +export type RetrieveEvaluationQuery = { __typename?: 'Query', pkorg?: { __typename?: 'PkorgQuery', evaluation?: { __typename?: 'Evaluation', result: any } | null } | null }; diff --git a/src/configuration.ts b/src/configuration.ts index 6ca002d..547034b 100644 --- a/src/configuration.ts +++ b/src/configuration.ts @@ -36,7 +36,8 @@ const CONFIGURATION = { }, defaultValues: { evaluationPath: 'verwaltung/301/40?nauswertungid=149', - dossierPath: 'generate-zip/' + dossierPath: 'generate-zip/', + pageSize: 20 }, localStorage: { session: 'session' diff --git a/src/utils/pagination.ts b/src/utils/pagination.ts new file mode 100644 index 0000000..ccbed72 --- /dev/null +++ b/src/utils/pagination.ts @@ -0,0 +1,30 @@ +import { PaginationProps } from 'antd'; +import { useSearchParams } from 'react-router-dom'; +import CONFIGURATION from '../configuration'; + +type PaginationOptions = { + pageSize?: number; + searchParamKey?: string; + customPaginationProps?: Partial; +}; + +export const usePagination = (totalCount?: number, options?: PaginationOptions): { paginationConfig: PaginationProps; currentPage?: number } => { + const { pageSize = CONFIGURATION.defaultValues.pageSize, searchParamKey = 'page', customPaginationProps } = options ?? {}; + + const [searchParams, setSearchParams] = useSearchParams(); + + const pageParams = searchParams.get(searchParamKey); + const currentPage = pageParams ? parseInt(pageParams) : undefined; + + return { + paginationConfig: { + current: currentPage, + onChange: (page) => setSearchParams({ [searchParamKey]: `${page}` }), + pageSize, + total: totalCount, + showSizeChanger: false, + ...customPaginationProps + }, + currentPage + }; +}; diff --git a/src/views/verification/VerificationAssignment.tsx b/src/views/verification/VerificationAssignment.tsx index eb44d1e..b63ce76 100644 --- a/src/views/verification/VerificationAssignment.tsx +++ b/src/views/verification/VerificationAssignment.tsx @@ -9,10 +9,11 @@ import DefaultLayout from '../../layouts/DefaultLayout'; import { Unarray } from '../../utils/types'; import VerificationList from './assignment/VerificationList'; import MultiAssignmentModal from './assignment/MultiAssignmentModal'; +import { usePagination } from '../../utils/pagination'; const INDEX_DOSSIERS = gql` - query IndexDossiers { - dossiers(page: 1) { + query IndexDossiers($page: Int) { + dossiers(page: $page) { collection { id affiliation { @@ -32,6 +33,9 @@ const INDEX_DOSSIERS = gql` tags dossierDownloadPath } + metadata { + totalCount + } } } `; @@ -42,10 +46,11 @@ export default function VerificationAssignment() { const intl = useIntl(); const [indexDossiers, { loading, data }] = useLazyQuery(INDEX_DOSSIERS, { fetchPolicy: 'cache-and-network' }); const [selection, setSelection] = useState([]); + const { paginationConfig, currentPage } = usePagination(data?.dossiers?.metadata.totalCount); useEffect(() => { - indexDossiers(); - }, [indexDossiers]); + indexDossiers({ variables: { page: currentPage } }); + }, [indexDossiers, currentPage]); const columns: TableColumnsType = [ { @@ -157,6 +162,7 @@ export default function VerificationAssignment() { setSelection(rows.map((r) => parseInt(r.toString()))); } }} + pagination={paginationConfig} /> );