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

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

@ -23,6 +23,7 @@ const PaginateUI = ({
prevPage, prevPage,
setPageIndex, setPageIndex,
nextPage, nextPage,
...rest
}: IPaginateUIProps) => { }: IPaginateUIProps) => {
const STARTLIMIT = 6; const STARTLIMIT = 6;
const theme = useTheme(); const theme = useTheme();
@ -37,19 +38,18 @@ const PaginateUI = ({
} }
}, [matches]); }, [matches]);
useEffect(() => { useEffect(() => {
if (pageIndex === 0 && start !== 0) { if (pageIndex === 0 && start !== 0) {
setStart(0); setStart(0);
setLimit(STARTLIMIT); setLimit(STARTLIMIT);
} }
}, [pageIndex, start]) }, [pageIndex, start]);
return ( return (
<ConditionallyRender <ConditionallyRender
condition={pages.length > 1} condition={pages.length > 1}
show={ show={
<div className={styles.pagination}> <div className={styles.pagination} {...rest}>
<div className={styles.paginationInnerContainer}> <div className={styles.paginationInnerContainer}>
<ConditionallyRender <ConditionallyRender
condition={pageIndex > 0} 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 { useParams } from 'react-router-dom';
import { IFeatureViewParams } from '../../../interfaces/params'; import { IFeatureViewParams } from '../../../interfaces/params';
import ProjectRoleSelect from './ProjectRoleSelect/ProjectRoleSelect'; import ProjectRoleSelect from './ProjectRoleSelect/ProjectRoleSelect';
import usePagination from '../../../hooks/usePagination';
import PaginateUI from '../../common/PaginateUI/PaginateUI';
const ProjectAccess = () => { const ProjectAccess = () => {
const { id } = useParams<IFeatureViewParams>(); const { id } = useParams<IFeatureViewParams>();
@ -36,6 +38,8 @@ const ProjectAccess = () => {
const [users, setUsers] = useState([]); const [users, setUsers] = useState([]);
const [error, setError] = useState(); const [error, setError] = useState();
const { isOss } = useUiConfig(); const { isOss } = useUiConfig();
const { page, pages, nextPage, prevPage, setPageIndex, pageIndex } =
usePagination(users, 10);
useEffect(() => { useEffect(() => {
fetchAccess(); fetchAccess();
@ -135,7 +139,7 @@ const ProjectAccess = () => {
</Dialog> </Dialog>
<div className={styles.divider}></div> <div className={styles.divider}></div>
<List> <List>
{users.map(user => { {page.map(user => {
const labelId = `checkbox-list-secondary-label-${user.id}`; const labelId = `checkbox-list-secondary-label-${user.id}`;
return ( return (
<ListItem key={user.id} button> <ListItem key={user.id} button>
@ -177,7 +181,7 @@ const ProjectAccess = () => {
tooltip={ tooltip={
users.length === 1 users.length === 1
? 'A project must have at least one owner' ? 'A project must have at least one owner'
: 'Remove acccess' : 'Remove access'
} }
> >
<Delete /> <Delete />
@ -186,6 +190,14 @@ const ProjectAccess = () => {
</ListItem> </ListItem>
); );
})} })}
<PaginateUI
pages={pages}
pageIndex={pageIndex}
setPageIndex={setPageIndex}
nextPage={nextPage}
prevPage={prevPage}
style={{ bottom: '-21px' }}
/>
</List> </List>
</PageContent> </PageContent>
); );