feat: Tag View Pagination

packages/client/src/components/tag/view/TagGridView.component.tsx

@@ -3,6 +3,7 @@ import { GetGridColDefs, TagViewTest } from '../../../types/TagColumnView';
 import { Entry, Study } from '../../../graphql/graphql';
 import {
   GridColDef,
+  GridPaginationModel,
   GridRenderCellParams,
   GridToolbarColumnsButton,
   GridToolbarContainer,
@@ -19,12 +20,15 @@ import { getSliderCols, sliderTest } from './SliderGridView.component';
 import { getBoolCols, booleanTest } from './BooleanGridView.component';
 import { aslLexTest, getAslLexCols } from './AslLexGridView.component';
 import { getVideoCols, videoViewTest } from './VideoGridView.component';
-import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 export interface TagGridViewProps {
   study: Study;
   tags: GetTagsQuery['getTags'];
   refetchTags: () => void;
+  paginationModel: GridPaginationModel;
+  setPaginationModel: Dispatch<SetStateAction<GridPaginationModel>>;
+  totalTags: number;
 }
 
 /**
@@ -55,7 +59,14 @@ interface GridData extends Omit<GetTagsQuery['getTags'][0], 'data'> {
   data: { [property: string]: any } | null;
 }
 
-export const TagGridView: React.FC<TagGridViewProps> = ({ tags, study, refetchTags }) => {
+export const TagGridView: React.FC<TagGridViewProps> = ({
+  tags,
+  study,
+  refetchTags,
+  paginationModel,
+  setPaginationModel,
+  totalTags
+}) => {
   const { t } = useTranslation();
 
   const [gridData, setGridData] = useState<(GridData | null)[]>([]);
@@ -163,6 +174,18 @@ export const TagGridView: React.FC<TagGridViewProps> = ({ tags, study, refetchTa
       columns={entryColumns.concat(tagMetaColumns).concat(dataColunms).concat(tagRedoColumns)}
       getRowId={(row) => row._id}
       slots={{ toolbar: TagToolbar }}
+      paginationMode="server"
+      paginationModel={paginationModel}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 5
+          }
+        }
+      }}
+      pageSizeOptions={[5, 10, 15]}
+      onPaginationModelChange={setPaginationModel}
+      rowCount={totalTags}
     />
   );
 };

packages/client/src/graphql/graphql.ts

@@ -469,6 +469,8 @@ export type ProjectPermissionModel = {
 export type Query = {
   __typename?: 'Query';
   countEntryForDataset: Scalars['Int']['output'];
+  countTagForStudy: Scalars['Int']['output'];
+  countTrainingTagForStudy: Scalars['Int']['output'];
   datasetExists: Scalars['Boolean']['output'];
   entryForDataset: Array<Entry>;
   entryFromID: Entry;
@@ -506,6 +508,17 @@ export type QueryCountEntryForDatasetArgs = {
 };
 
 
+export type QueryCountTagForStudyArgs = {
+  study: Scalars['ID']['input'];
+};
+
+
+export type QueryCountTrainingTagForStudyArgs = {
+  study: Scalars['ID']['input'];
+  user: Scalars['String']['input'];
+};
+
+
 export type QueryDatasetExistsArgs = {
   name: Scalars['String']['input'];
 };
@@ -582,11 +595,15 @@ export type QueryGetStudyPermissionsArgs = {
 
 
 export type QueryGetTagsArgs = {
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
   study: Scalars['ID']['input'];
 };
 
 
 export type QueryGetTrainingTagsArgs = {
+  page?: InputMaybe<Scalars['Int']['input']>;
+  pageSize?: InputMaybe<Scalars['Int']['input']>;
   study: Scalars['ID']['input'];
   user: Scalars['String']['input'];
 };

packages/client/src/graphql/tag/tag.graphql

@@ -50,8 +50,8 @@ mutation saveVideoField($tag: ID!, $field: String!, $index: Int!) {
   }
 }
 
-query getTags($study: ID!) {
-  getTags(study: $study) {
+query getTags($study: ID!, $page: Int, $pageSize: Int) {
+  getTags(study: $study, page: $page, pageSize: $pageSize) {
     _id
     entry {
       _id
@@ -118,8 +118,16 @@ query getTags($study: ID!) {
   }
 }
 
-query getTrainingTags($study: ID!, $user: String!) {
-  getTrainingTags(study: $study, user: $user) {
+query countTagForStudy($study: ID!) {
+  countTagForStudy(study: $study)
+}
+
+query countTrainingTagForStudy($study: ID!, $user: String!) {
+  countTrainingTagForStudy(study: $study, user: $user)
+}
+
+query getTrainingTags($study: ID!, $user: String!, $page: Int, $pageSize: Int) {
+  getTrainingTags(study: $study, user: $user, page: $page, pageSize: $pageSize) {
     _id
     entry {
       _id

packages/client/src/graphql/tag/tag.ts

@@ -71,14 +71,33 @@ export type SaveVideoFieldMutation = { __typename?: 'Mutation', saveVideoField:
 
 export type GetTagsQueryVariables = Types.Exact<{
   study: Types.Scalars['ID']['input'];
+  page?: Types.InputMaybe<Types.Scalars['Int']['input']>;
+  pageSize?: Types.InputMaybe<Types.Scalars['Int']['input']>;
 }>;
 
 
 export type GetTagsQuery = { __typename?: 'Query', getTags: Array<{ __typename?: 'Tag', _id: string, complete: boolean, entry: { __typename?: 'Entry', _id: string, organization: string, entryID: string, contentType: string, creator: string, dateCreated: any, meta?: any | null, signedUrl: string, signedUrlExpiration: number, isTraining: boolean }, data?: Array<{ __typename?: 'TagField', type: Types.TagFieldType, name: string, field?: { __typename: 'AslLexField', lexiconEntry: { __typename?: 'LexiconEntry', key: string, primary: string, video: string, lexicon: string, associates: Array<string>, fields: any } } | { __typename: 'BooleanField', boolValue: boolean } | { __typename: 'FreeTextField', textValue: string } | { __typename: 'NumericField', numericValue: number } | { __typename: 'SliderField', sliderValue: number } | { __typename: 'VideoField', entries: Array<{ __typename?: 'Entry', _id: string, organization: string, entryID: string, contentType: string, creator: string, dateCreated: any, meta?: any | null, signedUrl: string, signedUrlExpiration: number, isTraining: boolean }> } | null }> | null }> };
 
+export type CountTagForStudyQueryVariables = Types.Exact<{
+  study: Types.Scalars['ID']['input'];
+}>;
+
+
+export type CountTagForStudyQuery = { __typename?: 'Query', countTagForStudy: number };
+
+export type CountTrainingTagForStudyQueryVariables = Types.Exact<{
+  study: Types.Scalars['ID']['input'];
+  user: Types.Scalars['String']['input'];
+}>;
+
+
+export type CountTrainingTagForStudyQuery = { __typename?: 'Query', countTrainingTagForStudy: number };
+
 export type GetTrainingTagsQueryVariables = Types.Exact<{
   study: Types.Scalars['ID']['input'];
   user: Types.Scalars['String']['input'];
+  page?: Types.InputMaybe<Types.Scalars['Int']['input']>;
+  pageSize?: Types.InputMaybe<Types.Scalars['Int']['input']>;
 }>;
 
 
@@ -364,8 +383,8 @@ export type SaveVideoFieldMutationHookResult = ReturnType<typeof useSaveVideoFie
 export type SaveVideoFieldMutationResult = Apollo.MutationResult<SaveVideoFieldMutation>;
 export type SaveVideoFieldMutationOptions = Apollo.BaseMutationOptions<SaveVideoFieldMutation, SaveVideoFieldMutationVariables>;
 export const GetTagsDocument = gql`
-    query getTags($study: ID!) {
-  getTags(study: $study) {
+    query getTags($study: ID!, $page: Int, $pageSize: Int) {
+  getTags(study: $study, page: $page, pageSize: $pageSize) {
     _id
     entry {
       _id
@@ -440,6 +459,8 @@ export const GetTagsDocument = gql`
  * const { data, loading, error } = useGetTagsQuery({
  *   variables: {
  *      study: // value for 'study'
+ *      page: // value for 'page'
+ *      pageSize: // value for 'pageSize'
  *   },
  * });
  */
@@ -454,9 +475,76 @@ export function useGetTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Ge
 export type GetTagsQueryHookResult = ReturnType<typeof useGetTagsQuery>;
 export type GetTagsLazyQueryHookResult = ReturnType<typeof useGetTagsLazyQuery>;
 export type GetTagsQueryResult = Apollo.QueryResult<GetTagsQuery, GetTagsQueryVariables>;
+export const CountTagForStudyDocument = gql`
+    query countTagForStudy($study: ID!) {
+  countTagForStudy(study: $study)
+}
+    `;
+
+/**
+ * __useCountTagForStudyQuery__
+ *
+ * To run a query within a React component, call `useCountTagForStudyQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCountTagForStudyQuery` 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 } = useCountTagForStudyQuery({
+ *   variables: {
+ *      study: // value for 'study'
+ *   },
+ * });
+ */
+export function useCountTagForStudyQuery(baseOptions: Apollo.QueryHookOptions<CountTagForStudyQuery, CountTagForStudyQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CountTagForStudyQuery, CountTagForStudyQueryVariables>(CountTagForStudyDocument, options);
+      }
+export function useCountTagForStudyLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CountTagForStudyQuery, CountTagForStudyQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CountTagForStudyQuery, CountTagForStudyQueryVariables>(CountTagForStudyDocument, options);
+        }
+export type CountTagForStudyQueryHookResult = ReturnType<typeof useCountTagForStudyQuery>;
+export type CountTagForStudyLazyQueryHookResult = ReturnType<typeof useCountTagForStudyLazyQuery>;
+export type CountTagForStudyQueryResult = Apollo.QueryResult<CountTagForStudyQuery, CountTagForStudyQueryVariables>;
+export const CountTrainingTagForStudyDocument = gql`
+    query countTrainingTagForStudy($study: ID!, $user: String!) {
+  countTrainingTagForStudy(study: $study, user: $user)
+}
+    `;
+
+/**
+ * __useCountTrainingTagForStudyQuery__
+ *
+ * To run a query within a React component, call `useCountTrainingTagForStudyQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCountTrainingTagForStudyQuery` 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 } = useCountTrainingTagForStudyQuery({
+ *   variables: {
+ *      study: // value for 'study'
+ *      user: // value for 'user'
+ *   },
+ * });
+ */
+export function useCountTrainingTagForStudyQuery(baseOptions: Apollo.QueryHookOptions<CountTrainingTagForStudyQuery, CountTrainingTagForStudyQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CountTrainingTagForStudyQuery, CountTrainingTagForStudyQueryVariables>(CountTrainingTagForStudyDocument, options);
+      }
+export function useCountTrainingTagForStudyLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CountTrainingTagForStudyQuery, CountTrainingTagForStudyQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CountTrainingTagForStudyQuery, CountTrainingTagForStudyQueryVariables>(CountTrainingTagForStudyDocument, options);
+        }
+export type CountTrainingTagForStudyQueryHookResult = ReturnType<typeof useCountTrainingTagForStudyQuery>;
+export type CountTrainingTagForStudyLazyQueryHookResult = ReturnType<typeof useCountTrainingTagForStudyLazyQuery>;
+export type CountTrainingTagForStudyQueryResult = Apollo.QueryResult<CountTrainingTagForStudyQuery, CountTrainingTagForStudyQueryVariables>;
 export const GetTrainingTagsDocument = gql`
-    query getTrainingTags($study: ID!, $user: String!) {
-  getTrainingTags(study: $study, user: $user) {
+    query getTrainingTags($study: ID!, $user: String!, $page: Int, $pageSize: Int) {
+  getTrainingTags(study: $study, user: $user, page: $page, pageSize: $pageSize) {
     _id
     entry {
       _id
@@ -532,6 +620,8 @@ export const GetTrainingTagsDocument = gql`
  *   variables: {
  *      study: // value for 'study'
  *      user: // value for 'user'
+ *      page: // value for 'page'
+ *      pageSize: // value for 'pageSize'
  *   },
  * });
  */

packages/client/src/pages/studies/TagTrainingView.tsx

@@ -1,11 +1,12 @@
 import { useLocation } from 'react-router-dom';
 import { User, Study } from '../../graphql/graphql';
-import { GetTagsQuery, useGetTrainingTagsQuery } from '../../graphql/tag/tag';
+import { GetTagsQuery, useCountTrainingTagForStudyLazyQuery, useGetTrainingTagsLazyQuery } from '../../graphql/tag/tag';
 import { useEffect, useState } from 'react';
 import { TagGridView } from '../../components/tag/view/TagGridView.component';
 import { Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useSnackbar } from '../../context/Snackbar.context';
+import { GridPaginationModel } from '@mui/x-data-grid';
 
 export const TagTrainingView: React.FC = () => {
   const state = useLocation().state;
@@ -14,28 +15,57 @@ export const TagTrainingView: React.FC = () => {
   const [tags, setTags] = useState<GetTagsQuery['getTags']>([]);
   const { t } = useTranslation();
   const { pushSnackbarMessage } = useSnackbar();
+  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({ page: 0, pageSize: 10 });
+  const [trainingTagsQuery, trainingTagsResult] = useGetTrainingTagsLazyQuery();
+  const [totalTags, setTotalTags] = useState<number>(0);
+  const [tagCount, tagCountResult] = useCountTrainingTagForStudyLazyQuery();
 
-  const trainingTags = useGetTrainingTagsQuery({ variables: { study: study._id, user: user.uid } });
+  useEffect(() => {
+    trainingTagsQuery({
+      variables: {
+        study: study._id,
+        user: user.uid,
+        page: paginationModel.page,
+        pageSize: paginationModel.pageSize
+      }
+    });
+    tagCount({ variables: { study: study._id, user: user.uid } });
+  }, [paginationModel]);
 
   useEffect(() => {
-    if (trainingTags.data) {
-      setTags(trainingTags.data.getTrainingTags);
-    } else if (trainingTags.error) {
+    if (trainingTagsResult.data) {
+      setTags(trainingTagsResult.data.getTrainingTags);
+    } else if (trainingTagsResult.error) {
       pushSnackbarMessage(t('errors.tagsQuery'), 'error');
-      console.error(trainingTags.error);
+      console.error(trainingTagsResult.error);
+    }
+  }, [trainingTagsResult]);
+
+  useEffect(() => {
+    if (tagCountResult.data) {
+      setTotalTags(tagCountResult.data.countTrainingTagForStudy);
+    } else if (tagCountResult.error) {
+      console.error(tagCountResult.error);
     }
-  }, [trainingTags]);
+  }, [tagCountResult]);
 
   const refetchTags = () => {
-    trainingTags.refetch();
+    trainingTagsResult.refetch();
   };
 
   return (
     <>
       {!tags || tags.length === 0 ? (
         <Typography variant="h3">{t('components.userPermissions.noTrainingTags')}</Typography>
       ) : (
-        <TagGridView tags={tags} study={study} refetchTags={refetchTags} />
+        <TagGridView
+          tags={tags}
+          study={study}
+          refetchTags={refetchTags}
+          paginationModel={paginationModel}
+          setPaginationModel={setPaginationModel}
+          totalTags={totalTags}
+        />
       )}
     </>
   );