Merge pull request #150 from open-schools/fix/SCHOOL-841/pagination-s…

…tudent-list Fix/school 841/pagination student list
open-schools · Jul 15, 2024 · 41ad5fe · 41ad5fe
2 parents df809b1 + f1a0198
commit 41ad5fe
Show file tree

Hide file tree

Showing 12 changed files with 184 additions and 85 deletions.
diff --git a/apps/schools/domains/circle/components/changeCircleForm/index.tsx b/apps/schools/domains/circle/components/changeCircleForm/index.tsx
@@ -82,8 +82,8 @@ export const ChangeCircleForm = () => {
                             required={true}
                             label={
                                 <span>
-                                        <span className={styles.requiredMark}>*</span> Название
-                                    </span>
+                                    <span className={styles.requiredMark}>*</span> Название
+                                </span>
                             }
                             name={CIRCLE_NAME}
                             className={styles.label}

diff --git a/apps/schools/domains/common/handlers/paginationChange.ts b/apps/schools/domains/common/handlers/paginationChange.ts
@@ -0,0 +1,43 @@
+export const handlePaginationChange = (
+    setPaginationParams: (params: { page: number; pageSize: number }) => void,
+    setQueryPaginationParams: (params: { [key: string]: { page: number; pageSize: number } }) => void,
+    counts: { [key: string]: number | undefined },
+    newPage: number,
+    newPageSize: number,
+    defaultPaginationTablePage: number,
+    defaultPaginationTablePageSize: number,
+    scrollToTop: () => void,
+) => {
+    setPaginationParams({
+        page: newPage,
+        pageSize: newPageSize,
+    })
+
+    const newQueryParams: { [key: string]: { page: number; pageSize: number } } = {}
+
+    let currentPage = newPage
+    let currentOffset = 0
+
+    Object.keys(counts).forEach((key, index) => {
+        const count = counts[key] ?? 0
+        const maxPages = Math.ceil(count / newPageSize)
+
+        if (currentPage <= maxPages) {
+            newQueryParams[key] = {
+                page: currentPage,
+                pageSize: newPageSize,
+            }
+        } else {
+            currentPage -= maxPages
+            newQueryParams[key] = {
+                page: defaultPaginationTablePage,
+                pageSize: defaultPaginationTablePageSize,
+            }
+        }
+
+        currentOffset += count
+    })
+
+    setQueryPaginationParams(newQueryParams)
+    scrollToTop()
+}
diff --git a/apps/schools/domains/common/redux/serializers.ts b/apps/schools/domains/common/redux/serializers.ts
@@ -125,10 +125,10 @@ interface GetStudentProfile {
     id?: string
     name: string
     age?: number
-    phone?: string
+    phone: string
     photo: GetPhoto
     parent_names?: string
-    parent_phones?: string
+    parent_phones: string
 }
 
 export interface GetAnalytics {

diff --git a/apps/schools/domains/common/utils/getTotalPages.ts b/apps/schools/domains/common/utils/getTotalPages.ts
@@ -0,0 +1,5 @@
+export const getTotalPages = (counts: { [key: string]: { count: number | undefined } }, pageSize: number) => {
+    return Object.keys(counts).reduce((total, key) => {
+        return total + Math.ceil((counts[key].count ?? 0) / pageSize) * pageSize
+    }, 0)
+}
diff --git a/apps/schools/domains/employee/components/createEmployeeForm/index.tsx b/apps/schools/domains/employee/components/createEmployeeForm/index.tsx
@@ -48,8 +48,8 @@ export const CreateEmployeeForm = () => {
                 required={true}
                 label={
                     <span>
-                            <span className={styles.requiredMark}>*</span> Телефон сотрудника
-                        </span>
+                        <span className={styles.requiredMark}>*</span> Телефон сотрудника
+                    </span>
                 }
                 name={EMPLOYEE_PHONE}
                 className={styles.label}
@@ -62,8 +62,8 @@ export const CreateEmployeeForm = () => {
                 required
                 label={
                     <span>
-                            <span className={styles.requiredMark}>*</span> Ф. И. О. сотрудника
-                        </span>
+                        <span className={styles.requiredMark}>*</span> Ф. И. О. сотрудника
+                    </span>
                 }
                 name={EMPLOYEE_NAME}
                 className={styles.label}
@@ -72,12 +72,7 @@ export const CreateEmployeeForm = () => {
                 <Input placeholder='Введите Ф. И. О. сотрудника' />
             </Form.Item>
 
-            <Form.Item
-                label='Email сотрудника'
-                name={EMPLOYEE_EMAIL}
-                className={styles.label}
-                rules={validators.email}
-            >
+            <Form.Item label='Email сотрудника' name={EMPLOYEE_EMAIL} className={styles.label} rules={validators.email}>
                 <Input type='email' placeholder='Введите email сотрудника' />
             </Form.Item>
 

diff --git a/apps/schools/domains/organization/redux/organizationApi.ts b/apps/schools/domains/organization/redux/organizationApi.ts
@@ -37,6 +37,7 @@ import { mapReturnedData } from '@domains/common/redux/utils'
 import { TableType as TableTypeCircle } from '@domains/circle/components/circleList/interfaces'
 import { TableType as TableTypeTickets } from '@domains/ticket/components/ticketList/interfaces'
 import { TableType as TableTypeQuery } from '@domains/query/components/queryList/interfaces'
+import { TableType as TableTypeStudent } from '@domains/student/components/studentList/interfaces'
 
 const organizationApi = commonApi.injectEndpoints({
     endpoints: (build) => ({
@@ -70,6 +71,17 @@ const organizationApi = commonApi.injectEndpoints({
                 method: 'GET',
                 params: params,
             }),
+            transformResponse: (response: ReturnedData<GetStudent[]>) => {
+                return mapReturnedData(response, (query) => {
+                    const transformedQuery = structuredClone(query) as unknown as TableTypeStudent
+                    transformedQuery.id = query.id
+                    transformedQuery.student_name = query.name
+                    transformedQuery.student_phone = query.student_profile.phone
+                    transformedQuery.parent_phone = query.student_profile.parent_phones?.replaceAll(',', '\n')
+                    transformedQuery.circle_name = query.circle.name
+                    return transformedQuery
+                })!
+            },
             providesTags: (result) => providesList(result?.results, 'Student'),
         }),
         getAllCircles: build.query<ReturnedData<TableTypeCircle[]>, GetOrganizationCircleListData>({
@@ -168,6 +180,17 @@ const organizationApi = commonApi.injectEndpoints({
                 method: 'GET',
                 params: params,
             }),
+            transformResponse: (response: ReturnedData<GetCircleInviteStudent[]>) => {
+                return mapReturnedData(response, (query) => {
+                    const transformedQuery = structuredClone(query) as unknown as TableTypeStudent
+                    transformedQuery.id = query.body.id
+                    transformedQuery.student_name = query.body.name
+                    transformedQuery.student_phone = query.additional.phone
+                    transformedQuery.parent_phone = query.recipient.parent_phones.replaceAll(',', '\n')
+                    transformedQuery.circle_name = query.sender.name
+                    return transformedQuery
+                })!
+            },
             providesTags: (result) => providesList(result?.results, 'Student'),
         }),
         getAllJoinCircleQueries: build.query<ReturnedData<GetStudentJoinCircle[]>, AllStudentJoinCircleQueriesData>({

diff --git a/apps/schools/domains/student/components/createStudentForm/index.tsx b/apps/schools/domains/student/components/createStudentForm/index.tsx
@@ -66,8 +66,8 @@ export const CreateStudentForm = () => {
             <Form.Item
                 label={
                     <span>
-                            <span className={styles.requiredMark}>*</span> Ф. И. О. обучающегося
-                        </span>
+                        <span className={styles.requiredMark}>*</span> Ф. И. О. обучающегося
+                    </span>
                 }
                 name={STUDENT_NAME}
                 className={styles.label}
@@ -82,8 +82,8 @@ export const CreateStudentForm = () => {
             <Form.Item
                 label={
                     <span>
-                            <span className={styles.requiredMark}>*</span> Телефон родителя
-                        </span>
+                        <span className={styles.requiredMark}>*</span> Телефон родителя
+                    </span>
                 }
                 name={PARENT_PHONE}
                 className={styles.label}
@@ -122,8 +122,8 @@ export const CreateStudentForm = () => {
             <Form.Item
                 label={
                     <span>
-                            <span className={styles.requiredMark}>*</span> Название кружка
-                        </span>
+                        <span className={styles.requiredMark}>*</span> Название кружка
+                    </span>
                 }
                 name={CIRCLES}
                 className={styles.label}

diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Typography } from 'antd'
 import router from 'next/router'
 import styles from './styles/styles.module.scss'
@@ -14,56 +14,71 @@ import EmptyWrapper from '@domains/common/components/containers/EmptyWrapper'
 import { AppRoutes, RoutePath } from '@domains/common/constants/routerEnums'
 import { defaultPaginationTablePage, defaultPaginationTablePageSize } from '@domains/common/constants/Table'
 import { scrollToTop } from '@domains/common/utils/scrollInDirection'
+import { handlePaginationChange } from '@domains/common/handlers/paginationChange'
+import { calculateResults } from '@domains/student/handlers/resultsCalculate'
+import { getTotalPages } from '@domains/common/utils/getTotalPages'
 
 export function StudentList() {
+    const [queryPaginationParams, setQueryPaginationParams] = useState({
+        invites: {
+            page: defaultPaginationTablePage,
+            pageSize: defaultPaginationTablePageSize,
+        },
+        students: {
+            page: defaultPaginationTablePage,
+            pageSize: defaultPaginationTablePageSize,
+        },
+    })
+
     const [searchRequestText, setSearchRequestText] = useState('')
     const { organizationId } = useOrganization()
 
     const { data: invites, isLoading: isLoadingInvites } = useGetAllStudentInvitationsQuery({
         circle__organization__id: organizationId,
         status: StatusesEnum.SENT,
         or_search: createSearchTextForRequest(searchRequestText, searchInvitesColumns),
+        page: queryPaginationParams.invites.page,
+        page_size: queryPaginationParams.invites.pageSize,
+    })
+
+    const { data: students, isFetching: isFetchingStudents } = useGetAllStudentsQuery({
+        circle__organization: organizationId,
+        or_search: createSearchTextForRequest(searchRequestText, searchStudentsColumns),
+        page: queryPaginationParams.students.page,
+        page_size: queryPaginationParams.students.pageSize,
     })
 
     const [paginationParams, setPaginationParams] = useState({
         page: defaultPaginationTablePage,
         pageSize: defaultPaginationTablePageSize,
     })
 
-    const { data: students, isFetching: isFetchingStudents } = useGetAllStudentsQuery({
-        circle__organization: organizationId,
-        or_search: createSearchTextForRequest(searchRequestText, searchStudentsColumns),
-        page: paginationParams.page,
-        page_size: paginationParams.pageSize,
-    })
+    const resultsCalculate = useCallback(
+        () => calculateResults(paginationParams, { invites, students }),
+        [paginationParams, invites, students],
+    )
 
     const data = {
         count: (invites?.count ?? 0) + (students?.count ?? 0),
         next: invites?.next ?? '',
         previous: invites?.previous ?? '',
-        results: (invites?.results ?? [])
-            .map(
-                (x) =>
-                    ({
-                        id: x.body.id,
-                        student_name: x.body.name,
-                        student_phone: x.additional.phone,
-                        parent_phone: x.recipient.parent_phones.replaceAll(',', '\n'),
-                        circle_name: x.sender.name,
-                    }) as RowType,
-            )
-            .concat(
-                (students?.results ?? []).map(
-                    (x) =>
-                        ({
-                            id: x.id,
-                            student_name: x.name,
-                            student_phone: x.student_profile.phone,
-                            parent_phone: x.student_profile.parent_phones?.replaceAll(',', '\n'),
-                            circle_name: x.circle.name,
-                        }) as RowType,
-                ),
-            ),
+        results: resultsCalculate(),
+    }
+
+    const handlePageChange = (newPage: number, newPageSize: number) => {
+        handlePaginationChange(
+            setPaginationParams,
+            setQueryPaginationParams as any,
+            {
+                invites: invites?.count,
+                students: students?.count,
+            },
+            newPage,
+            newPageSize,
+            defaultPaginationTablePage,
+            defaultPaginationTablePageSize,
+            scrollToTop,
+        )
     }
 
     return (
@@ -99,13 +114,12 @@ export function StudentList() {
                 pagination={{
                     current: paginationParams.page,
                     pageSize: paginationParams.pageSize,
-                    total: students?.count,
+                    total: getTotalPages(
+                        { invites: { count: invites?.count }, students: { count: students?.count } },
+                        paginationParams.pageSize,
+                    ),
                     onChange: (page, pageSize) => {
-                        setPaginationParams({
-                            page,
-                            pageSize,
-                        })
-                        scrollToTop()
+                        handlePageChange(page, pageSize)
                     },
                 }}
                 filterFields={['circle_name']}

diff --git a/apps/schools/domains/student/handlers/resultsCalculate.ts b/apps/schools/domains/student/handlers/resultsCalculate.ts
@@ -0,0 +1,23 @@
+import { RowType } from '@domains/student/components/studentList/interfaces'
+
+export const calculateResults = (
+    paginationParams: { page: number; pageSize: number },
+    data: {
+        [key: string]: { count: number | undefined; results: any[] } | undefined
+    },
+): RowType[] => {
+    const dataArray = Object.values(data)
+    const pageIndex = paginationParams.page - 1
+    let offset = 0
+
+    for (const item of dataArray) {
+        const count = item?.count ?? 0
+        const pageCount = Math.ceil(count / paginationParams.pageSize)
+        if (pageIndex < offset + pageCount) {
+            return item?.results ?? []
+        }
+        offset += pageCount
+    }
+
+    return []
+}