get managed filter working in all cases
This commit is contained in:
parent
857120f799
commit
72c1c384a1
|
@ -62,7 +62,15 @@ const columnsRaw: ColumnRaw[] = [
|
||||||
"group": "time",
|
"group": "time",
|
||||||
"header": "From",
|
"header": "From",
|
||||||
"type": "date",
|
"type": "date",
|
||||||
"defaultWidth": 90
|
"defaultWidth": 90,
|
||||||
|
"options": {
|
||||||
|
"dateFormat": "MM/DD/YYYY",
|
||||||
|
"transform": {
|
||||||
|
"date2Iso": {
|
||||||
|
"inputDateFormat": "MM/DD/YYYY"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "time_duration_str",
|
"name": "time_duration_str",
|
||||||
|
@ -74,7 +82,14 @@ const columnsRaw: ColumnRaw[] = [
|
||||||
"name": "languages",
|
"name": "languages",
|
||||||
"header": "Languages",
|
"header": "Languages",
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"defaultWidth": 200
|
"defaultWidth": 200,
|
||||||
|
"options": {
|
||||||
|
"transform": {
|
||||||
|
array2string: {
|
||||||
|
join: ","
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "accessible",
|
"name": "accessible",
|
||||||
|
|
|
@ -5,7 +5,6 @@ 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'
|
||||||
import filter from '@inovua/reactdatagrid-community/filter'
|
|
||||||
import {TypeColumn, TypeFilterValue, TypeSingleFilterValue} from "@inovua/reactdatagrid-community/types"
|
import {TypeColumn, TypeFilterValue, TypeSingleFilterValue} from "@inovua/reactdatagrid-community/types"
|
||||||
import DateFilter from '@inovua/reactdatagrid-community/DateFilter'
|
import DateFilter from '@inovua/reactdatagrid-community/DateFilter'
|
||||||
import StringFilter from '@inovua/reactdatagrid-community/StringFilter'
|
import StringFilter from '@inovua/reactdatagrid-community/StringFilter'
|
||||||
|
@ -26,6 +25,7 @@ import { ColumnRaw } from '../util/datagrid/columnRaw'
|
||||||
import columnsRaw from "../config/defaultColumnRawDefinition";
|
import columnsRaw from "../config/defaultColumnRawDefinition";
|
||||||
import {transformValue} from "../util/tableValueMapper";
|
import {transformValue} from "../util/tableValueMapper";
|
||||||
import {filterUndefOrNull} from "../util/notEmpty";
|
import {filterUndefOrNull} from "../util/notEmpty";
|
||||||
|
import extendedFilter from "../util/datagrid/extendedFilter";
|
||||||
|
|
||||||
global.moment = moment
|
global.moment = moment
|
||||||
|
|
||||||
|
@ -103,7 +103,7 @@ const columns: TypeColumn[] = defaultColumnRawDefinition
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const defaultFilterValue: TypeFilterValue = columns
|
const defaultFilterValue: TypeFilterValue = columns
|
||||||
.filter(({type}) => type && ['string', 'number', 'date', 'boolean'].includes(type))
|
.filter(({type}) => type && ['string', 'number', 'boolean', 'date'].includes(type))
|
||||||
.map(({name, type}) => {
|
.map(({name, type}) => {
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
|
@ -125,15 +125,25 @@ async function mutate(auth: AuthState, onEditComplete: {value: string, columnId:
|
||||||
return result?.write_rw
|
return result?.write_rw
|
||||||
}
|
}
|
||||||
|
|
||||||
const rw_default = {rw_note: ''} // Required for filtering 'Not empty'. TODO: Should be fixed in StringFilter
|
const rw_default = {
|
||||||
|
rw_contacted: false,
|
||||||
|
rw_contact_replied: false,
|
||||||
|
rw_offer_occupied: false,
|
||||||
|
rw_note: ''} // Required for filtering 'Not empty'. TODO: Should be fixed in StringFilter
|
||||||
|
|
||||||
const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChange}: HostOfferLookupTableProps) => {
|
const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChange}: HostOfferLookupTableProps) => {
|
||||||
const [dataSource, setDataSource] = useState<HostOfferLookupTableDataType[]>([]);
|
const [dataSource, setDataSource] = useState<HostOfferLookupTableDataType[]>([]);
|
||||||
const [filteredData, setFilteredData] = useState<HostOfferLookupTableDataType[]>([]);
|
const [filteredData, setFilteredData] = useState<HostOfferLookupTableDataType[]>([]);
|
||||||
const [filterValue, setFilterValue] = useState(defaultFilterValue);
|
const [filterValue, setFilterValue] = useState<TypeFilterValue>(defaultFilterValue);
|
||||||
|
|
||||||
const filterValueChangeHandler = useCallback((_filterValue) => {
|
const filterValueChangeHandler = useCallback((_filterValue: TypeFilterValue) => {
|
||||||
const data = filter(dataSource, filterValue) as HostOfferLookupTableDataType[]
|
const data = !_filterValue
|
||||||
|
? dataSource
|
||||||
|
: extendedFilter(
|
||||||
|
dataSource,
|
||||||
|
_filterValue,
|
||||||
|
columnsRaw
|
||||||
|
)
|
||||||
setFilterValue(_filterValue);
|
setFilterValue(_filterValue);
|
||||||
setFilteredData(data)
|
setFilteredData(data)
|
||||||
onFilteredDataChange && onFilteredDataChange(data)
|
onFilteredDataChange && onFilteredDataChange(data)
|
||||||
|
@ -141,13 +151,12 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// @ts-ignore
|
const data = filterUndefOrNull( data_ro
|
||||||
const data = filterUndefOrNull( data_ro
|
|
||||||
?.map( e_ro => ({
|
?.map( e_ro => ({
|
||||||
...((data_rw?.find((e_rw) => e_ro.id_tmp === e_rw.id || `rw_${e_ro.id}` === e_rw.id
|
...((data_rw?.find((e_rw) => e_ro.id_tmp === e_rw.id || `rw_${e_ro.id}` === e_rw.id
|
||||||
) || rw_default)),
|
) || rw_default)),
|
||||||
...e_ro
|
...e_ro
|
||||||
}) ) || [])
|
}) ) || []).map(v => transformValue(v, columnsRaw))
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
data && setDataSource(data)
|
data && setDataSource(data)
|
||||||
|
@ -171,12 +180,13 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
|
||||||
filterable
|
filterable
|
||||||
showColumnMenuFilterOptions={true}
|
showColumnMenuFilterOptions={true}
|
||||||
showFilteringMenuItems={true}
|
showFilteringMenuItems={true}
|
||||||
defaultFilterValue={defaultFilterValue}
|
filterValue={filterValue}
|
||||||
|
onFilterValueChange={filterValueChangeHandler}
|
||||||
rowIndexColumn
|
rowIndexColumn
|
||||||
enableSelection
|
enableSelection
|
||||||
enableColumnAutosize={false}
|
enableColumnAutosize={false}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
dataSource={dataSource}
|
dataSource={filteredData}
|
||||||
i18n={reactdatagridi18n || undefined}
|
i18n={reactdatagridi18n || undefined}
|
||||||
style={{height: '100%'}}
|
style={{height: '100%'}}
|
||||||
onEditComplete={onEditComplete}
|
onEditComplete={onEditComplete}
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
import {Array2StringTransformOptions} from "../tableValueMapper";
|
import {Array2StringTransformOptions, DateToISOTransformOptions} from "../tableValueMapper";
|
||||||
|
|
||||||
export type ColumnOptions = {
|
export type ColumnOptions = {
|
||||||
|
dateFormat?: string
|
||||||
transform?: {
|
transform?: {
|
||||||
array2string?: Array2StringTransformOptions
|
array2string?: Array2StringTransformOptions
|
||||||
|
date2Iso?: DateToISOTransformOptions
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export interface ColumnRaw {
|
export interface ColumnRaw {
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
import {TypeColumn, TypeSingleFilterValue} from "@inovua/reactdatagrid-community/types";
|
||||||
|
import filter from "@inovua/reactdatagrid-community/filter";
|
||||||
|
import moment from "moment";
|
||||||
|
import {ColumnRaw} from "./columnRaw";
|
||||||
|
|
||||||
|
const defaultDateFormat = "MM/DD/YYYY"
|
||||||
|
const extendedFilter: <T>(
|
||||||
|
data: T[],
|
||||||
|
filterValue: TypeSingleFilterValue[],
|
||||||
|
columnsRaw: ColumnRaw[]
|
||||||
|
) => T[] = <T>(data: T[], filterValue: TypeSingleFilterValue[], columnsRaw: ColumnRaw[] ) => {
|
||||||
|
const columns = columnsRaw
|
||||||
|
.filter(({ type }) => type === "date")
|
||||||
|
.reduce((prev, cur) =>
|
||||||
|
({...prev ,[cur.name]: { dateFormat: cur.options?.dateFormat || defaultDateFormat }}), {})
|
||||||
|
return filter(
|
||||||
|
data,
|
||||||
|
filterValue.map(fV => {
|
||||||
|
if (typeof fV.value == 'string' && fV.type === 'date') {
|
||||||
|
return {
|
||||||
|
...fV,
|
||||||
|
value: moment(fV.value).format(defaultDateFormat)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return fV
|
||||||
|
}),
|
||||||
|
undefined,
|
||||||
|
columns) as T[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default extendedFilter
|
|
@ -1,12 +1,24 @@
|
||||||
import {ColumnRaw} from "./datagrid/columnRaw";
|
import {ColumnRaw} from "./datagrid/columnRaw";
|
||||||
|
import moment from "moment"
|
||||||
|
|
||||||
export type Array2StringTransformOptions = {
|
export type Array2StringTransformOptions = {
|
||||||
join?: string
|
join?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type DateToISOTransformOptions = {
|
||||||
|
inputDateFormat: string
|
||||||
|
outputDateFormat?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const array2string = (value: string[], options: Array2StringTransformOptions) => value.join(options.join || ',')
|
const array2string = (value: string[], options: Array2StringTransformOptions) => value.join(options.join || ',')
|
||||||
|
|
||||||
|
const callOneOrMany: <T, O>(els: T | T[], cb: (d: T, ...rest: any[]) => O, args?: any[]) => O | O [] = (els, cb, args = []) =>
|
||||||
|
Array.isArray(els) ? els.map(v => cb(v, ...args)) : cb(els, ...args)
|
||||||
|
|
||||||
|
const dateToIso: (date: string, options: DateToISOTransformOptions) => string =
|
||||||
|
(date, { inputDateFormat, outputDateFormat}) => moment(date, inputDateFormat).format(outputDateFormat)
|
||||||
|
|
||||||
export const transformValue: <T>(values: T, columnsRaw: ColumnRaw[]) => T = (values, columnsRaw) => {
|
export const transformValue: <T>(values: T, columnsRaw: ColumnRaw[]) => T = (values, columnsRaw) => {
|
||||||
const newValues = {...values}
|
const newValues = {...values}
|
||||||
columnsRaw
|
columnsRaw
|
||||||
|
@ -14,8 +26,11 @@ export const transformValue: <T>(values: T, columnsRaw: ColumnRaw[]) => T = (val
|
||||||
const transform = c.options?.transform
|
const transform = c.options?.transform
|
||||||
if (!transform) return
|
if (!transform) return
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const value = values[c.name]
|
let value = values[c.name]
|
||||||
if (!value) return
|
if (!value) return
|
||||||
|
if(transform.date2Iso) {
|
||||||
|
value = callOneOrMany(value, dateToIso, [ transform.date2Iso ])
|
||||||
|
}
|
||||||
if (transform.array2string) {
|
if (transform.array2string) {
|
||||||
try {
|
try {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|
Loading…
Reference in New Issue