refactor: Update EntityFilter to handle FieldType.Entity and FieldType.EntityArray filters

CommonServer/Tests/Utils/AnalyticsDatabase/StatementGenerator.test.ts

@@ -199,7 +199,9 @@ describe('StatementGenerator', () => {
                 createdAt: true,
                 updatedAt: true,
             });
-            expect(statement.query).toBe('{p0:Identifier}, {p1:Identifier}, {p2:Identifier}');
+            expect(statement.query).toBe(
+                '{p0:Identifier}, {p1:Identifier}, {p2:Identifier}'
+            );
             expect(statement.query_params).toStrictEqual({
                 p0: '_id',
                 p1: 'createdAt',

CommonUI/src/Components/Filters/DropdownFilter.tsx

@@ -0,0 +1,61 @@
+import React, { ReactElement } from 'react';
+import Dropdown, { DropdownValue } from '../Dropdown/Dropdown';
+import Filter from './Types/Filter';
+import GenericObject from 'Common/Types/GenericObject';
+import FieldType from '../Types/FieldType';
+import FilterData from './Types/FilterData';
+
+export interface ComponentProps<T extends GenericObject> {
+    filter: Filter<T>;
+    onFilterChanged?: undefined | ((filterData: FilterData<T>) => void);
+    filterData: FilterData<T>;
+}
+
+type DropdownFilterFunction = <T extends GenericObject>(
+    props: ComponentProps<T>
+) => ReactElement;
+
+const DropdownFilter: DropdownFilterFunction = <T extends GenericObject>(
+    props: ComponentProps<T>
+): ReactElement => {
+    const filter: Filter<T> = props.filter;
+    const filterData: FilterData<T> = { ...props.filterData };
+
+    if (
+        filter.type !== FieldType.Entity &&
+        filter.type !== FieldType.EntityArray &&
+        filter.filterDropdownOptions
+    ) {
+        return (
+            <Dropdown
+                options={filter.filterDropdownOptions}
+                onChange={(
+                    value: DropdownValue | Array<DropdownValue> | null
+                ) => {
+                    if (!filter.key) {
+                        return;
+                    }
+
+                    if (
+                        !value ||
+                        (Array.isArray(value) && value.length === 0)
+                    ) {
+                        delete filterData[filter.key];
+                    } else {
+                        filterData[filter.key] = value;
+                    }
+
+                    if (props.onFilterChanged) {
+                        props.onFilterChanged(filterData);
+                    }
+                }}
+                isMultiSelect={false}
+                placeholder={`Filter by ${filter.title}`}
+            />
+        );
+    }
+
+    return <></>;
+};
+
+export default DropdownFilter;

CommonUI/src/Components/Filters/EntityFilter.tsx

@@ -22,8 +22,8 @@ const EntityFilter: EntityFilterFunction = <T extends GenericObject>(
     const filterData: FilterData<T> = { ...props.filterData };
 
     if (
-        filter.type !== FieldType.Entity &&
-        filter.type !== FieldType.EntityArray &&
+        (filter.type === FieldType.Entity ||
+            filter.type === FieldType.EntityArray) &&
         filter.filterDropdownOptions
     ) {
         return (
@@ -49,7 +49,7 @@ const EntityFilter: EntityFilterFunction = <T extends GenericObject>(
                         props.onFilterChanged(filterData);
                     }
                 }}
-                isMultiSelect={false}
+                isMultiSelect={filter.type === FieldType.EntityArray}
                 placeholder={`Filter by ${filter.title}`}
             />
         );

CommonUI/src/Components/Filters/Filter.tsx

@@ -7,6 +7,7 @@ import FilterData from './Types/FilterData';
 import EntityFilter from './EntityFilter';
 import BooleanFilter from './BooleanFilter';
 import TextFilter from './TextFilter';
+import DropdownFilter from './DropdownFilter';
 
 export interface ComponentProps<T extends GenericObject> {
     filters: Array<Filter<T>>;
@@ -36,7 +37,11 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
         return <></>;
     }
 
-    const changeFilterData = (filterData: FilterData<T>) => {
+    type ChangeFilterDataFunction = (filterData: FilterData<T>) => void;
+
+    const changeFilterData: ChangeFilterDataFunction = (
+        filterData: FilterData<T>
+    ): void => {
         setFilterData(filterData);
         if (props.onFilterChanged) {
             props.onFilterChanged(filterData);
@@ -74,16 +79,24 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
                                         {filter.title}
                                     </label>
 
+                                    <DropdownFilter
+                                        filter={filter}
+                                        filterData={filterData}
+                                        onFilterChanged={changeFilterData}
+                                    />
+
                                     <EntityFilter
                                         filter={filter}
                                         filterData={filterData}
                                         onFilterChanged={changeFilterData}
                                     />
+
                                     <BooleanFilter
                                         filter={filter}
                                         filterData={filterData}
                                         onFilterChanged={changeFilterData}
                                     />
+
                                     <TextFilter
                                         filter={filter}
                                         filterData={filterData}

CommonUI/src/Components/List/List.tsx

@@ -9,7 +9,8 @@ import { DragDropContext, DropResult } from 'react-beautiful-dnd';
 import { ListDetailProps } from './ListRow';
 import { GetReactElementFunction } from '../../Types/FunctionTypes';
 import FilterType from '../Filters/Types/Filter';
-import Filter, { FilterData } from '../Filters/Filter';
+import Filter from '../Filters/Filter';
+import FilterData from '../Filters/Types/FilterData';
 import GenericObject from 'Common/Types/GenericObject';
 
 export interface ComponentProps<T extends GenericObject> {

CommonUI/src/Components/ModelTable/BaseModelTable.tsx

@@ -74,10 +74,10 @@ import {
 } from 'Common/Types/FunctionTypes';
 import { GetReactElementFunction } from '../../Types/FunctionTypes';
 import SelectEntityField from '../../Types/SelectEntityField';
-import { FilterData } from '../Filters/Filter';
 import ClassicFilterType from '../Filters/Types/Filter';
 import { getRefreshButton } from '../Card/CardButtons/Refresh';
 import GroupBy from '../../Utils/BaseDatabase/GroupBy';
+import FilterData from '../Filters/Types/FilterData';
 
 export enum ShowAs {
     Table,

CommonUI/src/Components/Table/Table.tsx

@@ -8,7 +8,8 @@ import ActionButtonSchema from '../ActionButton/ActionButtonSchema';
 import ErrorMessage from '../ErrorMessage/ErrorMessage';
 import ComponentLoader from '../ComponentLoader/ComponentLoader';
 import { DragDropContext, DropResult } from 'react-beautiful-dnd';
-import Filter, { FilterData } from '../Filters/Filter';
+import Filter from '../Filters/Filter';
+import FilterData from '../Filters/Types/FilterData';
 import FilterType from '../Filters/Types/Filter';
 import { GetReactElementFunction } from '../../Types/FunctionTypes';
 import GenericObject from 'Common/Types/GenericObject';