From 6b0e9409f5338c90117629eb8cd8d9757fdaeea8 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Fri, 7 Oct 2022 09:31:36 +0530
Subject: [PATCH] [Enhancement] : [Table widget] Adding filters (#4130)

* added does not contains filter

* added isEmpty and isNotEmpty filter

* added contains filter logic in custom-filter.js

* converting row value to string for comparison in equal and not equal filters
---
 .../src/Editor/Components/Table/Filter.jsx    | 19 ++++++++-----
 .../Editor/Components/Table/custom-filter.js  | 28 +++++++++++++++++--
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Filter.jsx b/frontend/src/Editor/Components/Table/Filter.jsx
index 4929d177ef..c69fb47370 100644
--- a/frontend/src/Editor/Components/Table/Filter.jsx
+++ b/frontend/src/Editor/Components/Table/Filter.jsx
@@ -105,10 +105,13 @@ export function Filter(props) {
               <SelectSearch
                 options={[
                   { name: 'contains', value: 'contains' },
+                  { name: 'does not contains', value: 'doesNotContains' },
                   { name: 'matches', value: 'matches' },
                   { name: 'does not match', value: 'nl' },
                   { name: 'equals', value: 'equals' },
                   { name: 'does not equal', value: 'ne' },
+                  { name: 'is empty', value: 'isEmpty' },
+                  { name: 'is not empty', value: 'isNotEmpty' },
                   { name: 'greater than', value: 'gt' },
                   { name: 'less than', value: 'lt' },
                   { name: 'greater than or equals', value: 'gte' },
@@ -124,13 +127,15 @@ export function Filter(props) {
               />
             </div>
             <div className="col">
-              <input
-                type="text"
-                value={filter.value.value}
-                placeholder="value"
-                className="form-control"
-                onChange={(e) => filterValueChanged(index, e.target.value)}
-              />
+              {['isEmpty', 'isNotEmpty'].includes(filter.value.operation) || (
+                <input
+                  type="text"
+                  value={filter.value.value}
+                  placeholder="value"
+                  className="form-control"
+                  onChange={(e) => filterValueChanged(index, e.target.value)}
+                />
+              )}
             </div>
             <div className="col-auto">
               <button
diff --git a/frontend/src/Editor/Components/Table/custom-filter.js b/frontend/src/Editor/Components/Table/custom-filter.js
index 5761d0b0f9..ae71e4277b 100644
--- a/frontend/src/Editor/Components/Table/custom-filter.js
+++ b/frontend/src/Editor/Components/Table/custom-filter.js
@@ -1,11 +1,11 @@
 export default function customFilter(rows, columnIds, filterValue) {
   try {
     if (filterValue.operation === 'equals') {
-      return rows.filter((row) => row.values[columnIds[0]] === filterValue.value);
+      return rows.filter((row) => row.values[columnIds[0]].toString() === filterValue.value);
     }
 
     if (filterValue.operation === 'ne') {
-      return rows.filter((row) => row.values[columnIds[0]] !== filterValue.value);
+      return rows.filter((row) => row.values[columnIds[0]].toString() !== filterValue.value);
     }
 
     if (filterValue.operation === 'matches') {
@@ -35,6 +35,30 @@ export default function customFilter(rows, columnIds, filterValue) {
     if (filterValue.operation === 'lte') {
       return rows.filter((row) => row.values[columnIds[0]] <= filterValue.value);
     }
+    if (filterValue.operation === 'doesNotContains') {
+      return rows.filter(
+        (row) => !row.values[columnIds[0]].toString().toLowerCase().includes(filterValue.value.toLowerCase())
+      );
+    }
+    if (filterValue.operation === 'isEmpty') {
+      return rows.filter((row) => {
+        if (!row.values[columnIds[0]]) {
+          return row;
+        }
+      });
+    }
+    if (filterValue.operation === 'isNotEmpty') {
+      return rows.filter((row) => {
+        if (row.values[columnIds[0]]) {
+          return row;
+        }
+      });
+    }
+    if (filterValue.operation === 'contains') {
+      return rows.filter((row) =>
+        row.values[columnIds[0]].toString().toLowerCase().includes(filterValue.value.toLowerCase())
+      );
+    }
 
     let value = filterValue.value;
     if (typeof value === 'string') {