2282 Rename components to use the new naming convention part 2 (#2295)
renaming part 2
This commit is contained in:
@ -1,6 +1,6 @@
|
||||
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
|
||||
|
||||
import { ObjectShowPage } from '@/metadata/components/RecordShowPage';
|
||||
import { RecordShowPage } from '@/metadata/components/RecordShowPage';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { DefaultLayout } from '@/ui/layout/page/DefaultLayout';
|
||||
@ -64,7 +64,7 @@ export const App = () => {
|
||||
|
||||
<Route path={AppPath.OpportunitiesPage} element={<Opportunities />} />
|
||||
<Route path={AppPath.RecordTablePage} element={<RecordTablePage />} />
|
||||
<Route path={AppPath.ObjectShowPage} element={<ObjectShowPage />} />
|
||||
<Route path={AppPath.RecordShowPage} element={<RecordShowPage />} />
|
||||
|
||||
<Route
|
||||
path={AppPath.SettingsCatchAll}
|
||||
|
||||
@ -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 = () => {
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -19,7 +19,7 @@ export enum AppPath {
|
||||
OpportunitiesPage = '/opportunities',
|
||||
RecordTablePage = '/objects/:objectNamePlural',
|
||||
|
||||
ObjectShowPage = '/object/:objectNameSingular/:objectId',
|
||||
RecordShowPage = '/object/:objectNameSingular/:objectId',
|
||||
|
||||
SettingsCatchAll = `/settings/*`,
|
||||
DevelopersCatchAll = `/developers/*`,
|
||||
|
||||
@ -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 = {
|
||||
|
||||
@ -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 +0,0 @@
|
||||
export const FilterDropdownId = 'filter';
|
||||
@ -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,
|
||||
};
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -1,6 +0,0 @@
|
||||
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
|
||||
|
||||
export const filterDropdownSearchInputScopedState = createScopedState<string>({
|
||||
key: 'filterDropdownSearchInputScopedState',
|
||||
defaultValue: '',
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
|
||||
|
||||
export const filterDropdownSelectedEntityIdScopedState = createScopedState<
|
||||
string | null
|
||||
>({
|
||||
key: 'filterDropdownSelectedEntityIdScopedState',
|
||||
defaultValue: null,
|
||||
});
|
||||
@ -1,6 +0,0 @@
|
||||
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
|
||||
|
||||
export const isFilterDropdownUnfoldedScopedState = createScopedState<boolean>({
|
||||
key: 'isFilterDropdownUnfoldedScopedState',
|
||||
defaultValue: false,
|
||||
});
|
||||
@ -1,4 +0,0 @@
|
||||
export enum FiltersHotkeyScope {
|
||||
FilterDropdownButton = 'filter-dropdown-button',
|
||||
SortDropdownButton = 'sort-dropdown-button',
|
||||
}
|
||||
@ -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 = () => {
|
||||
@ -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 = () => {
|
||||
@ -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 />}
|
||||
@ -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
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -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} />
|
||||
);
|
||||
@ -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 (
|
||||
@ -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);
|
||||
}}
|
||||
/>
|
||||
)
|
||||
@ -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,
|
||||
]);
|
||||
|
||||
@ -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,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}
|
||||
@ -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,
|
||||
@ -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>
|
||||
@ -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 <></>;
|
||||
}
|
||||
|
||||
@ -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,
|
||||
@ -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 />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
@ -0,0 +1 @@
|
||||
export const ObjectFilterDropdownId = 'filter';
|
||||
@ -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,
|
||||
@ -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,
|
||||
};
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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(() => {
|
||||
@ -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>();
|
||||
@ -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,0 +1,7 @@
|
||||
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
|
||||
|
||||
export const isObjectFilterDropdownOperandSelectUnfoldedScopedState =
|
||||
createScopedState<boolean>({
|
||||
key: 'isObjectFilterDropdownOperandSelectUnfoldedScopedState',
|
||||
defaultValue: false,
|
||||
});
|
||||
@ -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,
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
|
||||
|
||||
export const objectFilterDropdownSearchInputScopedState =
|
||||
createScopedState<string>({
|
||||
key: 'objectFilterDropdownSearchInputScopedState',
|
||||
defaultValue: '',
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
|
||||
|
||||
export const objectFilterDropdownSelectedEntityIdScopedState =
|
||||
createScopedState<string | null>({
|
||||
key: 'objectFilterDropdownSelectedEntityIdScopedState',
|
||||
defaultValue: null,
|
||||
});
|
||||
@ -0,0 +1,4 @@
|
||||
export enum FiltersHotkeyScope {
|
||||
ObjectFilterDropdownButton = 'filter-dropdown-button',
|
||||
ObjectSortDropdownButton = 'sort-dropdown-button',
|
||||
}
|
||||
@ -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 }}
|
||||
@ -0,0 +1 @@
|
||||
export const ObjectSortDropdownId = 'sort-dropdown';
|
||||
@ -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 {
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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 <></>;
|
||||
};
|
||||
@ -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>();
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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 +0,0 @@
|
||||
export const SortDropdownId = 'sort-dropdown';
|
||||
@ -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 <></>;
|
||||
};
|
||||
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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<
|
||||
|
||||
@ -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<
|
||||
|
||||
@ -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<
|
||||
|
||||
@ -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<
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user