liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add pagination

Browse Source
This commit is contained in:
Spectralitree
2020-12-13 03:17:44 +01:00
parent 759c14c6db
commit 2afa1c5fdf
7 changed files with 296 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Components/MemberCard.js
View File

@@ -5,6 +5,7 @@ import moment from 'moment';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import autosize from 'autosize';
import LazyLoad from 'react-lazyload';
import API_URL from "../Constants/constants.js";
@@ -193,8 +194,9 @@ export default function MemberCard(props) {
}
return (
memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> : <>
<BS.Card.Header className="d-flex align-items-center justify-content-between">
memberDeleted ? <BS.Card.Header className="d-flex align-items-center justify-content-between"><BS.Button variant="link" className="float-left"><FaTrashAlt className="mr-4"/>Member Deleted</BS.Button></BS.Card.Header> :
<LazyLoad offset={100}>
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<BS.Accordion.Toggle as={BS.Button} variant="link" eventKey={member.id} className="float-left"><FaUser className="mr-4" /> <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>
{ member.avatar_url ? <BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} className="float-right" roundedCircle /> :
<BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
@@ -361,6 +363,7 @@ export default function MemberCard(props) {
{ proxyView ? "" : privacyMode ? "" : privacyView ? "" : <BS.Button variant="light" onClick={() => setEditMode(true)}>Edit</BS.Button>}
</> } </BS.Card.Body>
</BS.Accordion.Collapse>
</>
</LazyLoad>
)
}

63
src/Components/Memberlist.js
View File

@@ -21,6 +21,8 @@ export default function Memberlist(props) {
const [proxyView, setProxyView] = useState(false);
const [privacyView, setPrivacyView] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [membersPerPage, setMembersPerPage] = useState(25);
const [open, setOpen] = useState(false);
const closeModal = () => setOpen(false);
@@ -37,6 +39,7 @@ export default function Memberlist(props) {
const fetchMembers = useCallback( () => {
setIsLoading(true);
setIsError(false);
setMembersPerPage(25);
fetch(`${API_URL}s/${userId}/members`,{
method: 'get',
@@ -87,13 +90,26 @@ export default function Memberlist(props) {
});
}
const memberList = members.filter(member => {
if (!value) return true;
if (member.name.toLowerCase().includes(value.toLowerCase())) {
return true;
}
return false;
}).sort((a, b) => a.name.localeCompare(b.name)).map((member) => <BS.Card key={member.id}>
const indexOfLastMember = currentPage * membersPerPage;
const indexOfFirstMember = indexOfLastMember - membersPerPage;
const currentMembers = members.filter(member => {
if (!value) return true;
if (member.name.toLowerCase().includes(value.toLowerCase())) {
return true;
}
return false;
}).sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
const active = currentPage;
const pageAmount = Math.ceil(members.length / membersPerPage);
const pageNumbers = [];
for ( let i = currentPage; (i <= currentPage + 3) && (i < pageAmount); i++ ) {
pageNumbers.push(
<BS.Pagination.Item key={i} onClick={() => setCurrentPage(i)} active={i === active}>{i}</BS.Pagination.Item>
);
}
const memberList = currentMembers.map((member, index) => <BS.Card key={member.id}>
<MemberCard
member={member}
/>
@@ -106,15 +122,43 @@ export default function Memberlist(props) {
<BS.Alert variant="danger">Error fetching members.</BS.Alert> :
<>
<BS.Row noGutters="true" className="justify-content-md-center">
<BS.Col className="mb-3" xs={12} lg={4}>
<BS.Col className="lg-2 mb-3" xs={12} lg={3}>
<BS.Form>
<BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Page length:'/>
<BS.Form.Control as="select" onChange={e => setMembersPerPage(e.target.value)}>
<option>10</option>
<option selected>25</option>
<option>50</option>
<option>100</option>
</BS.Form.Control>
</BS.InputGroup>
</BS.Form>
</BS.Col>
<BS.Col className="ml-lg-2 mb-3" xs={12} lg={4}>
<BS.Form>
<BS.Form.Control value={value} onChange={e => setValue(e.target.value)} placeholder="Search"/>
</BS.Form>
</BS.Col>
<BS.Col className="ml-lg-2 mb-3" xs={12} lg={2}>
<BS.Col className="ml-lg-2 mb-3" xs={12} lg={1}>
<BS.Button type="primary" className="m-0" block onClick={() => fetchMembers()}>Refresh</BS.Button>
</BS.Col>
</BS.Row>
<BS.Row className="justify-content-md-center">
<BS.Pagination className="ml-auto mr-auto">
<BS.Pagination.First onClick={() => setCurrentPage(1)} />
<BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />
<BS.Pagination.Item onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>
<BS.Pagination.Ellipsis />
{ currentPage > 2 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 2)} active={currentPage - 2 === active}>{currentPage - 2}</BS.Pagination.Item> : "" }
{ currentPage > 1 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 1)} active={currentPage - 1 === active}>{currentPage - 1}</BS.Pagination.Item> : "" }
{pageNumbers}
<BS.Pagination.Ellipsis />
<BS.Pagination.Item onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>
<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />
<BS.Pagination.Last onClick={() => setCurrentPage(pageAmount)} />
</BS.Pagination>
</BS.Row>
<BS.Card className="w-100">
<BS.Card.Header className="d-flex align-items-center justify-content-between">
<BS.Button variant="link" className="float-left" onClick={() => setOpen(o => !o)}><FaPlus className="mr-4"/>Add Member</BS.Button>
@@ -240,6 +284,7 @@ export default function Memberlist(props) {
</Popup>
</BS.Card.Header>
</BS.Card>
<BS.Accordion className="mb-3 mt-3 w-100" defaultActiveKey="0">
{memberList}
</BS.Accordion>