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

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