Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

fix: add pagination to project access list (#615)

Browse Source 
* fix: add pagination to project access list

* fix: typo

Co-authored-by: Fredrik Oseberg <fredrik.no@gmail.com>
This commit is contained in:
Youssef Khedher 2022-01-20 10:12:27 +01:00 committed by GitHub
parent 2937bcc5c1
commit 90231cc230
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/component/common/PaginateUI/PaginateUI.tsx
View File

@ -23,6 +23,7 @@ const PaginateUI = ({
prevPage,
setPageIndex,
nextPage,
...rest
}: IPaginateUIProps) => {
const STARTLIMIT = 6;
const theme = useTheme();
@ -37,19 +38,18 @@ const PaginateUI = ({
}
}, [matches]);
useEffect(() => {
if(pageIndex === 0 && start !== 0) {
if (pageIndex === 0 && start !== 0) {
setStart(0);
setLimit(STARTLIMIT);
}
}, [pageIndex, start])
}, [pageIndex, start]);
return (
<ConditionallyRender
condition={pages.length > 1}
show={
<div className={styles.pagination}>
<div className={styles.pagination} {...rest}>
<div className={styles.paginationInnerContainer}>
<ConditionallyRender
condition={pageIndex > 0}

16
frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
View File

@ -28,6 +28,8 @@ import PermissionIconButton from '../../common/PermissionIconButton/PermissionIc
import { useParams } from 'react-router-dom';
import { IFeatureViewParams } from '../../../interfaces/params';
import ProjectRoleSelect from './ProjectRoleSelect/ProjectRoleSelect';
import usePagination from '../../../hooks/usePagination';
import PaginateUI from '../../common/PaginateUI/PaginateUI';
const ProjectAccess = () => {
const { id } = useParams<IFeatureViewParams>();
@ -36,6 +38,8 @@ const ProjectAccess = () => {
const [users, setUsers] = useState([]);
const [error, setError] = useState();
const { isOss } = useUiConfig();
const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
usePagination(users, 10);
useEffect(() => {
fetchAccess();
@ -135,7 +139,7 @@ const ProjectAccess = () => {
</Dialog>
<div className={styles.divider}></div>
<List>
{users.map(user => {
{page.map(user => {
const labelId = `checkbox-list-secondary-label-${user.id}`;
return (
<ListItem key={user.id} button>
@ -177,7 +181,7 @@ const ProjectAccess = () => {
tooltip={
users.length === 1
? 'A project must have at least one owner'
: 'Remove acccess'
: 'Remove access'
}
>
<Delete />
@ -186,6 +190,14 @@ const ProjectAccess = () => {
</ListItem>
);
})}
<PaginateUI
pages={pages}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
nextPage={nextPage}
prevPage={prevPage}
style={{ bottom: '-21px' }}
/>
</List>
</PageContent>
);