fix: fix no display in filter drawer previous boolean and reference values (#1258)(@jwasiak)

* fix: no display in filter drawer previous boolean and reference values

* Update filter.tsx

Co-authored-by: Jarosław Wasiak <jaroslaw.wasiak@rst.com.pl>

Author: jwasiak

src/frontend/components/property-type/base-property-props.ts

@@ -3,7 +3,7 @@ import { RecordJSON, ResourceJSON, PropertyJSON, PropertyPlace } from '../../int
 import { BasePropertyJSON } from '../../interfaces/property-json/property-json.interface'
 
 export type SelectRecord = {
-  value: string;
+  value: string | number;
   label: string;
 }
 

src/frontend/components/property-type/boolean/filter.tsx

@@ -18,7 +18,7 @@ class Filter extends React.PureComponent<FilterPropertyProps> {
 
   render(): ReactNode {
     const { property, filter = {} } = this.props
-    const value = typeof filter[property.path] === 'undefined' ? '' : filter[property.path]
+    const value = typeof filter[property.path] === 'undefined' ? '' : Boolean(filter[property.path])
     const options = [
       { value: true, label: mapValue(true) },
       { value: false, label: mapValue(false) },

src/frontend/components/property-type/reference/filter.tsx

@@ -5,39 +5,46 @@ import ApiClient from '../../../utils/api-client'
 import { FilterPropertyProps, SelectRecord } from '../base-property-props'
 
 type CombinedProps = FilterPropertyProps
+type FilterState = {
+  options: Array<SelectRecord>
+}
 
-class Filter extends React.PureComponent<CombinedProps> {
+class Filter extends React.PureComponent<CombinedProps, FilterState> {
   private api: ApiClient
 
-  private options: Array<SelectRecord>
-
   constructor(props: CombinedProps) {
     super(props)
     this.api = new ApiClient()
-    this.options = []
     this.loadOptions = this.loadOptions.bind(this)
     this.handleChange = this.handleChange.bind(this)
+    this.state = {
+      options: [],
+    }
   }
 
   handleChange(selected: SelectRecord): void {
     const { onChange, property } = this.props
     onChange(property.path, selected ? selected.value : '')
   }
 
-  async loadOptions(inputValue: string): Promise<Array<{value: string; label: string }>> {
+  async loadOptions(inputValue: string): Promise<Array<{value: string | number; label: string }>> {
     const { property } = this.props
     const records = await this.api.searchRecords({
       resourceId: property.reference as string,
       query: inputValue,
     })
-    this.options = records.map((r) => ({ value: r.id, label: r.title }))
-    return this.options
+    const options = records.map((r) => ({ value: r.id, label: r.title }))
+    this.setState({
+      options,
+    })
+    return options
   }
 
   render(): ReactNode {
     const { property, filter } = this.props
+    const { options } = this.state
     const value = typeof filter[property.path] === 'undefined' ? '' : filter[property.path]
-    const selected = (this.options || []).find((o) => o.value === value)
+    const selected = (options || []).find((o) => String(o.value) === String(value))
     return (
       <FormGroup>
         <Label>{property.label}</Label>