Add employees and address filter on companies table page (#129)

front/src/interfaces/filters/interface.ts

@@ -51,8 +51,8 @@ type FilterOperandRelationType<
 };
 
 type FilterOperandFieldType<FilteredType extends FilterableFieldsType> = {
-  label: 'Contains' | 'Does not contain';
-  id: 'like' | 'not_like';
+  label: 'Contains' | 'Does not contain' | 'Greater than' | 'Less than';
+  id: 'like' | 'not_like' | 'greater_than' | 'less_than';
   whereTemplate: (value: string) => BoolExpType<FilteredType>;
 };
 

front/src/pages/companies/__tests__/__snapshots__/companies-filter.test.ts.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Companies Filter should render the filter company_employees 1`] = `
+Object {
+  "employees": Object {
+    "_gte": 2,
+  },
+}
+`;
+
+exports[`Companies Filter should render the filter company_name 1`] = `
+Object {
+  "name": Object {
+    "_ilike": "%name%",
+  },
+}
+`;

front/src/pages/companies/__tests__/companies-filter.test.ts

@@ -0,0 +1,11 @@
+import { employeesFilter, nameFilter } from '../companies-filters';
+
+describe('Companies Filter', () => {
+  it(`should render the filter ${nameFilter.key}`, () => {
+    expect(nameFilter.operands[0].whereTemplate('name')).toMatchSnapshot();
+  });
+
+  it(`should render the filter ${employeesFilter.key}`, () => {
+    expect(employeesFilter.operands[0].whereTemplate('2')).toMatchSnapshot();
+  });
+});

front/src/pages/companies/companies-filters.tsx

@@ -1,48 +1,102 @@
 import { Company } from '../../interfaces/entities/company.interface';
-import { FaLink, FaBuilding } from 'react-icons/fa';
+import { FaLink, FaBuilding, FaMapPin, FaUsers } from 'react-icons/fa';
 import { FilterConfigType } from '../../interfaces/filters/interface';
 
+export const nameFilter = {
+  key: 'company_name',
+  label: 'Company',
+  icon: <FaBuilding />,
+  operands: [
+    {
+      label: 'Contains',
+      id: 'like',
+      whereTemplate: (searchString) => ({
+        name: { _ilike: `%${searchString}%` },
+      }),
+    },
+    {
+      label: 'Does not contain',
+      id: 'not_like',
+      whereTemplate: (searchString) => ({
+        _not: { name: { _ilike: `%${searchString}%` } },
+      }),
+    },
+  ],
+} satisfies FilterConfigType<Company, string>;
+
+export const urlFilter = {
+  key: 'company_domain_name',
+  label: 'Url',
+  icon: <FaLink />,
+  operands: [
+    {
+      label: 'Contains',
+      id: 'like',
+      whereTemplate: (searchString) => ({
+        domain_name: { _ilike: `%${searchString}%` },
+      }),
+    },
+    {
+      label: 'Does not contain',
+      id: 'not_like',
+      whereTemplate: (searchString) => ({
+        _not: { domain_name: { _ilike: `%${searchString}%` } },
+      }),
+    },
+  ],
+} satisfies FilterConfigType<Company, string>;
+
+export const addressFilter = {
+  key: 'company_address',
+  label: 'Address',
+  icon: <FaMapPin />,
+  operands: [
+    {
+      label: 'Contains',
+      id: 'like',
+      whereTemplate: (searchString) => ({
+        address: { _ilike: `%${searchString}%` },
+      }),
+    },
+    {
+      label: 'Does not contain',
+      id: 'not_like',
+      whereTemplate: (searchString) => ({
+        _not: { address: { _ilike: `%${searchString}%` } },
+      }),
+    },
+  ],
+} satisfies FilterConfigType<Company, string>;
+
+export const employeesFilter = {
+  key: 'company_employees',
+  label: 'Employees',
+  icon: <FaUsers />,
+  operands: [
+    {
+      label: 'Greater than',
+      id: 'greater_than',
+      whereTemplate: (searchString) => ({
+        employees: {
+          _gte: isNaN(Number(searchString)) ? undefined : Number(searchString),
+        },
+      }),
+    },
+    {
+      label: 'Less than',
+      id: 'less_than',
+      whereTemplate: (searchString) => ({
+        employees: {
+          _lte: isNaN(Number(searchString)) ? undefined : Number(searchString),
+        },
+      }),
+    },
+  ],
+} satisfies FilterConfigType<Company, string>;
+
 export const availableFilters = [
-  {
-    key: 'company_name',
-    label: 'Company',
-    icon: <FaBuilding />,
-    operands: [
-      {
-        label: 'Contains',
-        id: 'like',
-        whereTemplate: (searchString) => ({
-          name: { _ilike: `%${searchString}%` },
-        }),
-      },
-      {
-        label: 'Does not contain',
-        id: 'not_like',
-        whereTemplate: (searchString) => ({
-          _not: { name: { _ilike: `%${searchString}%` } },
-        }),
-      },
-    ],
-  } satisfies FilterConfigType<Company, string>,
-  {
-    key: 'company_domain_name',
-    label: 'Url',
-    icon: <FaLink />,
-    operands: [
-      {
-        label: 'Contains',
-        id: 'like',
-        whereTemplate: (searchString) => ({
-          domain_name: { _ilike: `%${searchString}%` },
-        }),
-      },
-      {
-        label: 'Does not contain',
-        id: 'not_like',
-        whereTemplate: (searchString) => ({
-          _not: { domain_name: { _ilike: `%${searchString}%` } },
-        }),
-      },
-    ],
-  } satisfies FilterConfigType<Company, string>,
+  nameFilter,
+  urlFilter,
+  addressFilter,
+  employeesFilter,
 ];