Chore/move records related to record folder (#2859)
* WIP * Finished multi select filter * Cleaned console log * Fix naming * Fixed naming * Moved RelationPicker folder * Moved EntitySelect components * Moved story * Moved RelationPicker non component folders * Moved everything else
This commit is contained in:
Lucas Bordeau
@ -1,7 +1,7 @@
|
||||
import { ChangeEvent } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { StyledInput } from '@/ui/object/field/meta-types/input/components/internal/TextInput';
|
||||
import { StyledInput } from '@/object-record/field/meta-types/input/components/internal/TextInput';
|
||||
import { ComputeNodeDimensions } from '@/ui/utilities/dimensions/components/ComputeNodeDimensions';
|
||||
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
|
||||
|
||||
|
||||
@ -1,97 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useQuery } from '@apollo/client';
|
||||
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
|
||||
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
|
||||
import { IconForbid } from '@/ui/display/icon';
|
||||
import { useRelationPicker } from '@/ui/input/components/internal/relation-picker/hooks/useRelationPicker';
|
||||
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
|
||||
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
|
||||
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
|
||||
import { FieldDefinition } from '@/ui/object/field/types/FieldDefinition';
|
||||
import { FieldRelationMetadata } from '@/ui/object/field/types/FieldMetadata';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
|
||||
export type RelationPickerProps = {
|
||||
recordId?: string;
|
||||
onSubmit: (newUser: EntityForSelect | null) => void;
|
||||
onCancel?: () => void;
|
||||
width?: number;
|
||||
excludeRecordIds?: string[];
|
||||
initialSearchFilter?: string | null;
|
||||
fieldDefinition: FieldDefinition<FieldRelationMetadata>;
|
||||
};
|
||||
|
||||
export const RelationPicker = ({
|
||||
recordId,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
excludeRecordIds,
|
||||
width,
|
||||
initialSearchFilter,
|
||||
fieldDefinition,
|
||||
}: RelationPickerProps) => {
|
||||
const [relationPickerSearchFilter, setRelationPickerSearchFilter] =
|
||||
useRecoilScopedState(relationPickerSearchFilterScopedState);
|
||||
|
||||
useEffect(() => {
|
||||
setRelationPickerSearchFilter(initialSearchFilter ?? '');
|
||||
}, [initialSearchFilter, setRelationPickerSearchFilter]);
|
||||
|
||||
// TODO: refactor useFilteredSearchEntityQuery
|
||||
const { findManyRecordsQuery } = useObjectMetadataItem({
|
||||
objectNameSingular:
|
||||
fieldDefinition.metadata.relationObjectMetadataNameSingular,
|
||||
});
|
||||
|
||||
const useFindManyQuery = (options: any) =>
|
||||
useQuery(findManyRecordsQuery, options);
|
||||
|
||||
const { identifiersMapper, searchQuery } = useRelationPicker();
|
||||
|
||||
const { objectNameSingular: relationObjectNameSingular } =
|
||||
useObjectNameSingularFromPlural({
|
||||
objectNamePlural:
|
||||
fieldDefinition.metadata.relationObjectMetadataNamePlural,
|
||||
});
|
||||
|
||||
const records = useFilteredSearchEntityQuery({
|
||||
queryHook: useFindManyQuery,
|
||||
filters: [
|
||||
{
|
||||
fieldNames:
|
||||
searchQuery?.computeFilterFields?.(
|
||||
fieldDefinition.metadata.relationObjectMetadataNameSingular,
|
||||
) ?? [],
|
||||
filter: relationPickerSearchFilter,
|
||||
},
|
||||
],
|
||||
orderByField: 'createdAt',
|
||||
mappingFunction: (record: any) =>
|
||||
identifiersMapper?.(
|
||||
record,
|
||||
fieldDefinition.metadata.relationObjectMetadataNameSingular,
|
||||
),
|
||||
selectedIds: recordId ? [recordId] : [],
|
||||
excludeEntityIds: excludeRecordIds,
|
||||
objectNameSingular: relationObjectNameSingular,
|
||||
});
|
||||
|
||||
const handleEntitySelected = async (selectedUser: any | null | undefined) => {
|
||||
onSubmit(selectedUser ?? null);
|
||||
};
|
||||
|
||||
return (
|
||||
<SingleEntitySelect
|
||||
EmptyIcon={IconForbid}
|
||||
emptyLabel={'No ' + fieldDefinition.label}
|
||||
entitiesToSelect={records.entitiesToSelect}
|
||||
loading={records.loading}
|
||||
onCancel={onCancel}
|
||||
onEntitySelected={handleEntitySelected}
|
||||
selectedEntity={records.selectedEntities[0]}
|
||||
width={width}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -1,28 +0,0 @@
|
||||
import { getRelationPickerScopedStates } from '@/ui/input/components/internal/relation-picker/utils/getRelationPickerScopedStates';
|
||||
import { RecordTableScopeInternalContext } from '@/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
|
||||
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
|
||||
|
||||
export const useRelationPickerScopedStates = (args?: {
|
||||
relationPickerScopedId?: string;
|
||||
}) => {
|
||||
const { relationPickerScopedId } = args ?? {};
|
||||
|
||||
const scopeId = useAvailableScopeIdOrThrow(
|
||||
RecordTableScopeInternalContext,
|
||||
relationPickerScopedId,
|
||||
);
|
||||
|
||||
const { identifiersMapperState } = getRelationPickerScopedStates({
|
||||
relationPickerScopeId: scopeId,
|
||||
});
|
||||
|
||||
const { searchQueryState } = getRelationPickerScopedStates({
|
||||
relationPickerScopeId: scopeId,
|
||||
});
|
||||
|
||||
return {
|
||||
scopeId,
|
||||
identifiersMapperState,
|
||||
searchQueryState,
|
||||
};
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
import { useRecoilState } from 'recoil';
|
||||
|
||||
import { useRelationPickerScopedStates } from '@/ui/input/components/internal/relation-picker/hooks/internal/useRelationPickerScopedStates';
|
||||
import { RelationPickerScopeInternalContext } from '@/ui/input/components/internal/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
|
||||
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
|
||||
|
||||
type useRelationPickeProps = {
|
||||
relationPickerScopeId?: string;
|
||||
};
|
||||
|
||||
export const useRelationPicker = (props?: useRelationPickeProps) => {
|
||||
const scopeId = useAvailableScopeIdOrThrow(
|
||||
RelationPickerScopeInternalContext,
|
||||
props?.relationPickerScopeId,
|
||||
);
|
||||
|
||||
const { identifiersMapperState, searchQueryState } =
|
||||
useRelationPickerScopedStates({
|
||||
relationPickerScopedId: scopeId,
|
||||
});
|
||||
|
||||
const [identifiersMapper, setIdentifiersMapper] = useRecoilState(
|
||||
identifiersMapperState,
|
||||
);
|
||||
|
||||
const [searchQuery, setSearchQuery] = useRecoilState(searchQueryState);
|
||||
|
||||
return {
|
||||
scopeId,
|
||||
identifiersMapper,
|
||||
setIdentifiersMapper,
|
||||
searchQuery,
|
||||
setSearchQuery,
|
||||
};
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { RelationPickerScopeInternalContext } from '@/ui/input/components/internal/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
|
||||
|
||||
type RelationPickerScopeProps = {
|
||||
children: ReactNode;
|
||||
relationPickerScopeId: string;
|
||||
};
|
||||
|
||||
export const RelationPickerScope = ({
|
||||
children,
|
||||
relationPickerScopeId,
|
||||
}: RelationPickerScopeProps) => {
|
||||
return (
|
||||
<RelationPickerScopeInternalContext.Provider
|
||||
value={{ scopeId: relationPickerScopeId }}
|
||||
>
|
||||
{children}
|
||||
</RelationPickerScopeInternalContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -1,7 +0,0 @@
|
||||
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
|
||||
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
|
||||
|
||||
type RelationPickerScopeInternalContextProps = ScopedStateKey;
|
||||
|
||||
export const RelationPickerScopeInternalContext =
|
||||
createScopeInternalContext<RelationPickerScopeInternalContextProps>();
|
||||
@ -1,8 +0,0 @@
|
||||
import { IdentifiersMapper } from '@/ui/input/components/internal/relation-picker/types/IdentifiersMapper';
|
||||
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
|
||||
|
||||
export const identifiersMapperScopedState =
|
||||
createScopedState<IdentifiersMapper | null>({
|
||||
key: 'identifiersMapperScopedState',
|
||||
defaultValue: null,
|
||||
});
|
||||
@ -1,7 +0,0 @@
|
||||
import { SearchQuery } from '@/ui/input/components/internal/relation-picker/types/SearchQuery';
|
||||
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
|
||||
|
||||
export const searchQueryScopedState = createScopedState<SearchQuery | null>({
|
||||
key: 'searchQueryScopedState',
|
||||
defaultValue: null,
|
||||
});
|
||||
@ -1,14 +0,0 @@
|
||||
import { AvatarType } from '@/users/components/Avatar';
|
||||
|
||||
type RecordMappedToIdentifiers = {
|
||||
id: string;
|
||||
name: string;
|
||||
avatarUrl?: string;
|
||||
avatarType: AvatarType;
|
||||
record: any;
|
||||
};
|
||||
|
||||
export type IdentifiersMapper = (
|
||||
record: any,
|
||||
relationPickerType: string,
|
||||
) => RecordMappedToIdentifiers | undefined;
|
||||
@ -1,3 +0,0 @@
|
||||
export type SearchQuery = {
|
||||
computeFilterFields: (relationPickerType: string) => string[];
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
import { identifiersMapperScopedState } from '@/ui/input/components/internal/relation-picker/states/identifiersMapperScopedState';
|
||||
import { searchQueryScopedState } from '@/ui/input/components/internal/relation-picker/states/searchQueryScopedState';
|
||||
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
|
||||
|
||||
export const getRelationPickerScopedStates = ({
|
||||
relationPickerScopeId,
|
||||
}: {
|
||||
relationPickerScopeId: string;
|
||||
}) => {
|
||||
const identifiersMapperState = getScopedState(
|
||||
identifiersMapperScopedState,
|
||||
relationPickerScopeId,
|
||||
);
|
||||
|
||||
const searchQueryState = getScopedState(
|
||||
searchQueryScopedState,
|
||||
relationPickerScopeId,
|
||||
);
|
||||
|
||||
return {
|
||||
identifiersMapperState,
|
||||
searchQueryState,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user