allow change of default operator in row definition

frontend/search/components/config/defaultColumnRawDefinition.ts

@@ -37,7 +37,12 @@ const columnsRaw: ColumnRaw[] = [
     "group": "distance",
     "header": "km",
     "type": "number",
-    "defaultWidth": 105
+    "defaultWidth": 105,
+    "options": {
+      "filter": {
+        "operator": "lte"
+      }
+    }
   },
   {
     "name": "place_country",
@@ -62,7 +67,15 @@ const columnsRaw: ColumnRaw[] = [
     "group": "time",
     "header": "From",
     "type": "date",
-    "defaultWidth": 90
+    "defaultWidth": 90,
+    "options": {
+      "dateFormat": "MM/DD/YYYY",
+      "transform": {
+        "date2Iso": {
+          "inputDateFormat": "MM/DD/YYYY"
+        }
+      }
+    }
   },
   {
     "name": "time_duration_str",
@@ -74,7 +87,14 @@ const columnsRaw: ColumnRaw[] = [
     "name": "languages",
     "header": "Languages",
     "type": "object",
-    "defaultWidth": 200
+    "defaultWidth": 200,
+    "options": {
+      "transform": {
+        array2string: {
+          join: ","
+        }
+      }
+    }
   },
   {
     "name": "accessible",

frontend/search/components/ngo/HostOfferLookupTable.tsx

@@ -5,36 +5,40 @@ import {CheckBoxOutlineBlank, CheckBox} from '@mui/icons-material'
 import '@inovua/reactdatagrid-community/index.css'
 
 import DataGrid from '@inovua/reactdatagrid-community'
-import filter from '@inovua/reactdatagrid-community/filter'
 import {TypeColumn, TypeFilterValue, TypeSingleFilterValue} from "@inovua/reactdatagrid-community/types"
 import DateFilter from '@inovua/reactdatagrid-community/DateFilter'
 import StringFilter from '@inovua/reactdatagrid-community/StringFilter'
 import BoolFilter from '@inovua/reactdatagrid-community/BoolFilter'
 import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter"
 import BoolEditor from '@inovua/reactdatagrid-community/BoolEditor'
-import { GetOffersQuery, GetRwQuery} from "../../codegen/generates"
+import {GetOffersQuery, GetRwQuery} from "../../codegen/generates"
 import moment from "moment"
 
 import {useTranslation} from "react-i18next"
 import {resources} from '../../i18n/config'
 
-import { fetcher } from '../../codegen/fetcher'
-import { useAuthStore, AuthState } from '../Login'
+import {fetcher} from '../../codegen/fetcher'
+import {useAuthStore, AuthState} from '../Login'
 import defaultColumnRawDefinition from "../config/defaultColumnRawDefinition";
 import defaultColumnGroups from "../config/defaultColumnGroups";
-import { ColumnRaw } from '../util/datagrid/columnRaw'
+import {ColumnRaw} from '../util/datagrid/columnRaw'
 import columnsRaw from "../config/defaultColumnRawDefinition";
 import {transformValue} from "../util/tableValueMapper";
 import {filterUndefOrNull} from "../util/notEmpty";
+import extendedFilter from "../util/datagrid/extendedFilter";
+import {haversine_distance, LatLng} from "../util/distance";
 
 global.moment = moment
 
-export type HostOfferLookupTableDataType = GetOffersQuery["get_offers"] & GetRwQuery["get_rw"];
+export type HostOfferLookupTableDataType =
+  Omit<NonNullable<(GetOffersQuery["get_offers"] & GetRwQuery["get_rw"])>[number], '__typename'>
+  & { place_distance?: number };
 export type HostOfferLookupTableProps = {
   data_ro?: GetOffersQuery["get_offers"],
   data_rw?: GetRwQuery["get_rw"],  // TODO
   refetch_rw: any,
   onFilteredDataChange?: (data: HostOfferLookupTableDataType[]) => void
+  center?: LatLng
 }
 
 const filterMappings = {
@@ -61,12 +65,12 @@ type CustomRendererMatcher = {
   render: (...args: any[]) => ReactNode
 }
 
-function Email({value}: {value: string}) {
+function Email({value}: { value: string }) {
   const href = `mailto:${value}`
   return <a href={href}>{value}</a>
 }
 
-function Phone({value}: {value: string}) {
+function Phone({value}: { value: string }) {
   const href = `tel:${value}`
   return <a href={href}>{value}</a>
 }
@@ -94,6 +98,12 @@ const findMatchingRenderer = (c: Partial<ColumnRaw>) => {
   return customRenderer?.render
 }
 
+const floor = (v: number | undefined) => v && Math.floor(v);
+
+const calculateDistance = (r: {place_lat?: number | null, place_lon?: number | null}, {lng, lat}: LatLng) =>
+  r.place_lat && r.place_lon && lng && lat
+    ? floor(haversine_distance(lat, lng, r.place_lat, r.place_lon)) : r
+
 const columns: TypeColumn[] = defaultColumnRawDefinition
   .map(c => ({
     ...c,
@@ -102,63 +112,87 @@ const columns: TypeColumn[] = defaultColumnRawDefinition
     editor: editorMappings[c.type as 'string' | 'number' | 'boolean' | 'date']
   }))
 
-const defaultFilterValue: TypeFilterValue = columns
-  .filter(({type}) => type && ['string', 'number', 'date', 'boolean'].includes(type))
-  .map(({name, type}) => {
+const defaultFilterValue: TypeFilterValue = defaultColumnRawDefinition
+  .filter(({type}) => type && ['string', 'number', 'boolean', 'date'].includes(type))
+  .map(({name, type, options}) => {
     return {
       name,
       type,
       value: null,
-      operator: operatorsForType[type as 'string' | 'number' | 'date' | 'boolean']
+      operator: options?.filter?.operator || operatorsForType[type as 'string' | 'number' | 'date' | 'boolean']
     } as unknown as TypeSingleFilterValue
   })
 
-async function mutate(auth: AuthState, onEditComplete: {value: string, columnId: string, rowId: string}) {
-  const type = typeof(onEditComplete.value)
-  const onEditCompleteByType = {rowId: onEditComplete.rowId,
-                                columnId: onEditComplete.columnId,
-                                value_boolean: type === 'boolean' && onEditComplete.value || null,
-                                value_string: type === 'string' && onEditComplete.value || null}
+async function mutate(auth: AuthState, onEditComplete: { value: string, columnId: string, rowId: string }) {
+  const type = typeof (onEditComplete.value)
+  const onEditCompleteByType = {
+    rowId: onEditComplete.rowId,
+    columnId: onEditComplete.columnId,
+    value_boolean: type === 'boolean' && onEditComplete.value || null,
+    value_string: type === 'string' && onEditComplete.value || null
+  }
   const result = await fetcher<any, any>(`mutation WriteRW($auth: Auth!, $onEditCompleteByType: Boolean) {
                                             write_rw(auth: $auth, onEditCompleteByType: $onEditCompleteByType) }`,
-                                         {auth, onEditCompleteByType})()
+    {auth, onEditCompleteByType})()
   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,
+                                center
+                              }: HostOfferLookupTableProps) => {
   const [dataSource, setDataSource] = useState<HostOfferLookupTableDataType[]>([]);
   const [filteredData, setFilteredData] = useState<HostOfferLookupTableDataType[]>([]);
-  const [filterValue, setFilterValue] = useState(defaultFilterValue);
+  const [filterValue, setFilterValue] = useState<TypeFilterValue | undefined>(defaultFilterValue);
 
-  const filterValueChangeHandler = useCallback((_filterValue) => {
-    const data = filter(dataSource, filterValue)  as HostOfferLookupTableDataType[]
+  const filterValueChangeHandler = useCallback((_filterValue?: TypeFilterValue) => {
     setFilterValue(_filterValue);
-    setFilteredData(data)
-    onFilteredDataChange && onFilteredDataChange(data)
-  }, [dataSource])
+  }, [setFilterValue])
 
+  const filterAndSetData = useCallback(() => {
+    if (!filterValue) {
+      setFilteredData(dataSource)
+      onFilteredDataChange && onFilteredDataChange(dataSource)
+      return
+    }
+    const data = extendedFilter(dataSource, filterValue, columnsRaw)
+    onFilteredDataChange && onFilteredDataChange(data)
+    setFilteredData(data)
+  }, [dataSource, onFilteredDataChange, setFilteredData, filterValue])
 
   useEffect(() => {
-    // @ts-ignore
-    const data = filterUndefOrNull( data_ro
-      ?.map( e_ro => ({
-          ...((data_rw?.find((e_rw) => e_ro.id_tmp === e_rw.id || `rw_${e_ro.id}` === e_rw.id
-			    ) || rw_default)),
-          ...e_ro
-      }) ) || [])
+    filterAndSetData()
+  }, [dataSource, filterValue, filterAndSetData]);
+
+  useEffect(() => {
+    const data = filterUndefOrNull(data_ro
+      ?.map(e_ro => ({
+        ...((data_rw?.find((e_rw) => e_ro.id_tmp === e_rw.id || `rw_${e_ro.id}` === e_rw.id
+        ) || rw_default)),
+        ...e_ro
+      })) || [])
+      .map(v => transformValue(v, columnsRaw))
+      .map(v => center ? {...v, place_distance: calculateDistance(v, center)} : v)
 
     // @ts-ignore
     data && setDataSource(data)
-    //setDataSource((/*data_rw?.get_rw || */ data_ro?.get_offers || []).map(v => transformValue(v, columnsRaw)))
-  }, [data_ro, data_rw]);
+  }, [data_ro, data_rw, center]);
 
   const auth = useAuthStore()
 
   const onEditComplete = useCallback(async ({value, columnId, rowId}) => {
     /** For now the easiest way to ensure the user can see if data was updated in the db is by calling `refetch_rw()`
-        TODO: error handling **/
+     TODO: error handling **/
     await mutate(auth, {value, columnId, rowId}) && refetch_rw()
   }, [auth, refetch_rw])
 
@@ -167,21 +201,22 @@ const HostOfferLookupTable = ({data_ro, data_rw, refetch_rw, onFilteredDataChang
   const reactdatagridi18n = resources[language]?.translation?.reactdatagrid
 
   return <DataGrid
-        idProperty="id"
-        filterable
-        showColumnMenuFilterOptions={true}
-        showFilteringMenuItems={true}
-        defaultFilterValue={defaultFilterValue}
-        rowIndexColumn
-        enableSelection
-        enableColumnAutosize={false}
-        columns={columns}
-        dataSource={dataSource}
-        i18n={reactdatagridi18n || undefined}
-        style={{height: '100%'}}
-	      onEditComplete={onEditComplete}
-	      groups={defaultColumnGroups}
-      />
+    idProperty="id"
+    filterable
+    showColumnMenuFilterOptions={true}
+    showFilteringMenuItems={true}
+    filterValue={filterValue}
+    onFilterValueChange={filterValueChangeHandler}
+    rowIndexColumn
+    enableSelection
+    enableColumnAutosize={false}
+    columns={columns}
+    dataSource={filteredData}
+    i18n={reactdatagridi18n || undefined}
+    style={{height: '100%'}}
+    onEditComplete={onEditComplete}
+    groups={defaultColumnGroups}
+  />
 }
 
 export default HostOfferLookupTable

frontend/search/components/ngo/HostOfferLookupWrapper.tsx

@@ -1,18 +1,25 @@
-import React, { useEffect } from 'react'
+import React, {useCallback, useEffect} from 'react'
 import { useGetOffersQuery, useGetRwQuery } from "../../codegen/generates"
-import HostOfferLookupTable, {HostOfferLookupTableProps} from "./HostOfferLookupTable"
+import HostOfferLookupTable, {HostOfferLookupTableDataType, HostOfferLookupTableProps} from "./HostOfferLookupTable"
 import { Box } from "@mui/material"
 import { useTranslation } from 'react-i18next'
 import { Login, useAuthStore } from '../Login'
-import { useLeafletStore } from './LeafletStore'
+import {Marker, useLeafletStore} from './LeafletStore'
 import { filterUndefOrNull } from '../util/notEmpty'
 import { haversine_distance } from '../util/distance'
+import {marker} from "leaflet";
 
 type HostOfferLookupWrapperProps = Partial<HostOfferLookupTableProps>
 
-function floor(v: number|undefined) {
-  return v && Math.floor(v)
-}
+//type HostOfferLookupTableDataRowType = NonNullable<HostOfferLookupTableDataType>[number]
+const makeMarker: (row: { id?: string | null; place_lon?: number | null; place_lat?: number | null }) => Marker | undefined =
+  ({ id, place_lon, place_lat }) => id && place_lon && place_lat && ({
+    id: id,
+    lat: place_lat,
+    lng: place_lon,
+    radius: 1000,  // TODO
+    content: 'TODO'
+  }) || undefined;
 
 const HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
   const { t } = useTranslation()
@@ -25,19 +32,20 @@ const HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
   const {data: data_ro} = queryResult_ro
   const {data: data_rw} = queryResult_rw
 
-  const {setMarkers, center} = useLeafletStore()
+  const {setMarkers, center, setFilteredMarkers} = useLeafletStore()
   useEffect(() => {
-    const markers = data_ro?.get_offers?.map(row => (row.id && row.place_lon && row.place_lat
-                                                            && ({id: row.id,
-                                                                 lat: row.place_lat,
-                                                                 lng: row.place_lon,
-                                                                 radius: 1000,  // TODO
-                                                                 content: 'TODO'}) || undefined))
+    const markers = filterUndefOrNull( data_ro?.get_offers?.map(makeMarker) )
     setMarkers(filterUndefOrNull(markers))
-  }, [data_ro])
+  }, [data_ro, setMarkers])
 
-  const data_ro_withDistance = data_ro?.get_offers?.map(r => ({...r,
-                                                               place_distance: floor(haversine_distance(center?.lat, center?.lng, r.place_lat, r.place_lon))}))
+  const handleFilteredDataChange = useCallback(
+    (data:  HostOfferLookupTableDataType[]) => {
+      // @ts-ignore
+      const _filteredMarkers = filterUndefOrNull( data.map(d => d && makeMarker(d)))
+      setFilteredMarkers(_filteredMarkers)
+    },
+    [setFilteredMarkers],
+  );
 
   return <>
     <Box sx={{
@@ -56,9 +64,11 @@ const HostOfferLookupWrapper = (props: HostOfferLookupWrapperProps) => {
           style={{flex: '1 1', height: '100%'}}>
             <HostOfferLookupTable
               {...props}
-              data_ro={data_ro_withDistance}
+              data_ro={data_ro.get_offers}
               data_rw={data_rw?.get_rw}
               refetch_rw={queryResult_rw.refetch}
+              onFilteredDataChange={handleFilteredDataChange}
+              center={center || undefined}
             />
         </div>}
     </Box>

frontend/search/components/ngo/LeafletMap.tsx

@@ -20,20 +20,20 @@ import { useLeafletStore } from './LeafletStore'
 type LeafletMapProps = {onBoundsChange?: (bounds: L.LatLngBounds) => void}
 
 const BoundsChangeListener = ({onBoundsChange}: {onBoundsChange?: (bounds: L.LatLngBounds) => void}) => {
-  const leafletStore = useLeafletStore()
+  const { setCenter} = useLeafletStore()
 
   const map = useMap()
 
   const updateBounds = useCallback(
     () => {
-      leafletStore.setCenter(map.getCenter())
+      setCenter(map.getCenter())
 
       // onBoundsChange is unused at the moment
       onBoundsChange && onBoundsChange(
         map.getBounds()
       )
     },
-    [map, onBoundsChange],
+    [map, onBoundsChange, setCenter],
   )
 
   useEffect(() => {
@@ -92,17 +92,28 @@ const LeafletMap = ({onBoundsChange}: LeafletMapProps) => {
           </LayersControl.BaseLayer>
 
 
-          {leafletStore.markers.map(m =>
+          {leafletStore.markers.map((m, i) =>
 	    /** TODO: Maybe a clustered marker would be helpfull, but we loose the possibility of showing the radius (display accuracy of the coordinate).
 	    *         Probably the best solution is showing Circle and clustered marker.
 	    **/
-            <Circle key={m.id + Math.random() /* Till we have unique ids from the db */}
+            <Circle key={m.id + i.toString() /* Till we have unique ids from the db */}
                     center={[m.lat, m.lng]}
                     radius={m.radius}
                     pathOptions={{color: 'grey'}}>
               <Popup><a href={`#${m.id}`}>{ m.content }</a></Popup>
             </Circle>
           )}
+          {leafletStore.filteredMarkers.map((m, i) =>
+            /** TODO: Maybe a clustered marker would be helpfull, but we loose the possibility of showing the radius (display accuracy of the coordinate).
+             *         Probably the best solution is showing Circle and clustered marker.
+             **/
+            <Circle key={m.id + i.toString() /* Till we have unique ids from the db */}
+                    center={[m.lat, m.lng]}
+                    radius={m.radius}
+                    pathOptions={{color: 'blue'}}>
+              <Popup><a href={`#${m.id}`}>{ m.content }</a></Popup>
+            </Circle>
+          )}
         </LayersControl>
       </MapContainer>
     </>)

frontend/search/components/ngo/LeafletStore.tsx

@@ -14,11 +14,15 @@ export interface LeafletState {
   setCenter: (center: L.LatLng) => void
   markers: Marker[]
   setMarkers: (markers: Marker[]) => void
+  filteredMarkers: Marker[]
+  setFilteredMarkers: (filteredMarkers: Marker[]) => void
 }
 
 export const useLeafletStore = create<LeafletState>(set => ({
   center: null,
   setCenter: center => set( _orig => ({center}) ),
   markers: [],
-  setMarkers: markers => set( _orig => ({markers}) )
+  setMarkers: markers => set( _orig => ({markers}) ),
+  filteredMarkers: [],
+  setFilteredMarkers: filteredMarkers => set( _orig => ({filteredMarkers}) )
 }))

frontend/search/components/util/datagrid/columnRaw.ts

@@ -1,8 +1,13 @@
-import {Array2StringTransformOptions} from "../tableValueMapper";
+import {Array2StringTransformOptions, DateToISOTransformOptions} from "../tableValueMapper";
 
 export type ColumnOptions = {
+  dateFormat?: string
+  filter?: {
+    operator?: string
+  }
   transform?: {
     array2string?: Array2StringTransformOptions
+    date2Iso?: DateToISOTransformOptions
   }
 }
 export interface ColumnRaw {

frontend/search/components/util/datagrid/extendedFilter.ts

@@ -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

frontend/search/components/util/distance.ts

@@ -1,8 +1,13 @@
-export type lon=number|null|undefined
-export type lat=number|null|undefined
+export type Lng =number|null|undefined
+export type Lat =number|null|undefined
+
+export type LatLng = {
+  lat: Lat
+  lng: Lng
+}
 
 /** optimization by https://stackoverflow.com/questions/5260423/torad-javascript-function-throwing-error/21623256#21623256 **/
-export function haversine_distance(lat1:lat, lon1: lon, lat2:lat, lon2:lon) {
+export function haversine_distance(lat1:Lat, lon1: Lng, lat2:Lat, lon2:Lng) {
   if(lat1 && lon1 && lat2 && lon2) {
     var R = 6371 // Radius of the earth in km
     var dLat = (lat2 - lat1) * Math.PI / 180  // deg2rad below

frontend/search/components/util/notEmpty.ts

@@ -3,6 +3,8 @@
  * https://stackoverflow.com/a/46700791/2726641
  * @param value
  */
-export default <TValue>(value: TValue | null | undefined): value is TValue => !(value === null || value === undefined)
+const isUndefOrEmpty = <TValue>(value: TValue | null | undefined): value is TValue => !(value === null || value === undefined)
 
 export const filterUndefOrNull = <T>(ts?: (T | undefined | null)[] | null): T[] => ts?.filter((t: T | undefined | null): t is T => t !== undefined && t !== null) || []
+
+export default isUndefOrEmpty

frontend/search/components/util/tableValueMapper.ts

@@ -1,12 +1,24 @@
 import {ColumnRaw} from "./datagrid/columnRaw";
+import moment from "moment"
 
 export type Array2StringTransformOptions = {
   join?: string
 }
 
+export type DateToISOTransformOptions = {
+  inputDateFormat: string
+  outputDateFormat?: string
+}
+
 
 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) => {
   const newValues = {...values}
   columnsRaw
@@ -14,8 +26,11 @@ export const transformValue: <T>(values: T, columnsRaw: ColumnRaw[]) => T = (val
       const transform = c.options?.transform
       if (!transform) return
       // @ts-ignore
-      const value = values[c.name]
+      let value = values[c.name]
       if (!value) return
+      if(transform.date2Iso) {
+        value = callOneOrMany(value, dateToIso, [ transform.date2Iso ])
+      }
       if (transform.array2string) {
         try {
           // @ts-ignore