From 927332141188aaacae0d02e2454596ac46ab75c0 Mon Sep 17 00:00:00 2001 From: john-tco Date: Fri, 11 Aug 2023 10:43:13 +0100 Subject: [PATCH] wip --- .../src/components/pagination/Pagination.js | 49 ++++---- .../admin/src/components/pagination/helper.js | 10 +- .../super-admin-dashboard/index.page.tsx | 105 ++++++++++++------ .../src/pages/super-admin-dashboard/types.ts | 10 +- .../admin/src/services/SuperAdminService.ts | 62 +++++------ .../components/question-page/inputs/index.ts | 1 + 6 files changed, 146 insertions(+), 91 deletions(-) diff --git a/packages/admin/src/components/pagination/Pagination.js b/packages/admin/src/components/pagination/Pagination.js index 70c4be80a..8d03fb7ef 100644 --- a/packages/admin/src/components/pagination/Pagination.js +++ b/packages/admin/src/components/pagination/Pagination.js @@ -11,6 +11,8 @@ import { } from './helper'; const Pagination = ({ + resetPagination = false, + additionalQueryData, itemsPerPage = 10, totalItems = 0, itemType = 'items', @@ -21,7 +23,7 @@ const Pagination = ({ const { page } = query; - const currentPage = page ? parseInt(page) : 1; + const currentPage = !page || resetPagination ? 1 : parseInt(page); const totalPage = Math.ceil(totalItems / itemsPerPage); @@ -34,12 +36,13 @@ const Pagination = ({ // code for adding previous button if (totalPage > 1 && currentPage > 1) { paginationElements.push( - buildPaginationListItems( + buildPaginationListItems({ router, currentPage, itemsPerPage, - PAGINATION_PREVIOUS_ELEMENT - ) + paginationElementType: PAGINATION_PREVIOUS_ELEMENT, + additionalQueryData, + }) ); } @@ -47,33 +50,36 @@ const Pagination = ({ for (let i = 0; i < pageIndexArr.length; i++) { if (pageIndexArr[i] === PAGINATION_ELLIPSIS_ELEMENT) { paginationElements.push( - buildPaginationListItems( + buildPaginationListItems({ router, - i, + currentPage: i, itemsPerPage, - PAGINATION_ELLIPSIS_ELEMENT, - pageIndexArr[i + 1], - pageIndexArr[i - 1] - ) + paginationElementType: PAGINATION_ELLIPSIS_ELEMENT, + ellipsisEndAt: pageIndexArr[i + 1], + ellipsisStartAt: pageIndexArr[i - 1], + additionalQueryData, + }) ); } else { if (currentPage === pageIndexArr[i]) { paginationElements.push( - buildPaginationListItems( + buildPaginationListItems({ router, - pageIndexArr[i], + currentPage: pageIndexArr[i], itemsPerPage, - PAGINATION_ACTIVE_ELEMENT - ) + paginationElementType: PAGINATION_ACTIVE_ELEMENT, + additionalQueryData, + }) ); } else { paginationElements.push( - buildPaginationListItems( + buildPaginationListItems({ router, - pageIndexArr[i], + currentPage: pageIndexArr[i], itemsPerPage, - PAGINATION_NUMERIC_ELEMENT - ) + paginationElementType: PAGINATION_NUMERIC_ELEMENT, + additionalQueryData, + }) ); } } @@ -82,12 +88,13 @@ const Pagination = ({ //code for adding next button if (totalPage > 1 && currentPage < totalPage) { paginationElements.push( - buildPaginationListItems( + buildPaginationListItems({ router, currentPage, itemsPerPage, - PAGINATION_NEXT_ELEMENT - ) + paginationElementType: PAGINATION_NEXT_ELEMENT, + additionalQueryData, + }) ); } return ( diff --git a/packages/admin/src/components/pagination/helper.js b/packages/admin/src/components/pagination/helper.js index e6433dbea..320aa1973 100644 --- a/packages/admin/src/components/pagination/helper.js +++ b/packages/admin/src/components/pagination/helper.js @@ -73,14 +73,15 @@ export const buildPaginationArr = (current, last) => { return pagesWithEllipsis; }; -export const buildPaginationListItems = ( +export const buildPaginationListItems = ({ router, currentPage, itemsPerPage, paginationElementType, ellipsisEndAt, - ellipsisStartAt -) => { + ellipsisStartAt, + additionalQueryData, +}) => { const { route, query = {} } = router; const PAGINATION_ELEMENTS_OBJECT = { @@ -95,6 +96,7 @@ export const buildPaginationListItems = ( skip: (currentPage - 2) * itemsPerPage, limit: itemsPerPage, page: currentPage - 1, + ...additionalQueryData, }, }} > @@ -127,6 +129,7 @@ export const buildPaginationListItems = ( skip: currentPage * itemsPerPage, limit: itemsPerPage, page: currentPage + 1, + ...additionalQueryData, }, }} > @@ -187,6 +190,7 @@ export const buildPaginationListItems = ( skip: (currentPage - 1) * itemsPerPage, limit: itemsPerPage, page: currentPage, + ...additionalQueryData, }, }} > diff --git a/packages/admin/src/pages/super-admin-dashboard/index.page.tsx b/packages/admin/src/pages/super-admin-dashboard/index.page.tsx index cee9d068a..208cbbb21 100644 --- a/packages/admin/src/pages/super-admin-dashboard/index.page.tsx +++ b/packages/admin/src/pages/super-admin-dashboard/index.page.tsx @@ -10,12 +10,8 @@ import { import Meta from '../../components/layout/Meta'; import PaginationType from '../../types/Pagination'; import { getUserTokenFromCookies } from '../../utils/session'; -import { Pagination } from '../../components/pagination/Pagination'; import styles from './superadmin-dashboard.module.scss'; -import { - filterUsers, - getSuperAdminDashboard, -} from '../../services/SuperAdminService'; +import { getSuperAdminDashboard } from '../../services/SuperAdminService'; import { SuperAdminDashboardFilterData, SuperAdminDashboardResponse, @@ -23,26 +19,37 @@ import { } from './types'; import Navigation from './Nagivation'; import InferProps from '../../types/InferProps'; -import getConfig from 'next/config'; +import { Pagination } from '../../components/pagination/Pagination'; +import { ButtonTypePropertyEnum } from 'gap-web-ui'; const formatRequestBody = (body: SuperAdminDashboardFilterData) => { + console.log({ body }); + const clearAllFilters = 'clear-all-filters' in body; if (typeof body.roles === 'string') body.roles = [body.roles]; if (typeof body.departments === 'string') body.departments = [body.departments]; - if (!body.departments) body.departments = []; - if (!body.roles) body.roles = []; + if (!body.departments || clearAllFilters) body.departments = []; + if (!body.roles || clearAllFilters) body.roles = []; - const clearAllFilters = body['clear-all-filters'] === '' ? true : false; return { ...body, clearAllFilters, }; }; +const getFilterDataFromQuery = (query: GetServerSidePropsContext['query']) => { + console.log({ query }); + return { + departments: (query.departments || []) as string[], + roles: (query.roles || []) as string[], + searchTerm: (query.searchTerm || '') as string, + }; +}; + export const getServerSideProps = async ( context: GetServerSidePropsContext ) => { - const paginationParams: PaginationType = { + const pagination: PaginationType = { paginate: true, page: Number(context.query.page || 1) - 1, size: Number(context.query.limit || 10), @@ -51,19 +58,22 @@ export const getServerSideProps = async ( const userToken = getUserTokenFromCookies(context.req); const fetchPageData = async () => - await getSuperAdminDashboard(paginationParams, userToken); - - const handleRequest = async (body: SuperAdminDashboardFilterData) => { - const res = await filterUsers( - paginationParams, - formatRequestBody(body), - userToken - ); - return res; - }; + getSuperAdminDashboard({ + pagination, + filterData: getFilterDataFromQuery(context.query), + userToken, + }); + + const handleRequest = async (body: SuperAdminDashboardFilterData) => + getSuperAdminDashboard({ + resetPagination: true, + pagination: { ...pagination, page: 0 }, + filterData: formatRequestBody(body), + userToken, + }); return QuestionPageGetServerSideProps< - Omit, + Omit, Awaited>, Awaited> >({ @@ -93,20 +103,39 @@ const convertUserDataToTableRows = (users: User[]) => ], })); +const formatFilterDataForPagination = ({ + 0: previousDepartments, + 1: previousRoles, + 2: previousSearchTerm = [], +}: string[][]) => ({ + departments: previousDepartments, + roles: previousRoles, + searchTerm: previousSearchTerm, +}); + const SuperAdminDashboard = ({ formAction, csrfToken, fieldErrors, pageData, }: InferProps) => { - const { departments, roles, userCount, users, previousFilterData } = - pageData as SuperAdminDashboardResponse; + const { + departments, + roles, + userCount, + users, + previousFilterData, + resetPagination, + } = pageData as SuperAdminDashboardResponse; const { 0: previousDepartments, 1: previousRoles, 2: previousSearchTerm, } = previousFilterData || {}; + + console.log({ previousSearchTerm }); + return ( <> @@ -132,7 +161,11 @@ const SuperAdminDashboard = ({ {/* filter button */}
-
role.name !== 'FIND') - .map((role) => ({ - label: role.label, - value: role.id, - }))} + options={roles.map((role) => ({ + label: role.label, + value: role.id, + }))} fieldErrors={fieldErrors} small /> @@ -192,7 +223,10 @@ const SuperAdminDashboard = ({ defaultValue={previousSearchTerm || ''} placeholder="enter a keyword or search term here" /> -