diff --git a/apps/polyflix/public/locales/en/studio.json b/apps/polyflix/public/locales/en/studio.json index bf485866..7b386905 100644 --- a/apps/polyflix/public/locales/en/studio.json +++ b/apps/polyflix/public/locales/en/studio.json @@ -30,7 +30,8 @@ "global": "Something went wrong, please try again later" }, "informations": { - "publish": "published by" + "publish": "published by", + "rowsPerPage": "Rows per page" } }, "quizzes": { diff --git a/apps/polyflix/public/locales/fr/studio.json b/apps/polyflix/public/locales/fr/studio.json index a8bf2961..9c7ebd5a 100644 --- a/apps/polyflix/public/locales/fr/studio.json +++ b/apps/polyflix/public/locales/fr/studio.json @@ -30,7 +30,8 @@ "global": "Quelque chose a mal tourné, veuillez réessayer plus tard" }, "informations": { - "publish": "publié par" + "publish": "publié par", + "rowsPerPage": "Élements par page" } }, "quizzes": { diff --git a/apps/polyflix/src/modules/studio/components/ghost-list.component.tsx b/apps/polyflix/src/modules/studio/components/ghost-list.component.tsx index ddf2cda0..14791f2c 100644 --- a/apps/polyflix/src/modules/studio/components/ghost-list.component.tsx +++ b/apps/polyflix/src/modules/studio/components/ghost-list.component.tsx @@ -12,8 +12,12 @@ import { Stack, } from '@mui/material' -export const GhostList = () => { - const skeletons = buildSkeletons(5) +export const GhostList = ({ + skeletonsNumber = 5, +}: { + skeletonsNumber?: number +}) => { + const skeletons = buildSkeletons(skeletonsNumber) return ( {skeletons.map((_, i: number) => ( diff --git a/apps/polyflix/src/modules/studio/pages/courses/courses-list.page.tsx b/apps/polyflix/src/modules/studio/pages/courses/courses-list.page.tsx index d3cd3b6c..b70f42b2 100644 --- a/apps/polyflix/src/modules/studio/pages/courses/courses-list.page.tsx +++ b/apps/polyflix/src/modules/studio/pages/courses/courses-list.page.tsx @@ -11,6 +11,7 @@ import { ListItemText, Paper, Stack, + TablePagination, } from '@mui/material' import { Header } from '../../components/header.component' import { GhostList } from '../../components/ghost-list.component' @@ -20,11 +21,14 @@ import { Icon } from '@core/components/Icon/Icon.component' import { useGetCoursesQuery } from '@courses/services/course.service' import { polyflixRouter } from '@core/utils/routes' import { useTranslation } from 'react-i18next' +import { useState } from 'react' export const CoursesListPage = () => { + const [page, setPage] = useState(1) + const [pageSize, setPageSize] = useState(5) const { data, isLoading, isFetching, isError } = useGetCoursesQuery({ - page: 1, - pageSize: 5, + page, + pageSize, }) const { PopOver, onClick, handleClose, outputData } = usePopOverModal() @@ -33,7 +37,7 @@ export const CoursesListPage = () => { const content = () => { if (isLoading || isFetching) { - return + return } if (isError) { @@ -125,6 +129,16 @@ export const CoursesListPage = () => { description={t('courses.description')} /> {content()} + setPage(newPage + 1)} + rowsPerPage={pageSize} + onRowsPerPageChange={(e) => setPageSize(Number(e.target.value))} + rowsPerPageOptions={[5, 10, 25, 50, 100]} + labelRowsPerPage={t('common.informations.rowsPerPage')} + /> ) } diff --git a/apps/polyflix/src/modules/studio/pages/quizzes/quizzes-list.page.tsx b/apps/polyflix/src/modules/studio/pages/quizzes/quizzes-list.page.tsx index 5ab84c16..c6667edc 100644 --- a/apps/polyflix/src/modules/studio/pages/quizzes/quizzes-list.page.tsx +++ b/apps/polyflix/src/modules/studio/pages/quizzes/quizzes-list.page.tsx @@ -11,6 +11,7 @@ import { ListItemText, Paper, Stack, + TablePagination, } from '@mui/material' import { Header } from '../../components/header.component' import { GhostList } from '../../components/ghost-list.component' @@ -20,11 +21,14 @@ import { Icon } from '@core/components/Icon/Icon.component' import { useGetQuizzesQuery } from '@quizzes/services/quizz.service' import { polyflixRouter } from '@core/utils/routes' import { useTranslation } from 'react-i18next' +import { useState } from 'react' export const QuizzesListPage = () => { + const [page, setPage] = useState(1) + const [pageSize, setPageSize] = useState(5) const { data, isLoading, isFetching, isError } = useGetQuizzesQuery({ - page: 1, - pageSize: 5, + page, + pageSize, }) const { PopOver, onClick, handleClose, outputData } = usePopOverModal() @@ -33,7 +37,7 @@ export const QuizzesListPage = () => { const content = () => { if (isLoading || isFetching) { - return + return } if (isError) { @@ -125,6 +129,16 @@ export const QuizzesListPage = () => { description={t('videos.description')} /> {content()} + setPage(newPage + 1)} + rowsPerPage={pageSize} + onRowsPerPageChange={(e) => setPageSize(Number(e.target.value))} + rowsPerPageOptions={[5, 10, 25, 50, 100]} + labelRowsPerPage={t('common.informations.rowsPerPage')} + /> ) } diff --git a/apps/polyflix/src/modules/studio/pages/users/users-list.page.tsx b/apps/polyflix/src/modules/studio/pages/users/users-list.page.tsx index 452be946..a34d38e7 100644 --- a/apps/polyflix/src/modules/studio/pages/users/users-list.page.tsx +++ b/apps/polyflix/src/modules/studio/pages/users/users-list.page.tsx @@ -10,6 +10,7 @@ import { ListItemText, Paper, Stack, + TablePagination, Tooltip, Typography, } from '@mui/material' @@ -23,11 +24,14 @@ import { useTranslation } from 'react-i18next' import { useGetUsersQuery } from '@users/services/user.service' import { User } from '@users/models/user.model' import { UserAvatar } from '@users/components/UserAvatar/UserAvatar.component' +import { useState } from 'react' export const UsersListPage = () => { + const [page, setPage] = useState(1) + const [pageSize, setPageSize] = useState(5) const { data, isLoading, isFetching, isError } = useGetUsersQuery({ - page: 1, - pageSize: 5, + page, + pageSize, }) const { PopOver, onClick, handleClose, outputData } = usePopOverModal() @@ -36,7 +40,7 @@ export const UsersListPage = () => { const content = () => { if (isLoading || isFetching) { - return + return } if (isError) { @@ -156,6 +160,16 @@ export const UsersListPage = () => { createAvailable={false} /> {content()} + setPage(newPage + 1)} + rowsPerPage={pageSize} + onRowsPerPageChange={(e) => setPageSize(Number(e.target.value))} + rowsPerPageOptions={[5, 10, 25, 50, 100]} + labelRowsPerPage={t('common.informations.rowsPerPage')} + /> ) } diff --git a/apps/polyflix/src/modules/studio/pages/videos/videos-list.page.tsx b/apps/polyflix/src/modules/studio/pages/videos/videos-list.page.tsx index c14e8391..93f22bab 100644 --- a/apps/polyflix/src/modules/studio/pages/videos/videos-list.page.tsx +++ b/apps/polyflix/src/modules/studio/pages/videos/videos-list.page.tsx @@ -11,6 +11,7 @@ import { ListItemText, Paper, Stack, + TablePagination, Tooltip, Typography, } from '@mui/material' @@ -25,11 +26,14 @@ import { useTranslation } from 'react-i18next' import { ImageCover } from '@core/components/ImageCover/image-cover.component' import { Video } from '@videos/models/video.model' import { abbreviateNumber } from 'js-abbreviation-number' +import { useState } from 'react' export const VideosListPage = () => { + const [page, setPage] = useState(1) + const [pageSize, setPageSize] = useState(5) const { data, isLoading, isFetching, isError } = useGetVideosQuery({ - page: 1, - pageSize: 5, + page, + pageSize, }) const { PopOver, onClick, handleClose, outputData } = usePopOverModal() @@ -38,7 +42,7 @@ export const VideosListPage = () => { const content = () => { if (isLoading || isFetching) { - return + return } if (isError) { @@ -173,6 +177,16 @@ export const VideosListPage = () => { >
{content()} + setPage(newPage + 1)} + rowsPerPage={pageSize} + onRowsPerPageChange={(e) => setPageSize(Number(e.target.value))} + rowsPerPageOptions={[5, 10, 25, 50, 100]} + labelRowsPerPage={t('common.informations.rowsPerPage')} + /> ) } diff --git a/packages/mock-server/fixtures/course.ts b/packages/mock-server/fixtures/course.ts index 7444bbaf..07493b78 100644 --- a/packages/mock-server/fixtures/course.ts +++ b/packages/mock-server/fixtures/course.ts @@ -43,7 +43,7 @@ export class CourseMock implements Mock { const { models } = (schema as any).courses.all(); return { data: models.slice(0, pageSize ?? 100), - totalCount: models.length, + total: models.length, }; }); diff --git a/packages/mock-server/fixtures/user.ts b/packages/mock-server/fixtures/user.ts index 84d35b10..3ffb157a 100644 --- a/packages/mock-server/fixtures/user.ts +++ b/packages/mock-server/fixtures/user.ts @@ -29,11 +29,13 @@ export class UserMock implements Mock { } routes(server: Server): void { - server.get("users", (schema) => { + server.get("users", (schema, request) => { + const { size: pageSize } = request.queryParams; + const { models } = (schema as any).users.all(); return { currentPage: 0, - data: models, + data: models.slice(0, pageSize ?? 100), totalElements: models.length, totalPages: 1, };