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

add sort ascending/descending option

Browse Source
This commit is contained in:
Spectralitree 2021-06-26 23:07:26 +02:00
parent 6e795f9766
commit 4cb7c99ec0
2 changed files with 68 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/Components/Private/Memberlist.js
View File

@ -36,6 +36,7 @@ export default function Memberlist() {
const [searchBy, setSearchBy] = useState('name') const [searchBy, setSearchBy] = useState('name')
const [privacyFilter, setPrivacyFilter] = useState('all') const [privacyFilter, setPrivacyFilter] = useState('all')
const [sortBy, setSortBy] = useState('name') const [sortBy, setSortBy] = useState('name')
const [sortOrder, setSortOrder] = useState('ascending')
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [proxyTags, setProxyTags] = useState([{ const [proxyTags, setProxyTags] = useState([{
@ -126,13 +127,24 @@ export default function Memberlist() {
var sortMembers = currentMembers; var sortMembers = currentMembers;
if (sortBy === 'name') { if (sortBy === 'name') {
sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember); if (sortOrder === 'descending') {
} else if (sortBy === 'display name') { sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).reverse().slice(indexOfFirstMember, indexOfLastMember);
sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember); } else sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
} else if (sortBy === 'ID') { }
sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember); else if (sortBy === 'display name') {
} else if (sortBy === 'date created') { if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember); sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember);
}
else if (sortBy === 'ID') {
if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);
}
else if (sortBy === 'date created') {
if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember);
} }
const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}> const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}>
@ -175,7 +187,7 @@ export default function Memberlist() {
<Route exact path={path}> <Route exact path={path}>
<> <>
<BS.Row className="mb-lg-3 justfiy-content-md-center"> <BS.Row className="mb-lg-3 justfiy-content-md-center">
<BS.Col xs={12} lg={4}> <BS.Col xs={12} lg={3}>
<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:'/>
@ -191,7 +203,7 @@ export default function Memberlist() {
</BS.InputGroup> </BS.InputGroup>
</BS.Form> </BS.Form>
</BS.Col> </BS.Col>
<BS.Col xs={12} lg={4}> <BS.Col xs={12} lg={3}>
<BS.Form> <BS.Form>
<BS.InputGroup className="mb-3"> <BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Search by:'/> <BS.Form.Control disabled placeholder='Search by:'/>
@ -206,7 +218,7 @@ export default function Memberlist() {
</BS.InputGroup> </BS.InputGroup>
</BS.Form> </BS.Form>
</BS.Col> </BS.Col>
<BS.Col xs={12} lg={4}> <BS.Col xs={12} lg={3}>
<BS.Form> <BS.Form>
<BS.InputGroup className="mb-3"> <BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Sort by:'/> <BS.Form.Control disabled placeholder='Sort by:'/>
@ -221,6 +233,19 @@ export default function Memberlist() {
</BS.InputGroup> </BS.InputGroup>
</BS.Form> </BS.Form>
</BS.Col> </BS.Col>
<BS.Col xs={12} lg={3}>
<BS.Form>
<BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Sort order:'/>
<BS.Form.Control as="select" defaultValue={sortOrder} onChange={e => {
setSortOrder(e.target.value)
}}>
<option>ascending</option>
<option>descending</option>
</BS.Form.Control>
</BS.InputGroup>
</BS.Form>
</BS.Col>
</BS.Row> </BS.Row>
<BS.Row className="justify-content-md-center"> <BS.Row className="justify-content-md-center">
<BS.Col xs={12} lg={3}> <BS.Col xs={12} lg={3}>

38
src/Components/Public/ProfileList.js
View File

@ -23,6 +23,7 @@ export default function Memberlist() {
const [searchBy, setSearchBy] = useState('name') const [searchBy, setSearchBy] = useState('name')
const [sortBy, setSortBy] = useState('name') const [sortBy, setSortBy] = useState('name')
const [sortOrder, setSortOrder] = useState('ascending')
const [value, setValue] = useState(''); const [value, setValue] = useState('');
@ -95,11 +96,19 @@ export default function Memberlist() {
var sortMembers = currentMembers; var sortMembers = currentMembers;
if (sortBy === 'name') { if (sortBy === 'name') {
sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember); if (sortOrder === 'descending') {
} else if (sortBy === 'display name') { sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).reverse().slice(indexOfFirstMember, indexOfLastMember);
sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember); } else sortMembers = currentMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);
} else if (sortBy === 'ID') { }
sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember); else if (sortBy === 'display name') {
if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember);
}
else if (sortBy === 'ID') {
if (sortOrder === 'descending') {
sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).reverse().slice(indexOfFirstMember, indexOfLastMember);
} else sortMembers = currentMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);
} }
const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}> const memberList = sortMembers.map((member) => <BS.Card key={member.id} className={localStorage.getItem("expandcards") ? "mb-3" : ""}>
@ -114,7 +123,7 @@ export default function Memberlist() {
<Route exact path={path}> <Route exact path={path}>
<> <>
<BS.Row className="mb-lg-3 justfiy-content-md-center"> <BS.Row className="mb-lg-3 justfiy-content-md-center">
<BS.Col xs={12} lg={4}> <BS.Col xs={12} lg={3}>
<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:'/>
@ -130,7 +139,7 @@ export default function Memberlist() {
</BS.InputGroup> </BS.InputGroup>
</BS.Form> </BS.Form>
</BS.Col> </BS.Col>
<BS.Col xs={12} lg={4}> <BS.Col xs={12} lg={3}>
<BS.Form> <BS.Form>
<BS.InputGroup className="mb-3"> <BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Search by:'/> <BS.Form.Control disabled placeholder='Search by:'/>
@ -145,7 +154,7 @@ export default function Memberlist() {
</BS.InputGroup> </BS.InputGroup>
</BS.Form> </BS.Form>
</BS.Col> </BS.Col>
<BS.Col xs={12} lg={4}> <BS.Col xs={12} lg={3}>
<BS.Form> <BS.Form>
<BS.InputGroup className="mb-3"> <BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Sort by:'/> <BS.Form.Control disabled placeholder='Sort by:'/>
@ -159,6 +168,19 @@ export default function Memberlist() {
</BS.InputGroup> </BS.InputGroup>
</BS.Form> </BS.Form>
</BS.Col> </BS.Col>
<BS.Col xs={12} lg={3}>
<BS.Form>
<BS.InputGroup className="mb-3">
<BS.Form.Control disabled placeholder='Sort order:'/>
<BS.Form.Control as="select" defaultValue={sortOrder} onChange={e => {
setSortOrder(e.target.value)
}}>
<option>ascending</option>
<option>descending</option>
</BS.Form.Control>
</BS.InputGroup>
</BS.Form>
</BS.Col>
</BS.Row> </BS.Row>
<BS.Row className="justify-content-md-center"> <BS.Row className="justify-content-md-center">
<BS.Col className="mb-3" xs={12} lg={7}> <BS.Col className="mb-3" xs={12} lg={7}>