[Bugfix] fix filter change with select component and scroll options with multiple filters (#4404)

* fixes: selecting colum filter with react-select component

* add scrolling for multiple filters

* handles chaning

* updates: exposed variables

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

@@ -14,10 +14,11 @@ export function Filter(props) {
 
   const [activeFilters, set] = React.useState(filters);
 
-  function filterColumnChanged(index, value, name) {
+  function filterColumnChanged(index, value) {
+    const filter = props.columns.find((column) => column.value === value);
     const newFilters = filters;
-    newFilters[index].id = value;
+    newFilters[index].id = filter.value;
-    newFilters[index].value.where = name;
+    newFilters[index].value.column = filter.name;
     mergeToFilterDetails({
       filters: newFilters,
     });
@@ -28,8 +29,14 @@ export function Filter(props) {
     const newFilters = filters;
     newFilters[index].value = {
       ...newFilters[index].value,
-      operation: value,
+      condition: value,
     };
+
+    //* if condition is "is empty" or "is not empty" then clear the filter query value
+    if (value === 'isEmpty' || value === 'isNotEmpty') {
+      newFilters[index].value.value = '';
+    }
+
     mergeToFilterDetails({
       filters: newFilters,
     });
@@ -49,7 +56,7 @@ export function Filter(props) {
   }
 
   function addFilter() {
-    mergeToFilterDetails({ filters: [...filters, { id: '', value: { operation: 'contains', value: '' } }] });
+    mergeToFilterDetails({ filters: [...filters, { id: '', value: { condition: 'contains', value: '' } }] });
   }
 
   function removeFilter(index) {
@@ -114,20 +121,24 @@ export function Filter(props) {
           </button>
         </div>
       </div>
-      <div className="card-body">
+      <div
+        style={{
+          overflowY: 'auto',
+          overflowX: 'hidden',
+        }}
+        className="card-body"
+      >
         {props.filters.map((filter, index) => (
           <div className="row mb-2" key={index}>
             <div className="col p-2" style={{ maxWidth: '70px' }}>
-              <small>{index > 0 ? 'and' : 'where'}</small>
+              <small>{index > 0 ? 'and' : 'column'}</small>
             </div>
             <div className="col">
               <Select
                 options={props.columns}
                 value={filter.id}
                 search={true}
-                onChange={(value, item) => {
+                onChange={(value) => filterColumnChanged(index, value)}
-                  filterColumnChanged(index, value, item.name);
-                }}
                 placeholder={t('globals.select', 'Select') + '...'}
                 styles={selectStyles('100%')}
               />
@@ -148,7 +159,7 @@ export function Filter(props) {
                   { name: 'greater than or equals', value: 'gte' },
                   { name: 'less than or equals', value: 'lte' },
                 ]}
-                value={filter.value.operation}
+                value={filter.value.condition}
                 search={true}
                 onChange={(value) => {
                   filterOperationChanged(index, value);
@@ -158,7 +169,7 @@ export function Filter(props) {
               />
             </div>
             <div className="col">
-              {['isEmpty', 'isNotEmpty'].includes(filter.value.operation) || (
+              {['isEmpty', 'isNotEmpty'].includes(filter.value.condition) || (
                 <input
                   type="text"
                   value={filter.value.value}
@@ -202,16 +213,16 @@ const findFilterDiff = (oldFilters, newFilters) => {
   const filterDiff = deepDiff(oldFilters, newFilters);
 
   const getType = (obj) => {
-    if (!obj?.where && !obj?.operation) {
+    if (!obj?.column && !obj?.condition) {
       return 'value';
     }
 
-    if (obj?.where) {
+    if (obj?.column) {
-      return 'where';
+      return 'column';
     }
 
-    if (obj?.operation) {
+    if (obj?.condition) {
-      return 'operation';
+      return 'condition';
     }
   };
 
@@ -226,15 +237,23 @@ const findFilterDiff = (oldFilters, newFilters) => {
 function shouldFireEvent(diff, filter) {
   if (!diff || !filter) return false;
 
+  function forEmptyOperationAndNotEmptyOperation(condition) {
+    if (condition !== 'isEmpty' || condition !== 'isNotEmpty') {
+      return filter[diff.keyIndex]?.value?.column ? true : false;
+    }
+
+    return filter[diff.keyIndex]?.value?.value && filter[diff.keyIndex]?.value?.column ? true : false;
+  }
+
   switch (diff.type) {
     case 'value':
-      return filter[diff.keyIndex].value.where && filter[diff.keyIndex].value.operation ? true : false;
+      return filter[diff.keyIndex]?.value?.column && filter[diff.keyIndex]?.value?.condition ? true : false;
 
-    case 'where':
+    case 'column':
-      return filter[diff.keyIndex].value.value && filter[diff.keyIndex].value.operation ? true : false;
+      return filter[diff.keyIndex]?.value?.value && filter[diff.keyIndex]?.value?.condition ? true : false;
 
-    case 'operation':
+    case 'condition':
-      return filter[diff.keyIndex].value.value && filter[diff.keyIndex].value.where ? true : false;
+      return forEmptyOperationAndNotEmptyOperation(filter[diff.keyIndex]?.value?.condition);
 
     default:
       return false;