diff --git a/front/src/components/table/table-header/interface.ts b/front/src/components/table/table-header/interface.ts index 17d03f578..090101f36 100644 --- a/front/src/components/table/table-header/interface.ts +++ b/front/src/components/table/table-header/interface.ts @@ -5,6 +5,12 @@ import { People_Bool_Exp, Users_Bool_Exp, } from '../../../generated/graphql'; +import { GraphqlQueryCompany } from '../../../interfaces/company.interface'; +import { + SEARCH_COMPANY_QUERY, + SEARCH_PEOPLE_QUERY, +} from '../../../services/search/search'; +import { GraphqlQueryPerson } from '../../../interfaces/person.interface'; export type SortType = { label: string; @@ -46,3 +52,25 @@ export type SelectedFilterType = FilterType & { operand: FilterOperandType; where: WhereTemplate; }; + +export function assertFilterUseCompanySearch( + filter: FilterType, +): filter is FilterType & { + searchResultMapper: (data: GraphqlQueryCompany) => { + displayValue: string; + value: FilterValue; + }; +} { + return filter.searchQuery === SEARCH_COMPANY_QUERY; +} + +export function assertFilterUsePeopleSearch( + filter: FilterType, +): filter is FilterType & { + searchResultMapper: (data: GraphqlQueryPerson) => { + displayValue: string; + value: FilterValue; + }; +} { + return filter.searchQuery === SEARCH_PEOPLE_QUERY; +} diff --git a/front/src/pages/people/__tests__/__snapshots__/people-filter.test.ts.snap b/front/src/pages/people/__tests__/__snapshots__/people-filter.test.ts.snap index 7d8de6d77..d9db6a832 100644 --- a/front/src/pages/people/__tests__/__snapshots__/people-filter.test.ts.snap +++ b/front/src/pages/people/__tests__/__snapshots__/people-filter.test.ts.snap @@ -1,70 +1,92 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PeopleFilter Company fitler should generate the where variable of the GQL call 1`] = ` +exports[`PeopleFilter should render the filter city 1`] = ` +Object { + "city": Object { + "_eq": "Paris", + }, +} +`; + +exports[`PeopleFilter should render the filter city 2`] = ` +Object { + "_not": Object { + "city": Object { + "_eq": "Paris", + }, + }, +} +`; + +exports[`PeopleFilter should render the filter company_name 1`] = ` +Object { + "company": Object { + "name": Object { + "_eq": "ACME", + }, + }, +} +`; + +exports[`PeopleFilter should render the filter company_name 2`] = ` +Object { + "_not": Object { + "company": Object { + "name": Object { + "_eq": "ACME", + }, + }, + }, +} +`; + +exports[`PeopleFilter should render the filter email 1`] = ` +Object { + "email": Object { + "_eq": "john@linkedin.com", + }, +} +`; + +exports[`PeopleFilter should render the filter email 2`] = ` +Object { + "_not": Object { + "email": Object { + "_eq": "john@linkedin.com", + }, + }, +} +`; + +exports[`PeopleFilter should render the filter fullname 1`] = ` Object { "_and": Array [ Object { "firstname": Object { - "_eq": "undefined", + "_eq": "John", }, }, Object { "lastname": Object { - "_eq": "undefined", + "_eq": "Doe", }, }, ], } `; -exports[`PeopleFilter Company fitler should generate the where variable of the GQL call 2`] = ` +exports[`PeopleFilter should render the filter fullname 2`] = ` Object { "_not": Object { "_and": Array [ Object { "firstname": Object { - "_eq": "undefined", + "_eq": "John", }, }, Object { "lastname": Object { - "_eq": "undefined", - }, - }, - ], - }, -} -`; - -exports[`PeopleFilter Fullname filter should generate the where variable of the GQL call 1`] = ` -Object { - "_and": Array [ - Object { - "firstname": Object { - "_eq": "undefined", - }, - }, - Object { - "lastname": Object { - "_eq": "undefined", - }, - }, - ], -} -`; - -exports[`PeopleFilter Fullname filter should generate the where variable of the GQL call 2`] = ` -Object { - "_not": Object { - "_and": Array [ - Object { - "firstname": Object { - "_eq": "undefined", - }, - }, - Object { - "lastname": Object { - "_eq": "undefined", + "_eq": "Doe", }, }, ], diff --git a/front/src/pages/people/__tests__/people-filter.test.ts b/front/src/pages/people/__tests__/people-filter.test.ts index 4e684532d..74386c5d5 100644 --- a/front/src/pages/people/__tests__/people-filter.test.ts +++ b/front/src/pages/people/__tests__/people-filter.test.ts @@ -1,29 +1,37 @@ +import { + assertFilterUseCompanySearch, + assertFilterUsePeopleSearch, +} from '../../../components/table/table-header/interface'; import { GraphqlQueryPerson } from '../../../interfaces/person.interface'; import { mockCompanyData } from '../../companies/__stories__/mock-data'; import { defaultData } from '../default-data'; -import { companyFilter, fullnameFilter } from '../people-table'; +import { availableFilters } from '../people-table'; const JohnDoeUser = defaultData.find( (user) => user.email === 'john@linkedin.com', ) as GraphqlQueryPerson; describe('PeopleFilter', () => { - it('Fullname filter should generate the where variable of the GQL call', () => { - const filterSelectedValue = fullnameFilter.searchResultMapper(JohnDoeUser); - for (const operand of fullnameFilter.operands) { - expect( - fullnameFilter.whereTemplate(operand, filterSelectedValue), - ).toMatchSnapshot(); - } - }); - it('Company fitler should generate the where variable of the GQL call', () => { - const filterSelectedValue = companyFilter.searchResultMapper( - mockCompanyData[0], - ); - for (const operand of companyFilter.operands) { - expect( - fullnameFilter.whereTemplate(operand, filterSelectedValue), - ).toMatchSnapshot(); - } - }); + for (const filter of availableFilters) { + it(`should render the filter ${filter.key}`, () => { + if (assertFilterUseCompanySearch(filter)) { + const filterSelectedValue = filter.searchResultMapper( + mockCompanyData[0], + ); + for (const operand of filter.operands) { + expect( + filter.whereTemplate(operand, filterSelectedValue.value), + ).toMatchSnapshot(); + } + } + if (assertFilterUsePeopleSearch(filter)) { + const filterSelectedValue = filter.searchResultMapper(JohnDoeUser); + for (const operand of filter.operands) { + expect( + filter.whereTemplate(operand, filterSelectedValue.value), + ).toMatchSnapshot(); + } + } + }); + } }); diff --git a/front/src/pages/people/people-table.tsx b/front/src/pages/people/people-table.tsx index a132c75e5..79d177293 100644 --- a/front/src/pages/people/people-table.tsx +++ b/front/src/pages/people/people-table.tsx @@ -56,7 +56,7 @@ export const availableSorts = [ { key: 'city', label: 'City', icon: }, ] satisfies Array>; -export const fullnameFilter = { +const fullnameFilter = { key: 'fullname', label: 'People', icon: , @@ -100,7 +100,7 @@ export const fullnameFilter = { ], } satisfies FilterType; -export const companyFilter = { +const companyFilter = { key: 'company_name', label: 'Company', icon: , @@ -133,17 +133,77 @@ export const companyFilter = { ], } satisfies FilterType; +const emailFilter = { + key: 'email', + label: 'Email', + icon: , + whereTemplate: (operand, { email }) => { + if (operand.keyWord === 'equal') { + return { + email: { _eq: email }, + }; + } + + if (operand.keyWord === 'not_equal') { + return { + _not: { email: { _eq: email } }, + }; + } + console.error(Error(`Unhandled operand: ${operand.keyWord}`)); + return {}; + }, + searchQuery: SEARCH_PEOPLE_QUERY, + searchTemplate: (searchInput: string) => ({ + email: { _ilike: `%${searchInput}%` }, + }), + searchResultMapper: (person: GraphqlQueryPerson) => ({ + displayValue: person.email, + value: { email: person.email }, + }), + operands: [ + { label: 'Equal', id: 'equal', keyWord: 'equal' }, + { label: 'Not equal', id: 'not-equal', keyWord: 'not_equal' }, + ], +} satisfies FilterType; + +const cityFilter = { + key: 'city', + label: 'City', + icon: , + whereTemplate: (operand, { city }) => { + if (operand.keyWord === 'equal') { + return { + city: { _eq: city }, + }; + } + + if (operand.keyWord === 'not_equal') { + return { + _not: { city: { _eq: city } }, + }; + } + console.error(Error(`Unhandled operand: ${operand.keyWord}`)); + return {}; + }, + searchQuery: SEARCH_PEOPLE_QUERY, + searchTemplate: (searchInput: string) => ({ + city: { _ilike: `%${searchInput}%` }, + }), + searchResultMapper: (person: GraphqlQueryPerson) => ({ + displayValue: person.city, + value: { city: person.city }, + }), + operands: [ + { label: 'Equal', id: 'equal', keyWord: 'equal' }, + { label: 'Not equal', id: 'not-equal', keyWord: 'not_equal' }, + ], +} satisfies FilterType; + export const availableFilters = [ fullnameFilter, companyFilter, - // { - // key: 'email', - // label: 'Email', - // icon: faEnvelope, - // whereTemplate: () => ({ email: { _ilike: '%value%' } }), - // searchQuery: GET_PEOPLE, - // searchTemplate: { email: { _ilike: '%value%' } }, - // }, + emailFilter, + cityFilter, // { // key: 'phone', // label: 'Phone', @@ -160,14 +220,6 @@ export const availableFilters = [ // searchQuery: GET_PEOPLE, // searchTemplate: { created_at: { _eq: '%value%' } }, // }, - // { - // key: 'city', - // label: 'City', - // icon: faMapPin, - // whereTemplate: () => ({ city: { _ilike: '%value%' } }), - // searchQuery: GET_PEOPLE, - // searchTemplate: { city: { _ilike: '%value%' } }, - // }, ] satisfies FilterType[]; const columnHelper = createColumnHelper();