Sammy/t 192 aau whan i select does not include it is (#99)

* feature: add operand list to filters

* feature: implement not include

* feature: add operand on filters

* feature: use filters operand instead of defaults

* test: adapt test with new operands

* refactor: remove useless %% in gql where

* test: test fullname filter

* test: add test for where rendering of filters

front/src/pages/companies/__stories__/Companies.stories.tsx

@@ -3,7 +3,7 @@ import Companies from '../Companies';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../layout/styles/themes';
 import { GET_COMPANIES } from '../../../services/companies';
-import { defaultData } from './mock-data';
+import { mockCompanyData } from './mock-data';
 import { MockedProvider } from '@apollo/client/testing';
 
 const component = {
@@ -23,7 +23,7 @@ const mocks = [
     },
     result: {
       data: {
-        companies: defaultData,
+        companies: mockCompanyData,
       },
     },
   },

front/src/pages/companies/__stories__/mock-data.ts

@@ -1,6 +1,6 @@
 import { GraphqlQueryCompany } from '../../../interfaces/company.interface';
 
-export const defaultData: Array<GraphqlQueryCompany> = [
+export const mockCompanyData: Array<GraphqlQueryCompany> = [
   {
     id: 'f121ab32-fac4-4b8c-9a3d-150c877319c2',
     name: 'ACME',

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

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PeopleFilter Company fitler 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 Company fitler 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",
+        },
+      },
+    ],
+  },
+}
+`;
+
+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",
+        },
+      },
+    ],
+  },
+}
+`;

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

@@ -0,0 +1,29 @@
+import { GraphqlQueryPerson } from '../../../interfaces/person.interface';
+import { mockCompanyData } from '../../companies/__stories__/mock-data';
+import { defaultData } from '../default-data';
+import { companyFilter, fullnameFilter } 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();
+    }
+  });
+});

front/src/pages/people/people-table.tsx

@@ -56,45 +56,86 @@ export const availableSorts = [
   { key: 'city', label: 'City', icon: <FaMapPin /> },
 ] satisfies Array<SortType<OrderByFields>>;
 
+export const fullnameFilter = {
+  key: 'fullname',
+  label: 'People',
+  icon: <FaUser />,
+  whereTemplate: (operand, { firstname, lastname }) => {
+    if (operand.keyWord === 'equal') {
+      return {
+        _and: [
+          { firstname: { _eq: `${firstname}` } },
+          { lastname: { _eq: `${lastname}` } },
+        ],
+      };
+    }
+
+    if (operand.keyWord === 'not_equal') {
+      return {
+        _not: {
+          _and: [
+            { firstname: { _eq: `${firstname}` } },
+            { lastname: { _eq: `${lastname}` } },
+          ],
+        },
+      };
+    }
+    console.error(Error(`Unhandled operand: ${operand.keyWord}`));
+    return {};
+  },
+  searchQuery: SEARCH_PEOPLE_QUERY,
+  searchTemplate: (searchInput: string) => ({
+    _or: [
+      { firstname: { _ilike: `%${searchInput}%` } },
+      { lastname: { _ilike: `%${searchInput}%` } },
+    ],
+  }),
+  searchResultMapper: (person: GraphqlQueryPerson) => ({
+    displayValue: `${person.firstname} ${person.lastname}`,
+    value: { firstname: person.firstname, lastname: person.lastname },
+  }),
+  operands: [
+    { label: 'Equal', id: 'equal', keyWord: 'equal' },
+    { label: 'Not equal', id: 'not-equal', keyWord: 'not_equal' },
+  ],
+} satisfies FilterType<People_Bool_Exp>;
+
+export const companyFilter = {
+  key: 'company_name',
+  label: 'Company',
+  icon: <FaBuilding />,
+  whereTemplate: (operand, { companyName }) => {
+    if (operand.keyWord === 'equal') {
+      return {
+        company: { name: { _eq: companyName } },
+      };
+    }
+
+    if (operand.keyWord === 'not_equal') {
+      return {
+        _not: { company: { name: { _eq: companyName } } },
+      };
+    }
+    console.error(Error(`Unhandled operand: ${operand.keyWord}`));
+    return {};
+  },
+  searchQuery: SEARCH_COMPANY_QUERY,
+  searchTemplate: (searchInput: string) => ({
+    name: { _ilike: `%${searchInput}%` },
+  }),
+  searchResultMapper: (company: GraphqlQueryCompany) => ({
+    displayValue: company.name,
+    value: { companyName: company.name },
+  }),
+  operands: [
+    { label: 'Equal', id: 'equal', keyWord: 'equal' },
+    { label: 'Not equal', id: 'not-equal', keyWord: 'not_equal' },
+  ],
+} satisfies FilterType<People_Bool_Exp>;
+
 export const availableFilters = [
-  {
-    key: 'fullname',
-    label: 'People',
-    icon: <FaUser />,
-    whereTemplate: (_operand, { firstname, lastname }) => ({
-      _and: [
-        { firstname: { _ilike: `${firstname}` } },
-        { lastname: { _ilike: `${lastname}` } },
-      ],
-    }),
-    searchQuery: SEARCH_PEOPLE_QUERY,
-    searchTemplate: (searchInput: string) => ({
-      _or: [
-        { firstname: { _ilike: `%${searchInput}%` } },
-        { lastname: { _ilike: `%${searchInput}%` } },
-      ],
-    }),
-    searchResultMapper: (person: GraphqlQueryPerson) => ({
-      displayValue: `${person.firstname} ${person.lastname}`,
-      value: { firstname: person.firstname, lastname: person.lastname },
-    }),
-  },
-  {
-    key: 'company_name',
-    label: 'Company',
-    icon: <FaBuilding />,
-    whereTemplate: (_operand, { companyName }) => ({
-      company: { name: { _ilike: `%${companyName}%` } },
-    }),
-    searchQuery: SEARCH_COMPANY_QUERY,
-    searchTemplate: (searchInput: string) => ({
-      name: { _ilike: `%${searchInput}%` },
-    }),
-    searchResultMapper: (company: GraphqlQueryCompany) => ({
-      displayValue: company.name,
-      value: { companyName: company.name },
-    }),
-  },
+  fullnameFilter,
+  companyFilter,
   // {
   //   key: 'email',
   //   label: 'Email',