Fix/school 841/pagination student list

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}

apps/schools/domains/common/handlers/paginationChange.ts

@@ -0,0 +1,59 @@
+export const handlePaginationChange = (
+    setPaginationParams: (params: { page: number; pageSize: number }) => void,
+    setQueryPaginationParams: (params: {
+        invites: { page: number; pageSize: number }
+        students: { page: number; pageSize: number }
+    }) => void,
+    invitesCount: number | undefined,
+    newPage: number,
+    newPageSize: number,
+    defaultPaginationTablePage: number,
+    defaultPaginationTablePageSize: number,
+    scrollToTop: () => void,
+) => {
+    setPaginationParams({
+        page: newPage,
+        pageSize: newPageSize,
+    })
+
+    let newQueryParams: { invites: { page: number; pageSize: number }; students: { page: number; pageSize: number } }
+
+    if (newPage < Math.ceil((invitesCount ?? 0) / newPageSize)) {
+        newQueryParams = {
+            invites: {
+                page: newPage,
+                pageSize: newPageSize,
+            },
+            students: {
+                page: defaultPaginationTablePage,
+                pageSize: defaultPaginationTablePageSize,
+            },
+        }
+    } else if (newPage === Math.ceil((invitesCount ?? 0) / newPageSize)) {
+        newQueryParams = {
+            invites: {
+                page: newPage,
+                pageSize: newPageSize,
+            },
+            students: {
+                page: defaultPaginationTablePage,
+                pageSize: newPageSize - ((invitesCount ?? 0) % newPageSize),
+            },
+        }
+    } else {
+        const nextPage = Math.abs(newPage - Math.ceil((invitesCount ?? 0) / newPageSize))
+        newQueryParams = {
+            invites: {
+                page: defaultPaginationTablePage,
+                pageSize: defaultPaginationTablePageSize,
+            },
+            students: {
+                page: nextPage,
+                pageSize: 2 * newPageSize - ((invitesCount ?? 0) % newPageSize),
+            },
+        }
+    }
+
+    setQueryPaginationParams(newQueryParams)
+    scrollToTop()
+}

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>
 

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}

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,67 @@ 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'
 
 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,
+            invites?.count,
+            newPage,
+            newPageSize,
+            defaultPaginationTablePage,
+            defaultPaginationTablePageSize,
+            scrollToTop,
+        )
     }
 
     return (
@@ -99,13 +110,9 @@ export function StudentList() {
                 pagination={{
                     current: paginationParams.page,
                     pageSize: paginationParams.pageSize,
-                    total: students?.count,
+                    total: (invites?.count ?? 0) + (students?.count ?? 0),
                     onChange: (page, pageSize) => {
-                        setPaginationParams({
-                            page,
-                            pageSize,
-                        })
-                        scrollToTop()
+                        handlePageChange(page, pageSize)
                     },
                 }}
                 filterFields={['circle_name']}

apps/schools/domains/student/handlers/resultsCalculate.ts

@@ -0,0 +1,55 @@
+import { RowType } from '@domains/student/components/studentList/interfaces'
+
+export const calculateResults = (
+    paginationParams: { page: number; pageSize: number },
+    invites: { count: number | undefined; results: any[] } | undefined,
+    students: { count: number | undefined; results: any[] } | undefined,
+): RowType[] => {
+    if (paginationParams.page < Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) {
+        return (invites?.results ?? []).map((x) => {
+            return {
+                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
+        })
+    } else if (paginationParams.page === Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) {
+        return [...(invites?.results ?? []), ...(students?.results ?? [])]
+            .slice(0, paginationParams.pageSize)
+            .map((x) => {
+                if ('body' in x) {
+                    return {
+                        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
+                } else {
+                    return {
+                        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
+                }
+            })
+    } else {
+        const temp = paginationParams.pageSize - ((invites?.count ?? 0) % paginationParams.pageSize)
+        const mapper = (x: any) =>
+            ({
+                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
+
+        return students?.results.length === 1
+            ? [mapper(students?.results[0])]
+            : (students?.results ?? []).slice(temp).map(mapper)
+    }
+}

apps/schools/domains/user/components/auth/registerForm/index.tsx

@@ -1,5 +1,5 @@
 import { Col, Form, Row } from 'antd'
-import React, {PropsWithChildren, useCallback, useContext, useEffect, useState} from 'react'
+import React, { PropsWithChildren, useCallback, useContext, useEffect, useState } from 'react'
 
 import styles from '../styles/formStyles.module.scss'
 import { ResponsiveCol } from '../containers/ResponsiveCol'
@@ -10,9 +10,9 @@ import { IRegisterFormProps } from './interfaces'
 import { BUTTON_FORM_GUTTER_20 } from '../constants/styles'
 import { FirebaseReCaptchaContext } from '@domains/user/providers/firebaseReCaptchaProvider'
 import { registrationHandler } from '@domains/user/handlers/auth/register'
-import {useUsersMutation} from '@domains/user/redux/userApi'
-import {useUpdateEmployeeProfileByIdMutation} from "@domains/employee/redux/employeeApi";
-import {useLazyGetUserQuery} from "@domains/user/redux/authenticationApi";
+import { useUsersMutation } from '@domains/user/redux/userApi'
+import { useUpdateEmployeeProfileByIdMutation } from '@domains/employee/redux/employeeApi'
+import { useLazyGetUserQuery } from '@domains/user/redux/authenticationApi'
 
 const RequiredFlagWrapper: React.FC<PropsWithChildren<any>> = (props) => {
     return <div className={styles.requiredField}>{props.children}</div>
@@ -30,35 +30,34 @@ export const RegisterForm: React.FC<IRegisterFormProps> = ({ onFinish, onError }
         signInByPhone: () => {},
     }
 
-    const [updateProfile] = useUpdateEmployeeProfileByIdMutation();
-    const [getLazyUser, {data}] = useLazyGetUserQuery();
+    const [updateProfile] = useUpdateEmployeeProfileByIdMutation()
+    const [getLazyUser, { data }] = useLazyGetUserQuery()
 
     const registerComplete = useCallback(() => {
-        const { password } = form.getFieldsValue(['password']);
+        const { password } = form.getFieldsValue(['password'])
 
-        registrationHandler(phone, password, userRegistration, onError, form)
-            .then(async () => {
-                await getLazyUser({});
-            });
-    }, [form, signInByPhone, getLazyUser]);
+        registrationHandler(phone, password, userRegistration, onError, form).then(async () => {
+            await getLazyUser({})
+        })
+    }, [form, signInByPhone, getLazyUser])
 
     useEffect(() => {
-        const { email } = form.getFieldsValue(['email']);
-        const { name } = form.getFieldsValue(['name']);
+        const { email } = form.getFieldsValue(['email'])
+        const { name } = form.getFieldsValue(['name'])
 
         if (data && data.user.employee_profile?.id) {
             const updateEmail = {
                 employee_profile_id: data.user.employee_profile.id,
                 name: name,
-                email: email
-            };
-            updateProfile(updateEmail);
-            onFinish();
+                email: email,
+            }
+            updateProfile(updateEmail)
+            onFinish()
         }
-    }, [data, updateProfile]);
+    }, [data, updateProfile])
 
     const initialValues = {
-        phone
+        phone,
     }
 
     return (
@@ -104,10 +103,7 @@ export const RegisterForm: React.FC<IRegisterFormProps> = ({ onFinish, onError }
                                     data-cy='register-email-item'
                                     validateFirst
                                 >
-                                    <Input
-                                        autoComplete='chrome-off'
-                                        placeholder={'[email protected]'}
-                                    />
+                                    <Input autoComplete='chrome-off' placeholder={'[email protected]'} />
                                 </Form.Item>
                             </RequiredFlagWrapper>
                         </Col>