Tweak pagination
This commit is contained in:
Spectralitree
parent
2afa1c5fdf
commit
5cb90ba2c3
@ -1 +1 @@
|
|||||||
[{"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js":"1","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js":"2","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js":"3","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js":"4","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js":"5","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js":"6","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js":"7","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js":"8","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js":"9","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js":"10","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js":"11","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js":"12"},{"size":329,"mtime":1607554515255,"results":"13","hashOfConfig":"14"},{"size":87,"mtime":1607504507181,"results":"15","hashOfConfig":"14"},{"size":3605,"mtime":1607811162774,"results":"16","hashOfConfig":"14"},{"size":243,"mtime":1607696817140,"results":"17","hashOfConfig":"14"},{"size":73,"mtime":1607504507180,"results":"18","hashOfConfig":"14"},{"size":231,"mtime":1607504507174,"results":"19","hashOfConfig":"14"},{"size":1217,"mtime":1607794085434,"results":"20","hashOfConfig":"14"},{"size":9865,"mtime":1607803350196,"results":"21","hashOfConfig":"14"},{"size":14219,"mtime":1607825835645,"results":"22","hashOfConfig":"14"},{"size":18899,"mtime":1607811193471,"results":"23","hashOfConfig":"14"},{"size":10382,"mtime":1607549930730,"results":"24","hashOfConfig":"14"},{"size":741,"mtime":1607797507192,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"1uc84gl",{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js",[],["51","52"],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js",[],{"ruleId":"53","replacedBy":"54"},{"ruleId":"55","replacedBy":"56"},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"no-global-assign","no-unsafe-negation"]
|
[{"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js":"1","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js":"2","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js":"3","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js":"4","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js":"5","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js":"6","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js":"7","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js":"8","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js":"9","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js":"10","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js":"11","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js":"12"},{"size":329,"mtime":1607554515255,"results":"13","hashOfConfig":"14"},{"size":87,"mtime":1607504507181,"results":"15","hashOfConfig":"14"},{"size":3605,"mtime":1607811162774,"results":"16","hashOfConfig":"14"},{"size":243,"mtime":1607696817140,"results":"17","hashOfConfig":"14"},{"size":73,"mtime":1607504507180,"results":"18","hashOfConfig":"14"},{"size":231,"mtime":1607504507174,"results":"19","hashOfConfig":"14"},{"size":1217,"mtime":1607794085434,"results":"20","hashOfConfig":"14"},{"size":9865,"mtime":1607803350196,"results":"21","hashOfConfig":"14"},{"size":14073,"mtime":1607858026799,"results":"22","hashOfConfig":"14"},{"size":18896,"mtime":1607857981162,"results":"23","hashOfConfig":"14"},{"size":10382,"mtime":1607549930730,"results":"24","hashOfConfig":"14"},{"size":741,"mtime":1607797507192,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1uc84gl",{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Navigation.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js",[]]
|
||||||
@ -347,7 +347,7 @@ export default function MemberCard(props) {
|
|||||||
</BS.InputGroup>
|
</BS.InputGroup>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
))} <BS.Col className="mb-lg-2" xs={12} lg={2}><BS.Button block variant="light" onClick={() => addProxyField()}>Add new</BS.Button></BS.Col>
|
))} <BS.Col className="mb-2" xs={12} lg={2}><BS.Button block variant="light" onClick={() => addProxyField()}>Add new</BS.Button></BS.Col>
|
||||||
</BS.Form.Row>
|
</BS.Form.Row>
|
||||||
<BS.Button variant="light" onClick={() => resetProxyFields()}>Exit</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>
|
<BS.Button variant="light" onClick={() => resetProxyFields()}>Exit</BS.Button> <BS.Button variant="primary" type="submit">Submit</BS.Button>
|
||||||
</BS.Form><hr/></> : proxyView ?
|
</BS.Form><hr/></> : proxyView ?
|
||||||
|
|||||||
@ -70,8 +70,6 @@ export default function Memberlist(props) {
|
|||||||
|
|
||||||
const newdata = data.proxy_tags ? {...data, proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === "" && tag.suffix === ""))} : data
|
const newdata = data.proxy_tags ? {...data, proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === "" && tag.suffix === ""))} : data
|
||||||
|
|
||||||
console.log(newdata);
|
|
||||||
|
|
||||||
fetch(`${API_URL}m/`,{
|
fetch(`${API_URL}m/`,{
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: JSON.stringify(newdata),
|
body: JSON.stringify(newdata),
|
||||||
@ -100,10 +98,11 @@ export default function Memberlist(props) {
|
|||||||
return false;
|
return false;
|
||||||
}).sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
|
}).sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
|
||||||
|
|
||||||
|
|
||||||
const active = currentPage;
|
const active = currentPage;
|
||||||
const pageAmount = Math.ceil(members.length / membersPerPage);
|
const pageAmount = Math.ceil(members.length / membersPerPage);
|
||||||
const pageNumbers = [];
|
const pageNumbers = [];
|
||||||
for ( let i = currentPage; (i <= currentPage + 3) && (i < pageAmount); i++ ) {
|
for ( let i = currentPage; (i <= currentPage + 1) && (i < pageAmount); i++ ) {
|
||||||
pageNumbers.push(
|
pageNumbers.push(
|
||||||
<BS.Pagination.Item key={i} onClick={() => setCurrentPage(i)} active={i === active}>{i}</BS.Pagination.Item>
|
<BS.Pagination.Item key={i} onClick={() => setCurrentPage(i)} active={i === active}>{i}</BS.Pagination.Item>
|
||||||
);
|
);
|
||||||
@ -126,7 +125,10 @@ export default function Memberlist(props) {
|
|||||||
<BS.Form>
|
<BS.Form>
|
||||||
<BS.InputGroup className="mb-3">
|
<BS.InputGroup className="mb-3">
|
||||||
<BS.Form.Control disabled placeholder='Page length:'/>
|
<BS.Form.Control disabled placeholder='Page length:'/>
|
||||||
<BS.Form.Control as="select" onChange={e => setMembersPerPage(e.target.value)}>
|
<BS.Form.Control as="select" onChange={e => {
|
||||||
|
setMembersPerPage(e.target.value);
|
||||||
|
setCurrentPage(1);
|
||||||
|
}}>
|
||||||
<option>10</option>
|
<option>10</option>
|
||||||
<option selected>25</option>
|
<option selected>25</option>
|
||||||
<option>50</option>
|
<option>50</option>
|
||||||
@ -137,7 +139,7 @@ export default function Memberlist(props) {
|
|||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="ml-lg-2 mb-3" xs={12} lg={4}>
|
<BS.Col className="ml-lg-2 mb-3" xs={12} lg={4}>
|
||||||
<BS.Form>
|
<BS.Form>
|
||||||
<BS.Form.Control value={value} onChange={e => setValue(e.target.value)} placeholder="Search"/>
|
<BS.Form.Control value={value} onChange={e => {setValue(e.target.value); setCurrentPage(1)}} placeholder="Search"/>
|
||||||
</BS.Form>
|
</BS.Form>
|
||||||
</BS.Col>
|
</BS.Col>
|
||||||
<BS.Col className="ml-lg-2 mb-3" xs={12} lg={1}>
|
<BS.Col className="ml-lg-2 mb-3" xs={12} lg={1}>
|
||||||
@ -146,17 +148,14 @@ export default function Memberlist(props) {
|
|||||||
</BS.Row>
|
</BS.Row>
|
||||||
<BS.Row className="justify-content-md-center">
|
<BS.Row className="justify-content-md-center">
|
||||||
<BS.Pagination className="ml-auto mr-auto">
|
<BS.Pagination className="ml-auto mr-auto">
|
||||||
<BS.Pagination.First onClick={() => setCurrentPage(1)} />
|
{ currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}
|
||||||
<BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />
|
|
||||||
<BS.Pagination.Item onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>
|
<BS.Pagination.Item onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>
|
||||||
<BS.Pagination.Ellipsis />
|
<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> : "" }
|
{ currentPage > 1 ? <BS.Pagination.Item onClick={() => setCurrentPage(currentPage - 1)} active={currentPage - 1 === active}>{currentPage - 1}</BS.Pagination.Item> : "" }
|
||||||
{pageNumbers}
|
{pageNumbers}
|
||||||
<BS.Pagination.Ellipsis />
|
<BS.Pagination.Ellipsis />
|
||||||
<BS.Pagination.Item onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>
|
<BS.Pagination.Item onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>
|
||||||
<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />
|
{ currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}
|
||||||
<BS.Pagination.Last onClick={() => setCurrentPage(pageAmount)} />
|
|
||||||
</BS.Pagination>
|
</BS.Pagination>
|
||||||
</BS.Row>
|
</BS.Row>
|
||||||
<BS.Card className="w-100">
|
<BS.Card className="w-100">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user