[improvements] Table - exposed active filters and add an event (#4138)

* exposed active filters

* adds onFilterChanged event

* default value for filters should be an empty array

* remove column id from exposed filter variables

frontend/src/Editor/Components/Table/Filter.jsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import SelectSearch, { fuzzySearch } from 'react-select-search';
 import { useTranslation } from 'react-i18next';
+import { useMounted } from '@/_hooks/use-mount';
 
 export function Filter(props) {
+  const mounted = useMounted();
   const { t } = useTranslation();
 
-  const { mergeToFilterDetails, filterDetails, setAllFilters } = props;
+  const { mergeToFilterDetails, filterDetails, setAllFilters, fireEvent } = props;
   const { filters } = filterDetails;
 
-  function filterColumnChanged(index, value) {
+  function filterColumnChanged(index, value, name) {
     const newFilters = filters;
     newFilters[index].id = value;
+    newFilters[index].value.where = name;
     mergeToFilterDetails({
       filters: newFilters,
     });
@@ -61,6 +64,13 @@ export function Filter(props) {
     setAllFilters([]);
   }
 
+  React.useEffect(() => {
+    if (mounted) {
+      fireEvent('onFilterChanged');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters.length]);
+
   return (
     <div className="table-filters card">
       <div className="card-header row">
@@ -84,8 +94,8 @@ export function Filter(props) {
                 options={props.columns}
                 value={filter.id}
                 search={true}
-                onChange={(value) => {
-                  filterColumnChanged(index, value);
+                onChange={(value, item) => {
+                  filterColumnChanged(index, value, item.name);
                 }}
                 filterOptions={fuzzySearch}
                 placeholder={t('globals.select', 'Select') + '...'}

frontend/src/Editor/Components/Table/Table.jsx

@@ -79,6 +79,13 @@ export function Table({
   const mergeToTableDetails = (payload) => dispatch(reducerActions.mergeToTableDetails(payload));
   const mergeToFilterDetails = (payload) => dispatch(reducerActions.mergeToFilterDetails(payload));
 
+  useEffect(() => {
+    setExposedVariable(
+      'filters',
+      tableDetails.filterDetails.filters.map((filter) => filter.value)
+    );
+  }, [JSON.stringify(tableDetails.filterDetails.filters)]);
+
   useEffect(
     () => mergeToTableDetails({ columnProperties: component?.definition?.properties?.columns?.value }),
     [component?.definition?.properties]
@@ -601,6 +608,7 @@ export function Table({
           filterDetails={tableDetails.filterDetails}
           darkMode={darkMode}
           setAllFilters={setAllFilters}
+          fireEvent={fireEvent}
         />
       )}
     </div>

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -225,6 +225,7 @@ export const widgets = [
       onBulkUpdate: { displayName: 'Bulk update' },
       onPageChanged: { displayName: 'Page changed' },
       onSearch: { displayName: 'Search' },
+      onFilterChanged: { displayName: 'Filter changed' },
     },
     styles: {
       textColor: {
@@ -295,6 +296,7 @@ export const widgets = [
       pageIndex: 1,
       searchText: '',
       selectedRows: [],
+      filters: [],
     },
     actions: [
       {

frontend/src/_helpers/appUtils.js

@@ -512,6 +512,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') {
       'onOpen',
       'onClose',
       'onRowClicked',
+      'onFilterChanged',
     ].includes(eventName)
   ) {
     const { component } = options;