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

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

View File

@ -1,6 +1,6 @@
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { PageAddButton } from '@/ui/layout/page/PageAddButton';
import { useFilter } from '@/ui/object/filter/hooks/useFilter';
import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
import { ActivityType } from '~/generated/graphql';
export const PageAddTaskButton = () => {

View File

@ -2,7 +2,7 @@ import { DateTime } from 'luxon';
import { useRecoilState } from 'recoil';
import { currentUserState } from '@/auth/states/currentUserState';
import { turnFilterIntoWhereClause } from '@/ui/object/filter/utils/turnFilterIntoWhereClause';
import { turnFilterIntoWhereClause } from '@/ui/object/object-filter-dropdown/utils/turnFilterIntoWhereClause';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
import { parseDate } from '~/utils/date-utils';

View File

@ -1,8 +1,8 @@
import { DateTime } from 'luxon';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { useFilter } from '@/ui/object/filter/hooks/useFilter';
import { turnFilterIntoWhereClause } from '@/ui/object/filter/utils/turnFilterIntoWhereClause';
import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
import { turnFilterIntoWhereClause } from '@/ui/object/object-filter-dropdown/utils/turnFilterIntoWhereClause';
import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
import { parseDate } from '~/utils/date-utils';

View File

@ -1,20 +1,24 @@
import { FilterDropdownEntitySearchSelect } from '@/ui/object/filter/components/FilterDropdownEntitySearchSelect';
import { useFilter } from '@/ui/object/filter/hooks/useFilter';
import { ObjectFilterDropdownEntitySearchSelect } from '@/ui/object/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect';
import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
export const FilterDropdownCompanySearchSelect = () => {
const { filterDropdownSearchInput, filterDropdownSelectedEntityId } =
useFilter();
const {
objectFilterDropdownSearchInput,
objectFilterDropdownSelectedEntityId,
} = useFilter();
const usersForSelect = useFilteredSearchCompanyQuery({
searchFilter: filterDropdownSearchInput,
selectedIds: filterDropdownSelectedEntityId
? [filterDropdownSelectedEntityId]
searchFilter: objectFilterDropdownSearchInput,
selectedIds: objectFilterDropdownSelectedEntityId
? [objectFilterDropdownSelectedEntityId]
: [],
});
return (
<FilterDropdownEntitySearchSelect entitiesForSelect={usersForSelect} />
<ObjectFilterDropdownEntitySearchSelect
entitiesForSelect={usersForSelect}
/>
);
};

View File

@ -9,7 +9,7 @@ import { useBoardContextMenuEntries } from '@/ui/layout/board/hooks/useBoardCont
import { availableBoardCardFieldsScopedState } from '@/ui/layout/board/states/availableBoardCardFieldsScopedState';
import { boardCardFieldsScopedState } from '@/ui/layout/board/states/boardCardFieldsScopedState';
import { isBoardLoadedState } from '@/ui/layout/board/states/isBoardLoadedState';
import { turnFilterIntoWhereClause } from '@/ui/object/filter/utils/turnFilterIntoWhereClause';
import { turnFilterIntoWhereClause } from '@/ui/object/object-filter-dropdown/utils/turnFilterIntoWhereClause';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useView } from '@/views/hooks/useView';
import { useViewGetStates } from '@/views/hooks/useViewGetStates';

View File

@ -28,7 +28,7 @@ import { useFindOneObject } from '../hooks/useFindOneObject';
import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
import { formatMetadataFieldAsColumnDefinition } from '../utils/formatMetadataFieldAsColumnDefinition';
export const ObjectShowPage = () => {
export const RecordShowPage = () => {
const { objectNameSingular, objectId } = useParams<{
objectNameSingular: string;
objectId: string;

View File

@ -1,11 +1,11 @@
import { useEffect } from 'react';
import { turnFiltersIntoWhereClauseV2 } from '@/ui/object/filter/utils/turnFiltersIntoWhereClauseV2';
import { turnFiltersIntoWhereClauseV2 } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2';
import { turnSortsIntoOrderByV2 } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderByV2';
import { useSetRecordTableData } from '@/ui/object/record-table/hooks/useSetRecordTableData';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableFiltersScopedState } from '@/ui/object/record-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/object/record-table/states/tableSortsScopedState';
import { turnSortsIntoOrderByV2 } from '@/ui/object/sort/utils/turnSortsIntoOrderByV2';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useFindManyObjects } from '../hooks/useFindManyObjects';

View File

@ -2,9 +2,9 @@ import { gql } from '@apollo/client';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { FilterDefinition } from '@/ui/object/filter/types/FilterDefinition';
import { FilterDefinition } from '@/ui/object/object-filter-dropdown/types/FilterDefinition';
import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition';
import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
import { SortDefinition } from '@/ui/object/sort/types/SortDefinition';
import { MetadataObjectIdentifier } from '../types/MetadataObjectIdentifier';
import { formatMetadataFieldAsColumnDefinition } from '../utils/formatMetadataFieldAsColumnDefinition';

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 { MetadataObject } from '../types/MetadataObject';

View File

@ -1,4 +1,4 @@
import { SortDefinition } from '@/ui/object/sort/types/SortDefinition';
import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition';
import { MetadataObject } from '../types/MetadataObject';

View File

@ -1,19 +1,23 @@
import { useFilteredSearchPeopleQuery } from '@/people/hooks/useFilteredSearchPeopleQuery';
import { FilterDropdownEntitySearchSelect } from '@/ui/object/filter/components/FilterDropdownEntitySearchSelect';
import { useFilter } from '@/ui/object/filter/hooks/useFilter';
import { ObjectFilterDropdownEntitySearchSelect } from '@/ui/object/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect';
import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
export const FilterDropdownPeopleSearchSelect = () => {
const { filterDropdownSearchInput, filterDropdownSelectedEntityId } =
useFilter();
const {
objectFilterDropdownSearchInput,
objectFilterDropdownSelectedEntityId,
} = useFilter();
const peopleForSelect = useFilteredSearchPeopleQuery({
searchFilter: filterDropdownSearchInput,
selectedIds: filterDropdownSelectedEntityId
? [filterDropdownSelectedEntityId]
searchFilter: objectFilterDropdownSearchInput,
selectedIds: objectFilterDropdownSelectedEntityId
? [objectFilterDropdownSelectedEntityId]
: [],
});
return (
<FilterDropdownEntitySearchSelect entitiesForSelect={peopleForSelect} />
<ObjectFilterDropdownEntitySearchSelect
entitiesForSelect={peopleForSelect}
/>
);
};

View File

@ -19,7 +19,7 @@ export enum AppPath {
OpportunitiesPage = '/opportunities',
RecordTablePage = '/objects/:objectNamePlural',
ObjectShowPage = '/object/:objectNameSingular/:objectId',
RecordShowPage = '/object/:objectNameSingular/:objectId',
SettingsCatchAll = `/settings/*`,
DevelopersCatchAll = `/developers/*`,

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 = {

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

View File

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

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

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

View File

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

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

View File

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

View File

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

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 = () => {

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 = () => {

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 />}

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

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

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 (

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

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

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

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}

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,

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>

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

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,

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 />
</>
}
/>

View File

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

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,

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

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

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(() => {

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

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<

View File

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

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

View File

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

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

View File

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

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

View File

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

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 {

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

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

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

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

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

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

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

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

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

View File

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

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

View File

@ -1,19 +1,21 @@
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { FilterDropdownEntitySearchSelect } from '@/ui/object/filter/components/FilterDropdownEntitySearchSelect';
import { useFilter } from '@/ui/object/filter/hooks/useFilter';
import { ObjectFilterDropdownEntitySearchSelect } from '@/ui/object/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect';
import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
import { useSearchUserQuery } from '~/generated/graphql';
export const FilterDropdownUserSearchSelect = () => {
const { filterDropdownSearchInput, filterDropdownSelectedEntityId } =
useFilter();
const {
objectFilterDropdownSearchInput,
objectFilterDropdownSelectedEntityId,
} = useFilter();
const usersForSelect = useFilteredSearchEntityQuery({
queryHook: useSearchUserQuery,
filters: [
{
fieldNames: ['firstName', 'lastName'],
filter: filterDropdownSearchInput,
filter: objectFilterDropdownSearchInput,
},
],
orderByField: 'lastName',
@ -25,12 +27,14 @@ export const FilterDropdownUserSearchSelect = () => {
avatarUrl: user.avatarUrl ?? '',
originalEntity: user,
}),
selectedIds: filterDropdownSelectedEntityId
? [filterDropdownSelectedEntityId]
selectedIds: objectFilterDropdownSelectedEntityId
? [objectFilterDropdownSelectedEntityId]
: [],
});
return (
<FilterDropdownEntitySearchSelect entitiesForSelect={usersForSelect} />
<ObjectFilterDropdownEntitySearchSelect
entitiesForSelect={usersForSelect}
/>
);
};

View File

@ -2,11 +2,11 @@ import { ReactNode } from 'react';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { TopBar } from '@/ui/layout/top-bar/TopBar';
import { FilterDropdownButton } from '@/ui/object/filter/components/FilterDropdownButton';
import { FilterScope } from '@/ui/object/filter/scopes/FilterScope';
import { FiltersHotkeyScope } from '@/ui/object/filter/types/FiltersHotkeyScope';
import { SortDropdownButton } from '@/ui/object/sort/components/SortDropdownButton';
import { SortScope } from '@/ui/object/sort/scopes/SortScope';
import { ObjectFilterDropdownButton } from '@/ui/object/object-filter-dropdown/components/ObjectFilterDropdownButton';
import { ObjectFilterDropdownScope } from '@/ui/object/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { FiltersHotkeyScope } from '@/ui/object/object-filter-dropdown/types/FiltersHotkeyScope';
import { ObjectSortDropdownButton } from '@/ui/object/object-sort-dropdown/components/ObjectSortDropdownButton';
import { ObjectSortDropdownScope } from '@/ui/object/object-sort-dropdown/scopes/ObjectSortDropdownScope';
import { useView } from '../hooks/useView';
import { useViewGetStates } from '../hooks/useViewGetStates';
@ -36,12 +36,12 @@ export const ViewBar = ({
useViewGetStates();
return (
<FilterScope
<ObjectFilterDropdownScope
filterScopeId="view-filter"
availableFilterDefinitions={availableFilterDefinitions}
onFilterSelect={upsertViewFilter}
>
<SortScope
<ObjectSortDropdownScope
sortScopeId="view-sort"
availableSortDefinitions={availableSortDefinitions}
onSortSelect={upsertViewSort}
@ -59,11 +59,15 @@ export const ViewBar = ({
displayBottomBorder={false}
rightComponent={
<>
<FilterDropdownButton
hotkeyScope={{ scope: FiltersHotkeyScope.FilterDropdownButton }}
<ObjectFilterDropdownButton
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectFilterDropdownButton,
}}
/>
<SortDropdownButton
hotkeyScope={{ scope: FiltersHotkeyScope.SortDropdownButton }}
<ObjectSortDropdownButton
hotkeyScope={{
scope: FiltersHotkeyScope.ObjectSortDropdownButton,
}}
isPrimaryButton
/>
{optionsDropdownButton}
@ -81,7 +85,7 @@ export const ViewBar = ({
/>
}
/>
</SortScope>
</FilterScope>
</ObjectSortDropdownScope>
</ObjectFilterDropdownScope>
);
};

View File

@ -2,8 +2,8 @@ import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { IconArrowDown, IconArrowUp } from '@/ui/display/icon/index';
import { AddFilterFromDropdownButton } from '@/ui/object/filter/components/AddFilterFromDetailsButton';
import { getOperandLabelShort } from '@/ui/object/filter/utils/getOperandLabel';
import { AddObjectFilterFromDetailsButton } from '@/ui/object/object-filter-dropdown/components/AddObjectFilterFromDetailsButton';
import { getOperandLabelShort } from '@/ui/object/object-filter-dropdown/utils/getOperandLabel';
import { useView } from '../hooks/useView';
import { useViewGetStates } from '../hooks/useViewGetStates';
@ -152,7 +152,7 @@ export const ViewBarDetails = ({
</StyledChipcontainer>
{hasFilterButton && (
<StyledAddFilterContainer>
<AddFilterFromDropdownButton />
<AddObjectFilterFromDetailsButton />
</StyledAddFilterContainer>
)}
</StyledFilterContainer>

View File

@ -3,7 +3,7 @@ import { produce } from 'immer';
import { useRecoilCallback } from 'recoil';
import { useFindOneMetadataObject } from '@/metadata/hooks/useFindOneMetadataObject';
import { Filter } from '@/ui/object/filter/types/Filter';
import { Filter } from '@/ui/object/object-filter-dropdown/types/Filter';
import { currentViewFiltersScopedFamilyState } from '@/views/states/currentViewFiltersScopedFamilyState';
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
import { onViewFiltersChangeScopedState } from '@/views/states/onViewFiltersChangeScopedState';

View File

@ -3,7 +3,7 @@ import { produce } from 'immer';
import { useRecoilCallback } from 'recoil';
import { useFindOneMetadataObject } from '@/metadata/hooks/useFindOneMetadataObject';
import { Sort } from '@/ui/object/sort/types/Sort';
import { Sort } from '@/ui/object/object-sort-dropdown/types/Sort';
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
import { currentViewSortsScopedFamilyState } from '@/views/states/currentViewSortsScopedFamilyState';
import { onViewSortsChangeScopedState } from '@/views/states/onViewSortsChangeScopedState';

View File

@ -1,7 +1,7 @@
import { ReactNode } from 'react';
import { Filter } from '@/ui/object/filter/types/Filter';
import { Sort } from '@/ui/object/sort/types/Sort';
import { Filter } from '@/ui/object/object-filter-dropdown/types/Filter';
import { Sort } from '@/ui/object/object-sort-dropdown/types/Sort';
import { ViewField } from '../types/ViewField';

View File

@ -1,7 +1,7 @@
import { useEffect } from 'react';
import { Filter } from '@/ui/object/filter/types/Filter';
import { Sort } from '@/ui/object/sort/types/Sort';
import { Filter } from '@/ui/object/object-filter-dropdown/types/Filter';
import { Sort } from '@/ui/object/object-sort-dropdown/types/Sort';
import { useView } from '@/views/hooks/useView';
import { ViewField } from '@/views/types/ViewField';

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<

View File

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

View File

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

View File

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

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 { ViewFilterOperand } from './ViewFilterOperand';

View File

@ -1,5 +1,5 @@
import { SortDefinition } from '@/ui/object/sort/types/SortDefinition';
import { SortDirection } from '@/ui/object/sort/types/SortDirection';
import { SortDefinition } from '@/ui/object/object-sort-dropdown/types/SortDefinition';
import { SortDirection } from '@/ui/object/object-sort-dropdown/types/SortDirection';
export type ViewSort = {
id?: string;

View File

@ -1,4 +1,4 @@
import { Filter } from '@/ui/object/filter/types/Filter';
import { Filter } from '@/ui/object/object-filter-dropdown/types/Filter';
import { ViewFilter } from '../types/ViewFilter';

View File

@ -1,4 +1,4 @@
import { Sort } from '@/ui/object/sort/types/Sort';
import { Sort } from '@/ui/object/object-sort-dropdown/types/Sort';
import { ViewSort } from '../types/ViewSort';