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

2282 Rename components to use the new naming convention part 2 (#2295)

Browse Source 
renaming part 2
This commit is contained in:
bosiraphael
2023-10-31 12:32:16 +01:00
committed by GitHub
parent b319ba66ac
commit adeaa35e8d
109 changed files with 435 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/ui/layout/board/types/BoardOptions.ts
View File

@ -1,7 +1,7 @@
import { ComponentType } from 'react';
import { FilterDefinitionByEntity } from '@/ui/object/filter/types/FilterDefinitionByEntity';
import { SortDefinition } from '@/ui/object/sort/types/SortDefinition';
import { FilterDefinitionByEntity } from '@/ui/object/object-filter-dropdown/types/FilterDefinitionByEntity';
import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition';
import { PipelineProgress } from '~/generated/graphql';
export type BoardOptions = {

58
front/src/modules/ui/object/filter/components/MultipleFiltersDropdownContent.tsx
View File

@ -1,58 +0,0 @@
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useFilter } from '../hooks/useFilter';
import { FilterDropdownDateSearchInput } from './FilterDropdownDateSearchInput';
import { FilterDropdownEntitySearchInput } from './FilterDropdownEntitySearchInput';
import { FilterDropdownEntitySelect } from './FilterDropdownEntitySelect';
import { FilterDropdownFilterSelect } from './FilterDropdownFilterSelect';
import { FilterDropdownNumberSearchInput } from './FilterDropdownNumberSearchInput';
import { FilterDropdownOperandButton } from './FilterDropdownOperandButton';
import { FilterDropdownOperandSelect } from './FilterDropdownOperandSelect';
import { FilterDropdownTextSearchInput } from './FilterDropdownTextSearchInput';
import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect';
export const MultipleFiltersDropdownContent = () => {
const {
isFilterDropdownOperandSelectUnfolded,
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
} = useFilter();
return (
<>
{!filterDefinitionUsedInDropdown ? (
<FilterDropdownFilterSelect />
) : isFilterDropdownOperandSelectUnfolded ? (
<FilterDropdownOperandSelect />
) : (
selectedOperandInDropdown && (
<>
<FilterDropdownOperandButton />
<DropdownMenuSeparator />
{filterDefinitionUsedInDropdown.type === 'text' && (
<FilterDropdownTextSearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'number' && (
<FilterDropdownNumberSearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'date' && (
<FilterDropdownDateSearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'entity' && (
<FilterDropdownEntitySearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'entity' && (
<FilterDropdownEntitySelect />
)}
</>
)
)}
<MultipleFiltersDropdownFilterOnFilterChangedEffect
filterDefinitionUsedInDropdownType={
filterDefinitionUsedInDropdown?.type
}
/>
</>
);
};

1
front/src/modules/ui/object/filter/constants/FilterDropdownId.ts
View File

@ -1 +0,0 @@
export const FilterDropdownId = 'filter';

62
front/src/modules/ui/object/filter/hooks/useFilterStates.ts
View File

@ -1,62 +0,0 @@
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
import { availableFilterDefinitionsScopedState } from '../states/availableFilterDefinitionsScopedState';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSearchInputScopedState } from '../states/filterDropdownSearchInputScopedState';
import { filterDropdownSelectedEntityIdScopedState } from '../states/filterDropdownSelectedEntityIdScopedState';
import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState';
import { isFilterDropdownUnfoldedScopedState } from '../states/isFilterDropdownUnfoldedScopedState';
import { selectedFilterScopedState } from '../states/selectedFilterScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
export const useFilterStates = (scopeId: string) => {
const [availableFilterDefinitions, setAvailableFilterDefinitions] =
useRecoilScopedStateV2(availableFilterDefinitionsScopedState, scopeId);
const [filterDefinitionUsedInDropdown, setFilterDefinitionUsedInDropdown] =
useRecoilScopedStateV2(filterDefinitionUsedInDropdownScopedState, scopeId);
const [filterDropdownSearchInput, setFilterDropdownSearchInput] =
useRecoilScopedStateV2(filterDropdownSearchInputScopedState, scopeId);
const [filterDropdownSelectedEntityId, setFilterDropdownSelectedEntityId] =
useRecoilScopedStateV2(filterDropdownSelectedEntityIdScopedState, scopeId);
const [
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
] = useRecoilScopedStateV2(
isFilterDropdownOperandSelectUnfoldedScopedState,
scopeId,
);
const [isFilterDropdownUnfolded, setIsFilterDropdownUnfolded] =
useRecoilScopedStateV2(isFilterDropdownUnfoldedScopedState, scopeId);
const [selectedFilter, setSelectedFilter] = useRecoilScopedStateV2(
selectedFilterScopedState,
scopeId,
);
const [selectedOperandInDropdown, setSelectedOperandInDropdown] =
useRecoilScopedStateV2(selectedOperandInDropdownScopedState, scopeId);
return {
availableFilterDefinitions,
setAvailableFilterDefinitions,
filterDefinitionUsedInDropdown,
setFilterDefinitionUsedInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
filterDropdownSelectedEntityId,
setFilterDropdownSelectedEntityId,
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
isFilterDropdownUnfolded,
setIsFilterDropdownUnfolded,
selectedFilter,
setSelectedFilter,
selectedOperandInDropdown,
setSelectedOperandInDropdown,
};
};

34
front/src/modules/ui/object/filter/scopes/FilterScope.tsx
View File

@ -1,34 +0,0 @@
import { ReactNode } from 'react';
import { FilterDefinition } from '@/ui/object/filter/types/FilterDefinition';
import { Filter } from '../types/Filter';
import { FilterScopeInitEffect } from './init-effect/FilterScopeInitEffect';
import { FilterScopeInternalContext } from './scope-internal-context/FilterScopeInternalContext';
type FilterScopeProps = {
children: ReactNode;
filterScopeId: string;
availableFilterDefinitions?: FilterDefinition[];
onFilterSelect?: (filter: Filter) => void;
};
export const FilterScope = ({
children,
filterScopeId,
availableFilterDefinitions,
onFilterSelect,
}: FilterScopeProps) => {
return (
<FilterScopeInternalContext.Provider
value={{ scopeId: filterScopeId, onFilterSelect }}
>
<FilterScopeInitEffect
filterScopeId={filterScopeId}
availableFilterDefinitions={availableFilterDefinitions}
/>
{children}
</FilterScopeInternalContext.Provider>
);
};

6
front/src/modules/ui/object/filter/states/filterDropdownSearchInputScopedState.ts
View File

@ -1,6 +0,0 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const filterDropdownSearchInputScopedState = createScopedState<string>({
key: 'filterDropdownSearchInputScopedState',
defaultValue: '',
});

8
front/src/modules/ui/object/filter/states/filterDropdownSelectedEntityIdScopedState.ts
View File

@ -1,8 +0,0 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const filterDropdownSelectedEntityIdScopedState = createScopedState<
string | null
>({
key: 'filterDropdownSelectedEntityIdScopedState',
defaultValue: null,
});

6
front/src/modules/ui/object/filter/states/isFilterDropdownUnfoldedScopedState.ts
View File

@ -1,6 +0,0 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isFilterDropdownUnfoldedScopedState = createScopedState<boolean>({
key: 'isFilterDropdownUnfoldedScopedState',
defaultValue: false,
});

4
front/src/modules/ui/object/filter/types/FiltersHotkeyScope.ts
View File

@ -1,4 +0,0 @@
export enum FiltersHotkeyScope {
FilterDropdownButton = 'filter-dropdown-button',
SortDropdownButton = 'sort-dropdown-button',
}

6
front/src/modules/ui/object/filter/components/AddFilterFromDetailsButton.tsx → front/src/modules/ui/object/object-filter-dropdown/components/AddObjectFilterFromDetailsButton.tsx
View File

@ -2,11 +2,11 @@ import { IconPlus } from '@/ui/display/icon';
import { LightButton } from '@/ui/input/button/components/LightButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { FilterDropdownId } from '../constants/FilterDropdownId';
import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
export const AddFilterFromDropdownButton = () => {
export const AddObjectFilterFromDetailsButton = () => {
const { toggleDropdown } = useDropdown({
dropdownScopeId: FilterDropdownId,
dropdownScopeId: ObjectFilterDropdownId,
});
const handleClick = () => {

0
front/src/modules/ui/object/filter/components/GenericEntityFilterChip.tsx → front/src/modules/ui/object/object-filter-dropdown/components/GenericEntityFilterChip.tsx
View File

12
front/src/modules/ui/object/filter/components/MultipleFiltersButton.tsx → front/src/modules/ui/object/object-filter-dropdown/components/MultipleFiltersButton.tsx
View File

@ -1,26 +1,26 @@
import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { FilterDropdownId } from '../constants/FilterDropdownId';
import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
import { useFilter } from '../hooks/useFilter';
export const MultipleFiltersButton = () => {
const {
setFilterDefinitionUsedInDropdown,
setIsFilterDropdownOperandSelectUnfolded,
setFilterDropdownSearchInput,
setIsObjectFilterDropdownOperandSelectUnfolded,
setObjectFilterDropdownSearchInput,
setSelectedOperandInDropdown,
} = useFilter();
const { isDropdownOpen, toggleDropdown } = useDropdown({
dropdownScopeId: FilterDropdownId,
dropdownScopeId: ObjectFilterDropdownId,
});
const resetState = () => {
setIsFilterDropdownOperandSelectUnfolded(false);
setIsObjectFilterDropdownOperandSelectUnfolded(false);
setFilterDefinitionUsedInDropdown(null);
setSelectedOperandInDropdown(null);
setFilterDropdownSearchInput('');
setObjectFilterDropdownSearchInput('');
};
const handleClick = () => {

4
front/src/modules/ui/object/filter/components/MultipleFiltersDropdownButton.tsx → front/src/modules/ui/object/object-filter-dropdown/components/MultipleFiltersDropdownButton.tsx
View File

@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { FilterDropdownId } from '../constants/FilterDropdownId';
import { ObjectFilterDropdownId } from '../constants/ObjectFilterDropdownId';
import { MultipleFiltersButton } from './MultipleFiltersButton';
import { MultipleFiltersDropdownContent } from './MultipleFiltersDropdownContent';
@ -15,7 +15,7 @@ export const MultipleFiltersDropdownButton = ({
hotkeyScope,
}: MultipleFiltersDropdownButtonProps) => {
return (
<DropdownScope dropdownScopeId={FilterDropdownId}>
<DropdownScope dropdownScopeId={ObjectFilterDropdownId}>
<Dropdown
clickableComponent={<MultipleFiltersButton />}
dropdownComponents={<MultipleFiltersDropdownContent />}

58
front/src/modules/ui/object/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx Normal file
View File

@ -0,0 +1,58 @@
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useFilter } from '../hooks/useFilter';
import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect';
import { ObjectFilterDropdownDateSearchInput } from './ObjectFilterDropdownDateSearchInput';
import { ObjectFilterDropdownEntitySearchInput } from './ObjectFilterDropdownEntitySearchInput';
import { ObjectFilterDropdownEntitySelect } from './ObjectFilterDropdownEntitySelect';
import { ObjectFilterDropdownFilterSelect } from './ObjectFilterDropdownFilterSelect';
import { ObjectFilterDropdownNumberSearchInput } from './ObjectFilterDropdownNumberSearchInput';
import { ObjectFilterDropdownOperandButton } from './ObjectFilterDropdownOperandButton';
import { ObjectFilterDropdownOperandSelect } from './ObjectFilterDropdownOperandSelect';
import { ObjectFilterDropdownTextSearchInput } from './ObjectFilterDropdownTextSearchInput';
export const MultipleFiltersDropdownContent = () => {
const {
isObjectFilterDropdownOperandSelectUnfolded,
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
} = useFilter();
return (
<>
{!filterDefinitionUsedInDropdown ? (
<ObjectFilterDropdownFilterSelect />
) : isObjectFilterDropdownOperandSelectUnfolded ? (
<ObjectFilterDropdownOperandSelect />
) : (
selectedOperandInDropdown && (
<>
<ObjectFilterDropdownOperandButton />
<DropdownMenuSeparator />
{filterDefinitionUsedInDropdown.type === 'text' && (
<ObjectFilterDropdownTextSearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'number' && (
<ObjectFilterDropdownNumberSearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'date' && (
<ObjectFilterDropdownDateSearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'entity' && (
<ObjectFilterDropdownEntitySearchInput />
)}
{filterDefinitionUsedInDropdown.type === 'entity' && (
<ObjectFilterDropdownEntitySelect />
)}
</>
)
)}
<MultipleFiltersDropdownFilterOnFilterChangedEffect
filterDefinitionUsedInDropdownType={
filterDefinitionUsedInDropdown?.type
}
/>
</>
);
};

0
front/src/modules/ui/object/filter/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx → front/src/modules/ui/object/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx
View File

10
front/src/modules/ui/object/filter/components/FilterDropdownButton.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownButton.tsx
View File

@ -3,15 +3,15 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useFilter } from '../hooks/useFilter';
import { MultipleFiltersDropdownButton } from './MultipleFiltersDropdownButton';
import { SingleEntityFilterDropdownButton } from './SingleEntityFilterDropdownButton';
import { SingleEntityObjectFilterDropdownButton } from './SingleEntityObjectFilterDropdownButton';
type FilterDropdownButtonProps = {
type ObjectFilterDropdownButtonProps = {
hotkeyScope: HotkeyScope;
};
export const FilterDropdownButton = ({
export const ObjectFilterDropdownButton = ({
hotkeyScope,
}: FilterDropdownButtonProps) => {
}: ObjectFilterDropdownButtonProps) => {
const { availableFilterDefinitions } = useFilter();
const hasOnlyOneEntityFilter =
@ -23,7 +23,7 @@ export const FilterDropdownButton = ({
}
return hasOnlyOneEntityFilter ? (
<SingleEntityFilterDropdownButton hotkeyScope={hotkeyScope} />
<SingleEntityObjectFilterDropdownButton hotkeyScope={hotkeyScope} />
) : (
<MultipleFiltersDropdownButton hotkeyScope={hotkeyScope} />
);

6
front/src/modules/ui/object/filter/components/FilterDropdownDateSearchInput.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownDateSearchInput.tsx
View File

@ -2,11 +2,11 @@ import { InternalDatePicker } from '@/ui/input/components/internal/date/componen
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownDateSearchInput = () => {
export const ObjectFilterDropdownDateSearchInput = () => {
const {
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
setIsFilterDropdownUnfolded,
setIsObjectFilterDropdownUnfolded,
selectFilter,
} = useFilter();
@ -21,7 +21,7 @@ export const FilterDropdownDateSearchInput = () => {
definition: filterDefinitionUsedInDropdown,
});
setIsFilterDropdownUnfolded(false);
setIsObjectFilterDropdownUnfolded(false);
};
return (

10
front/src/modules/ui/object/filter/components/FilterDropdownEntitySearchInput.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchInput.tsx
View File

@ -4,12 +4,12 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownEntitySearchInput = () => {
export const ObjectFilterDropdownEntitySearchInput = () => {
const {
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
objectFilterDropdownSearchInput,
setObjectFilterDropdownSearchInput,
} = useFilter();
return (
@ -18,10 +18,10 @@ export const FilterDropdownEntitySearchInput = () => {
<DropdownMenuSearchInput
autoFocus
type="text"
value={filterDropdownSearchInput}
value={objectFilterDropdownSearchInput}
placeholder={filterDefinitionUsedInDropdown.label}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setFilterDropdownSearchInput(event.target.value);
setObjectFilterDropdownSearchInput(event.target.value);
}}
/>
)

18
front/src/modules/ui/object/filter/components/FilterDropdownEntitySearchSelect.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx
View File

@ -7,16 +7,16 @@ import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownEntitySearchSelect = ({
export const ObjectFilterDropdownEntitySearchSelect = ({
entitiesForSelect,
}: {
entitiesForSelect: EntitiesForMultipleEntitySelect<EntityForSelect>;
}) => {
const {
setFilterDropdownSelectedEntityId,
setObjectFilterDropdownSelectedEntityId,
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
filterDropdownSearchInput,
objectFilterDropdownSearchInput,
selectedFilter,
selectFilter,
} = useFilter();
@ -38,7 +38,7 @@ export const FilterDropdownEntitySearchSelect = ({
setIsAllEntitySelected(false);
}
setFilterDropdownSelectedEntityId(selectedEntity.id);
setObjectFilterDropdownSelectedEntityId(selectedEntity.id);
selectFilter?.({
displayValue: selectedEntity.name,
@ -56,7 +56,7 @@ export const FilterDropdownEntitySearchSelect = ({
(isAllEntitySelected ||
filterDefinitionUsedInDropdown?.selectAllLabel
.toLocaleLowerCase()
.includes(filterDropdownSearchInput.toLocaleLowerCase()));
.includes(objectFilterDropdownSearchInput.toLocaleLowerCase()));
const handleAllEntitySelectClick = () => {
if (
@ -68,7 +68,7 @@ export const FilterDropdownEntitySearchSelect = ({
}
setIsAllEntitySelected(true);
setFilterDropdownSelectedEntityId(null);
setObjectFilterDropdownSelectedEntityId(null);
selectFilter?.({
displayValue: filterDefinitionUsedInDropdown.selectAllLabel,
@ -81,16 +81,16 @@ export const FilterDropdownEntitySearchSelect = ({
useEffect(() => {
if (!selectedFilter) {
setFilterDropdownSelectedEntityId(null);
setObjectFilterDropdownSelectedEntityId(null);
} else {
setFilterDropdownSelectedEntityId(selectedFilter.value);
setObjectFilterDropdownSelectedEntityId(selectedFilter.value);
setIsAllEntitySelected(
selectedFilter.operand === ViewFilterOperand.IsNotNull,
);
}
}, [
selectedFilter,
setFilterDropdownSelectedEntityId,
setObjectFilterDropdownSelectedEntityId,
entitiesForSelect.selectedEntities,
]);

2
front/src/modules/ui/object/filter/components/FilterDropdownEntitySelect.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownEntitySelect.tsx
View File

@ -3,7 +3,7 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownEntitySelect = () => {
export const ObjectFilterDropdownEntitySelect = () => {
const { filterDefinitionUsedInDropdown } = useFilter();
if (filterDefinitionUsedInDropdown?.type !== 'entity') {

6
front/src/modules/ui/object/filter/components/FilterDropdownFilterSelect.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
View File

@ -6,11 +6,11 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
import { useFilter } from '../hooks/useFilter';
import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
export const FilterDropdownFilterSelect = () => {
export const ObjectFilterDropdownFilterSelect = () => {
const {
setFilterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
setFilterDropdownSearchInput,
setObjectFilterDropdownSearchInput,
availableFilterDefinitions,
} = useFilter();
@ -33,7 +33,7 @@ export const FilterDropdownFilterSelect = () => {
getOperandsForFilterType(availableFilterDefinition.type)?.[0],
);
setFilterDropdownSearchInput('');
setObjectFilterDropdownSearchInput('');
}}
LeftIcon={availableFilterDefinition.Icon}
text={availableFilterDefinition.label}

2
front/src/modules/ui/object/filter/components/FilterDropdownNumberSearchInput.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownNumberSearchInput.tsx
View File

@ -4,7 +4,7 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownNumberSearchInput = () => {
export const ObjectFilterDropdownNumberSearchInput = () => {
const {
selectedOperandInDropdown,
filterDefinitionUsedInDropdown,

10
front/src/modules/ui/object/filter/components/FilterDropdownOperandButton.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownOperandButton.tsx
View File

@ -4,14 +4,14 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
import { useFilter } from '../hooks/useFilter';
import { getOperandLabel } from '../utils/getOperandLabel';
export const FilterDropdownOperandButton = () => {
export const ObjectFilterDropdownOperandButton = () => {
const {
selectedOperandInDropdown,
setIsFilterDropdownOperandSelectUnfolded,
isFilterDropdownOperandSelectUnfolded,
setIsObjectFilterDropdownOperandSelectUnfolded,
isObjectFilterDropdownOperandSelectUnfolded,
} = useFilter();
if (isFilterDropdownOperandSelectUnfolded) {
if (isObjectFilterDropdownOperandSelectUnfolded) {
return null;
}
@ -19,7 +19,7 @@ export const FilterDropdownOperandButton = () => {
<DropdownMenuHeader
key={'selected-filter-operand'}
EndIcon={IconChevronDown}
onClick={() => setIsFilterDropdownOperandSelectUnfolded(true)}
onClick={() => setIsObjectFilterDropdownOperandSelectUnfolded(true)}
>
{getOperandLabel(selectedOperandInDropdown)}
</DropdownMenuHeader>

10
front/src/modules/ui/object/filter/components/FilterDropdownOperandSelect.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx
View File

@ -6,12 +6,12 @@ import { useFilter } from '../hooks/useFilter';
import { getOperandLabel } from '../utils/getOperandLabel';
import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
export const FilterDropdownOperandSelect = () => {
export const ObjectFilterDropdownOperandSelect = () => {
const {
filterDefinitionUsedInDropdown,
setSelectedOperandInDropdown,
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
isObjectFilterDropdownOperandSelectUnfolded,
setIsObjectFilterDropdownOperandSelectUnfolded,
selectedFilter,
selectFilter,
} = useFilter();
@ -22,7 +22,7 @@ export const FilterDropdownOperandSelect = () => {
const handleOperangeChange = (newOperand: ViewFilterOperand) => {
setSelectedOperandInDropdown(newOperand);
setIsFilterDropdownOperandSelectUnfolded(false);
setIsObjectFilterDropdownOperandSelectUnfolded(false);
if (filterDefinitionUsedInDropdown && selectedFilter) {
selectFilter?.({
@ -35,7 +35,7 @@ export const FilterDropdownOperandSelect = () => {
}
};
if (!isFilterDropdownOperandSelectUnfolded) {
if (!isObjectFilterDropdownOperandSelectUnfolded) {
return <></>;
}

10
front/src/modules/ui/object/filter/components/FilterDropdownTextSearchInput.tsx → front/src/modules/ui/object/object-filter-dropdown/components/ObjectFilterDropdownTextSearchInput.tsx
View File

@ -4,12 +4,12 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
import { useFilter } from '../hooks/useFilter';
export const FilterDropdownTextSearchInput = () => {
export const ObjectFilterDropdownTextSearchInput = () => {
const {
filterDefinitionUsedInDropdown,
selectedOperandInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
objectFilterDropdownSearchInput,
setObjectFilterDropdownSearchInput,
selectedFilter,
selectFilter,
} = useFilter();
@ -21,9 +21,9 @@ export const FilterDropdownTextSearchInput = () => {
autoFocus
type="text"
placeholder={filterDefinitionUsedInDropdown.label}
value={selectedFilter?.value ?? filterDropdownSearchInput}
value={selectedFilter?.value ?? objectFilterDropdownSearchInput}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
setFilterDropdownSearchInput(event.target.value);
setObjectFilterDropdownSearchInput(event.target.value);
selectFilter?.({
fieldId: filterDefinitionUsedInDropdown.fieldId,

10
front/src/modules/ui/object/filter/components/SingleEntityFilterDropdownButton.tsx → front/src/modules/ui/object/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx
View File

@ -11,11 +11,11 @@ import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { useFilter } from '../hooks/useFilter';
import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
import { FilterDropdownEntitySearchInput } from './FilterDropdownEntitySearchInput';
import { FilterDropdownEntitySelect } from './FilterDropdownEntitySelect';
import { GenericEntityFilterChip } from './GenericEntityFilterChip';
import { ObjectFilterDropdownEntitySearchInput } from './ObjectFilterDropdownEntitySearchInput';
import { ObjectFilterDropdownEntitySelect } from './ObjectFilterDropdownEntitySelect';
export const SingleEntityFilterDropdownButton = ({
export const SingleEntityObjectFilterDropdownButton = ({
hotkeyScope,
}: {
hotkeyScope: HotkeyScope;
@ -65,8 +65,8 @@ export const SingleEntityFilterDropdownButton = ({
}
dropdownComponents={
<>
<FilterDropdownEntitySearchInput />
<FilterDropdownEntitySelect />
<ObjectFilterDropdownEntitySearchInput />
<ObjectFilterDropdownEntitySelect />
</>
}
/>

1
front/src/modules/ui/object/object-filter-dropdown/constants/ObjectFilterDropdownId.ts Normal file
View File

@ -0,0 +1 @@
export const ObjectFilterDropdownId = 'filter';

38
front/src/modules/ui/object/filter/hooks/useFilter.ts → front/src/modules/ui/object/object-filter-dropdown/hooks/useFilter.ts
View File

@ -3,7 +3,7 @@ import { useCallback } from 'react';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useScopeInternalContextOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow';
import { FilterScopeInternalContext } from '../scopes/scope-internal-context/FilterScopeInternalContext';
import { ObjectFilterDropdownScopeInternalContext } from '../scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext';
import { Filter } from '../types/Filter';
import { useFilterStates } from './useFilterStates';
@ -14,7 +14,7 @@ type UseFilterProps = {
export const useFilter = (props?: UseFilterProps) => {
const scopeId = useAvailableScopeIdOrThrow(
FilterScopeInternalContext,
ObjectFilterDropdownScopeInternalContext,
props?.filterScopeId,
);
const {
@ -22,14 +22,14 @@ export const useFilter = (props?: UseFilterProps) => {
setAvailableFilterDefinitions,
filterDefinitionUsedInDropdown,
setFilterDefinitionUsedInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
filterDropdownSelectedEntityId,
setFilterDropdownSelectedEntityId,
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
isFilterDropdownUnfolded,
setIsFilterDropdownUnfolded,
objectFilterDropdownSearchInput,
setObjectFilterDropdownSearchInput,
objectFilterDropdownSelectedEntityId,
setObjectFilterDropdownSelectedEntityId,
isObjectFilterDropdownOperandSelectUnfolded,
setIsObjectFilterDropdownOperandSelectUnfolded,
isObjectFilterDropdownUnfolded,
setIsObjectFilterDropdownUnfolded,
selectedFilter,
setSelectedFilter,
selectedOperandInDropdown,
@ -37,7 +37,7 @@ export const useFilter = (props?: UseFilterProps) => {
} = useFilterStates(scopeId);
const { onFilterSelect } = useScopeInternalContextOrThrow(
FilterScopeInternalContext,
ObjectFilterDropdownScopeInternalContext,
);
const selectFilter = useCallback(
@ -54,14 +54,14 @@ export const useFilter = (props?: UseFilterProps) => {
setAvailableFilterDefinitions,
filterDefinitionUsedInDropdown,
setFilterDefinitionUsedInDropdown,
filterDropdownSearchInput,
setFilterDropdownSearchInput,
filterDropdownSelectedEntityId,
setFilterDropdownSelectedEntityId,
isFilterDropdownOperandSelectUnfolded,
setIsFilterDropdownOperandSelectUnfolded,
isFilterDropdownUnfolded,
setIsFilterDropdownUnfolded,
objectFilterDropdownSearchInput,
setObjectFilterDropdownSearchInput,
objectFilterDropdownSelectedEntityId,
setObjectFilterDropdownSelectedEntityId,
isObjectFilterDropdownOperandSelectUnfolded,
setIsObjectFilterDropdownOperandSelectUnfolded,
isObjectFilterDropdownUnfolded,
setIsObjectFilterDropdownUnfolded,
selectedFilter,
setSelectedFilter,
selectedOperandInDropdown,

67
front/src/modules/ui/object/object-filter-dropdown/hooks/useFilterStates.ts Normal file
View File

@ -0,0 +1,67 @@
import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
import { availableFilterDefinitionsScopedState } from '../states/availableFilterDefinitionsScopedState';
import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
import { isObjectFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isObjectFilterDropdownOperandSelectUnfoldedScopedState';
import { isObjectFilterDropdownUnfoldedScopedState } from '../states/isObjectFilterDropdownUnfoldedScopedState';
import { objectFilterDropdownSearchInputScopedState } from '../states/objectFilterDropdownSearchInputScopedState';
import { objectFilterDropdownSelectedEntityIdScopedState } from '../states/objectFilterDropdownSelectedEntityIdScopedState';
import { selectedFilterScopedState } from '../states/selectedFilterScopedState';
import { selectedOperandInDropdownScopedState } from '../states/selectedOperandInDropdownScopedState';
export const useFilterStates = (scopeId: string) => {
const [availableFilterDefinitions, setAvailableFilterDefinitions] =
useRecoilScopedStateV2(availableFilterDefinitionsScopedState, scopeId);
const [filterDefinitionUsedInDropdown, setFilterDefinitionUsedInDropdown] =
useRecoilScopedStateV2(filterDefinitionUsedInDropdownScopedState, scopeId);
const [objectFilterDropdownSearchInput, setObjectFilterDropdownSearchInput] =
useRecoilScopedStateV2(objectFilterDropdownSearchInputScopedState, scopeId);
const [
objectFilterDropdownSelectedEntityId,
setObjectFilterDropdownSelectedEntityId,
] = useRecoilScopedStateV2(
objectFilterDropdownSelectedEntityIdScopedState,
scopeId,
);
const [
isObjectFilterDropdownOperandSelectUnfolded,
setIsObjectFilterDropdownOperandSelectUnfolded,
] = useRecoilScopedStateV2(
isObjectFilterDropdownOperandSelectUnfoldedScopedState,
scopeId,
);
const [isObjectFilterDropdownUnfolded, setIsObjectFilterDropdownUnfolded] =
useRecoilScopedStateV2(isObjectFilterDropdownUnfoldedScopedState, scopeId);
const [selectedFilter, setSelectedFilter] = useRecoilScopedStateV2(
selectedFilterScopedState,
scopeId,
);
const [selectedOperandInDropdown, setSelectedOperandInDropdown] =
useRecoilScopedStateV2(selectedOperandInDropdownScopedState, scopeId);
return {
availableFilterDefinitions,
setAvailableFilterDefinitions,
filterDefinitionUsedInDropdown,
setFilterDefinitionUsedInDropdown,
objectFilterDropdownSearchInput,
setObjectFilterDropdownSearchInput,
objectFilterDropdownSelectedEntityId,
setObjectFilterDropdownSelectedEntityId,
isObjectFilterDropdownOperandSelectUnfolded,
setIsObjectFilterDropdownOperandSelectUnfolded,
isObjectFilterDropdownUnfolded,
setIsObjectFilterDropdownUnfolded,
selectedFilter,
setSelectedFilter,
selectedOperandInDropdown,
setSelectedOperandInDropdown,
};
};

34
front/src/modules/ui/object/object-filter-dropdown/scopes/ObjectFilterDropdownScope.tsx Normal file
View File

@ -0,0 +1,34 @@
import { ReactNode } from 'react';
import { FilterDefinition } from '@/ui/object/object-filter-dropdown/types/FilterDefinition';
import { Filter } from '../types/Filter';
import { ObjectFilterDropdownScopeInitEffect } from './init-effect/ObjectFilterDropdownScopeInitEffect';
import { ObjectFilterDropdownScopeInternalContext } from './scope-internal-context/ObjectFilterDropdownScopeInternalContext';
type ObjectFilterDropdownScopeProps = {
children: ReactNode;
filterScopeId: string;
availableFilterDefinitions?: FilterDefinition[];
onFilterSelect?: (filter: Filter) => void;
};
export const ObjectFilterDropdownScope = ({
children,
filterScopeId,
availableFilterDefinitions,
onFilterSelect,
}: ObjectFilterDropdownScopeProps) => {
return (
<ObjectFilterDropdownScopeInternalContext.Provider
value={{ scopeId: filterScopeId, onFilterSelect }}
>
<ObjectFilterDropdownScopeInitEffect
filterScopeId={filterScopeId}
availableFilterDefinitions={availableFilterDefinitions}
/>
{children}
</ObjectFilterDropdownScopeInternalContext.Provider>
);
};

8
front/src/modules/ui/object/filter/scopes/init-effect/FilterScopeInitEffect.tsx → front/src/modules/ui/object/object-filter-dropdown/scopes/init-effect/ObjectFilterDropdownScopeInitEffect.tsx
View File

@ -1,18 +1,18 @@
import { useEffect } from 'react';
import { FilterDefinition } from '@/ui/object/filter/types/FilterDefinition';
import { FilterDefinition } from '@/ui/object/object-filter-dropdown/types/FilterDefinition';
import { useFilterStates } from '../../hooks/useFilterStates';
type FilterScopeInitEffectProps = {
type ObjectFilterDropdownScopeInitEffectProps = {
filterScopeId: string;
availableFilterDefinitions?: FilterDefinition[];
};
export const FilterScopeInitEffect = ({
export const ObjectFilterDropdownScopeInitEffect = ({
filterScopeId,
availableFilterDefinitions,
}: FilterScopeInitEffectProps) => {
}: ObjectFilterDropdownScopeInitEffectProps) => {
const { setAvailableFilterDefinitions } = useFilterStates(filterScopeId);
useEffect(() => {

6
front/src/modules/ui/object/filter/scopes/scope-internal-context/FilterScopeInternalContext.ts → front/src/modules/ui/object/object-filter-dropdown/scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext.ts
View File

@ -3,9 +3,9 @@ import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-i
import { Filter } from '../../types/Filter';
type FilterScopeInternalContextProps = ScopedStateKey & {
type ObjectFilterDropdownScopeInternalContextProps = ScopedStateKey & {
onFilterSelect?: (sort: Filter) => void;
};
export const FilterScopeInternalContext =
createScopeInternalContext<FilterScopeInternalContextProps>();
export const ObjectFilterDropdownScopeInternalContext =
createScopeInternalContext<ObjectFilterDropdownScopeInternalContextProps>();

2
front/src/modules/ui/object/filter/states/availableFilterDefinitionsScopedState.ts → front/src/modules/ui/object/object-filter-dropdown/states/availableFilterDefinitionsScopedState.ts
View File

@ -1,4 +1,4 @@
import { FilterDefinition } from '@/ui/object/filter/types/FilterDefinition';
import { FilterDefinition } from '@/ui/object/object-filter-dropdown/types/FilterDefinition';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const availableFilterDefinitionsScopedState = createScopedState<

0
front/src/modules/ui/object/filter/states/filterDefinitionUsedInDropdownScopedState.ts → front/src/modules/ui/object/object-filter-dropdown/states/filterDefinitionUsedInDropdownScopedState.ts
View File

7
front/src/modules/ui/object/object-filter-dropdown/states/isObjectFilterDropdownOperandSelectUnfoldedScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isObjectFilterDropdownOperandSelectUnfoldedScopedState =
createScopedState<boolean>({
key: 'isObjectFilterDropdownOperandSelectUnfoldedScopedState',
defaultValue: false,
});

4
front/src/modules/ui/object/filter/states/isFilterDropdownOperandSelectUnfoldedScopedState.ts → front/src/modules/ui/object/object-filter-dropdown/states/isObjectFilterDropdownUnfoldedScopedState.ts
View File

@ -1,7 +1,7 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const isFilterDropdownOperandSelectUnfoldedScopedState =
export const isObjectFilterDropdownUnfoldedScopedState =
createScopedState<boolean>({
key: 'isFilterDropdownOperandSelectUnfoldedScopedState',
key: 'isObjectFilterDropdownUnfoldedScopedState',
defaultValue: false,
});

7
front/src/modules/ui/object/object-filter-dropdown/states/objectFilterDropdownSearchInputScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const objectFilterDropdownSearchInputScopedState =
createScopedState<string>({
key: 'objectFilterDropdownSearchInputScopedState',
defaultValue: '',
});

7
front/src/modules/ui/object/object-filter-dropdown/states/objectFilterDropdownSelectedEntityIdScopedState.ts Normal file
View File

@ -0,0 +1,7 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const objectFilterDropdownSelectedEntityIdScopedState =
createScopedState<string | null>({
key: 'objectFilterDropdownSelectedEntityIdScopedState',
defaultValue: null,
});

0
front/src/modules/ui/object/filter/states/selectedFilterScopedState.ts → front/src/modules/ui/object/object-filter-dropdown/states/selectedFilterScopedState.ts
View File

0
front/src/modules/ui/object/filter/states/selectedOperandInDropdownScopedState.ts → front/src/modules/ui/object/object-filter-dropdown/states/selectedOperandInDropdownScopedState.ts
View File

0
front/src/modules/ui/object/filter/types/Filter.ts → front/src/modules/ui/object/object-filter-dropdown/types/Filter.ts
View File

0
front/src/modules/ui/object/filter/types/FilterDefinition.ts → front/src/modules/ui/object/object-filter-dropdown/types/FilterDefinition.ts
View File

0
front/src/modules/ui/object/filter/types/FilterDefinitionByEntity.ts → front/src/modules/ui/object/object-filter-dropdown/types/FilterDefinitionByEntity.ts
View File

0
front/src/modules/ui/object/filter/types/FilterOperand.ts → front/src/modules/ui/object/object-filter-dropdown/types/FilterOperand.ts
View File

0
front/src/modules/ui/object/filter/types/FilterType.ts → front/src/modules/ui/object/object-filter-dropdown/types/FilterType.ts
View File

4
front/src/modules/ui/object/object-filter-dropdown/types/FiltersHotkeyScope.ts Normal file
View File

@ -0,0 +1,4 @@
export enum FiltersHotkeyScope {
ObjectFilterDropdownButton = 'filter-dropdown-button',
ObjectSortDropdownButton = 'sort-dropdown-button',
}

0
front/src/modules/ui/object/filter/utils/getOperandLabel.ts → front/src/modules/ui/object/object-filter-dropdown/utils/getOperandLabel.ts
View File

0
front/src/modules/ui/object/filter/utils/getOperandsForFilterType.ts → front/src/modules/ui/object/object-filter-dropdown/utils/getOperandsForFilterType.ts
View File

0
front/src/modules/ui/object/filter/utils/turnFilterIntoWhereClause.ts → front/src/modules/ui/object/object-filter-dropdown/utils/turnFilterIntoWhereClause.ts
View File

0
front/src/modules/ui/object/filter/utils/turnFiltersIntoWhereClauseV2.ts → front/src/modules/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2.ts
View File

17
front/src/modules/ui/object/sort/components/SortDropdownButton.tsx → front/src/modules/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -11,19 +11,19 @@ import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { SortDropdownId } from '../constants/SortDropdownId';
import { useSort } from '../hooks/useSort';
import { ObjectSortDropdownId } from '../constants/ObjectSortDropdownId';
import { useObjectSortDropdown } from '../hooks/useObjectSortDropdown';
import { SortDefinition } from '../types/SortDefinition';
import { SORT_DIRECTIONS, SortDirection } from '../types/SortDirection';
export type SortDropdownButtonProps = {
export type ObjectSortDropdownButtonProps = {
hotkeyScope: HotkeyScope;
isPrimaryButton?: boolean;
};
export const SortDropdownButton = ({
export const ObjectSortDropdownButton = ({
hotkeyScope,
}: SortDropdownButtonProps) => {
}: ObjectSortDropdownButtonProps) => {
const [isSortDirectionMenuUnfolded, setIsSortDirectionMenuUnfolded] =
useState(false);
@ -35,10 +35,11 @@ export const SortDropdownButton = ({
setSelectedSortDirection('asc');
}, []);
const { availableSortDefinitions, onSortSelect, isSortSelected } = useSort();
const { availableSortDefinitions, onSortSelect, isSortSelected } =
useObjectSortDropdown();
const { toggleDropdown } = useDropdown({
dropdownScopeId: SortDropdownId,
dropdownScopeId: ObjectSortDropdownId,
});
const handleButtonClick = () => {
@ -60,7 +61,7 @@ export const SortDropdownButton = ({
};
return (
<DropdownScope dropdownScopeId={SortDropdownId}>
<DropdownScope dropdownScopeId={ObjectSortDropdownId}>
<Dropdown
dropdownHotkeyScope={hotkeyScope}
dropdownOffset={{ y: 8 }}

1
front/src/modules/ui/object/object-sort-dropdown/constants/ObjectSortDropdownId.ts Normal file
View File

@ -0,0 +1 @@
export const ObjectSortDropdownId = 'sort-dropdown';

14
front/src/modules/ui/object/sort/hooks/useSort.ts → front/src/modules/ui/object/object-sort-dropdown/hooks/useObjectSortDropdown.ts
View File

@ -1,17 +1,17 @@
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { SortScopeInternalContext } from '../scopes/scope-internal-context/SortScopeInternalContext';
import { useScopeInternalContextOrThrow } from '../../../utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow';
import { ObjectSortDropdownScopeInternalContext } from '../scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext';
import { useScopeInternalContextOrThrow } from './../../../utilities/recoil-scope/scopes-internal/hooks/useScopeInternalContextOrThrow';
import { useSortStates } from './useSortStates';
import { useObjectSortDropdownStates } from './useObjectSortDropdownStates';
type UseSortProps = {
sortScopeId?: string;
};
export const useSort = (props?: UseSortProps) => {
export const useObjectSortDropdown = (props?: UseSortProps) => {
const scopeId = useAvailableScopeIdOrThrow(
SortScopeInternalContext,
ObjectSortDropdownScopeInternalContext,
props?.sortScopeId,
);
const {
@ -19,10 +19,10 @@ export const useSort = (props?: UseSortProps) => {
setAvailableSortDefinitions,
isSortSelected,
setIsSortSelected,
} = useSortStates(scopeId);
} = useObjectSortDropdownStates(scopeId);
const { onSortSelect } = useScopeInternalContextOrThrow(
SortScopeInternalContext,
ObjectSortDropdownScopeInternalContext,
);
return {

2
front/src/modules/ui/object/sort/hooks/useSortStates.ts → front/src/modules/ui/object/object-sort-dropdown/hooks/useObjectSortDropdownStates.ts
View File

@ -3,7 +3,7 @@ import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRec
import { availableSortDefinitionsScopedState } from '../states/availableSortDefinitionsScopedState';
import { isSortSelectedScopedState } from '../states/isSortSelectedScopedState';
export const useSortStates = (scopeId: string) => {
export const useObjectSortDropdownStates = (scopeId: string) => {
const [availableSortDefinitions, setAvailableSortDefinitions] =
useRecoilScopedStateV2(availableSortDefinitionsScopedState, scopeId);

16
front/src/modules/ui/object/sort/scopes/SortScope.tsx → front/src/modules/ui/object/object-sort-dropdown/scopes/ObjectSortDropdownScope.tsx
View File

@ -3,31 +3,31 @@ import { ReactNode } from 'react';
import { Sort } from '../types/Sort';
import { SortDefinition } from '../types/SortDefinition';
import { SortScopeInitEffect } from './init-effect/SortScopeInitEffect';
import { SortScopeInternalContext } from './scope-internal-context/SortScopeInternalContext';
import { ObjectSortDropdownScopeInitEffect } from './init-effect/ObjectSortDropdownScopeInitEffect';
import { ObjectSortDropdownScopeInternalContext } from './scope-internal-context/ObjectSortDropdownScopeInternalContext';
type SortScopeProps = {
type ObjectSortDropdownScopeProps = {
children: ReactNode;
sortScopeId: string;
availableSortDefinitions?: SortDefinition[];
onSortSelect?: (sort: Sort) => void | Promise<void>;
};
export const SortScope = ({
export const ObjectSortDropdownScope = ({
children,
sortScopeId,
availableSortDefinitions,
onSortSelect,
}: SortScopeProps) => {
}: ObjectSortDropdownScopeProps) => {
return (
<SortScopeInternalContext.Provider
<ObjectSortDropdownScopeInternalContext.Provider
value={{ scopeId: sortScopeId, onSortSelect }}
>
<SortScopeInitEffect
<ObjectSortDropdownScopeInitEffect
sortScopeId={sortScopeId}
availableSortDefinitions={availableSortDefinitions}
/>
{children}
</SortScopeInternalContext.Provider>
</ObjectSortDropdownScopeInternalContext.Provider>
);
};

26
front/src/modules/ui/object/object-sort-dropdown/scopes/init-effect/ObjectSortDropdownScopeInitEffect.tsx Normal file
View File

@ -0,0 +1,26 @@
import { useEffect } from 'react';
import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition';
import { useObjectSortDropdownStates } from '../../hooks/useObjectSortDropdownStates';
type ObjectSortDropdownScopeInitEffectProps = {
sortScopeId: string;
availableSortDefinitions?: SortDefinition[];
};
export const ObjectSortDropdownScopeInitEffect = ({
sortScopeId,
availableSortDefinitions,
}: ObjectSortDropdownScopeInitEffectProps) => {
const { setAvailableSortDefinitions } =
useObjectSortDropdownStates(sortScopeId);
useEffect(() => {
if (availableSortDefinitions) {
setAvailableSortDefinitions(availableSortDefinitions);
}
}, [availableSortDefinitions, setAvailableSortDefinitions]);
return <></>;
};

6
front/src/modules/ui/object/sort/scopes/scope-internal-context/SortScopeInternalContext.ts → front/src/modules/ui/object/object-sort-dropdown/scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext.ts
View File

@ -3,9 +3,9 @@ import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-i
import { Sort } from '../../types/Sort';
type SortScopeInternalContextProps = ScopedStateKey & {
type ObjectSortDropdownScopeInternalContextProps = ScopedStateKey & {
onSortSelect?: (sort: Sort) => void;
};
export const SortScopeInternalContext =
createScopeInternalContext<SortScopeInternalContextProps>();
export const ObjectSortDropdownScopeInternalContext =
createScopeInternalContext<ObjectSortDropdownScopeInternalContextProps>();

0
front/src/modules/ui/object/sort/states/availableSortDefinitionsScopedState.ts → front/src/modules/ui/object/object-sort-dropdown/states/availableSortDefinitionsScopedState.ts
View File

0
front/src/modules/ui/object/sort/states/isSortSelectedScopedState.ts → front/src/modules/ui/object/object-sort-dropdown/states/isSortSelectedScopedState.ts
View File

0
front/src/modules/ui/object/sort/types/Sort.ts → front/src/modules/ui/object/object-sort-dropdown/types/Sort.ts
View File

0
front/src/modules/ui/object/sort/types/SortDefinition.ts → front/src/modules/ui/object/object-sort-dropdown/types/SortDefinition.ts
View File

0
front/src/modules/ui/object/sort/types/SortDirection.ts → front/src/modules/ui/object/object-sort-dropdown/types/SortDirection.ts
View File

0
front/src/modules/ui/object/sort/types/interface.ts → front/src/modules/ui/object/object-sort-dropdown/types/interface.ts
View File

0
front/src/modules/ui/object/sort/utils/helpers.ts → front/src/modules/ui/object/object-sort-dropdown/utils/helpers.ts
View File

0
front/src/modules/ui/object/sort/utils/turnSortsIntoOrderByV2.ts → front/src/modules/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderByV2.ts
View File

4
front/src/modules/ui/object/record-table/components/RecordTableEffect.tsx
View File

@ -11,8 +11,8 @@ import {
useGetPeopleQuery,
} from '~/generated/graphql';
import { FilterDefinition } from '../../filter/types/FilterDefinition';
import { SortDefinition } from '../../sort/types/SortDefinition';
import { FilterDefinition } from '../../object-filter-dropdown/types/FilterDefinition';
import { SortDefinition } from '../../object-sort-dropdown/types/SortDefinition';
import { useSetRecordTableData } from '../hooks/useSetRecordTableData';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { tablefiltersWhereScopedSelector } from '../states/selectors/tablefiltersWhereScopedSelector';

2
front/src/modules/ui/object/record-table/states/selectors/tableSortsOrderByScopedSelector.ts
View File

@ -1,6 +1,6 @@
import { selectorFamily } from 'recoil';
import { reduceSortsToOrderBy } from '@/ui/object/sort/utils/helpers';
import { reduceSortsToOrderBy } from '@/ui/object/object-sort-dropdown/utils/helpers';
import { SortOrder } from '~/generated/graphql';
import { tableSortsScopedState } from '../tableSortsScopedState';

2
front/src/modules/ui/object/record-table/states/selectors/tablefiltersWhereScopedSelector.ts
View File

@ -1,6 +1,6 @@
import { selectorFamily } from 'recoil';
import { turnFilterIntoWhereClause } from '../../../filter/utils/turnFilterIntoWhereClause';
import { turnFilterIntoWhereClause } from '../../../object-filter-dropdown/utils/turnFilterIntoWhereClause';
import { tableFiltersScopedState } from '../tableFiltersScopedState';
export const tablefiltersWhereScopedSelector = selectorFamily({

2
front/src/modules/ui/object/record-table/states/tableFiltersScopedState.ts
View File

@ -1,6 +1,6 @@
import { atomFamily } from 'recoil';
import { Filter } from '../../filter/types/Filter';
import { Filter } from '../../object-filter-dropdown/types/Filter';
export const tableFiltersScopedState = atomFamily<Filter[], string>({
key: 'tableFiltersScopedState',

2
front/src/modules/ui/object/record-table/states/tableSortsScopedState.ts
View File

@ -1,6 +1,6 @@
import { atomFamily } from 'recoil';
import { Sort } from '../../sort/types/Sort';
import { Sort } from '../../object-sort-dropdown/types/Sort';
export const tableSortsScopedState = atomFamily<Sort[], string>({
key: 'tableSortsScopedState',

1
front/src/modules/ui/object/sort/constants/SortDropdownId.ts
View File

@ -1 +0,0 @@
export const SortDropdownId = 'sort-dropdown';

25
front/src/modules/ui/object/sort/scopes/init-effect/SortScopeInitEffect.tsx
View File

@ -1,25 +0,0 @@
import { useEffect } from 'react';
import { SortDefinition } from '@/ui/object/sort/types/SortDefinition';
import { useSortStates } from '../../hooks/useSortStates';
type SortScopeInitEffectProps = {
sortScopeId: string;
availableSortDefinitions?: SortDefinition[];
};
export const SortScopeInitEffect = ({
sortScopeId,
availableSortDefinitions,
}: SortScopeInitEffectProps) => {
const { setAvailableSortDefinitions } = useSortStates(sortScopeId);
useEffect(() => {
if (availableSortDefinitions) {
setAvailableSortDefinitions(availableSortDefinitions);
}
}, [availableSortDefinitions, setAvailableSortDefinitions]);
return <></>;
};