<ColumnFilter /> now uses filterBy widget field parameter to dete…

…rmine if some other field should be used for displaying filtration control (#711)
tesler-platform · Oct 7, 2021 · c290421 · c290421
1 parent 098ea32
commit c290421
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 208 deletions.
diff --git a/package.json b/package.json
@@ -89,7 +89,7 @@
     "webpack-rxjs-externals": "1.1.0"
   },
   "dependencies": {
-    "@tesler-ui/schema": "0.4.0",
+    "@tesler-ui/schema": "^0.5.0",
     "classnames": "2.2.6",
     "core-js": "3.1.4",
     "diff": "4.0.2",

diff --git a/src/components/ColumnTitle/ColumnFilter.tsx b/src/components/ColumnTitle/ColumnFilter.tsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React, { memo, useCallback } from 'react'
 import { Popover } from 'antd'
 import { useDispatch, useSelector } from 'react-redux'
 import { RowMetaField } from '../../interfaces/rowMeta'
@@ -56,7 +56,9 @@ export interface ColumnFilterProps extends ColumnFilterOwnProps {
 export function ColumnFilter({ widgetName, widgetMeta, rowMeta, components }: ColumnFilterProps) {
     const widget = useSelector((store: Store) => store.view.widgets.find(item => item.name === widgetName))
     const bcName = widget?.bcName
-    const filter = useSelector((store: Store) => store.screen.filters[bcName]?.find(item => item.fieldName === widgetMeta.key))
+    const effectiveFieldMeta = (widget?.fields?.find((item: WidgetListField) => item.key === widgetMeta.filterBy) ??
+        widgetMeta) as WidgetListField
+    const filter = useSelector((store: Store) => store.screen.filters[bcName]?.find(item => item.fieldName === effectiveFieldMeta.key))
     const [value, setValue] = React.useState(filter?.value)
     const [visible, setVisible] = React.useState(false)
     const dispatch = useDispatch()
@@ -65,50 +67,43 @@ export function ColumnFilter({ widgetName, widgetMeta, rowMeta, components }: Co
         setValue(filter?.value)
     }, [filter?.value])
 
+    const fieldMeta = effectiveFieldMeta as MultivalueFieldMeta | PickListFieldMeta
+    const fieldMetaMultivalue = effectiveFieldMeta as MultivalueFieldMeta
+    const fieldMetaPickListField = effectiveFieldMeta as PickListFieldMeta
     const assocWidget = useSelector((store: Store) =>
-        store.view.widgets.find(
-            item => item.bcName === (widgetMeta as PickListFieldMeta).popupBcName && item.type === WidgetTypes.AssocListPopup
-        )
+        store.view.widgets.find(item => item.bcName === fieldMetaPickListField.popupBcName && item.type === WidgetTypes.AssocListPopup)
     )
 
-    const isPickList = widgetMeta.type === FieldType.pickList
-    const isMultivalue = [FieldType.multivalue, FieldType.multivalueHover].includes(widgetMeta.type) || isPickList
-
-    const fieldMeta = widgetMeta as MultivalueFieldMeta | PickListFieldMeta
-    const fieldMetaMultivalue = widgetMeta as MultivalueFieldMeta
-    const fieldMetaPickListField = widgetMeta as PickListFieldMeta
-    const handleVisibleChange = (eventVisible: boolean) => {
-        if (isMultivalue && eventVisible) {
-            setVisible(false)
-            dispatch(
-                $do.showViewPopup({
-                    bcName: fieldMeta.popupBcName,
-                    widgetName: assocWidget?.name,
-                    calleeBCName: widget?.bcName,
-                    calleeWidgetName: widget?.name,
-                    assocValueKey: !isPickList ? fieldMetaMultivalue.assocValueKey : fieldMetaPickListField.pickMap[fieldMeta.key],
-                    associateFieldKey: !isPickList ? fieldMetaMultivalue.associateFieldKey : fieldMeta.key,
-                    isFilter: true
-                })
-            )
-        } else {
-            setVisible(!visible)
-        }
-    }
+    const isPickList = effectiveFieldMeta.type === FieldType.pickList
+    const isMultivalue = [FieldType.multivalue, FieldType.multivalueHover].includes(effectiveFieldMeta.type) || isPickList
 
-    const content = components?.popup ?? (
-        <FilterPopup
-            widgetName={widgetName}
-            fieldKey={widgetMeta.key}
-            value={value}
-            onApply={() => {
+    const handleVisibleChange = useCallback(
+        (eventVisible: boolean) => {
+            if (isMultivalue && eventVisible) {
                 setVisible(false)
-            }}
-            onCancel={() => {
-                setVisible(false)
-            }}
-        >
-            <FilterField widgetFieldMeta={widgetMeta} rowFieldMeta={rowMeta} value={value} onChange={setValue} />
+                dispatch(
+                    $do.showViewPopup({
+                        bcName: fieldMeta.popupBcName,
+                        widgetName: assocWidget?.name,
+                        calleeBCName: widget?.bcName,
+                        calleeWidgetName: widget?.name,
+                        assocValueKey: !isPickList ? fieldMetaMultivalue.assocValueKey : fieldMetaPickListField.pickMap[fieldMeta.key],
+                        associateFieldKey: !isPickList ? fieldMetaMultivalue.associateFieldKey : fieldMeta.key,
+                        isFilter: true
+                    })
+                )
+            } else {
+                setVisible(!visible)
+            }
+        },
+        [visible, isMultivalue, isPickList, fieldMeta, assocWidget, widget, fieldMetaMultivalue, fieldMetaPickListField, dispatch]
+    )
+
+    const handleClose = useCallback(() => setVisible(false), [])
+
+    const content = components?.popup ?? (
+        <FilterPopup widgetName={widgetName} fieldKey={effectiveFieldMeta.key} value={value} onApply={handleClose} onCancel={handleClose}>
+            <FilterField widgetFieldMeta={effectiveFieldMeta} rowFieldMeta={rowMeta} value={value} onChange={setValue} />
         </FilterPopup>
     )