add sort ascending/descending option

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

View File

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

View File

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