From 20bf89ab1e32b3dc09b8ffb2a7f0a3ad531c8dda Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Thu, 18 May 2023 18:15:07 +0200 Subject: [PATCH] Add employees and address filter on companies table page (#129) --- front/src/interfaces/filters/interface.ts | 4 +- .../companies-filter.test.ts.snap | 17 +++ .../__tests__/companies-filter.test.ts | 11 ++ .../src/pages/companies/companies-filters.tsx | 140 ++++++++++++------ 4 files changed, 127 insertions(+), 45 deletions(-) create mode 100644 front/src/pages/companies/__tests__/__snapshots__/companies-filter.test.ts.snap create mode 100644 front/src/pages/companies/__tests__/companies-filter.test.ts diff --git a/front/src/interfaces/filters/interface.ts b/front/src/interfaces/filters/interface.ts index 34b38f106..5baa5d623 100644 --- a/front/src/interfaces/filters/interface.ts +++ b/front/src/interfaces/filters/interface.ts @@ -51,8 +51,8 @@ type FilterOperandRelationType< }; type FilterOperandFieldType = { - 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; }; diff --git a/front/src/pages/companies/__tests__/__snapshots__/companies-filter.test.ts.snap b/front/src/pages/companies/__tests__/__snapshots__/companies-filter.test.ts.snap new file mode 100644 index 000000000..842e9b3c2 --- /dev/null +++ b/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%", + }, +} +`; diff --git a/front/src/pages/companies/__tests__/companies-filter.test.ts b/front/src/pages/companies/__tests__/companies-filter.test.ts new file mode 100644 index 000000000..d5b1286d1 --- /dev/null +++ b/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(); + }); +}); diff --git a/front/src/pages/companies/companies-filters.tsx b/front/src/pages/companies/companies-filters.tsx index e404a3ca1..96ef306c3 100644 --- a/front/src/pages/companies/companies-filters.tsx +++ b/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: , + 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; + +export const urlFilter = { + key: 'company_domain_name', + label: 'Url', + icon: , + 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; + +export const addressFilter = { + key: 'company_address', + label: 'Address', + icon: , + 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; + +export const employeesFilter = { + key: 'company_employees', + label: 'Employees', + icon: , + 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; + export const availableFilters = [ - { - key: 'company_name', - label: 'Company', - icon: , - 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, - { - key: 'company_domain_name', - label: 'Url', - icon: , - 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, + nameFilter, + urlFilter, + addressFilter, + employeesFilter, ];