From 0e30f8610359212d22bb541f2ca1938a61bc5ec4 Mon Sep 17 00:00:00 2001 From: nenichv Date: Mon, 1 Jul 2024 14:33:20 +0500 Subject: [PATCH 01/21] delete tooltips, add width tooltips, fix margin btn, add cursor pointer in row table --- .../components/changeCircleForm/index.tsx | 28 ++- .../styles/styles.module.scss | 1 + .../circle/components/circleList/index.tsx | 2 +- .../circleList/styles/styles.module.scss | 6 +- .../components/createCircleForm/index.tsx | 38 +--- .../styles/styles.module.scss | 4 +- .../components/createEmployeeForm/index.tsx | 80 ++++---- .../styles/styles.module.scss | 1 + .../components/createStudentForm/index.tsx | 194 ++++++++---------- .../styles/styles.module.scss | 2 +- 10 files changed, 147 insertions(+), 209 deletions(-) diff --git a/apps/schools/domains/circle/components/changeCircleForm/index.tsx b/apps/schools/domains/circle/components/changeCircleForm/index.tsx index f67c7333..8ad76a1a 100644 --- a/apps/schools/domains/circle/components/changeCircleForm/index.tsx +++ b/apps/schools/domains/circle/components/changeCircleForm/index.tsx @@ -6,8 +6,6 @@ import { Button } from '@domains/common/components/button' import { useChangeCircleFormValidators } from './hooks' import { useGetAllCirclesQuery } from '@domains/organization/redux/organizationApi' import { useOrganization } from '@domains/organization/providers/organizationProvider' -import { WithTooltip } from '@domains/common/components/tooltip/withTooltip' -import { TOOLTIP_MARGIN } from './styles/styles' import { isValidFormCheck } from '@domains/common/utils/form' import { CIRCLE_NAME, CIRCLE_ADDRESS, ADDRESS_ROOM } from './constants' import classnames from 'classnames' @@ -80,22 +78,20 @@ export const ChangeCircleForm = () => { layout='vertical' > Редактирование кружка - - + * Название - } - name={CIRCLE_NAME} - className={styles.label} - rules={validators.name} - initialValue={initialValues[CIRCLE_NAME]} - > - - - + } + name={CIRCLE_NAME} + className={styles.label} + rules={validators.name} + initialValue={initialValues[CIRCLE_NAME]} + > + + {!circlesData.isLoading ? ( diff --git a/apps/schools/domains/circle/components/changeCircleForm/styles/styles.module.scss b/apps/schools/domains/circle/components/changeCircleForm/styles/styles.module.scss index 197ea315..42252514 100644 --- a/apps/schools/domains/circle/components/changeCircleForm/styles/styles.module.scss +++ b/apps/schools/domains/circle/components/changeCircleForm/styles/styles.module.scss @@ -20,6 +20,7 @@ font-style: normal; font-weight: 400; line-height: 22px; + width: 95%; :global { .ant-select-selector { diff --git a/apps/schools/domains/circle/components/circleList/index.tsx b/apps/schools/domains/circle/components/circleList/index.tsx index d9a1c062..9c23ba0d 100644 --- a/apps/schools/domains/circle/components/circleList/index.tsx +++ b/apps/schools/domains/circle/components/circleList/index.tsx @@ -10,7 +10,6 @@ import { RowType, TableType } from './interfaces' import { searchStudentsColumns } from './constants' import { useGetAllCirclesQuery } from '@domains/organization/redux/organizationApi' import EmptyWrapper from '@domains/common/components/containers/EmptyWrapper' -import { mapReturnedData } from '@domains/common/redux/utils' import { HighlightText } from '@domains/common/components/table/forming' import { getVarsForAddressColumn } from '@domains/common/utils/geo' import { AppRoutes, RoutePath } from '@domains/common/constants/routerEnums' @@ -97,6 +96,7 @@ export function CircleList() { customWidths={[60, 25, 15]} searchRequestText={searchRequestText} setSearchRequestText={setSearchRequestText} + rowClassName={styles.tableRowPointer} /> ) diff --git a/apps/schools/domains/circle/components/circleList/styles/styles.module.scss b/apps/schools/domains/circle/components/circleList/styles/styles.module.scss index 20a5f9b5..c0d78172 100644 --- a/apps/schools/domains/circle/components/circleList/styles/styles.module.scss +++ b/apps/schools/domains/circle/components/circleList/styles/styles.module.scss @@ -59,4 +59,8 @@ font-style: normal; font-weight: 400; line-height: 22px; -} \ No newline at end of file +} + +.tableRowPointer:hover { + cursor: pointer; +} diff --git a/apps/schools/domains/circle/components/createCircleForm/index.tsx b/apps/schools/domains/circle/components/createCircleForm/index.tsx index 3d5636a6..a06e375d 100644 --- a/apps/schools/domains/circle/components/createCircleForm/index.tsx +++ b/apps/schools/domains/circle/components/createCircleForm/index.tsx @@ -1,4 +1,4 @@ -import { Form, Typography, Input as AntdInput, Row, Spin, Tooltip } from 'antd' +import { Form, Typography, Input as AntdInput, Row, Spin } from 'antd' import React, { useEffect, useState } from 'react' import { Input } from '@domains/common/components/input' import styles from './styles/styles.module.scss' @@ -6,12 +6,10 @@ import { Button } from '@domains/common/components/button' import { useCreateCircleFormValidators } from './hooks' import { useGetAllCirclesQuery } from '@domains/organization/redux/organizationApi' import { useOrganization } from '@domains/organization/providers/organizationProvider' -import { WithTooltip } from '@domains/common/components/tooltip/withTooltip' -import { TOOLTIP_MARGIN } from './styles/styles' import { isValidFormCheck } from '@domains/common/utils/form' import { CIRCLE_NAME, CIRCLE_ADDRESS, ADDRESS_ROOM } from './constants' import classnames from 'classnames' -import { AimOutlined, QuestionCircleFilled } from '@ant-design/icons' +import { AimOutlined } from '@ant-design/icons' import { Select } from '@domains/common/components/select' import { useCreateCircleMutation } from '../../redux/circleApi' import { getVarsForAddressColumn } from '@domains/common/utils/geo' @@ -21,14 +19,6 @@ import { mapSteps } from '@domains/circle/interfaces/mapStepsType' import { FormMapSteps } from '@domains/circle/constants/Enums' import Image from 'next/image' import android from '@public/image/Android 11.png' -import { - DEFAULT_ICON_SIZE, - DEFAULT_MARGIN, - DEFAULT_OVERLAY_INNER_COLOR, - DEFAULT_OVERLAY_INNER_STYLE, - ICON_SIZES, -} from '@domains/common/components/tooltip/styles/styles' -import { BackPage } from '@domains/common/components/backPage' export const CreateCircleForm = () => { const validators = useCreateCircleFormValidators() @@ -93,28 +83,10 @@ export const CreateCircleForm = () => { > -
- - - -
- + /> diff --git a/apps/schools/domains/circle/components/createCircleForm/styles/styles.module.scss b/apps/schools/domains/circle/components/createCircleForm/styles/styles.module.scss index 4ff4c485..c79c9600 100644 --- a/apps/schools/domains/circle/components/createCircleForm/styles/styles.module.scss +++ b/apps/schools/domains/circle/components/createCircleForm/styles/styles.module.scss @@ -30,13 +30,13 @@ width: 3%; } - .inputWithTooltipContainer { + .inputContainer { display: flex; flex-direction: row; justify-content: unset; } - .inputWithTooltip { + .input { width: 70%; margin-right: 5px; display: flex; diff --git a/apps/schools/domains/employee/components/createEmployeeForm/index.tsx b/apps/schools/domains/employee/components/createEmployeeForm/index.tsx index 01834f6a..1660b138 100644 --- a/apps/schools/domains/employee/components/createEmployeeForm/index.tsx +++ b/apps/schools/domains/employee/components/createEmployeeForm/index.tsx @@ -7,9 +7,7 @@ import { useCreateEmployeeFormValidators } from './hooks' import { useInviteEmployeeMutation } from '@domains/organization/redux/organizationApi' import { useOrganization } from '@domains/organization/providers/organizationProvider' import { handleSubmitForm } from '@domains/employee/handlers/employeeCreate' -import router, { useRouter } from 'next/router' -import { WithTooltip } from '@domains/common/components/tooltip/withTooltip' -import { TOOLTIP_MARGIN } from '@domains/employee/components/createEmployeeForm/styles/styles' +import { useRouter } from 'next/router' import { isValidFormCheck } from '@domains/common/utils/form' import { EMPLOYEE_EMAIL, @@ -45,55 +43,47 @@ export const CreateEmployeeForm = () => { }} layout='vertical' > - Добавление Сотрудника - - + Добавление сотрудника + * Телефон сотрудника - } - name={EMPLOYEE_PHONE} - className={styles.label} - rules={validators.phone} - > - - - + } + name={EMPLOYEE_PHONE} + className={styles.label} + rules={validators.phone} + > + + - - + * Ф. И. О. сотрудника - } - name={EMPLOYEE_NAME} - className={styles.label} - rules={validators.name} - > - - - + } + name={EMPLOYEE_NAME} + className={styles.label} + rules={validators.name} + > + + - - - - - + + + - - - - - + + + + + )} + options={circlesData?.data?.results.map((x) => { + return { + value: x.id, + label: x.name, + } + })} + /> + + diff --git a/apps/schools/domains/user/components/profile/profileInfo/styles/styles.module.scss b/apps/schools/domains/user/components/profile/profileInfo/styles/styles.module.scss index 4aa3a70c..972ae767 100644 --- a/apps/schools/domains/user/components/profile/profileInfo/styles/styles.module.scss +++ b/apps/schools/domains/user/components/profile/profileInfo/styles/styles.module.scss @@ -17,3 +17,11 @@ } } } + +.editButton { + margin-top: 30px; +} + +.organizationContainer { + margin-top: 60px; +} From 9c07a19a633dd0814dd1fe2a6391259b092143af Mon Sep 17 00:00:00 2001 From: nenichv Date: Thu, 4 Jul 2024 12:40:39 +0500 Subject: [PATCH 05/21] add * in fields --- .../components/profile/profileEdit/index.tsx | 16 ++++++++++++---- .../profileEdit/styles/styles.module.scss | 6 ++++++ 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/apps/schools/domains/user/components/profile/profileEdit/index.tsx b/apps/schools/domains/user/components/profile/profileEdit/index.tsx index cb43fee5..bfb1756e 100644 --- a/apps/schools/domains/user/components/profile/profileEdit/index.tsx +++ b/apps/schools/domains/user/components/profile/profileEdit/index.tsx @@ -61,9 +61,13 @@ export function ProfileEdit() { > + * Ф.И.О. + + } name={USER_NAME} - rules={[...validators[USER_NAME], { required: true, message: '' }]} + rules={validators[USER_NAME]} className={styles.label} initialValue={initialValues[USER_NAME]} > @@ -72,9 +76,13 @@ export function ProfileEdit() { + * Email сотрудника + + } name={USER_EMAIL} - rules={[...validators[USER_EMAIL], { required: true, message: '' }]} + rules={validators[USER_EMAIL]} className={styles.label} initialValue={initialValues[USER_EMAIL]} > diff --git a/apps/schools/domains/user/components/profile/profileEdit/styles/styles.module.scss b/apps/schools/domains/user/components/profile/profileEdit/styles/styles.module.scss index a87ccef5..1a78fbe0 100644 --- a/apps/schools/domains/user/components/profile/profileEdit/styles/styles.module.scss +++ b/apps/schools/domains/user/components/profile/profileEdit/styles/styles.module.scss @@ -1,3 +1,5 @@ +@import '../../../../../common/components/styles/abstracts/colors'; + .baseRowContainer { padding-bottom: 50px; @@ -19,3 +21,7 @@ } } } + +.requiredMark{ + color: $color-required-mark; +} From 6451235b247aa3d8a446f5c999841ff3bcd990a6 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Thu, 4 Jul 2024 17:15:44 +0500 Subject: [PATCH 06/21] merge students and invites --- .../student/components/studentList/index.tsx | 127 +++++++++++++----- 1 file changed, 92 insertions(+), 35 deletions(-) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 48c023ec..37819c80 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -16,14 +16,15 @@ import { defaultPaginationTablePage, defaultPaginationTablePageSize } from '@dom import { scrollToTop } from '@domains/common/utils/scrollInDirection' export function StudentList() { - const [invitesPaginationParams, setInvitesPaginationParams] = useState({ - page: defaultPaginationTablePage, - pageSize: defaultPaginationTablePageSize, - }) - - const [studentsPaginationParams, setStudentsPaginationParams] = useState({ - page: defaultPaginationTablePage, - pageSize: defaultPaginationTablePageSize, + const [queryPaginationParams, setQueryPaginationParams] = useState({ + invites: { + page: defaultPaginationTablePage, + pageSize: defaultPaginationTablePageSize, + }, + students: { + page: defaultPaginationTablePage, + pageSize: defaultPaginationTablePageSize, + }, }) const [searchRequestText, setSearchRequestText] = useState('') @@ -33,23 +34,25 @@ export function StudentList() { circle__organization__id: organizationId, status: StatusesEnum.SENT, or_search: createSearchTextForRequest(searchRequestText, searchInvitesColumns), - page: invitesPaginationParams.page, - page_size: invitesPaginationParams.pageSize, + page: queryPaginationParams.invites.page, + page_size: queryPaginationParams.invites.pageSize, }) const { data: students, isFetching: isFetchingStudents } = useGetAllStudentsQuery({ circle__organization: organizationId, or_search: createSearchTextForRequest(searchRequestText, searchStudentsColumns), - page: studentsPaginationParams.page, - page_size: studentsPaginationParams.pageSize, + page: queryPaginationParams.students.page, + page_size: queryPaginationParams.students.pageSize, }) - const data = { - count: (invites?.count ?? 0) + (students?.count ?? 0), - next: invites?.next ?? '', - previous: invites?.previous ?? '', - results: [...(invites?.results ?? []), ...(students?.results ?? [])].map((x) => { - if ('body' in x) { + const [paginationParams, setPaginationParams] = useState({ + page: defaultPaginationTablePage, + pageSize: defaultPaginationTablePageSize, + }) + + const resultsCalc = (): 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, @@ -57,7 +60,32 @@ export function StudentList() { parent_phone: x.recipient.parent_phones.replaceAll(',', '\n'), circle_name: x.sender.name, } as RowType - } else { + }) + } 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) + return (students?.results ?? []).slice(temp).map((x) => { return { id: x.id, student_name: x.name, @@ -65,25 +93,54 @@ export function StudentList() { parent_phone: x.student_profile.parent_phones?.replaceAll(',', '\n'), circle_name: x.circle.name, } as RowType - } - }), + }) + } } - const [currentPage, setCurrentPage] = useState(defaultPaginationTablePage) - const [currentPageSize, setCurrentPageSize] = useState(defaultPaginationTablePageSize) + const data = { + count: (invites?.count ?? 0) + (students?.count ?? 0), + next: invites?.next ?? '', + previous: invites?.previous ?? '', + results: resultsCalc(), + } const handlePageChange = (newPage: number, newPageSize: number) => { - setCurrentPage(newPage) - setCurrentPageSize(newPageSize) + setPaginationParams({ + page: newPage, + pageSize: newPageSize, + }) - if (newPage <= Math.ceil(invites?.count ?? 0 / defaultPaginationTablePageSize)) { - setInvitesPaginationParams({ page: newPage, pageSize: newPageSize }) + if (newPage < Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { + setQueryPaginationParams((prevParams) => ({ + ...prevParams, + invites: { + page: newPage, + pageSize: newPageSize, + }, + })) + } else if (newPage === Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { + setQueryPaginationParams(() => ({ + invites: { + page: newPage, + pageSize: newPageSize, + }, + students: { + page: 1, + pageSize: paginationParams.pageSize - ((invites?.count ?? 0) % newPageSize), + }, + })) } else { - const invitesCount = invites?.count ?? 0 - const studentsPage = - Math.ceil((newPage * defaultPaginationTablePageSize - invitesCount) / defaultPaginationTablePageSize) + - 1 - setStudentsPaginationParams({ page: studentsPage, pageSize: newPageSize }) + const nextPage = Math.abs(newPage - Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) + setQueryPaginationParams(() => ({ + invites: { + page: defaultPaginationTablePage, + pageSize: defaultPaginationTablePageSize, + }, + students: { + page: nextPage, + pageSize: paginationParams.pageSize, + }, + })) } scrollToTop() } @@ -119,9 +176,9 @@ export function StudentList() { ['Телефон родителя', 'parent_phone'], ]} pagination={{ - current: currentPage, - pageSize: currentPageSize, - total: data.count, + current: paginationParams.page, + pageSize: paginationParams.pageSize, + total: (invites?.count ?? 0) + (students?.count ?? 0), onChange: (page, pageSize) => { handlePageChange(page, pageSize) }, From 0cd1021a4fe45c4ee1f1343a88b418298b371ca5 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Thu, 4 Jul 2024 17:18:06 +0500 Subject: [PATCH 07/21] change 1 to defaultPaginationTablePage --- apps/schools/domains/student/components/studentList/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 37819c80..7b7917b0 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -125,7 +125,7 @@ export function StudentList() { pageSize: newPageSize, }, students: { - page: 1, + page: defaultPaginationTablePage, pageSize: paginationParams.pageSize - ((invites?.count ?? 0) % newPageSize), }, })) From ee72274b3d558917420745af341c5013b70312cf Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Thu, 4 Jul 2024 18:09:28 +0500 Subject: [PATCH 08/21] change nextPage logic --- .../domains/student/components/studentList/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 7b7917b0..38f2fb22 100644 --- 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' @@ -50,7 +50,7 @@ export function StudentList() { pageSize: defaultPaginationTablePageSize, }) - const resultsCalc = (): RowType[] => { + const resultsCalc = useCallback((): RowType[] => { if (paginationParams.page < Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { return (invites?.results ?? []).map((x) => { return { @@ -95,7 +95,7 @@ export function StudentList() { } as RowType }) } - } + }, [queryPaginationParams, paginationParams, invites, students]) const data = { count: (invites?.count ?? 0) + (students?.count ?? 0), @@ -138,7 +138,7 @@ export function StudentList() { }, students: { page: nextPage, - pageSize: paginationParams.pageSize, + pageSize: 2 * paginationParams.pageSize - ((invites?.count ?? 0) % newPageSize), }, })) } From f427a3b32268ff26ff86e8dff47bf0a2ca4dd08a Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Thu, 4 Jul 2024 18:15:28 +0500 Subject: [PATCH 09/21] small fix --- .../domains/student/components/studentList/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 38f2fb22..3f8d60ab 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -110,7 +110,7 @@ export function StudentList() { pageSize: newPageSize, }) - if (newPage < Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { + if (newPage < Math.ceil((invites?.count ?? 0) / newPageSize)) { setQueryPaginationParams((prevParams) => ({ ...prevParams, invites: { @@ -118,7 +118,7 @@ export function StudentList() { pageSize: newPageSize, }, })) - } else if (newPage === Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { + } else if (newPage === Math.ceil((invites?.count ?? 0) / newPageSize)) { setQueryPaginationParams(() => ({ invites: { page: newPage, @@ -130,7 +130,7 @@ export function StudentList() { }, })) } else { - const nextPage = Math.abs(newPage - Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) + const nextPage = Math.abs(newPage - Math.ceil((invites?.count ?? 0) / newPageSize)) setQueryPaginationParams(() => ({ invites: { page: defaultPaginationTablePage, From 38ebc9a9a019eefb90156b62e23b22f0ec8e11e0 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Thu, 4 Jul 2024 18:56:03 +0500 Subject: [PATCH 10/21] fix --- apps/schools/domains/student/components/studentList/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 3f8d60ab..c16244fa 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -126,7 +126,7 @@ export function StudentList() { }, students: { page: defaultPaginationTablePage, - pageSize: paginationParams.pageSize - ((invites?.count ?? 0) % newPageSize), + pageSize: newPageSize - ((invites?.count ?? 0) % newPageSize), }, })) } else { @@ -138,7 +138,7 @@ export function StudentList() { }, students: { page: nextPage, - pageSize: 2 * paginationParams.pageSize - ((invites?.count ?? 0) % newPageSize), + pageSize: 2 * newPageSize - ((invites?.count ?? 0) % newPageSize), }, })) } From 185e9d2ce13f9515a4306188308946e80eba4a34 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Thu, 4 Jul 2024 19:09:49 +0500 Subject: [PATCH 11/21] refactor --- .../common/handlers/paginationChange.ts | 59 +++++++++++++++++++ .../student/components/studentList/index.tsx | 53 ++++------------- 2 files changed, 72 insertions(+), 40 deletions(-) create mode 100644 apps/schools/domains/common/handlers/paginationChange.ts diff --git a/apps/schools/domains/common/handlers/paginationChange.ts b/apps/schools/domains/common/handlers/paginationChange.ts new file mode 100644 index 00000000..5c3ba72c --- /dev/null +++ b/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() +} diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index c16244fa..ce2aa659 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -14,6 +14,7 @@ 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' export function StudentList() { const [queryPaginationParams, setQueryPaginationParams] = useState({ @@ -50,7 +51,7 @@ export function StudentList() { pageSize: defaultPaginationTablePageSize, }) - const resultsCalc = useCallback((): RowType[] => { + const resultsCalculate = useCallback((): RowType[] => { if (paginationParams.page < Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { return (invites?.results ?? []).map((x) => { return { @@ -101,48 +102,20 @@ export function StudentList() { count: (invites?.count ?? 0) + (students?.count ?? 0), next: invites?.next ?? '', previous: invites?.previous ?? '', - results: resultsCalc(), + results: resultsCalculate(), } const handlePageChange = (newPage: number, newPageSize: number) => { - setPaginationParams({ - page: newPage, - pageSize: newPageSize, - }) - - if (newPage < Math.ceil((invites?.count ?? 0) / newPageSize)) { - setQueryPaginationParams((prevParams) => ({ - ...prevParams, - invites: { - page: newPage, - pageSize: newPageSize, - }, - })) - } else if (newPage === Math.ceil((invites?.count ?? 0) / newPageSize)) { - setQueryPaginationParams(() => ({ - invites: { - page: newPage, - pageSize: newPageSize, - }, - students: { - page: defaultPaginationTablePage, - pageSize: newPageSize - ((invites?.count ?? 0) % newPageSize), - }, - })) - } else { - const nextPage = Math.abs(newPage - Math.ceil((invites?.count ?? 0) / newPageSize)) - setQueryPaginationParams(() => ({ - invites: { - page: defaultPaginationTablePage, - pageSize: defaultPaginationTablePageSize, - }, - students: { - page: nextPage, - pageSize: 2 * newPageSize - ((invites?.count ?? 0) % newPageSize), - }, - })) - } - scrollToTop() + handlePaginationChange( + setPaginationParams, + setQueryPaginationParams, + invites?.count, + newPage, + newPageSize, + defaultPaginationTablePage, + defaultPaginationTablePageSize, + scrollToTop, + ) } return ( From ed49e2c0fffbe3ba95191ed2953e074b9b9dc816 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Thu, 4 Jul 2024 19:39:25 +0500 Subject: [PATCH 12/21] resultsCalculate took it out --- .../student/components/studentList/index.tsx | 53 +++---------------- .../student/handlers/resultsCalculate.ts | 52 ++++++++++++++++++ 2 files changed, 59 insertions(+), 46 deletions(-) create mode 100644 apps/schools/domains/student/handlers/resultsCalculate.ts diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index ce2aa659..5d9d4737 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -15,6 +15,7 @@ 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({ @@ -51,52 +52,12 @@ export function StudentList() { pageSize: defaultPaginationTablePageSize, }) - const resultsCalculate = useCallback((): 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) - return (students?.results ?? []).slice(temp).map((x) => { - 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 - }) - } - }, [queryPaginationParams, paginationParams, invites, students]) + const resultsCalculate = useCallback( + () => calculateResults(paginationParams, invites, students), + [paginationParams, invites, students], + ) + + console.log(resultsCalculate()) const data = { count: (invites?.count ?? 0) + (students?.count ?? 0), diff --git a/apps/schools/domains/student/handlers/resultsCalculate.ts b/apps/schools/domains/student/handlers/resultsCalculate.ts new file mode 100644 index 00000000..143e5afe --- /dev/null +++ b/apps/schools/domains/student/handlers/resultsCalculate.ts @@ -0,0 +1,52 @@ +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) + return (students?.results ?? []).slice(temp).map((x) => { + 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 + }) + } +} From d5fb712733b226b50aca34cfa340f4fbbe70a15d Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Thu, 4 Jul 2024 19:44:48 +0500 Subject: [PATCH 13/21] fix --- .../domains/student/handlers/resultsCalculate.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/schools/domains/student/handlers/resultsCalculate.ts b/apps/schools/domains/student/handlers/resultsCalculate.ts index 143e5afe..735ea4c8 100644 --- a/apps/schools/domains/student/handlers/resultsCalculate.ts +++ b/apps/schools/domains/student/handlers/resultsCalculate.ts @@ -39,14 +39,17 @@ export const calculateResults = ( }) } else { const temp = paginationParams.pageSize - ((invites?.count ?? 0) % paginationParams.pageSize) - return (students?.results ?? []).slice(temp).map((x) => { - return { + 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 - }) + }) as RowType + + return students?.results.length === 1 + ? [mapper(students?.results[0])] + : (students?.results ?? []).slice(temp).map(mapper) } } From 3e77fdc3aca4b0ea4c778332cfe7ebb3da50834a Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Fri, 5 Jul 2024 03:01:58 +0500 Subject: [PATCH 14/21] del console.log --- apps/schools/domains/student/components/studentList/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 5d9d4737..d6c4fe5f 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -57,8 +57,6 @@ export function StudentList() { [paginationParams, invites, students], ) - console.log(resultsCalculate()) - const data = { count: (invites?.count ?? 0) + (students?.count ?? 0), next: invites?.next ?? '', From c629aa0f0a99a7b9d640ad748b7e62e2397f8b4b Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Fri, 5 Jul 2024 12:34:20 +0500 Subject: [PATCH 15/21] calculateResults mappers took in transformResponse organizationApi --- .../domains/common/redux/serializers.ts | 4 +- .../organization/redux/organizationApi.ts | 23 ++++++++++ .../student/handlers/resultsCalculate.ts | 45 ++----------------- 3 files changed, 28 insertions(+), 44 deletions(-) diff --git a/apps/schools/domains/common/redux/serializers.ts b/apps/schools/domains/common/redux/serializers.ts index 6165fb90..b16df007 100644 --- 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/organization/redux/organizationApi.ts b/apps/schools/domains/organization/redux/organizationApi.ts index 6dcafe3d..2307d8a5 100644 --- 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) => { + 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, GetOrganizationCircleListData>({ @@ -168,6 +180,17 @@ const organizationApi = commonApi.injectEndpoints({ method: 'GET', params: params, }), + transformResponse: (response: ReturnedData) => { + 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, AllStudentJoinCircleQueriesData>({ diff --git a/apps/schools/domains/student/handlers/resultsCalculate.ts b/apps/schools/domains/student/handlers/resultsCalculate.ts index 735ea4c8..abd92688 100644 --- a/apps/schools/domains/student/handlers/resultsCalculate.ts +++ b/apps/schools/domains/student/handlers/resultsCalculate.ts @@ -6,50 +6,11 @@ export const calculateResults = ( 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 - }) + return invites?.results ?? [] } 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 - } - }) + return [...(invites?.results ?? []), ...(students?.results ?? [])].slice(0, paginationParams.pageSize) } 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) + return students?.results.length === 1 ? [students?.results[0]] : (students?.results ?? []).slice(temp) } } From 3b0165c382fbc0f6e78e5bde81628482f52bdac1 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Fri, 12 Jul 2024 15:06:00 +0500 Subject: [PATCH 16/21] calculateResults for 2 arrays --- .../domains/common/handlers/paginationChange.ts | 15 ++------------- .../student/components/studentList/index.tsx | 4 +++- .../domains/student/handlers/resultsCalculate.ts | 7 ++----- 3 files changed, 7 insertions(+), 19 deletions(-) diff --git a/apps/schools/domains/common/handlers/paginationChange.ts b/apps/schools/domains/common/handlers/paginationChange.ts index 5c3ba72c..946f6cbf 100644 --- a/apps/schools/domains/common/handlers/paginationChange.ts +++ b/apps/schools/domains/common/handlers/paginationChange.ts @@ -18,7 +18,7 @@ export const handlePaginationChange = ( let newQueryParams: { invites: { page: number; pageSize: number }; students: { page: number; pageSize: number } } - if (newPage < Math.ceil((invitesCount ?? 0) / newPageSize)) { + if (newPage <= Math.ceil((invitesCount ?? 0) / newPageSize)) { newQueryParams = { invites: { page: newPage, @@ -29,17 +29,6 @@ export const handlePaginationChange = ( 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 = { @@ -49,7 +38,7 @@ export const handlePaginationChange = ( }, students: { page: nextPage, - pageSize: 2 * newPageSize - ((invitesCount ?? 0) % newPageSize), + pageSize: newPageSize, }, } } diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index d6c4fe5f..fb1b3c60 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -110,7 +110,9 @@ export function StudentList() { pagination={{ current: paginationParams.page, pageSize: paginationParams.pageSize, - total: (invites?.count ?? 0) + (students?.count ?? 0), + total: + Math.ceil((invites?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize + + Math.ceil((students?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize, onChange: (page, pageSize) => { handlePageChange(page, pageSize) }, diff --git a/apps/schools/domains/student/handlers/resultsCalculate.ts b/apps/schools/domains/student/handlers/resultsCalculate.ts index abd92688..a43e7000 100644 --- a/apps/schools/domains/student/handlers/resultsCalculate.ts +++ b/apps/schools/domains/student/handlers/resultsCalculate.ts @@ -5,12 +5,9 @@ export const calculateResults = ( 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)) { + if (paginationParams.page <= Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { return invites?.results ?? [] - } else if (paginationParams.page === Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { - return [...(invites?.results ?? []), ...(students?.results ?? [])].slice(0, paginationParams.pageSize) } else { - const temp = paginationParams.pageSize - ((invites?.count ?? 0) % paginationParams.pageSize) - return students?.results.length === 1 ? [students?.results[0]] : (students?.results ?? []).slice(temp) + return students?.results ?? [] } } From 5791c7c16d9231a5e02fdfdff5a2c9c14300addf Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Fri, 12 Jul 2024 15:20:07 +0500 Subject: [PATCH 17/21] calculateResults for 3 arrays --- .../common/handlers/paginationChange.ts | 34 +++++++++++++++++-- .../student/components/studentList/index.tsx | 4 ++- .../student/handlers/resultsCalculate.ts | 5 +++ 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/apps/schools/domains/common/handlers/paginationChange.ts b/apps/schools/domains/common/handlers/paginationChange.ts index 946f6cbf..d0c80b0d 100644 --- a/apps/schools/domains/common/handlers/paginationChange.ts +++ b/apps/schools/domains/common/handlers/paginationChange.ts @@ -2,9 +2,11 @@ export const handlePaginationChange = ( setPaginationParams: (params: { page: number; pageSize: number }) => void, setQueryPaginationParams: (params: { invites: { page: number; pageSize: number } + teachers: { page: number; pageSize: number } students: { page: number; pageSize: number } }) => void, invitesCount: number | undefined, + teachersCount: number | undefined, newPage: number, newPageSize: number, defaultPaginationTablePage: number, @@ -16,7 +18,11 @@ export const handlePaginationChange = ( pageSize: newPageSize, }) - let newQueryParams: { invites: { page: number; pageSize: number }; students: { page: number; pageSize: number } } + let newQueryParams: { + invites: { page: number; pageSize: number } + teachers: { page: number; pageSize: number } + students: { page: number; pageSize: number } + } if (newPage <= Math.ceil((invitesCount ?? 0) / newPageSize)) { newQueryParams = { @@ -24,18 +30,42 @@ export const handlePaginationChange = ( page: newPage, pageSize: newPageSize, }, + teachers: { + page: defaultPaginationTablePage, + pageSize: defaultPaginationTablePageSize, + }, students: { page: defaultPaginationTablePage, pageSize: defaultPaginationTablePageSize, }, } - } else { + } else if (newPage <= Math.ceil(((teachersCount ?? 0) + (invitesCount ?? 0)) / newPageSize)) { const nextPage = Math.abs(newPage - Math.ceil((invitesCount ?? 0) / newPageSize)) newQueryParams = { invites: { page: defaultPaginationTablePage, pageSize: defaultPaginationTablePageSize, }, + teachers: { + page: nextPage, + pageSize: newPageSize, + }, + students: { + page: defaultPaginationTablePage, + pageSize: defaultPaginationTablePageSize, + }, + } + } else { + const nextPage = Math.abs(newPage - Math.ceil(((teachersCount ?? 0) + (invitesCount ?? 0)) / newPageSize)) + newQueryParams = { + invites: { + page: defaultPaginationTablePage, + pageSize: defaultPaginationTablePageSize, + }, + teachers: { + page: defaultPaginationTablePage, + pageSize: defaultPaginationTablePageSize, + }, students: { page: nextPage, pageSize: newPageSize, diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index fb1b3c60..394bab52 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -53,7 +53,7 @@ export function StudentList() { }) const resultsCalculate = useCallback( - () => calculateResults(paginationParams, invites, students), + () => calculateResults(paginationParams, invites, invites, students), [paginationParams, invites, students], ) @@ -69,6 +69,7 @@ export function StudentList() { setPaginationParams, setQueryPaginationParams, invites?.count, + invites?.count, newPage, newPageSize, defaultPaginationTablePage, @@ -111,6 +112,7 @@ export function StudentList() { current: paginationParams.page, pageSize: paginationParams.pageSize, total: + Math.ceil((invites?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize + Math.ceil((invites?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize + Math.ceil((students?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize, onChange: (page, pageSize) => { diff --git a/apps/schools/domains/student/handlers/resultsCalculate.ts b/apps/schools/domains/student/handlers/resultsCalculate.ts index a43e7000..b7f96821 100644 --- a/apps/schools/domains/student/handlers/resultsCalculate.ts +++ b/apps/schools/domains/student/handlers/resultsCalculate.ts @@ -3,10 +3,15 @@ import { RowType } from '@domains/student/components/studentList/interfaces' export const calculateResults = ( paginationParams: { page: number; pageSize: number }, invites: { count: number | undefined; results: any[] } | undefined, + teachers: { 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 ?? [] + } else if ( + paginationParams.page <= Math.ceil(((teachers?.count ?? 0) + (invites?.count ?? 0)) / paginationParams.pageSize) + ) { + return teachers?.results ?? [] } else { return students?.results ?? [] } From a770209b2913d66c3311a6ee844a6a75fb3abbd1 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Fri, 12 Jul 2024 15:46:05 +0500 Subject: [PATCH 18/21] resultsCalculate work for n element data --- .../student/components/studentList/index.tsx | 2 +- .../student/handlers/resultsCalculate.ts | 27 +++++++++++-------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 394bab52..923106d0 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -53,7 +53,7 @@ export function StudentList() { }) const resultsCalculate = useCallback( - () => calculateResults(paginationParams, invites, invites, students), + () => calculateResults(paginationParams, { invites, teachers: invites, students }), [paginationParams, invites, students], ) diff --git a/apps/schools/domains/student/handlers/resultsCalculate.ts b/apps/schools/domains/student/handlers/resultsCalculate.ts index b7f96821..b1fcde23 100644 --- a/apps/schools/domains/student/handlers/resultsCalculate.ts +++ b/apps/schools/domains/student/handlers/resultsCalculate.ts @@ -2,17 +2,22 @@ import { RowType } from '@domains/student/components/studentList/interfaces' export const calculateResults = ( paginationParams: { page: number; pageSize: number }, - invites: { count: number | undefined; results: any[] } | undefined, - teachers: { count: number | undefined; results: any[] } | undefined, - students: { count: number | undefined; results: any[] } | undefined, + data: { + [key: string]: { count: number | undefined; results: any[] } | undefined + }, ): RowType[] => { - if (paginationParams.page <= Math.ceil((invites?.count ?? 0) / paginationParams.pageSize)) { - return invites?.results ?? [] - } else if ( - paginationParams.page <= Math.ceil(((teachers?.count ?? 0) + (invites?.count ?? 0)) / paginationParams.pageSize) - ) { - return teachers?.results ?? [] - } else { - return students?.results ?? [] + 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 [] } From 3570697daf08fc5f4eacc8a301c50897be226bd9 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Fri, 12 Jul 2024 16:43:54 +0500 Subject: [PATCH 19/21] handlePaginationChange work for n element data --- .../common/handlers/paginationChange.ts | 77 +++++-------------- .../student/components/studentList/index.tsx | 9 ++- 2 files changed, 27 insertions(+), 59 deletions(-) diff --git a/apps/schools/domains/common/handlers/paginationChange.ts b/apps/schools/domains/common/handlers/paginationChange.ts index d0c80b0d..bbd0217c 100644 --- a/apps/schools/domains/common/handlers/paginationChange.ts +++ b/apps/schools/domains/common/handlers/paginationChange.ts @@ -1,12 +1,7 @@ export const handlePaginationChange = ( setPaginationParams: (params: { page: number; pageSize: number }) => void, - setQueryPaginationParams: (params: { - invites: { page: number; pageSize: number } - teachers: { page: number; pageSize: number } - students: { page: number; pageSize: number } - }) => void, - invitesCount: number | undefined, - teachersCount: number | undefined, + setQueryPaginationParams: (params: { [key: string]: { page: number; pageSize: number } }) => void, + counts: { [key: string]: number | undefined }, newPage: number, newPageSize: number, defaultPaginationTablePage: number, @@ -18,60 +13,30 @@ export const handlePaginationChange = ( pageSize: newPageSize, }) - let newQueryParams: { - invites: { page: number; pageSize: number } - teachers: { page: number; pageSize: number } - students: { page: number; pageSize: number } - } + const newQueryParams: { [key: string]: { page: number; pageSize: number } } = {} - if (newPage <= Math.ceil((invitesCount ?? 0) / newPageSize)) { - newQueryParams = { - invites: { - page: newPage, - pageSize: newPageSize, - }, - teachers: { - page: defaultPaginationTablePage, - pageSize: defaultPaginationTablePageSize, - }, - students: { - page: defaultPaginationTablePage, - pageSize: defaultPaginationTablePageSize, - }, - } - } else if (newPage <= Math.ceil(((teachersCount ?? 0) + (invitesCount ?? 0)) / newPageSize)) { - const nextPage = Math.abs(newPage - Math.ceil((invitesCount ?? 0) / newPageSize)) - newQueryParams = { - invites: { - page: defaultPaginationTablePage, - pageSize: defaultPaginationTablePageSize, - }, - teachers: { - page: nextPage, + 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, - }, - students: { + } + } else { + currentPage -= maxPages + newQueryParams[key] = { page: defaultPaginationTablePage, pageSize: defaultPaginationTablePageSize, - }, + } } - } else { - const nextPage = Math.abs(newPage - Math.ceil(((teachersCount ?? 0) + (invitesCount ?? 0)) / newPageSize)) - newQueryParams = { - invites: { - page: defaultPaginationTablePage, - pageSize: defaultPaginationTablePageSize, - }, - teachers: { - page: defaultPaginationTablePage, - pageSize: defaultPaginationTablePageSize, - }, - students: { - page: nextPage, - pageSize: newPageSize, - }, - } - } + + currentOffset += count + }) setQueryPaginationParams(newQueryParams) scrollToTop() diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 923106d0..81d28345 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -67,9 +67,12 @@ export function StudentList() { const handlePageChange = (newPage: number, newPageSize: number) => { handlePaginationChange( setPaginationParams, - setQueryPaginationParams, - invites?.count, - invites?.count, + setQueryPaginationParams as any, + { + invites: invites?.count, + teachers: invites?.count, + students: students?.count, + }, newPage, newPageSize, defaultPaginationTablePage, From d097eff6a0f57f2496f534acd57f5d31fc0c0804 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Fri, 12 Jul 2024 16:45:09 +0500 Subject: [PATCH 20/21] del teachers --- apps/schools/domains/student/components/studentList/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/schools/domains/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index 81d28345..aa6fdfa5 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -53,7 +53,7 @@ export function StudentList() { }) const resultsCalculate = useCallback( - () => calculateResults(paginationParams, { invites, teachers: invites, students }), + () => calculateResults(paginationParams, { invites, students }), [paginationParams, invites, students], ) @@ -70,7 +70,6 @@ export function StudentList() { setQueryPaginationParams as any, { invites: invites?.count, - teachers: invites?.count, students: students?.count, }, newPage, @@ -115,7 +114,6 @@ export function StudentList() { current: paginationParams.page, pageSize: paginationParams.pageSize, total: - Math.ceil((invites?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize + Math.ceil((invites?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize + Math.ceil((students?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize, onChange: (page, pageSize) => { From f1a0198e93b72a4e0d28b34f36c6523203be8909 Mon Sep 17 00:00:00 2001 From: lev tarasov <56757711+levil664@users.noreply.github.com> Date: Fri, 12 Jul 2024 16:50:57 +0500 Subject: [PATCH 21/21] add getTotalPages util function --- apps/schools/domains/common/utils/getTotalPages.ts | 5 +++++ .../domains/student/components/studentList/index.tsx | 8 +++++--- 2 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 apps/schools/domains/common/utils/getTotalPages.ts diff --git a/apps/schools/domains/common/utils/getTotalPages.ts b/apps/schools/domains/common/utils/getTotalPages.ts new file mode 100644 index 00000000..7ebaea31 --- /dev/null +++ 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/student/components/studentList/index.tsx b/apps/schools/domains/student/components/studentList/index.tsx index aa6fdfa5..f035c9a2 100644 --- a/apps/schools/domains/student/components/studentList/index.tsx +++ b/apps/schools/domains/student/components/studentList/index.tsx @@ -16,6 +16,7 @@ import { defaultPaginationTablePage, defaultPaginationTablePageSize } from '@dom 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({ @@ -113,9 +114,10 @@ export function StudentList() { pagination={{ current: paginationParams.page, pageSize: paginationParams.pageSize, - total: - Math.ceil((invites?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize + - Math.ceil((students?.count ?? 0) / paginationParams.pageSize) * paginationParams.pageSize, + total: getTotalPages( + { invites: { count: invites?.count }, students: { count: students?.count } }, + paginationParams.pageSize, + ), onChange: (page, pageSize) => { handlePageChange(page, pageSize) },