Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@john-tco
john-tco committed Aug 11, 2023
1 parent 74a483e commit 9273321
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 91 deletions.
49 changes: 28 additions & 21 deletions packages/admin/src/components/pagination/Pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
} from './helper';

const Pagination = ({
resetPagination = false,
additionalQueryData,
itemsPerPage = 10,
totalItems = 0,
itemType = 'items',
Expand All @@ -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);

Expand All @@ -34,46 +36,50 @@ 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,
})
);
}

//code for adding 1,2,3 and so on page numbers
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,
})
);
}
}
Expand All @@ -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 (
Expand Down
10 changes: 7 additions & 3 deletions packages/admin/src/components/pagination/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -95,6 +96,7 @@ export const buildPaginationListItems = (
skip: (currentPage - 2) * itemsPerPage,
limit: itemsPerPage,
page: currentPage - 1,
...additionalQueryData,
},
}}
>
Expand Down Expand Up @@ -127,6 +129,7 @@ export const buildPaginationListItems = (
skip: currentPage * itemsPerPage,
limit: itemsPerPage,
page: currentPage + 1,
...additionalQueryData,
},
}}
>
Expand Down Expand Up @@ -187,6 +190,7 @@ export const buildPaginationListItems = (
skip: (currentPage - 1) * itemsPerPage,
limit: itemsPerPage,
page: currentPage,
...additionalQueryData,
},
}}
>
Expand Down
105 changes: 73 additions & 32 deletions packages/admin/src/pages/super-admin-dashboard/index.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,46 @@ 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,
User,
} 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),
Expand All @@ -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<SuperAdminDashboardFilterData, 'clearAllFilters'>,
Omit<SuperAdminDashboardFilterData, 'clearAllFilters' | 'resetPagination'>,
Awaited<ReturnType<typeof getSuperAdminDashboard>>,
Awaited<ReturnType<typeof handleRequest>>
>({
Expand Down Expand Up @@ -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<typeof getServerSideProps>) => {
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 (
<>
<Navigation />
Expand All @@ -132,7 +161,11 @@ const SuperAdminDashboard = ({

{/* filter button */}
<div className={styles['top-controls']}>
<Button text="Clear all filters" isSecondary />
<Button
addNameAttribute
text="Clear all filters"
isSecondary
/>
</div>

<Checkboxes
Expand All @@ -141,12 +174,10 @@ const SuperAdminDashboard = ({
fieldName="roles"
defaultCheckboxes={previousRoles || []}
titleSize="m"
options={roles
.filter((role) => role.name !== 'FIND')
.map((role) => ({
label: role.label,
value: role.id,
}))}
options={roles.map((role) => ({
label: role.label,
value: role.id,
}))}
fieldErrors={fieldErrors}
small
/>
Expand Down Expand Up @@ -192,7 +223,10 @@ const SuperAdminDashboard = ({
defaultValue={previousSearchTerm || ''}
placeholder="enter a keyword or search term here"
/>
<Button text="Search" />
<Button
type={ButtonTypePropertyEnum.Submit}
text="Search"
/>
</div>

<Table
Expand All @@ -205,7 +239,14 @@ const SuperAdminDashboard = ({
rows={convertUserDataToTableRows(users)}
/>

<Pagination itemsPerPage={10} totalItems={userCount} />
<Pagination
resetPagination={resetPagination}
additionalQueryData={formatFilterDataForPagination(
previousFilterData || {}
)}
itemsPerPage={10}
totalItems={userCount}
/>
</div>
</FlexibleQuestionPageLayout>
</div>
Expand Down
10 changes: 6 additions & 4 deletions packages/admin/src/pages/super-admin-dashboard/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,13 @@ export type User = {
};

export type SuperAdminDashboardFilterData = {
roles: Array<string>;
departments: Array<string>;
searchTerm: string;
_csrf: string;
roles?: Array<string>;
departments?: Array<string>;
searchTerm?: string;
_csrf?: string;
'clear-all-filters'?: '';
clearAllFilters?: boolean;
resetPagination?: boolean;
};

export type SuperAdminDashboardResponse = {
Expand All @@ -35,4 +36,5 @@ export type SuperAdminDashboardResponse = {
roles: Role[];
userCount: number;
previousFilterData: string[][];
resetPagination?: boolean;
};
Loading

0 comments on commit 9273321

Please sign in to comment.