Merge pull request #5 from internet4refugees/feature/search-frontend
This commit is contained in:
commit
09259d997f
|
@ -4,7 +4,7 @@ import {ReactQueryDevtools} from 'react-query/devtools'
|
||||||
|
|
||||||
const queryClient = new QueryClient()
|
const queryClient = new QueryClient()
|
||||||
|
|
||||||
export default function MyQueryClientProvider({children}: {children: React.Component}) {
|
export default function MyQueryClientProvider({children}: {children: React.ReactChild}) {
|
||||||
return (
|
return (
|
||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React from 'react'
|
import React, {ReactNode} from 'react'
|
||||||
|
|
||||||
import { CheckBoxOutlineBlank, CheckBox } from '@mui/icons-material';
|
import { CheckBoxOutlineBlank, CheckBox } from '@mui/icons-material';
|
||||||
|
|
||||||
|
@ -21,6 +21,16 @@ type HostOfferLookupTableProps = {
|
||||||
|
|
||||||
type ColumnRaw = { name: string; header: string; type: string }
|
type ColumnRaw = { name: string; header: string; type: string }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* you can generate an inital raw column json by running the following
|
||||||
|
* function
|
||||||
|
*/
|
||||||
|
const makeColumnDefinition = (data: any ) => Object.keys(data)
|
||||||
|
.map(k => ({
|
||||||
|
name: k,
|
||||||
|
header: k.replace(/_/g, ' '),
|
||||||
|
type: typeof data[k]}))
|
||||||
|
|
||||||
const columnsRaw: ColumnRaw[] = [
|
const columnsRaw: ColumnRaw[] = [
|
||||||
{
|
{
|
||||||
"name": "beds",
|
"name": "beds",
|
||||||
|
@ -117,14 +127,17 @@ const operatorsForType = {
|
||||||
boolean: 'eq'
|
boolean: 'eq'
|
||||||
}
|
}
|
||||||
|
|
||||||
const customRendererForType = [
|
type CustomRendererMatcher = {
|
||||||
|
match: { [key: string]: any }
|
||||||
|
render: (...args: any[]) => ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
const customRendererForType: CustomRendererMatcher[] = [
|
||||||
{
|
{
|
||||||
id: 'bool2checkbox',
|
|
||||||
match: {type: 'boolean'},
|
match: {type: 'boolean'},
|
||||||
render: ({ value }) => !!value ? <CheckBox /> : <CheckBoxOutlineBlank />
|
render: ({ value }) => !!value ? <CheckBox /> : <CheckBoxOutlineBlank />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'email',
|
|
||||||
match: {type: 'string', name: 'contact_email'},
|
match: {type: 'string', name: 'contact_email'},
|
||||||
render: ({ value }) => (<a href={`mailto:${value}`} >{value}</a>)
|
render: ({ value }) => (<a href={`mailto:${value}`} >{value}</a>)
|
||||||
}
|
}
|
||||||
|
@ -135,14 +148,13 @@ const findMatchingRenderer = (c: ColumnRaw) => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return Object.keys(d.match).reduce((prev, cur) => prev && c[cur] === d.match[cur] , true )
|
return Object.keys(d.match).reduce((prev, cur) => prev && c[cur] === d.match[cur] , true )
|
||||||
})
|
})
|
||||||
console.log(customRenderer)
|
|
||||||
return customRenderer?.render
|
return customRenderer?.render
|
||||||
}
|
}
|
||||||
|
|
||||||
const columns: TypeColumn[] = columnsRaw
|
const columns: TypeColumn[] = columnsRaw
|
||||||
.map(c => ({
|
.map(c => ({
|
||||||
...c,
|
...c,
|
||||||
render: findMatchingRenderer(c) || null,
|
render: findMatchingRenderer(c) || undefined,
|
||||||
filterEditor: filterMappings[c.type as 'string' | 'number' | 'boolean' | 'date']
|
filterEditor: filterMappings[c.type as 'string' | 'number' | 'boolean' | 'date']
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
@ -157,12 +169,6 @@ const defaultFilterValue: TypeFilterValue = columns
|
||||||
} as unknown as TypeSingleFilterValue
|
} as unknown as TypeSingleFilterValue
|
||||||
} )
|
} )
|
||||||
|
|
||||||
const makeColumnDefinition = (data: any ) => Object.keys(data)
|
|
||||||
.map(k => ({
|
|
||||||
name: k,
|
|
||||||
header: k.replace(/_/g, ' '),
|
|
||||||
type: typeof data[k]}))
|
|
||||||
|
|
||||||
const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
|
const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
|
||||||
const dataSource = data.get_offers || []
|
const dataSource = data.get_offers || []
|
||||||
return <>
|
return <>
|
||||||
|
@ -174,6 +180,7 @@ const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
|
||||||
defaultFilterValue={defaultFilterValue}
|
defaultFilterValue={defaultFilterValue}
|
||||||
rowIndexColumn
|
rowIndexColumn
|
||||||
enableSelection
|
enableSelection
|
||||||
|
enableColumnAutosize={false}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
dataSource={dataSource}
|
dataSource={dataSource}
|
||||||
style={{minHeight: '1000px'}}
|
style={{minHeight: '1000px'}}
|
||||||
|
|
|
@ -7,11 +7,10 @@ type HostLookupWrapperProps = Record<string, never>
|
||||||
|
|
||||||
const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => {
|
const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => {
|
||||||
const {data, isFetching} = useGetOffersQuery({auth: testAuth as Auth}, {staleTime: 60 * 1000})
|
const {data, isFetching} = useGetOffersQuery({auth: testAuth as Auth}, {staleTime: 60 * 1000})
|
||||||
if (isFetching) {
|
|
||||||
return "loading…"
|
return <>{
|
||||||
} else if (data?.get_offers) {
|
(!isFetching && data?.get_offers) ? <HostOfferLookupTable data={data}/> : "loading…"
|
||||||
return (<HostOfferLookupTable data={data}/>)
|
}</>
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default HostOfferLookupWrapper
|
export default HostOfferLookupWrapper
|
||||||
|
|
Loading…
Reference in New Issue