Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SSHOC
sshoc-marketplace-frontend
Commits
7e0ff978
Commit
7e0ff978
authored
Jul 23, 2021
by
Stefan Probst
Browse files
fix: allow sorting sources
parent
3bd5e0db
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/screens/account/SourcesScreen.tsx
View file @
7e0ff978
...
...
@@ -42,9 +42,9 @@ import { ensureArray } from '@/utils/ensureArray'
import
{
ensureScalar
}
from
'
@/utils/ensureScalar
'
import
usePagination
from
'
@/utils/usePagination
'
const
itemSortOrders
=
[
'
label
'
,
'
modified-on
'
]
as
const
const
itemSortOrders
=
[
'
name
'
,
'
date
'
]
as
const
type
ItemSortOrder
=
typeof
itemSortOrders
[
number
]
const
defaultItemSortOrder
:
ItemSortOrder
=
'
modified-on
'
const
defaultItemSortOrder
:
ItemSortOrder
=
'
name
'
/**
* Sources screen.
...
...
@@ -59,7 +59,6 @@ export default function SourcesScreen(): JSX.Element {
// const page = useQueryParam('page', false, Number)
// const perPage = clamp(0, useQueryParam('perPage', false, Number), 50)
// const query = { q, page }
// FIXME: mockups allow sorting, but api does not
const
query
=
sanitizeQuery
(
router
.
query
)
const
auth
=
useAuth
()
...
...
@@ -124,8 +123,8 @@ export default function SourcesScreen(): JSX.Element {
)
:
(
<
Fragment
>
<
div
className
=
"flex items-center justify-between"
>
<
div
className
=
"space-x-8"
>
{
/*
<ItemSortOrder filter={query} />
*/
}
<
div
className
=
"
flex items-center
space-x-8"
>
<
ItemSortOrder
filter
=
{
query
}
/>
<
ItemSearch
filter
=
{
query
}
/>
</
div
>
<
ItemPagination
filter
=
{
query
}
results
=
{
sources
.
data
}
/>
...
...
@@ -231,49 +230,49 @@ interface ItemSortOrderProps {
/**
* Sort order.
*/
//
function ItemSortOrder(props: ItemSortOrderProps) {
//
const { filter } = props
//
const router = useRouter()
//
const currentSortOrder =
//
filter.order === undefined
//
? defaultItemSortOrder
//
: (filter.order
[0]
as ItemSortOrder)
//
function onSubmit(order: Key) {
//
const query = { ...filter }
//
if (order === defaultItemSortOrder) {
//
delete query.order
//
} else {
//
query.order =
[
order as ItemSortOrder
]
//
}
//
router.push({ query })
//
}
//
/** we don't get labels for sort order from the backend */
//
const labels: Record<ItemSortOrder, string> = {
//
label
: 'name',
//
'modified-on': 'last modification
',
//
}
//
const items = itemSortOrders.map((id) => ({ id, label: labels[id] }))
//
return (
//
<Select
//
aria-label="Sort order"
//
items={items}
//
onSelectionChange={onSubmit}
//
selectedKey={currentSortOrder}
//
>
//
{(item) => (
//
<Select.Item key={item.id} textValue={item.label}>
//
Sort by {item.label}
//
</Select.Item>
//
)}
//
</Select>
//
)
//
}
function
ItemSortOrder
(
props
:
ItemSortOrderProps
)
{
const
{
filter
}
=
props
const
router
=
useRouter
()
const
currentSortOrder
=
filter
.
order
===
undefined
?
defaultItemSortOrder
:
(
filter
.
order
as
ItemSortOrder
)
function
onSubmit
(
order
:
Key
)
{
const
query
=
{
...
filter
}
if
(
order
===
defaultItemSortOrder
)
{
delete
query
.
order
}
else
{
query
.
order
=
order
as
ItemSortOrder
}
router
.
push
({
query
})
}
/** we don't get labels for sort order from the backend */
const
labels
:
Record
<
ItemSortOrder
,
string
>
=
{
name
:
'
name
'
,
date
:
'
last harvest date
'
,
}
const
items
=
itemSortOrders
.
map
((
id
)
=>
({
id
,
label
:
labels
[
id
]
}))
return
(
<
Select
aria-label
=
"Sort order"
items
=
{
items
}
onSelectionChange
=
{
onSubmit
}
selectedKey
=
{
currentSortOrder
}
>
{
(
item
)
=>
(
<
Select
.
Item
key
=
{
item
.
id
}
textValue
=
{
item
.
label
}
>
Sort by
{
item
.
label
}
</
Select
.
Item
>
)
}
</
Select
>
)
}
interface
ItemSearchProps
{
filter
:
GetSources
.
QueryParameters
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment