add sort ascending/descending option
This commit is contained in:
parent
6e795f9766
commit
4cb7c99ec0
@ -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}>
|
||||
|
@ -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}>
|
||||
|
Loading…
Reference in New Issue
Block a user