Refactor/filters (#498)

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixes

* wip

* wip

* wip

* Use company filters

* Refactored FilterDropdown into multiple components

* Refactored entity search select in dropdown

* Renamed states

* Fixed people filters

* Removed unused code

* Cleaned states

* Cleaned state

* Better naming

* fixed rebase

* Fix

* Fixed stories and mocked data and displayName bug

* Fixed cancel sort

* Fixed naming

* Fixed dropdown height

* Fix

* Fixed lint

front/src/pages/companies/CompanyTable.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useMemo, useState } from 'react';
+import { IconList } from '@tabler/icons-react';
+
+import {
+  CompaniesSelectedSortType,
+  defaultOrderBy,
+  useCompaniesQuery,
+} from '@/companies/services';
+import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers';
+import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState';
+import { turnFilterIntoWhereClause } from '@/filters-and-sorts/utils/turnFilterIntoWhereClause';
+import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue';
+import { EntityTable } from '@/ui/components/table/EntityTable';
+import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
+import { TableContext } from '@/ui/tables/states/TableContext';
+import { CompanyOrderByWithRelationInput } from '~/generated/graphql';
+
+import { useCompaniesColumns } from './companies-columns';
+import { companiesFilters } from './companies-filters';
+import { availableSorts } from './companies-sorts';
+
+export function CompanyTable() {
+  const [orderBy, setOrderBy] =
+    useState<CompanyOrderByWithRelationInput[]>(defaultOrderBy);
+
+  const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
+    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
+  }, []);
+
+  const filters = useRecoilScopedValue(
+    activeTableFiltersScopedState,
+    TableContext,
+  );
+
+  const whereFilters = useMemo(() => {
+    if (!filters.length) return undefined;
+
+    return { AND: filters.map(turnFilterIntoWhereClause) };
+  }, [filters]) as any;
+
+  const companiesColumns = useCompaniesColumns();
+
+  const { data } = useCompaniesQuery(orderBy, whereFilters);
+
+  const companies = data?.companies ?? [];
+
+  return (
+    <>
+      <HooksEntityTable
+        numberOfColumns={companiesColumns.length}
+        numberOfRows={companies.length}
+        availableTableFilters={companiesFilters}
+      />
+      <EntityTable
+        data={companies}
+        columns={companiesColumns}
+        viewName="All Companies"
+        viewIcon={<IconList size={16} />}
+        availableSorts={availableSorts}
+        onSortsUpdate={updateSorts}
+      />
+    </>
+  );
+}