Skip to content

Commit

Permalink
feat(resolvers): add id for filters (#833)
Browse files Browse the repository at this point in the history
  • Loading branch information
joemcelroy committed Dec 27, 2020
1 parent 2859107 commit 4a06d07
Show file tree
Hide file tree
Showing 16 changed files with 184 additions and 80 deletions.
39 changes: 37 additions & 2 deletions docs/docs/customise-searchkit.md
Expand Up @@ -198,11 +198,25 @@ Create a Facet Class by implementing the BaseFacet interface.
identifier: this.getIdentifier(),
label: this.getLabel(),
type: 'CustomFacet',
display: 'listFacet',
display: 'ListFacet',
customField: "custom"
}
}

// For appliedFilters. FilterSet is the filter applied to search. The return object
// is used by appliedFilters for presentation
getSelectedFilter(filterSet) {
return {
identifier: this.getIdentifier(),
id: `${this.getIdentifier()}_${filterSet.value}`,
label: this.getLabel(),
display: 'ListFacet',
type: 'CustomSelectedFilter',
value: filterSet.value,
customField: "customField"
}
}

}
```
Expand All @@ -216,13 +230,34 @@ Then add a Facet type to the schema
display: String
customField: String
}

type CustomSelectedFilter implements SelectedFilter {
id: String!
identifier: String!
label: String!
display: String!
value: String
customField: String
}
```
then you should be able to query for facet
then you should be able to query for facet + see filters applied in summary
```gql
query {
results {
summary {
appliedFilters {
id
identifier
label
display
... on CustomSelectedFilter {
value
customField
}
}
}
facets {
... on CustomFacet {
identifier
Expand Down
13 changes: 4 additions & 9 deletions docs/docs/guides-graphql-schema.md
Expand Up @@ -154,27 +154,22 @@ query {
summary {
query <-- the query value
appliedFilters { <-- array of filters applied to search
id
identifier
display
label
... on DateRangeSelectedFilter {
identifier
label
dateMin
dateMax
display
}

... on NumericRangeSelectedFilter {
identifier
label
min
max
display
}

... on ValueSelectedFilter {
identifier
label
value
display
}
}
}
Expand Down
16 changes: 15 additions & 1 deletion docs/docs/searchkit-elastic-ui.md
Expand Up @@ -20,9 +20,23 @@ const query = gql`
summary {
total
appliedFilters {
id
identifier
display
label
value
... on DateRangeSelectedFilter {
dateMin
dateMax
}
... on NumericRangeSelectedFilter {
min
max
}
... on ValueSelectedFilter {
value
}
}
query
}
Expand Down
13 changes: 4 additions & 9 deletions docs/docs/ui-setup-eui.md
Expand Up @@ -58,27 +58,22 @@ const query = gql`
summary {
total
appliedFilters {
id
identifier
display
label
... on DateRangeSelectedFilter {
identifier
label
dateMin
dateMax
display
}
... on NumericRangeSelectedFilter {
identifier
label
min
max
display
}
... on ValueSelectedFilter {
identifier
label
value
display
}
}
query
Expand Down
13 changes: 4 additions & 9 deletions examples/create-react-app/src/App.js
Expand Up @@ -35,27 +35,22 @@ const query = gql`
summary {
total
appliedFilters {
id
identifier
display
label
... on DateRangeSelectedFilter {
identifier
label
dateMin
dateMax
display
}
... on NumericRangeSelectedFilter {
identifier
label
min
max
display
}
... on ValueSelectedFilter {
identifier
label
value
display
}
}
query
Expand Down
13 changes: 4 additions & 9 deletions examples/create-react-app/src/CustomApp.js
Expand Up @@ -9,27 +9,22 @@ const query = gql`
summary {
total
appliedFilters {
id
identifier
display
label
... on DateRangeSelectedFilter {
identifier
label
dateMin
dateMax
display
}
... on NumericRangeSelectedFilter {
identifier
label
min
max
display
}
... on ValueSelectedFilter {
identifier
label
value
display
}
}
query
Expand Down
13 changes: 4 additions & 9 deletions examples/next/components/index.jsx
Expand Up @@ -34,27 +34,22 @@ const query = gql`
summary {
total
appliedFilters {
id
identifier
display
label
... on DateRangeSelectedFilter {
identifier
label
dateMin
dateMax
display
}
... on NumericRangeSelectedFilter {
identifier
label
min
max
display
}
... on ValueSelectedFilter {
identifier
label
value
display
}
}
sortOptions {
Expand Down
Expand Up @@ -32,6 +32,7 @@ class DateRangeFacet implements BaseFacet {
getSelectedFilter(filterSet) {
return {
type: 'DateRangeSelectedFilter',
id: `${this.getIdentifier()}_${filterSet.dateMin}_${filterSet.dateMax}`,
identifier: this.getIdentifier(),
label: this.getLabel(),
dateMin: filterSet.dateMin,
Expand Down
Expand Up @@ -47,6 +47,7 @@ class RangeFacet implements BaseFacet {
getSelectedFilter(filterSet) {
return {
identifier: this.getIdentifier(),
id: `${this.getIdentifier()}_${filterSet.min}_${filterSet.max}`,
label: this.getLabel(),
display: this.config.display || 'RangeSliderFacet',
type: 'NumericRangeSelectedFilter',
Expand Down
Expand Up @@ -49,6 +49,7 @@ class RefinementSelectFacet implements BaseFacet {
getSelectedFilter(filterSet) {
return {
identifier: this.getIdentifier(),
id: `${this.getIdentifier()}_${filterSet.value}`,
label: this.getLabel(),
display: this.config.display || 'ListFacet',
type: 'ValueSelectedFilter',
Expand Down
14 changes: 9 additions & 5 deletions packages/searchkit-apollo-resolvers/src/schema.ts
Expand Up @@ -19,32 +19,36 @@ export default gql`
}
interface SelectedFilter {
id: String!
identifier: String!
label: String!
display: String!
}
type ValueSelectedFilter implements SelectedFilter {
id: String!
identifier: String!
display: String!
label: String!
value: String
value: String!
}
type NumericRangeSelectedFilter implements SelectedFilter {
id: String!
identifier: String!
label: String!
display: String!
min: Float
max: Float
min: Float!
max: Float!
}
type DateRangeSelectedFilter implements SelectedFilter {
id: String!
identifier: String!
label: String!
display: String!
dateMin: String
dateMax: String
dateMin: String!
dateMax: String!
}
type ResultSet {
Expand Down
14 changes: 4 additions & 10 deletions packages/searchkit-apollo-resolvers/tests/SummaryResolver.test.ts
Expand Up @@ -62,28 +62,22 @@ describe('Summary Resolver', () => {
summary {
total
appliedFilters {
id
identifier
label
display
... on DateRangeSelectedFilter {
identifier
label
dateMin
dateMax
display
}
... on NumericRangeSelectedFilter {
identifier
label
min
max
display
}
... on ValueSelectedFilter {
identifier
label
value
display
}
}
sortOptions {
Expand Down
Expand Up @@ -48,12 +48,14 @@ Object {
"appliedFilters": Array [
Object {
"display": "ListFacet",
"id": "actors_Jeff Lindsay",
"identifier": "actors",
"label": "Actors",
"value": "Jeff Lindsay",
},
Object {
"display": "RangeSliderFacet",
"id": "imdbrating_0_50",
"identifier": "imdbrating",
"label": "IMDB Rating",
"max": 50,
Expand All @@ -63,6 +65,7 @@ Object {
"dateMax": "2020-12-18T00:00:00.000Z",
"dateMin": "2012-12-18T00:00:00.000Z",
"display": "DateRangeFacet",
"id": "released_2012-12-18T00:00:00.000Z_2020-12-18T00:00:00.000Z",
"identifier": "released",
"label": "Release",
},
Expand Down
13 changes: 13 additions & 0 deletions packages/searchkit-client/src/__tests__/searchkit.test.tsx
Expand Up @@ -84,6 +84,19 @@ describe('Searchkit Client', () => {
expect(api.getFilters()).toEqual([])
})

it('should toggle date range filters', () => {
const api = new SearchkitClient()
const filter = {
identifier: 'type',
dateMin: '2012-12-26T00:00:00.000Z',
dateMax: '2020-12-26T00:00:00.000Z'
}
api.addFilter({ ...filter })
expect(api.getFilters()).toEqual([filter])
api.toggleFilter({ ...filter })
expect(api.getFilters()).toEqual([])
})

it('should remove multiple filters by id', () => {
const api = new SearchkitClient()
api.addFilter({ identifier: 'type', value: 'Movies' })
Expand Down

1 comment on commit 4a06d07

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for searchkit-docs ready!

✅ Preview
https://searchkit-docs-ox6bsyy5c.vercel.app

Built with commit 4a06d07.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.