Merge pull request #4 from internet4refugees/feature/search-frontend
add custom renderer for bool and email
This commit is contained in:
commit
82a669207e
|
@ -1,4 +1,7 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
|
import { CheckBoxOutlineBlank, CheckBox } from '@mui/icons-material';
|
||||||
|
|
||||||
import '@inovua/reactdatagrid-community/index.css'
|
import '@inovua/reactdatagrid-community/index.css'
|
||||||
|
|
||||||
import DataGrid from '@inovua/reactdatagrid-community'
|
import DataGrid from '@inovua/reactdatagrid-community'
|
||||||
|
@ -16,7 +19,9 @@ type HostOfferLookupTableProps = {
|
||||||
data: GetOffersQuery
|
data: GetOffersQuery
|
||||||
}
|
}
|
||||||
|
|
||||||
const columnsRaw: { name: string; header: string; type: string }[] = [
|
type ColumnRaw = { name: string; header: string; type: string }
|
||||||
|
|
||||||
|
const columnsRaw: ColumnRaw[] = [
|
||||||
{
|
{
|
||||||
"name": "beds",
|
"name": "beds",
|
||||||
"header": "beds",
|
"header": "beds",
|
||||||
|
@ -108,23 +113,47 @@ const filterMappings = {
|
||||||
const operatorsForType = {
|
const operatorsForType = {
|
||||||
number: 'gte',
|
number: 'gte',
|
||||||
string: 'contains',
|
string: 'contains',
|
||||||
date: 'inrange'}
|
date: 'inrange',
|
||||||
|
boolean: 'eq'
|
||||||
|
}
|
||||||
|
|
||||||
|
const customRendererForType = [
|
||||||
|
{
|
||||||
|
id: 'bool2checkbox',
|
||||||
|
match: {type: 'boolean'},
|
||||||
|
render: ({ value }) => !!value ? <CheckBox /> : <CheckBoxOutlineBlank />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'email',
|
||||||
|
match: {type: 'string', name: 'contact_email'},
|
||||||
|
render: ({ value }) => (<a href={`mailto:${value}`} >{value}</a>)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const findMatchingRenderer = (c: ColumnRaw) => {
|
||||||
|
const customRenderer = customRendererForType.find(d => {
|
||||||
|
// @ts-ignore
|
||||||
|
return Object.keys(d.match).reduce((prev, cur) => prev && c[cur] === d.match[cur] , true )
|
||||||
|
})
|
||||||
|
console.log(customRenderer)
|
||||||
|
return customRenderer?.render
|
||||||
|
}
|
||||||
|
|
||||||
const columns: TypeColumn[] = columnsRaw
|
const columns: TypeColumn[] = columnsRaw
|
||||||
.map(c => ({
|
.map(c => ({
|
||||||
...c,
|
...c,
|
||||||
|
render: findMatchingRenderer(c) || null,
|
||||||
filterEditor: filterMappings[c.type as 'string' | 'number' | 'boolean' | 'date']
|
filterEditor: filterMappings[c.type as 'string' | 'number' | 'boolean' | 'date']
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const defaultFilterValue: TypeFilterValue = columns
|
const defaultFilterValue: TypeFilterValue = columns
|
||||||
.filter(( {type} ) => type && ['string', 'number', 'date'].includes( type ))
|
.filter(( {type} ) => type && ['string', 'number', 'date', 'boolean'].includes( type ))
|
||||||
.map(( {name, type} ) => {
|
.map(( {name, type} ) => {
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
type,
|
type,
|
||||||
value: '',
|
value: null,
|
||||||
operator: operatorsForType[type as 'string' | 'number' | 'date']
|
operator: operatorsForType[type as 'string' | 'number' | 'date' | 'boolean']
|
||||||
} as unknown as TypeSingleFilterValue
|
} as unknown as TypeSingleFilterValue
|
||||||
} )
|
} )
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user