admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Move code to a lib, remove table dependancy (#606)

Browse Source 
* 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
This commit is contained in:
Emilien Chauvet
2023-07-11 17:05:08 -07:00
committed by GitHub
parent 4150a7bb51
commit e8d77833a7
59 changed files with 262 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx
View File

@ -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';

2
front/src/modules/companies/services/__tests__/select.test.ts
View File

@ -1,4 +1,4 @@
import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers';
import { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers';
import { CompaniesSelectedSortType } from '../select';

2
front/src/modules/companies/services/select.ts
View File

@ -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,

26
front/src/modules/filters-and-sorts/hooks/useActiveFilterCurrentlyEditedInDropdown.ts
View File

@ -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]);
}

19
front/src/modules/filters-and-sorts/hooks/useRemoveActiveTableFilter.ts
View File

@ -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;
});
});
};
}

33
front/src/modules/filters-and-sorts/hooks/useUpsertActiveTableFilter.ts
View File

@ -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;
}
});
});
};
}

11
front/src/modules/filters-and-sorts/states/activeTableFiltersScopedState.ts
View File

@ -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: [],
});

11
front/src/modules/filters-and-sorts/states/availableTableFiltersScopedState.ts
View File

@ -1,11 +0,0 @@
import { atomFamily } from 'recoil';
import { TableFilterDefinition } from '../types/TableFilterDefinition';
export const availableTableFiltersScopedState = atomFamily<
TableFilterDefinition[],
string
>({
key: 'availableTableFiltersScopedState',
default: [],
});

11
front/src/modules/filters-and-sorts/states/tableFilterDefinitionUsedInDropdownScopedState.ts
View File

@ -1,11 +0,0 @@
import { atomFamily } from 'recoil';
import { TableFilterDefinition } from '../types/TableFilterDefinition';
export const tableFilterDefinitionUsedInDropdownScopedState = atomFamily<
TableFilterDefinition | null,
string
>({
key: 'tableFilterDefinitionUsedInDropdownScopedState',
default: null,
});

10
front/src/modules/filters-and-sorts/types/ActiveTableFilter.ts
View File

@ -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;
};

9
front/src/modules/filters-and-sorts/types/TableFilterDefinition.ts
View File

@ -1,9 +0,0 @@
import { TableFilterType } from './TableFilterType';
export type TableFilterDefinition = {
field: string;
label: string;
icon: JSX.Element;
type: TableFilterType;
entitySelectComponent?: JSX.Element;
};

5
front/src/modules/filters-and-sorts/types/TableFilterDefinitionByEntity.ts
View File

@ -1,5 +0,0 @@
import { TableFilterDefinition } from './TableFilterDefinition';
export type TableFilterDefinitionByEntity<T> = TableFilterDefinition & {
field: keyof T;
};

1
front/src/modules/filters-and-sorts/types/TableFilterType.ts
View File

@ -1 +0,0 @@
export type TableFilterType = 'text' | 'date' | 'entity' | 'number';

0
front/src/modules/filters-and-sorts/helpers.ts → front/src/modules/lib/filters-and-sorts/helpers.ts
View File

21
front/src/modules/lib/filters-and-sorts/hooks/useFilterCurrentlyEdited.ts Normal file
View File

@ -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<string | null>) {
const [filters] = useRecoilScopedState(filtersScopedState, context);
const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
filterDefinitionUsedInDropdownScopedState,
context,
);
return useMemo(() => {
return filters.find(
(filter) => filter.field === filterDefinitionUsedInDropdown?.field,
);
}, [filterDefinitionUsedInDropdown, filters]);
}

17
front/src/modules/lib/filters-and-sorts/hooks/useRemoveFilter.ts Normal file
View File

@ -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<string | null>) {
const [, setFilters] = useRecoilScopedState(filtersScopedState, context);
return function removeFilter(filterField: string) {
setFilters((filters) => {
return filters.filter((filter) => {
return filter.field !== filterField;
});
});
};
}

27
front/src/modules/lib/filters-and-sorts/hooks/useUpsertFilter.ts Normal file
View File

@ -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<string | null>) {
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;
}
});
});
};
}

0
front/src/modules/filters-and-sorts/interfaces/sorts/interface.ts → front/src/modules/lib/filters-and-sorts/interfaces/sorts/interface.ts
View File

11
front/src/modules/lib/filters-and-sorts/states/availableFiltersScopedState.ts Normal file
View File

@ -0,0 +1,11 @@
import { atomFamily } from 'recoil';
import { FilterDefinition } from '../types/FilterDefinition';
export const availableFiltersScopedState = atomFamily<
FilterDefinition[],
string
>({
key: 'availableFiltersScopedState',
default: [],
});

11
front/src/modules/lib/filters-and-sorts/states/filterDefinitionUsedInDropdownScopedState.ts Normal file
View File

@ -0,0 +1,11 @@
import { atomFamily } from 'recoil';
import { FilterDefinition } from '../types/FilterDefinition';
export const filterDefinitionUsedInDropdownScopedState = atomFamily<
FilterDefinition | null,
string
>({
key: 'filterDefinitionUsedInDropdownScopedState',
default: null,
});

0
front/src/modules/filters-and-sorts/states/filterDropdownSearchInputScopedState.ts → front/src/modules/lib/filters-and-sorts/states/filterDropdownSearchInputScopedState.ts
View File

0
front/src/modules/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState.ts → front/src/modules/lib/filters-and-sorts/states/filterDropdownSelectedEntityIdScopedState.ts
View File

8
front/src/modules/lib/filters-and-sorts/states/filtersScopedState.ts Normal file
View File

@ -0,0 +1,8 @@
import { atomFamily } from 'recoil';
import { Filter } from '@/lib/filters-and-sorts/types/Filter';
export const filtersScopedState = atomFamily<Filter[], string>({
key: 'filtersScopedState',
default: [],
});

0
front/src/modules/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts → front/src/modules/lib/filters-and-sorts/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts
View File

4
front/src/modules/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts → front/src/modules/lib/filters-and-sorts/states/selectedOperandInDropdownScopedState.ts
View File

@ -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',

10
front/src/modules/lib/filters-and-sorts/types/Filter.ts Normal file
View File

@ -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;
};

9
front/src/modules/lib/filters-and-sorts/types/FilterDefinition.ts Normal file
View File

@ -0,0 +1,9 @@
import { FilterType } from './FilterType';
export type FilterDefinition = {
field: string;
label: string;
icon: JSX.Element;
type: FilterType;
entitySelectComponent?: JSX.Element;
};

5
front/src/modules/lib/filters-and-sorts/types/FilterDefinitionByEntity.ts Normal file
View File

@ -0,0 +1,5 @@
import { FilterDefinition } from './FilterDefinition';
export type FilterDefinitionByEntity<T> = FilterDefinition & {
field: keyof T;
};

2
front/src/modules/filters-and-sorts/types/TableFilterOperand.ts → front/src/modules/lib/filters-and-sorts/types/FilterOperand.ts
View File

@ -1,4 +1,4 @@
export type TableFilterOperand =
export type FilterOperand =
| 'contains'
| 'does-not-contain'
| 'greater-than'

0
front/src/modules/filters-and-sorts/types/FilterSearchResult.ts → front/src/modules/lib/filters-and-sorts/types/FilterSearchResult.ts
View File

1
front/src/modules/lib/filters-and-sorts/types/FilterType.ts Normal file
View File

@ -0,0 +1 @@
export type FilterType = 'text' | 'date' | 'entity' | 'number';

6
front/src/modules/filters-and-sorts/utils/getOperandLabel.ts → front/src/modules/lib/filters-and-sorts/utils/getOperandLabel.ts
View File

@ -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';

8
front/src/modules/filters-and-sorts/utils/getOperandsForFilterType.ts → front/src/modules/lib/filters-and-sorts/utils/getOperandsForFilterType.ts
View File

@ -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'];

4
front/src/modules/filters-and-sorts/utils/turnFilterIntoWhereClause.ts → front/src/modules/lib/filters-and-sorts/utils/turnFilterIntoWhereClause.ts
View File

@ -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) {

2
front/src/modules/people/services/__tests__/select.test.ts
View File

@ -1,4 +1,4 @@
import { reduceSortsToOrderBy } from '@/filters-and-sorts/helpers';
import { reduceSortsToOrderBy } from '@/lib/filters-and-sorts/helpers';
import { PeopleSelectedSortType } from '../select';

2
front/src/modules/people/services/select.ts
View File

@ -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,

2
front/src/modules/ui/components/table/EntityTable.tsx
View File

@ -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';

4
front/src/modules/ui/components/table/HooksEntityTable.tsx
View File

@ -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();

14
front/src/modules/ui/components/table/table-header/FilterDropdownButton.tsx
View File

@ -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,
);

10
front/src/modules/ui/components/table/table-header/FilterDropdownDateSearchInput.tsx
View File

@ -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)

8
front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchInput.tsx
View File

@ -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,
);

28
front/src/modules/ui/components/table/table-header/FilterDropdownEntitySearchSelect.tsx
View File

@ -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 (
<>

4
front/src/modules/ui/components/table/table-header/FilterDropdownEntitySelect.tsx
View File

@ -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,
);

14
front/src/modules/ui/components/table/table-header/FilterDropdownFilterSelect.tsx
View File

@ -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,
);

14
front/src/modules/ui/components/table/table-header/FilterDropdownNumberSearchInput.tsx
View File

@ -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 &&

6
front/src/modules/ui/components/table/table-header/FilterDropdownOperandButton.tsx
View File

@ -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';

36
front/src/modules/ui/components/table/table-header/FilterDropdownOperandSelect.tsx
View File

@ -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,
});
}
}

26
front/src/modules/ui/components/table/table-header/FilterDropdownTextSearchInput.tsx
View File

@ -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() {
<input
type="text"
placeholder={tableFilterDefinitionUsedInDropdown.label}
value={
activeFilterCurrentlyEditedInDropdown?.value ??
filterDropdownSearchInput
}
value={filterCurrentlyEdited?.value ?? filterDropdownSearchInput}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setFilterDropdownSearchInput(event.target.value);

52
front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
View File

@ -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<SortField>({
}: OwnProps<SortField>) {
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<SortField>({
/>
);
})}
{activeTableFiltersWithDefinition.map((filter) => {
{filtersWithDefinition.map((filter) => {
return (
<SortOrFilterChip
key={filter.field}
@ -133,13 +129,13 @@ function SortAndFilterBar<SortField>({
id={filter.field}
icon={filter.icon}
onRemove={() => {
removeActiveTableFilter(filter.field);
removeFilter(filter.field);
}}
/>
);
})}
</StyledChipcontainer>
{activeTableFilters.length + sorts.length > 0 && (
{filters.length + sorts.length > 0 && (
<StyledCancelButton
data-testid={'cancel-button'}
onClick={handleCancelClick}

2
front/src/modules/ui/components/table/table-header/SortDropdownButton.tsx
View File

@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
import {
SelectedSortType,
SortType,
} from '@/filters-and-sorts/interfaces/sorts/interface';
} from '@/lib/filters-and-sorts/interfaces/sorts/interface';
import DropdownButton from './DropdownButton';

2
front/src/modules/ui/components/table/table-header/TableHeader.tsx
View File

@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import {
SelectedSortType,
SortType,
} from '@/filters-and-sorts/interfaces/sorts/interface';
} from '@/lib/filters-and-sorts/interfaces/sorts/interface';
import { FilterDropdownButton } from './FilterDropdownButton';
import SortAndFilterBar from './SortAndFilterBar';

8
front/src/modules/ui/tables/hooks/useInitializeEntityTableFilters.ts
View File

@ -1,7 +1,7 @@
import { useEffect } from 'react';
import { availableTableFiltersScopedState } from '@/filters-and-sorts/states/availableTableFiltersScopedState';
import { TableFilterDefinition } from '@/filters-and-sorts/types/TableFilterDefinition';
import { availableFiltersScopedState } from '@/lib/filters-and-sorts/states/availableFiltersScopedState';
import { FilterDefinition } from '@/lib/filters-and-sorts/types/FilterDefinition';
import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
import { TableContext } from '../states/TableContext';
@ -9,10 +9,10 @@ import { TableContext } from '../states/TableContext';
export function useInitializeEntityTableFilters({
availableTableFilters,
}: {
availableTableFilters: TableFilterDefinition[];
availableTableFilters: FilterDefinition[];
}) {
const [, setAvailableTableFilters] = useRecoilScopedState(
availableTableFiltersScopedState,
availableFiltersScopedState,
TableContext,
);

4
front/src/modules/users/components/FilterDropdownUserSearchSelect.tsx
View File

@ -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';