From e8d77833a7aa09895db2c1ea48f769e046dc6d0a Mon Sep 17 00:00:00 2001 From: Emilien Chauvet Date: Tue, 11 Jul 2023 17:05:08 -0700 Subject: [PATCH] Move code to a lib, remove table dependancy (#606) * Move code to a lib, remove table dependancy * Abstract yable context from filters * Update missing hook * Remove wording of active filter, simplify naming for edited filters * lint --- .../FilterDropdownCompanySearchSelect.tsx | 4 +- .../services/__tests__/select.test.ts | 2 +- .../src/modules/companies/services/select.ts | 2 +- ...seActiveFilterCurrentlyEditedInDropdown.ts | 26 ---------- .../hooks/useRemoveActiveTableFilter.ts | 19 ------- .../hooks/useUpsertActiveTableFilter.ts | 33 ------------ .../states/activeTableFiltersScopedState.ts | 11 ---- .../availableTableFiltersScopedState.ts | 11 ---- ...lterDefinitionUsedInDropdownScopedState.ts | 11 ---- .../types/ActiveTableFilter.ts | 10 ---- .../types/TableFilterDefinition.ts | 9 ---- .../types/TableFilterDefinitionByEntity.ts | 5 -- .../types/TableFilterType.ts | 1 - .../{ => lib}/filters-and-sorts/helpers.ts | 0 .../hooks/useFilterCurrentlyEdited.ts | 21 ++++++++ .../hooks/useRemoveFilter.ts | 17 ++++++ .../hooks/useUpsertFilter.ts | 27 ++++++++++ .../interfaces/sorts/interface.ts | 0 .../states/availableFiltersScopedState.ts | 11 ++++ ...lterDefinitionUsedInDropdownScopedState.ts | 11 ++++ .../filterDropdownSearchInputScopedState.ts | 0 ...lterDropdownSelectedEntityIdScopedState.ts | 0 .../states/filtersScopedState.ts | 8 +++ ...ropdownOperandSelectUnfoldedScopedState.ts | 0 .../selectedOperandInDropdownScopedState.ts | 4 +- .../lib/filters-and-sorts/types/Filter.ts | 10 ++++ .../types/FilterDefinition.ts | 9 ++++ .../types/FilterDefinitionByEntity.ts | 5 ++ .../filters-and-sorts/types/FilterOperand.ts} | 2 +- .../types/FilterSearchResult.ts | 0 .../lib/filters-and-sorts/types/FilterType.ts | 1 + .../utils/getOperandLabel.ts | 6 +-- .../utils/getOperandsForFilterType.ts | 8 +-- .../utils/turnFilterIntoWhereClause.ts | 4 +- .../people/services/__tests__/select.test.ts | 2 +- front/src/modules/people/services/select.ts | 2 +- .../ui/components/table/EntityTable.tsx | 2 +- .../ui/components/table/HooksEntityTable.tsx | 4 +- .../table-header/FilterDropdownButton.tsx | 14 ++--- .../FilterDropdownDateSearchInput.tsx | 10 ++-- .../FilterDropdownEntitySearchInput.tsx | 8 +-- .../FilterDropdownEntitySearchSelect.tsx | 28 +++++----- .../FilterDropdownEntitySelect.tsx | 4 +- .../FilterDropdownFilterSelect.tsx | 14 ++--- .../FilterDropdownNumberSearchInput.tsx | 14 ++--- .../FilterDropdownOperandButton.tsx | 6 +-- .../FilterDropdownOperandSelect.tsx | 36 ++++++------- .../FilterDropdownTextSearchInput.tsx | 26 ++++------ .../table/table-header/SortAndFilterBar.tsx | 52 +++++++++---------- .../table/table-header/SortDropdownButton.tsx | 2 +- .../table/table-header/TableHeader.tsx | 2 +- .../hooks/useInitializeEntityTableFilters.ts | 8 +-- .../FilterDropdownUserSearchSelect.tsx | 4 +- front/src/pages/companies/CompanyTable.tsx | 11 ++-- .../src/pages/companies/companies-filters.tsx | 4 +- front/src/pages/companies/companies-sorts.tsx | 2 +- front/src/pages/people/PeopleTable.tsx | 11 ++-- front/src/pages/people/people-filters.tsx | 4 +- front/src/pages/people/people-sorts.tsx | 2 +- 59 files changed, 262 insertions(+), 298 deletions(-) delete mode 100644 front/src/modules/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown.ts delete mode 100644 front/src/modules/filters-and-sorts/hooks/useRemoveActiveTableFilter.ts delete mode 100644 front/src/modules/filters-and-sorts/hooks/useUpsertActiveTableFilter.ts delete mode 100644 front/src/modules/filters-and-sorts/states/activeTableFiltersScopedState.ts delete mode 100644 front/src/modules/filters-and-sorts/states/availableTableFiltersScopedState.ts delete mode 100644 front/src/modules/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState.ts delete mode 100644 front/src/modules/filters-and-sorts/types/ActiveTableFilter.ts delete mode 100644 front/src/modules/filters-and-sorts/types/TableFilterDefinition.ts delete mode 100644 front/src/modules/filters-and-sorts/types/TableFilterDefinitionByEntity.ts delete mode 100644 front/src/modules/filters-and-sorts/types/TableFilterType.ts rename front/src/modules/{ => lib}/filters-and-sorts/helpers.ts (100%) create mode 100644 front/src/modules/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited.ts create mode 100644 front/src/modules/lib/filters-and-sorts/hooks/useRemoveFilter.ts create mode 100644 front/src/modules/lib/filters-and-sorts/hooks/useUpsertFilter.ts rename front/src/modules/{ => lib}/filters-and-sorts/interfaces/sorts/interface.ts (100%) create mode 100644 front/src/modules/lib/filters-and-sorts/states/availableFiltersScopedState.ts create mode 100644 front/src/modules/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState.ts rename front/src/modules/{ => lib}/filters-and-sorts/states/filterDropdownSearchInputScopedState.ts (100%) rename front/src/modules/{ => lib}/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState.ts (100%) create mode 100644 front/src/modules/lib/filters-and-sorts/states/filtersScopedState.ts rename front/src/modules/{ => lib}/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts (100%) rename front/src/modules/{ => lib}/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts (65%) create mode 100644 front/src/modules/lib/filters-and-sorts/types/Filter.ts create mode 100644 front/src/modules/lib/filters-and-sorts/types/FilterDefinition.ts create mode 100644 front/src/modules/lib/filters-and-sorts/types/FilterDefinitionByEntity.ts rename front/src/modules/{filters-and-sorts/types/TableFilterOperand.ts => lib/filters-and-sorts/types/FilterOperand.ts} (74%) rename front/src/modules/{ => lib}/filters-and-sorts/types/FilterSearchResult.ts (100%) create mode 100644 front/src/modules/lib/filters-and-sorts/types/FilterType.ts rename front/src/modules/{ => lib}/filters-and-sorts/utils/getOperandLabel.ts (69%) rename front/src/modules/{ => lib}/filters-and-sorts/utils/getOperandsForFilterType.ts (59%) rename front/src/modules/{ => lib}/filters-and-sorts/utils/turnFilterIntoWhereClause.ts (94%) diff --git a/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx b/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx index f0b107ff5..4c1706c00 100644 --- a/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx +++ b/front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx @@ -1,5 +1,5 @@ -import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState'; -import { filterDropdownSelectedEntityIdScopedState } from '@/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState'; +import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState'; +import { filterDropdownSelectedEntityIdScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue'; import { useFilteredSearchEntityQuery } from '@/relation-picker/hooks/useFilteredSearchEntityQuery'; diff --git a/front/src/modules/companies/services/__tests__/select.test.ts b/front/src/modules/companies/services/__tests__/select.test.ts index ccdd080a6..130f9d92b 100644 --- a/front/src/modules/companies/services/__tests__/select.test.ts +++ b/front/src/modules/companies/services/__tests__/select.test.ts @@ -1,4 +1,4 @@ -import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers'; +import { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers'; import { CompaniesSelectedSortType } from '../select'; diff --git a/front/src/modules/companies/services/select.ts b/front/src/modules/companies/services/select.ts index 1077d3334..637eb1bd9 100644 --- a/front/src/modules/companies/services/select.ts +++ b/front/src/modules/companies/services/select.ts @@ -1,6 +1,6 @@ import { gql } from '@apollo/client'; -import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface'; +import { SelectedSortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface'; import { CompanyOrderByWithRelationInput as Companies_Order_By, CompanyWhereInput as Companies_Bool_Exp, diff --git a/front/src/modules/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown.ts b/front/src/modules/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown.ts deleted file mode 100644 index 4635a6727..000000000 --- a/front/src/modules/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { useMemo } from 'react'; - -import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; -import { TableContext } from '@/ui/tables/states/TableContext'; - -import { activeTableFiltersScopedState } from '../states/activeTableFiltersScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '../states/tableFilterDefinitionUsedInDropdownScopedState'; - -export function useActiveTableFilterCurrentlyEditedInDropdown() { - const [activeTableFilters] = useRecoilScopedState( - activeTableFiltersScopedState, - TableContext, - ); - - const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, - TableContext, - ); - - return useMemo(() => { - return activeTableFilters.find( - (activeTableFilter) => - activeTableFilter.field === tableFilterDefinitionUsedInDropdown?.field, - ); - }, [tableFilterDefinitionUsedInDropdown, activeTableFilters]); -} diff --git a/front/src/modules/filters-and-sorts/hooks/useRemoveActiveTableFilter.ts b/front/src/modules/filters-and-sorts/hooks/useRemoveActiveTableFilter.ts deleted file mode 100644 index 3ead28229..000000000 --- a/front/src/modules/filters-and-sorts/hooks/useRemoveActiveTableFilter.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; -import { TableContext } from '@/ui/tables/states/TableContext'; - -import { activeTableFiltersScopedState } from '../states/activeTableFiltersScopedState'; - -export function useRemoveActiveTableFilter() { - const [, setActiveTableFilters] = useRecoilScopedState( - activeTableFiltersScopedState, - TableContext, - ); - - return function removeActiveTableFilter(filterField: string) { - setActiveTableFilters((activeTableFilters) => { - return activeTableFilters.filter((activeTableFilter) => { - return activeTableFilter.field !== filterField; - }); - }); - }; -} diff --git a/front/src/modules/filters-and-sorts/hooks/useUpsertActiveTableFilter.ts b/front/src/modules/filters-and-sorts/hooks/useUpsertActiveTableFilter.ts deleted file mode 100644 index 4da1edba2..000000000 --- a/front/src/modules/filters-and-sorts/hooks/useUpsertActiveTableFilter.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { produce } from 'immer'; - -import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; -import { TableContext } from '@/ui/tables/states/TableContext'; - -import { activeTableFiltersScopedState } from '../states/activeTableFiltersScopedState'; -import { ActiveTableFilter } from '../types/ActiveTableFilter'; - -export function useUpsertActiveTableFilter() { - const [, setActiveTableFilters] = useRecoilScopedState( - activeTableFiltersScopedState, - TableContext, - ); - - return function upsertActiveTableFilter( - activeTableFilterToUpsert: ActiveTableFilter, - ) { - setActiveTableFilters((activeTableFilters) => { - return produce(activeTableFilters, (activeTableFiltersDraft) => { - const index = activeTableFiltersDraft.findIndex( - (activeTableFilter) => - activeTableFilter.field === activeTableFilterToUpsert.field, - ); - - if (index === -1) { - activeTableFiltersDraft.push(activeTableFilterToUpsert); - } else { - activeTableFiltersDraft[index] = activeTableFilterToUpsert; - } - }); - }); - }; -} diff --git a/front/src/modules/filters-and-sorts/states/activeTableFiltersScopedState.ts b/front/src/modules/filters-and-sorts/states/activeTableFiltersScopedState.ts deleted file mode 100644 index b9e30c194..000000000 --- a/front/src/modules/filters-and-sorts/states/activeTableFiltersScopedState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atomFamily } from 'recoil'; - -import { ActiveTableFilter } from '@/filters-and-sorts/types/ActiveTableFilter'; - -export const activeTableFiltersScopedState = atomFamily< - ActiveTableFilter[], - string ->({ - key: 'activeTableFiltersScopedState', - default: [], -}); diff --git a/front/src/modules/filters-and-sorts/states/availableTableFiltersScopedState.ts b/front/src/modules/filters-and-sorts/states/availableTableFiltersScopedState.ts deleted file mode 100644 index 7695abc33..000000000 --- a/front/src/modules/filters-and-sorts/states/availableTableFiltersScopedState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atomFamily } from 'recoil'; - -import { TableFilterDefinition } from '../types/TableFilterDefinition'; - -export const availableTableFiltersScopedState = atomFamily< - TableFilterDefinition[], - string ->({ - key: 'availableTableFiltersScopedState', - default: [], -}); diff --git a/front/src/modules/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState.ts b/front/src/modules/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState.ts deleted file mode 100644 index e43b06d0e..000000000 --- a/front/src/modules/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { atomFamily } from 'recoil'; - -import { TableFilterDefinition } from '../types/TableFilterDefinition'; - -export const tableFilterDefinitionUsedInDropdownScopedState = atomFamily< - TableFilterDefinition | null, - string ->({ - key: 'tableFilterDefinitionUsedInDropdownScopedState', - default: null, -}); diff --git a/front/src/modules/filters-and-sorts/types/ActiveTableFilter.ts b/front/src/modules/filters-and-sorts/types/ActiveTableFilter.ts deleted file mode 100644 index 398dfef47..000000000 --- a/front/src/modules/filters-and-sorts/types/ActiveTableFilter.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { TableFilterOperand } from './TableFilterOperand'; -import { TableFilterType } from './TableFilterType'; - -export type ActiveTableFilter = { - field: string; - type: TableFilterType; - value: string; - displayValue: string; - operand: TableFilterOperand; -}; diff --git a/front/src/modules/filters-and-sorts/types/TableFilterDefinition.ts b/front/src/modules/filters-and-sorts/types/TableFilterDefinition.ts deleted file mode 100644 index 9598abc32..000000000 --- a/front/src/modules/filters-and-sorts/types/TableFilterDefinition.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { TableFilterType } from './TableFilterType'; - -export type TableFilterDefinition = { - field: string; - label: string; - icon: JSX.Element; - type: TableFilterType; - entitySelectComponent?: JSX.Element; -}; diff --git a/front/src/modules/filters-and-sorts/types/TableFilterDefinitionByEntity.ts b/front/src/modules/filters-and-sorts/types/TableFilterDefinitionByEntity.ts deleted file mode 100644 index dfa2afaf4..000000000 --- a/front/src/modules/filters-and-sorts/types/TableFilterDefinitionByEntity.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { TableFilterDefinition } from './TableFilterDefinition'; - -export type TableFilterDefinitionByEntity = TableFilterDefinition & { - field: keyof T; -}; diff --git a/front/src/modules/filters-and-sorts/types/TableFilterType.ts b/front/src/modules/filters-and-sorts/types/TableFilterType.ts deleted file mode 100644 index 8259ed848..000000000 --- a/front/src/modules/filters-and-sorts/types/TableFilterType.ts +++ /dev/null @@ -1 +0,0 @@ -export type TableFilterType = 'text' | 'date' | 'entity' | 'number'; diff --git a/front/src/modules/filters-and-sorts/helpers.ts b/front/src/modules/lib/filters-and-sorts/helpers.ts similarity index 100% rename from front/src/modules/filters-and-sorts/helpers.ts rename to front/src/modules/lib/filters-and-sorts/helpers.ts diff --git a/front/src/modules/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited.ts b/front/src/modules/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited.ts new file mode 100644 index 000000000..b1a893f5b --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited.ts @@ -0,0 +1,21 @@ +import { Context, useMemo } from 'react'; + +import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; + +import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState'; +import { filtersScopedState } from '../states/filtersScopedState'; + +export function useFilterCurrentlyEdited(context: Context) { + const [filters] = useRecoilScopedState(filtersScopedState, context); + + const [filterDefinitionUsedInDropdown] = useRecoilScopedState( + filterDefinitionUsedInDropdownScopedState, + context, + ); + + return useMemo(() => { + return filters.find( + (filter) => filter.field === filterDefinitionUsedInDropdown?.field, + ); + }, [filterDefinitionUsedInDropdown, filters]); +} diff --git a/front/src/modules/lib/filters-and-sorts/hooks/useRemoveFilter.ts b/front/src/modules/lib/filters-and-sorts/hooks/useRemoveFilter.ts new file mode 100644 index 000000000..15f525582 --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/hooks/useRemoveFilter.ts @@ -0,0 +1,17 @@ +import { Context } from 'react'; + +import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; + +import { filtersScopedState } from '../states/filtersScopedState'; + +export function useRemoveFilter(context: Context) { + const [, setFilters] = useRecoilScopedState(filtersScopedState, context); + + return function removeFilter(filterField: string) { + setFilters((filters) => { + return filters.filter((filter) => { + return filter.field !== filterField; + }); + }); + }; +} diff --git a/front/src/modules/lib/filters-and-sorts/hooks/useUpsertFilter.ts b/front/src/modules/lib/filters-and-sorts/hooks/useUpsertFilter.ts new file mode 100644 index 000000000..921d24f54 --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/hooks/useUpsertFilter.ts @@ -0,0 +1,27 @@ +import { Context } from 'react'; +import { produce } from 'immer'; + +import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; + +import { filtersScopedState } from '../states/filtersScopedState'; +import { Filter } from '../types/Filter'; + +export function useUpsertFilter(context: Context) { + const [, setFilters] = useRecoilScopedState(filtersScopedState, context); + + return function upsertFilter(filterToUpsert: Filter) { + setFilters((filters) => { + return produce(filters, (filtersDraft) => { + const index = filtersDraft.findIndex( + (filter) => filter.field === filterToUpsert.field, + ); + + if (index === -1) { + filtersDraft.push(filterToUpsert); + } else { + filtersDraft[index] = filterToUpsert; + } + }); + }); + }; +} diff --git a/front/src/modules/filters-and-sorts/interfaces/sorts/interface.ts b/front/src/modules/lib/filters-and-sorts/interfaces/sorts/interface.ts similarity index 100% rename from front/src/modules/filters-and-sorts/interfaces/sorts/interface.ts rename to front/src/modules/lib/filters-and-sorts/interfaces/sorts/interface.ts diff --git a/front/src/modules/lib/filters-and-sorts/states/availableFiltersScopedState.ts b/front/src/modules/lib/filters-and-sorts/states/availableFiltersScopedState.ts new file mode 100644 index 000000000..76e23e5b3 --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/states/availableFiltersScopedState.ts @@ -0,0 +1,11 @@ +import { atomFamily } from 'recoil'; + +import { FilterDefinition } from '../types/FilterDefinition'; + +export const availableFiltersScopedState = atomFamily< + FilterDefinition[], + string +>({ + key: 'availableFiltersScopedState', + default: [], +}); diff --git a/front/src/modules/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState.ts b/front/src/modules/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState.ts new file mode 100644 index 000000000..3b172a8c8 --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState.ts @@ -0,0 +1,11 @@ +import { atomFamily } from 'recoil'; + +import { FilterDefinition } from '../types/FilterDefinition'; + +export const filterDefinitionUsedInDropdownScopedState = atomFamily< + FilterDefinition | null, + string +>({ + key: 'filterDefinitionUsedInDropdownScopedState', + default: null, +}); diff --git a/front/src/modules/filters-and-sorts/states/filterDropdownSearchInputScopedState.ts b/front/src/modules/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState.ts similarity index 100% rename from front/src/modules/filters-and-sorts/states/filterDropdownSearchInputScopedState.ts rename to front/src/modules/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState.ts diff --git a/front/src/modules/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState.ts b/front/src/modules/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState.ts similarity index 100% rename from front/src/modules/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState.ts rename to front/src/modules/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState.ts diff --git a/front/src/modules/lib/filters-and-sorts/states/filtersScopedState.ts b/front/src/modules/lib/filters-and-sorts/states/filtersScopedState.ts new file mode 100644 index 000000000..6ba34a39a --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/states/filtersScopedState.ts @@ -0,0 +1,8 @@ +import { atomFamily } from 'recoil'; + +import { Filter } from '@/lib/filters-and-sorts/types/Filter'; + +export const filtersScopedState = atomFamily({ + key: 'filtersScopedState', + default: [], +}); diff --git a/front/src/modules/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts b/front/src/modules/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts similarity index 100% rename from front/src/modules/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts rename to front/src/modules/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts diff --git a/front/src/modules/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts b/front/src/modules/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts similarity index 65% rename from front/src/modules/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts rename to front/src/modules/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts index a7d3f4e12..5989719fd 100644 --- a/front/src/modules/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts +++ b/front/src/modules/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts @@ -1,9 +1,9 @@ import { atomFamily } from 'recoil'; -import { TableFilterOperand } from '../types/TableFilterOperand'; +import { FilterOperand } from '../types/FilterOperand'; export const selectedOperandInDropdownScopedState = atomFamily< - TableFilterOperand | null, + FilterOperand | null, string >({ key: 'selectedOperandInDropdownScopedState', diff --git a/front/src/modules/lib/filters-and-sorts/types/Filter.ts b/front/src/modules/lib/filters-and-sorts/types/Filter.ts new file mode 100644 index 000000000..125d3cd18 --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/types/Filter.ts @@ -0,0 +1,10 @@ +import { FilterOperand } from './FilterOperand'; +import { FilterType } from './FilterType'; + +export type Filter = { + field: string; + type: FilterType; + value: string; + displayValue: string; + operand: FilterOperand; +}; diff --git a/front/src/modules/lib/filters-and-sorts/types/FilterDefinition.ts b/front/src/modules/lib/filters-and-sorts/types/FilterDefinition.ts new file mode 100644 index 000000000..089fba8e8 --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/types/FilterDefinition.ts @@ -0,0 +1,9 @@ +import { FilterType } from './FilterType'; + +export type FilterDefinition = { + field: string; + label: string; + icon: JSX.Element; + type: FilterType; + entitySelectComponent?: JSX.Element; +}; diff --git a/front/src/modules/lib/filters-and-sorts/types/FilterDefinitionByEntity.ts b/front/src/modules/lib/filters-and-sorts/types/FilterDefinitionByEntity.ts new file mode 100644 index 000000000..f7af841bb --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/types/FilterDefinitionByEntity.ts @@ -0,0 +1,5 @@ +import { FilterDefinition } from './FilterDefinition'; + +export type FilterDefinitionByEntity = FilterDefinition & { + field: keyof T; +}; diff --git a/front/src/modules/filters-and-sorts/types/TableFilterOperand.ts b/front/src/modules/lib/filters-and-sorts/types/FilterOperand.ts similarity index 74% rename from front/src/modules/filters-and-sorts/types/TableFilterOperand.ts rename to front/src/modules/lib/filters-and-sorts/types/FilterOperand.ts index 47a5d4515..fd6c9ed00 100644 --- a/front/src/modules/filters-and-sorts/types/TableFilterOperand.ts +++ b/front/src/modules/lib/filters-and-sorts/types/FilterOperand.ts @@ -1,4 +1,4 @@ -export type TableFilterOperand = +export type FilterOperand = | 'contains' | 'does-not-contain' | 'greater-than' diff --git a/front/src/modules/filters-and-sorts/types/FilterSearchResult.ts b/front/src/modules/lib/filters-and-sorts/types/FilterSearchResult.ts similarity index 100% rename from front/src/modules/filters-and-sorts/types/FilterSearchResult.ts rename to front/src/modules/lib/filters-and-sorts/types/FilterSearchResult.ts diff --git a/front/src/modules/lib/filters-and-sorts/types/FilterType.ts b/front/src/modules/lib/filters-and-sorts/types/FilterType.ts new file mode 100644 index 000000000..d298fbf79 --- /dev/null +++ b/front/src/modules/lib/filters-and-sorts/types/FilterType.ts @@ -0,0 +1 @@ +export type FilterType = 'text' | 'date' | 'entity' | 'number'; diff --git a/front/src/modules/filters-and-sorts/utils/getOperandLabel.ts b/front/src/modules/lib/filters-and-sorts/utils/getOperandLabel.ts similarity index 69% rename from front/src/modules/filters-and-sorts/utils/getOperandLabel.ts rename to front/src/modules/lib/filters-and-sorts/utils/getOperandLabel.ts index 371205a43..205a9ff0e 100644 --- a/front/src/modules/filters-and-sorts/utils/getOperandLabel.ts +++ b/front/src/modules/lib/filters-and-sorts/utils/getOperandLabel.ts @@ -1,8 +1,6 @@ -import { TableFilterOperand } from '../types/TableFilterOperand'; +import { FilterOperand } from '../types/FilterOperand'; -export function getOperandLabel( - operand: TableFilterOperand | null | undefined, -) { +export function getOperandLabel(operand: FilterOperand | null | undefined) { switch (operand) { case 'contains': return 'Contains'; diff --git a/front/src/modules/filters-and-sorts/utils/getOperandsForFilterType.ts b/front/src/modules/lib/filters-and-sorts/utils/getOperandsForFilterType.ts similarity index 59% rename from front/src/modules/filters-and-sorts/utils/getOperandsForFilterType.ts rename to front/src/modules/lib/filters-and-sorts/utils/getOperandsForFilterType.ts index 59a08b3e5..2f87ab937 100644 --- a/front/src/modules/filters-and-sorts/utils/getOperandsForFilterType.ts +++ b/front/src/modules/lib/filters-and-sorts/utils/getOperandsForFilterType.ts @@ -1,9 +1,9 @@ -import { TableFilterOperand } from '../types/TableFilterOperand'; -import { TableFilterType } from '../types/TableFilterType'; +import { FilterOperand } from '../types/FilterOperand'; +import { FilterType } from '../types/FilterType'; export function getOperandsForFilterType( - filterType: TableFilterType | null | undefined, -): TableFilterOperand[] { + filterType: FilterType | null | undefined, +): FilterOperand[] { switch (filterType) { case 'text': return ['contains', 'does-not-contain']; diff --git a/front/src/modules/filters-and-sorts/utils/turnFilterIntoWhereClause.ts b/front/src/modules/lib/filters-and-sorts/utils/turnFilterIntoWhereClause.ts similarity index 94% rename from front/src/modules/filters-and-sorts/utils/turnFilterIntoWhereClause.ts rename to front/src/modules/lib/filters-and-sorts/utils/turnFilterIntoWhereClause.ts index 3ce33953a..99a6d7f91 100644 --- a/front/src/modules/filters-and-sorts/utils/turnFilterIntoWhereClause.ts +++ b/front/src/modules/lib/filters-and-sorts/utils/turnFilterIntoWhereClause.ts @@ -1,8 +1,8 @@ import { QueryMode } from '~/generated/graphql'; -import { ActiveTableFilter } from '../types/ActiveTableFilter'; +import { Filter } from '../types/Filter'; -export function turnFilterIntoWhereClause(filter: ActiveTableFilter) { +export function turnFilterIntoWhereClause(filter: Filter) { switch (filter.type) { case 'text': switch (filter.operand) { diff --git a/front/src/modules/people/services/__tests__/select.test.ts b/front/src/modules/people/services/__tests__/select.test.ts index 383782273..eea9f2d63 100644 --- a/front/src/modules/people/services/__tests__/select.test.ts +++ b/front/src/modules/people/services/__tests__/select.test.ts @@ -1,4 +1,4 @@ -import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers'; +import { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers'; import { PeopleSelectedSortType } from '../select'; diff --git a/front/src/modules/people/services/select.ts b/front/src/modules/people/services/select.ts index 1a732d1fb..dcdac5d67 100644 --- a/front/src/modules/people/services/select.ts +++ b/front/src/modules/people/services/select.ts @@ -1,6 +1,6 @@ import { gql } from '@apollo/client'; -import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface'; +import { SelectedSortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface'; import { PersonOrderByWithRelationInput as People_Order_By, PersonWhereInput as People_Bool_Exp, diff --git a/front/src/modules/ui/components/table/EntityTable.tsx b/front/src/modules/ui/components/table/EntityTable.tsx index 6c87e0602..f29deb492 100644 --- a/front/src/modules/ui/components/table/EntityTable.tsx +++ b/front/src/modules/ui/components/table/EntityTable.tsx @@ -11,7 +11,7 @@ import { useRecoilState } from 'recoil'; import { SelectedSortType, SortType, -} from '@/filters-and-sorts/interfaces/sorts/interface'; +} from '@/lib/filters-and-sorts/interfaces/sorts/interface'; import { RecoilScope } from '@/recoil-scope/components/RecoilScope'; import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef'; import { useLeaveTableFocus } from '@/ui/tables/hooks/useLeaveTableFocus'; diff --git a/front/src/modules/ui/components/table/HooksEntityTable.tsx b/front/src/modules/ui/components/table/HooksEntityTable.tsx index 8d46e5867..198122331 100644 --- a/front/src/modules/ui/components/table/HooksEntityTable.tsx +++ b/front/src/modules/ui/components/table/HooksEntityTable.tsx @@ -1,4 +1,4 @@ -import { TableFilterDefinition } from '@/filters-and-sorts/types/TableFilterDefinition'; +import { FilterDefinition } from '@/lib/filters-and-sorts/types/FilterDefinition'; import { useInitializeEntityTable } from '@/ui/tables/hooks/useInitializeEntityTable'; import { useInitializeEntityTableFilters } from '@/ui/tables/hooks/useInitializeEntityTableFilters'; import { useMapKeyboardToSoftFocus } from '@/ui/tables/hooks/useMapKeyboardToSoftFocus'; @@ -10,7 +10,7 @@ export function HooksEntityTable({ }: { numberOfColumns: number; numberOfRows: number; - availableTableFilters: TableFilterDefinition[]; + availableTableFilters: FilterDefinition[]; }) { useMapKeyboardToSoftFocus(); diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx index 8514c42c5..c212f375b 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx @@ -1,14 +1,14 @@ import { useCallback, useState } from 'react'; import { Key } from 'ts-key-enum'; -import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState'; -import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState'; -import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys'; import { useSetHotkeysScope } from '@/hotkeys/hooks/useSetHotkeysScope'; import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; +import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState'; +import { filtersScopedState } from '@/lib/filters-and-sorts/states/filtersScopedState'; +import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '@/ui/tables/states/TableContext'; @@ -37,7 +37,7 @@ export function FilterDropdownButton() { tableFilterDefinitionUsedInDropdown, setTableFilterDefinitionUsedInDropdown, ] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); @@ -47,7 +47,7 @@ export function FilterDropdownButton() { ); const [activeTableFilters] = useRecoilScopedState( - activeTableFiltersScopedState, + filtersScopedState, TableContext, ); diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownDateSearchInput.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownDateSearchInput.tsx index ef8d80d0b..c8b3743aa 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownDateSearchInput.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownDateSearchInput.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; -import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; +import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '@/ui/tables/states/TableContext'; @@ -10,7 +10,7 @@ import DatePicker from '../../form/DatePicker'; export function FilterDropdownDateSearchInput() { const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); @@ -19,7 +19,7 @@ export function FilterDropdownDateSearchInput() { TableContext, ); - const upsertActiveTableFilter = useUpsertActiveTableFilter(); + const upsertActiveTableFilter = useUpsertFilter(TableContext); function handleChange(date: Date) { if (!tableFilterDefinitionUsedInDropdown || !selectedOperandInDropdown) diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchInput.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchInput.tsx index 56d3f2d8f..3e24a4ac5 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchInput.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchInput.tsx @@ -1,14 +1,14 @@ import { ChangeEvent } from 'react'; -import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; +import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '@/ui/tables/states/TableContext'; export function FilterDropdownEntitySearchInput() { const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchSelect.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchSelect.tsx index d72152ba0..7056fa61e 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchSelect.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchSelect.tsx @@ -1,11 +1,11 @@ import { useEffect } from 'react'; -import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown'; -import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter'; -import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter'; -import { filterDropdownSelectedEntityIdScopedState } from '@/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; +import { useFilterCurrentlyEdited } from '@/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited'; +import { useRemoveFilter } from '@/lib/filters-and-sorts/hooks/useRemoveFilter'; +import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; +import { filterDropdownSelectedEntityIdScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { EntitiesForMultipleEntitySelect } from '@/relation-picker/components/MultipleEntitySelect'; import { SingleEntitySelectBase } from '@/relation-picker/components/SingleEntitySelectBase'; @@ -29,15 +29,14 @@ export function FilterDropdownEntitySearchSelect({ ); const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); - const upsertActiveTableFilter = useUpsertActiveTableFilter(); - const removeActiveTableFilter = useRemoveActiveTableFilter(); + const upsertActiveTableFilter = useUpsertFilter(TableContext); + const removeActiveTableFilter = useRemoveFilter(TableContext); - const activeFilterCurrentlyEditedInDropdown = - useActiveTableFilterCurrentlyEditedInDropdown(); + const filterCurrentlyEdited = useFilterCurrentlyEdited(TableContext); function handleUserSelected(selectedEntity: EntityForSelect) { if (!tableFilterDefinitionUsedInDropdown || !selectedOperandInDropdown) { @@ -64,13 +63,10 @@ export function FilterDropdownEntitySearchSelect({ } useEffect(() => { - if (!activeFilterCurrentlyEditedInDropdown) { + if (!filterCurrentlyEdited) { setFilterDropdownSelectedEntityId(null); } - }, [ - activeFilterCurrentlyEditedInDropdown, - setFilterDropdownSelectedEntityId, - ]); + }, [filterCurrentlyEdited, setFilterDropdownSelectedEntityId]); return ( <> diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySelect.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySelect.tsx index fa496024d..935ebdc11 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySelect.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownEntitySelect.tsx @@ -1,4 +1,4 @@ -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; import { RecoilScope } from '@/recoil-scope/components/RecoilScope'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '@/ui/tables/states/TableContext'; @@ -7,7 +7,7 @@ import { DropdownMenuSeparator } from '../../menu/DropdownMenuSeparator'; export function FilterDropdownEntitySelect() { const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownFilterSelect.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownFilterSelect.tsx index 8a7ecd60b..eda80438c 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownFilterSelect.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownFilterSelect.tsx @@ -1,10 +1,10 @@ -import { availableTableFiltersScopedState } from '@/filters-and-sorts/states/availableTableFiltersScopedState'; -import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; -import { getOperandsForFilterType } from '@/filters-and-sorts/utils/getOperandsForFilterType'; import { useSetHotkeysScope } from '@/hotkeys/hooks/useSetHotkeysScope'; import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope'; +import { availableFiltersScopedState } from '@/lib/filters-and-sorts/states/availableFiltersScopedState'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; +import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; +import { getOperandsForFilterType } from '@/lib/filters-and-sorts/utils/getOperandsForFilterType'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue'; import { TableContext } from '@/ui/tables/states/TableContext'; @@ -16,7 +16,7 @@ import DropdownButton from './DropdownButton'; export function FilterDropdownFilterSelect() { const [, setTableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); @@ -31,7 +31,7 @@ export function FilterDropdownFilterSelect() { ); const availableTableFilters = useRecoilScopedValue( - availableTableFiltersScopedState, + availableFiltersScopedState, TableContext, ); diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownNumberSearchInput.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownNumberSearchInput.tsx index 26fce04eb..caa3850c1 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownNumberSearchInput.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownNumberSearchInput.tsx @@ -1,15 +1,15 @@ import { ChangeEvent } from 'react'; -import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter'; -import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; +import { useRemoveFilter } from '@/lib/filters-and-sorts/hooks/useRemoveFilter'; +import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '@/ui/tables/states/TableContext'; export function FilterDropdownNumberSearchInput() { const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); @@ -18,8 +18,8 @@ export function FilterDropdownNumberSearchInput() { TableContext, ); - const upsertActiveTableFilter = useUpsertActiveTableFilter(); - const removeActiveTableFilter = useRemoveActiveTableFilter(); + const upsertActiveTableFilter = useUpsertFilter(TableContext); + const removeActiveTableFilter = useRemoveFilter(TableContext); return ( tableFilterDefinitionUsedInDropdown && diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownOperandButton.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownOperandButton.tsx index 26452275a..8c96441e0 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownOperandButton.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownOperandButton.tsx @@ -1,6 +1,6 @@ -import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel'; +import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; +import { getOperandLabel } from '@/lib/filters-and-sorts/utils/getOperandLabel'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '@/ui/tables/states/TableContext'; diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownOperandSelect.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownOperandSelect.tsx index 95fd9622e..a45aecf81 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownOperandSelect.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownOperandSelect.tsx @@ -1,11 +1,11 @@ -import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown'; -import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter'; -import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; -import { TableFilterOperand } from '@/filters-and-sorts/types/TableFilterOperand'; -import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel'; -import { getOperandsForFilterType } from '@/filters-and-sorts/utils/getOperandsForFilterType'; +import { useFilterCurrentlyEdited } from '@/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited'; +import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; +import { isFilterDropdownOperandSelectUnfoldedScopedState } from '@/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; +import { FilterOperand } from '@/lib/filters-and-sorts/types/FilterOperand'; +import { getOperandLabel } from '@/lib/filters-and-sorts/utils/getOperandLabel'; +import { getOperandsForFilterType } from '@/lib/filters-and-sorts/utils/getOperandsForFilterType'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '@/ui/tables/states/TableContext'; @@ -15,7 +15,7 @@ import DropdownButton from './DropdownButton'; export function FilterDropdownOperandSelect() { const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); @@ -34,25 +34,25 @@ export function FilterDropdownOperandSelect() { TableContext, ); - const activeTableFilterCurrentlyEditedInDropdown = - useActiveTableFilterCurrentlyEditedInDropdown(); + const activeTableFilterCurrentlyEdited = + useFilterCurrentlyEdited(TableContext); - const upsertActiveTableFilter = useUpsertActiveTableFilter(); + const upsertActiveTableFilter = useUpsertFilter(TableContext); - function handleOperangeChange(newOperand: TableFilterOperand) { + function handleOperangeChange(newOperand: FilterOperand) { setSelectedOperandInDropdown(newOperand); setIsOperandSelectionUnfolded(false); if ( tableFilterDefinitionUsedInDropdown && - activeTableFilterCurrentlyEditedInDropdown + activeTableFilterCurrentlyEdited ) { upsertActiveTableFilter({ - field: activeTableFilterCurrentlyEditedInDropdown.field, - displayValue: activeTableFilterCurrentlyEditedInDropdown.displayValue, + field: activeTableFilterCurrentlyEdited.field, + displayValue: activeTableFilterCurrentlyEdited.displayValue, operand: newOperand, - type: activeTableFilterCurrentlyEditedInDropdown.type, - value: activeTableFilterCurrentlyEditedInDropdown.value, + type: activeTableFilterCurrentlyEdited.type, + value: activeTableFilterCurrentlyEdited.value, }); } } diff --git a/front/src/modules/ui/components/table/table-header/FilterDropdownTextSearchInput.tsx b/front/src/modules/ui/components/table/table-header/FilterDropdownTextSearchInput.tsx index 1bfe056d8..b0b7d31f9 100644 --- a/front/src/modules/ui/components/table/table-header/FilterDropdownTextSearchInput.tsx +++ b/front/src/modules/ui/components/table/table-header/FilterDropdownTextSearchInput.tsx @@ -1,17 +1,17 @@ import { ChangeEvent } from 'react'; -import { useActiveTableFilterCurrentlyEditedInDropdown } from '@/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown'; -import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter'; -import { useUpsertActiveTableFilter } from '@/filters-and-sorts/hooks/useUpsertActiveTableFilter'; -import { filterDropdownSearchInputScopedState } from '@/filters-and-sorts/states/filterDropdownSearchInputScopedState'; -import { selectedOperandInDropdownScopedState } from '@/filters-and-sorts/states/selectedOperandInDropdownScopedState'; -import { tableFilterDefinitionUsedInDropdownScopedState } from '@/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState'; +import { useFilterCurrentlyEdited } from '@/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited'; +import { useRemoveFilter } from '@/lib/filters-and-sorts/hooks/useRemoveFilter'; +import { useUpsertFilter } from '@/lib/filters-and-sorts/hooks/useUpsertFilter'; +import { filterDefinitionUsedInDropdownScopedState } from '@/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState'; +import { filterDropdownSearchInputScopedState } from '@/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState'; +import { selectedOperandInDropdownScopedState } from '@/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { TableContext } from '@/ui/tables/states/TableContext'; export function FilterDropdownTextSearchInput() { const [tableFilterDefinitionUsedInDropdown] = useRecoilScopedState( - tableFilterDefinitionUsedInDropdownScopedState, + filterDefinitionUsedInDropdownScopedState, TableContext, ); @@ -23,11 +23,10 @@ export function FilterDropdownTextSearchInput() { const [filterDropdownSearchInput, setFilterDropdownSearchInput] = useRecoilScopedState(filterDropdownSearchInputScopedState, TableContext); - const upsertActiveTableFilter = useUpsertActiveTableFilter(); - const removeActiveTableFilter = useRemoveActiveTableFilter(); + const upsertActiveTableFilter = useUpsertFilter(TableContext); + const removeActiveTableFilter = useRemoveFilter(TableContext); - const activeFilterCurrentlyEditedInDropdown = - useActiveTableFilterCurrentlyEditedInDropdown(); + const filterCurrentlyEdited = useFilterCurrentlyEdited(TableContext); return ( tableFilterDefinitionUsedInDropdown && @@ -35,10 +34,7 @@ export function FilterDropdownTextSearchInput() { ) => { setFilterDropdownSearchInput(event.target.value); diff --git a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx index c5da7a658..77dacc4ef 100644 --- a/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx +++ b/front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx @@ -1,11 +1,11 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useRemoveActiveTableFilter } from '@/filters-and-sorts/hooks/useRemoveActiveTableFilter'; -import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface'; -import { activeTableFiltersScopedState } from '@/filters-and-sorts/states/activeTableFiltersScopedState'; -import { availableTableFiltersScopedState } from '@/filters-and-sorts/states/availableTableFiltersScopedState'; -import { getOperandLabel } from '@/filters-and-sorts/utils/getOperandLabel'; +import { useRemoveFilter } from '@/lib/filters-and-sorts/hooks/useRemoveFilter'; +import { SelectedSortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface'; +import { availableFiltersScopedState } from '@/lib/filters-and-sorts/states/availableFiltersScopedState'; +import { filtersScopedState } from '@/lib/filters-and-sorts/states/filtersScopedState'; +import { getOperandLabel } from '@/lib/filters-and-sorts/utils/getOperandLabel'; import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState'; import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icons/index'; import { TableContext } from '@/ui/tables/states/TableContext'; @@ -66,39 +66,35 @@ function SortAndFilterBar({ }: OwnProps) { const theme = useTheme(); - const [activeTableFilters, setActiveTableFilters] = useRecoilScopedState( - activeTableFiltersScopedState, + const [filters, setFilters] = useRecoilScopedState( + filtersScopedState, TableContext, ); - const [availableTableFilters] = useRecoilScopedState( - availableTableFiltersScopedState, + const [availableFilters] = useRecoilScopedState( + availableFiltersScopedState, TableContext, ); - const activeTableFiltersWithDefinition = activeTableFilters.map( - (activeTableFilter) => { - const tableFilterDefinition = availableTableFilters.find( - (availableTableFilter) => { - return availableTableFilter.field === activeTableFilter.field; - }, - ); + const filtersWithDefinition = filters.map((filter) => { + const tableFilterDefinition = availableFilters.find((availableFilter) => { + return availableFilter.field === filter.field; + }); - return { - ...activeTableFilter, - ...tableFilterDefinition, - }; - }, - ); + return { + ...filter, + ...tableFilterDefinition, + }; + }); - const removeActiveTableFilter = useRemoveActiveTableFilter(); + const removeFilter = useRemoveFilter(TableContext); function handleCancelClick() { - setActiveTableFilters([]); + setFilters([]); onCancelClick(); } - if (!activeTableFiltersWithDefinition.length && !sorts.length) { + if (!filtersWithDefinition.length && !sorts.length) { return null; } @@ -122,7 +118,7 @@ function SortAndFilterBar({ /> ); })} - {activeTableFiltersWithDefinition.map((filter) => { + {filtersWithDefinition.map((filter) => { return ( ({ id={filter.field} icon={filter.icon} onRemove={() => { - removeActiveTableFilter(filter.field); + removeFilter(filter.field); }} /> ); })} - {activeTableFilters.length + sorts.length > 0 && ( + {filters.length + sorts.length > 0 && ( { if (!filters.length) return undefined; diff --git a/front/src/pages/companies/companies-filters.tsx b/front/src/pages/companies/companies-filters.tsx index 495c9bd57..740b6e00d 100644 --- a/front/src/pages/companies/companies-filters.tsx +++ b/front/src/pages/companies/companies-filters.tsx @@ -1,4 +1,4 @@ -import { TableFilterDefinitionByEntity } from '@/filters-and-sorts/types/TableFilterDefinitionByEntity'; +import { FilterDefinitionByEntity } from '@/lib/filters-and-sorts/types/FilterDefinitionByEntity'; import { IconBuildingSkyscraper, IconCalendarEvent, @@ -11,7 +11,7 @@ import { icon } from '@/ui/themes/icon'; import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect'; import { Company } from '~/generated/graphql'; -export const companiesFilters: TableFilterDefinitionByEntity[] = [ +export const companiesFilters: FilterDefinitionByEntity[] = [ { field: 'name', label: 'Name', diff --git a/front/src/pages/companies/companies-sorts.tsx b/front/src/pages/companies/companies-sorts.tsx index 80187dd6f..27ad5c25f 100644 --- a/front/src/pages/companies/companies-sorts.tsx +++ b/front/src/pages/companies/companies-sorts.tsx @@ -1,4 +1,4 @@ -import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface'; +import { SortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface'; import { IconBuildingSkyscraper, IconCalendarEvent, diff --git a/front/src/pages/people/PeopleTable.tsx b/front/src/pages/people/PeopleTable.tsx index ac4c15aa7..43c0f3d5c 100644 --- a/front/src/pages/people/PeopleTable.tsx +++ b/front/src/pages/people/PeopleTable.tsx @@ -2,9 +2,9 @@ import { useCallback, useMemo, useState } from 'react'; import { IconList } from '@tabler/icons-react'; import { defaultOrderBy } 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 { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers'; +import { filtersScopedState } from '@/lib/filters-and-sorts/states/filtersScopedState'; +import { turnFilterIntoWhereClause } from '@/lib/filters-and-sorts/utils/turnFilterIntoWhereClause'; import { PeopleSelectedSortType, usePeopleQuery } from '@/people/services'; import { useRecoilScopedValue } from '@/recoil-scope/hooks/useRecoilScopedValue'; import { EntityTable } from '@/ui/components/table/EntityTable'; @@ -24,10 +24,7 @@ export function PeopleTable() { setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy); }, []); - const filters = useRecoilScopedValue( - activeTableFiltersScopedState, - TableContext, - ); + const filters = useRecoilScopedValue(filtersScopedState, TableContext); const whereFilters = useMemo(() => { return { AND: filters.map(turnFilterIntoWhereClause) }; diff --git a/front/src/pages/people/people-filters.tsx b/front/src/pages/people/people-filters.tsx index 997c74a3a..cb1404073 100644 --- a/front/src/pages/people/people-filters.tsx +++ b/front/src/pages/people/people-filters.tsx @@ -1,5 +1,5 @@ import { FilterDropdownCompanySearchSelect } from '@/companies/components/FilterDropdownCompanySearchSelect'; -import { TableFilterDefinitionByEntity } from '@/filters-and-sorts/types/TableFilterDefinitionByEntity'; +import { FilterDefinitionByEntity } from '@/lib/filters-and-sorts/types/FilterDefinitionByEntity'; import { IconBuildingSkyscraper, IconCalendarEvent, @@ -11,7 +11,7 @@ import { import { icon } from '@/ui/themes/icon'; import { Person } from '~/generated/graphql'; -export const peopleFilters: TableFilterDefinitionByEntity[] = [ +export const peopleFilters: FilterDefinitionByEntity[] = [ { field: 'firstName', label: 'First name', diff --git a/front/src/pages/people/people-sorts.tsx b/front/src/pages/people/people-sorts.tsx index 3c035c221..159030356 100644 --- a/front/src/pages/people/people-sorts.tsx +++ b/front/src/pages/people/people-sorts.tsx @@ -1,4 +1,4 @@ -import { SortType } from '@/filters-and-sorts/interfaces/sorts/interface'; +import { SortType } from '@/lib/filters-and-sorts/interfaces/sorts/interface'; import { IconBuildingSkyscraper, IconCalendarEvent,