Skip to content

Commit 7deef2e

Browse files
craquetcraquet
committed
Implement sorting and sort configuration
1 parent c59d826 commit 7deef2e

File tree

5 files changed

+70
-32
lines changed

5 files changed

+70
-32
lines changed

‎src/components/FairDOElasticSearch.tsx

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import "../elastic-ui.css"
1919
import { TooltipProvider } from "./ui/tooltip"
2020
import { useAutoDarkMode } from "@/components/utils"
2121
import { PlaceholderResultView } from "@/components/result/PlaceholderResultView"
22+
import { DefaultSorting } from "@/components/search/DefaultSorting"
2223

2324
/**
2425
* All-in-one component for rendering an elastic search UI based on the provided configuration. Includes
@@ -127,7 +128,7 @@ export function FairDOElasticSearch({
127128
</>
128129
}
129130
bodyHeader={
130-
<div className="rfs-mb-4 rfs-flex rfs-w-full rfs-items-center rfs-justify-between">
131+
<div className="rfs-flex rfs-w-full rfs-items-center rfs-justify-between rfs-p-2">
131132
{wasSearched && (
132133
<PagingInfo
133134
view={(props) => (
@@ -137,27 +138,7 @@ export function FairDOElasticSearch({
137138
)}
138139
/>
139140
)}
140-
{/*{wasSearched && (*/}
141-
{/* <Sorting*/}
142-
{/* sortOptions={[*/}
143-
{/* {*/}
144-
{/* name: "Relevance",*/}
145-
{/* value: "_score",*/}
146-
{/* direction: ""*/}
147-
{/* },*/}
148-
{/* {*/}
149-
{/* name: "Title",*/}
150-
{/* value: "name",*/}
151-
{/* direction: "asc"*/}
152-
{/* },*/}
153-
{/* {*/}
154-
{/* name: "Image",*/}
155-
{/* value: "locationPreview/Sample.keyword",*/}
156-
{/* direction: "asc"*/}
157-
{/* }*/}
158-
{/* ]}*/}
159-
{/* />*/}
160-
{/*)}*/}
141+
{wasSearched && <DefaultSorting config={rawConfig} />}
161142
</div>
162143
}
163144
bodyFooter={

‎src/components/search/DefaultSorting.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
2+
import { useCallback, useContext } from "react"
3+
import { SearchContext } from "@elastic/react-search-ui"
4+
import { FairDOConfig } from "@/config/FairDOConfig"
5+
import { ArrowUpDown } from "lucide-react"
6+
7+
export function DefaultSorting({ config }: { config: FairDOConfig }) {
8+
const search = useContext(SearchContext)
9+
10+
const handleChange = useCallback(
11+
(value: string) => {
12+
if (value.startsWith("-")) {
13+
const field = value.replace("-", "")
14+
search.driver.setSort([{ field, direction: "" }], "")
15+
} else if (value.startsWith("asc-")) {
16+
const field = value.replace("asc-", "")
17+
search.driver.setSort([{ field, direction: "asc" }], "asc")
18+
} else {
19+
const field = value.replace("desc-", "")
20+
search.driver.setSort([{ field, direction: "desc" }], "desc")
21+
}
22+
},
23+
[search]
24+
)
25+
26+
if (!config.sortOptions || config.sortOptions.length === 0) return null
27+
28+
return (
29+
<Select onValueChange={handleChange}>
30+
<SelectTrigger className="rfs-max-w-[400px]">
31+
<div className="rfs-flex rfs-items-center rfs-gap-2">
32+
<ArrowUpDown className={"rfs-size-4"} />
33+
<SelectValue />
34+
</div>
35+
</SelectTrigger>
36+
<SelectContent>
37+
{config.sortOptions.map((item) => (
38+
<SelectItem
39+
className="rfs-flex rfs-items-center"
40+
key={`${item.direction}-${item.field}`}
41+
value={`${item.direction}-${item.field}`}
42+
>
43+
{item.label ?? (item.field + " " + item.direction === "asc" ? " (ascending)" : " (descending)")}
44+
</SelectItem>
45+
))}
46+
</SelectContent>
47+
</Select>
48+
)
49+
}

‎src/config/FairDOConfig.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FilterType, RequestState, SearchFieldConfiguration } from "@elastic/search-ui"
1+
import { FilterType, RequestState, SearchFieldConfiguration, SortOption } from "@elastic/search-ui"
22

33
export interface FairDOCoreFacetConfig {
44
key: string
@@ -84,6 +84,10 @@ export interface FairDOConfig {
8484
* Configuration for the elastic indices that should be accessed
8585
*/
8686
indices: FairDOIndexConfig[]
87+
/**
88+
* Configure possible sort options. Fields to sort by must be present in all used indices.
89+
*/
90+
sortOptions?: (SortOption & { label?: string })[]
8791
/**
8892
* Disjunctive facets as specified in the elastic search ui documentation
8993
* @link https://www.elastic.co/guide/en/search-ui/current/api-react-components-facet.html#api-react-components-facet-example-of-an-or-based-facet-filter

‎src/config/FairDOConfigBuilder.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ export class FairDOConfigBuilder {
3333
autocompleteQuery: this.getAutocompleteQueryConfig(),
3434
apiConnector: this.buildConnector(),
3535
alwaysSearchOnInitialLoad: true,
36-
initialState: this.getConfig().initialState
36+
initialState: this.getConfig().initialState,
37+
debug: this.getConfig().debug
3738
}
3839
}
3940

‎src/stories/FairDOElasticSearch.stories.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -110,19 +110,22 @@ const demoConfig: FairDOConfig = {
110110
]
111111
}
112112
],
113+
sortOptions: [
114+
{ field: "_score", direction: "asc", label: "Relevance" },
115+
{ field: "name.keyword", direction: "asc", label: "Name (ascending)" },
116+
{ field: "name.keyword", direction: "desc", label: "Name (descending)" },
117+
{ field: "Compound.Molar_mass", direction: "asc", label: "Molar Mass (ascending)" },
118+
{ field: "Compound.Molar_mass", direction: "desc", label: "Molar Mass (descending)" },
119+
{ field: "dateCreatedRfc3339", direction: "asc", label: "Date Created (ascending)" },
120+
{ field: "dateCreatedRfc3339", direction: "desc", label: "Date Created (descending)" },
121+
{ field: "dateModified", direction: "asc", label: "Date Modified (ascending)" },
122+
{ field: "dateModified", direction: "desc", label: "Date Modified (descending)" }
123+
],
113124
initialState: {
114125
sortList: [
115-
{
116-
field: "_score",
117-
direction: "desc"
118-
},
119126
{
120127
field: "name.keyword",
121128
direction: "asc"
122-
},
123-
{
124-
field: "locationPreview/Sample.keyword",
125-
direction: "asc"
126129
}
127130
]
128131
},

0 commit comments

Comments
 (0)