twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-27 11:03:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Feat/activities custom objects (#3213)

Browse Source 
* WIP

* WIP - MultiObjectSearch

* WIP

* WIP

* Finished working version

* Fix

* Fixed and cleaned

* Fix

* Disabled files and emails for custom objects

* Cleaned console.log

* Fixed attachment

* Fixed

* fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau 2024-01-05 09:08:33 +01:00 committed by GitHub
parent c15e138d72
commit b112b74022
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
72 changed files with 1611 additions and 551 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx
View File

@ -1,8 +1,7 @@
import styled from '@emotion/styled';
import { CompanyChip } from '@/companies/components/CompanyChip';
import { PersonChip } from '@/people/components/PersonChip';
import { getLogoUrlFromDomainName } from '~/utils';
import { ActivityTargetObjectRecord } from '@/activities/types/ActivityTargetObject';
import { RecordChip } from '@/object-record/components/RecordChip';
const StyledContainer = styled.div`
display: flex;
@ -10,37 +9,21 @@ const StyledContainer = styled.div`
gap: ${({ theme }) => theme.spacing(1)};
`;
// TODO: fix edges pagination formatting on n+N
export const ActivityTargetChips = ({ targets }: { targets?: any }) => {
if (!targets) {
return null;
}
export const ActivityTargetChips = ({
activityTargetObjectRecords,
}: {
activityTargetObjectRecords: ActivityTargetObjectRecord[];
}) => {
return (
<StyledContainer>
{targets?.map(({ company, person }: any) => {
if (company) {
return (
<CompanyChip
key={company.id}
id={company.id}
name={company.name}
avatarUrl={getLogoUrlFromDomainName(company.domainName)}
/>
);
{activityTargetObjectRecords?.map((activityTargetObjectRecord) => (
<RecordChip
record={activityTargetObjectRecord.targetObjectRecord}
objectNameSingular={
activityTargetObjectRecord.targetObjectMetadataItem.nameSingular
}
if (person) {
return (
<PersonChip
key={person.id}
id={person.id}
name={person.name.firstName + ' ' + person.name.lastName}
avatarUrl={person.avatarUrl ?? undefined}
/>
);
}
return <></>;
})}
))}
</StyledContainer>
);
};

10
packages/twenty-front/src/modules/activities/emails/components/Threads.tsx
View File

@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import { ThreadPreview } from '@/activities/emails/components/ThreadPreview';
import { getTimelineThreadsFromCompanyId } from '@/activities/emails/queries/getTimelineThreadsFromCompanyId';
import { getTimelineThreadsFromPersonId } from '@/activities/emails/queries/getTimelineThreadsFromPersonId';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import {
H1Title,
H1TitleFontColor,
@ -29,14 +29,14 @@ const StyledEmailCount = styled.span`
color: ${({ theme }) => theme.font.color.light};
`;
export const Threads = ({ entity }: { entity: ActivityTargetableEntity }) => {
export const Threads = ({ entity }: { entity: ActivityTargetableObject }) => {
const threadQuery =
entity.type === 'Person'
entity.targetObjectNameSingular === 'person'
? getTimelineThreadsFromPersonId
: getTimelineThreadsFromCompanyId;
const threadQueryVariables =
entity.type === 'Person'
entity.targetObjectNameSingular === 'person'
? { personId: entity.id }
: { companyId: entity.id };
@ -50,7 +50,7 @@ export const Threads = ({ entity }: { entity: ActivityTargetableEntity }) => {
const timelineThreads: TimelineThread[] =
threads.data[
entity.type === 'Person'
entity.targetObjectNameSingular === 'Person'
? 'getTimelineThreadsFromPersonId'
: 'getTimelineThreadsFromCompanyId'
];

2
packages/twenty-front/src/modules/activities/emails/components/__stories__/Threads.stories.tsx
View File

@ -7,7 +7,7 @@ const meta: Meta<typeof Threads> = {
component: Threads,
args: {
entity: {
type: 'Person',
targetObjectNameSingular: 'person',
id: '52ba3fd0-c723-4482-8b11-5fc24a587c71',
},
},

29
packages/twenty-front/src/modules/activities/files/components/Attachments.tsx
View File

@ -1,12 +1,14 @@
import { ChangeEvent, useRef } from 'react';
import styled from '@emotion/styled';
import { isNonEmptyArray } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
import { AttachmentList } from '@/activities/files/components/AttachmentList';
import { useAttachments } from '@/activities/files/hooks/useAttachments';
import { Attachment } from '@/activities/files/types/Attachment';
import { getFileType } from '@/activities/files/utils/getFileType';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
@ -56,13 +58,13 @@ const StyledFileInput = styled.input`
`;
export const Attachments = ({
targetableEntity,
targetableObject,
}: {
targetableEntity: ActivityTargetableEntity;
targetableObject: ActivityTargetableObject;
}) => {
const inputFileRef = useRef<HTMLInputElement>(null);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { attachments } = useAttachments(targetableEntity);
const { attachments } = useAttachments(targetableObject);
const [uploadFile] = useUploadFileMutation();
@ -92,22 +94,23 @@ export const Attachments = ({
if (!attachmentUrl) {
return;
}
if (!createOneAttachment) {
return;
}
await createOneAttachment({
const targetableObjectFieldIdName = getActivityTargetObjectFieldIdName({
nameSingular: targetableObject.targetObjectNameSingular,
});
const attachmentToCreate = {
authorId: currentWorkspaceMember?.id,
name: file.name,
fullPath: attachmentUrl,
type: getFileType(file.name),
companyId:
targetableEntity.type === 'Company' ? targetableEntity.id : null,
personId: targetableEntity.type === 'Person' ? targetableEntity.id : null,
});
[targetableObjectFieldIdName]: targetableObject.id,
};
if (attachments?.length === 0 && targetableEntity.type !== 'Custom') {
await createOneAttachment(attachmentToCreate);
};
if (!isNonEmptyArray(attachments)) {
return (
<StyledTaskGroupEmptyContainer>
<StyledFileInput

14
packages/twenty-front/src/modules/activities/files/hooks/useAttachments.tsx
View File

@ -1,15 +1,21 @@
import { Attachment } from '@/activities/files/types/Attachment';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { ActivityTargetableEntity } from '../../types/ActivityTargetableEntity';
// do we need to test this?
export const useAttachments = (entity: ActivityTargetableEntity) => {
export const useAttachments = (targetableObject: ActivityTargetableObject) => {
const targetableObjectFieldIdName = getActivityTargetObjectFieldIdName({
nameSingular: targetableObject.targetObjectNameSingular,
});
const { records: attachments } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.Attachment,
filter: {
[entity.type === 'Company' ? 'companyId' : 'personId']: { eq: entity.id },
[targetableObjectFieldIdName]: {
eq: targetableObject.id,
},
},
orderBy: {
createdAt: 'DescNullsFirst',

55
packages/twenty-front/src/modules/activities/hooks/useActivityTargetObjectRecords.ts Normal file
View File

@ -0,0 +1,55 @@
import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { ActivityTargetObjectRecord } from '@/activities/types/ActivityTargetObject';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { Nullable } from '~/types/Nullable';
import { isDefined } from '~/utils/isDefined';
export const useActivityTargetObjectRecords = ({
activityId,
}: {
activityId: string;
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const { records: activityTargets } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
filter: {
activityId: {
eq: activityId,
},
},
});
const activityTargetObjectRecords = useMemo(() => {
return activityTargets
.map<Nullable<ActivityTargetObjectRecord>>((activityTarget) => {
const correspondingObjectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) =>
isDefined(activityTarget[objectMetadataItem.nameSingular]) &&
!objectMetadataItem.isSystem,
);
if (!correspondingObjectMetadataItem) {
return null;
}
return {
activityTargetRecord: activityTarget,
targetObjectRecord:
activityTarget[correspondingObjectMetadataItem.nameSingular],
targetObjectMetadataItem: correspondingObjectMetadataItem,
targetObjectNameSingular:
correspondingObjectMetadataItem.nameSingular,
};
})
.filter(isDefined);
}, [activityTargets, objectMetadataItems]);
return {
activityTargetObjectRecords,
};
};

28
packages/twenty-front/src/modules/activities/hooks/useActivityTargets.ts Normal file
View File

@ -0,0 +1,28 @@
import { ActivityTarget } from '@/activities/types/ActivityTarget';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
export const useActivityTargets = ({
targetableObject,
}: {
targetableObject: ActivityTargetableObject;
}) => {
const targetObjectFieldName = getActivityTargetObjectFieldIdName({
nameSingular: targetableObject.targetObjectNameSingular,
});
const { records: activityTargets } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
filter: {
[targetObjectFieldName]: {
eq: targetableObject.id,
},
},
});
return {
activityTargets: activityTargets as ActivityTarget[],
};
};

46
packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
View File

@ -4,8 +4,10 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { Activity, ActivityType } from '@/activities/types/Activity';
import { ActivityTarget } from '@/activities/types/ActivityTarget';
import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
@ -14,13 +16,13 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
import { activityTargetableEntityArrayState } from '../states/activityTargetableEntityArrayState';
import { viewableActivityIdState } from '../states/viewableActivityIdState';
import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity';
import { getTargetableEntitiesWithParents } from '../utils/getTargetableEntitiesWithParents';
import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
import { flattenTargetableObjectsAndTheirRelatedTargetableObjects } from '../utils/flattenTargetableObjectsAndTheirRelatedTargetableObjects';
export const useOpenCreateActivityDrawer = () => {
const { openRightDrawer } = useRightDrawer();
const { createOneRecord: createOneActivityTarget } =
useCreateOneRecord<ActivityTarget>({
const { createManyRecords: createManyActivityTargets } =
useCreateManyRecords<ActivityTarget>({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
});
const { createOneRecord: createOneActivity } = useCreateOneRecord<Activity>({
@ -37,15 +39,17 @@ export const useOpenCreateActivityDrawer = () => {
return useCallback(
async ({
type,
targetableEntities,
targetableObjects,
assigneeId,
}: {
type: ActivityType;
targetableEntities?: ActivityTargetableEntity[];
targetableObjects?: ActivityTargetableObject[];
assigneeId?: string;
}) => {
const targetableEntitiesWithRelations = targetableEntities
? getTargetableEntitiesWithParents(targetableEntities)
const flattenedTargetableObjects = targetableObjects
? flattenTargetableObjectsAndTheirRelatedTargetableObjects(
targetableObjects,
)
: [];
const createdActivity = await createOneActivity?.({
@ -61,21 +65,25 @@ export const useOpenCreateActivityDrawer = () => {
return;
}
await Promise.all(
targetableEntitiesWithRelations.map(async (targetableEntity) => {
await createOneActivityTarget?.({
companyId:
targetableEntity.type === 'Company' ? targetableEntity.id : null,
personId:
targetableEntity.type === 'Person' ? targetableEntity.id : null,
activityId: createdActivity.id,
const activityTargetsToCreate = flattenedTargetableObjects.map(
(targetableObject) => {
const targetableObjectFieldIdName =
getActivityTargetObjectFieldIdName({
nameSingular: targetableObject.targetObjectNameSingular,
});
}),
return {
[targetableObjectFieldIdName]: targetableObject.id,
activityId: createdActivity.id,
};
},
);
await createManyActivityTargets(activityTargetsToCreate);
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
setViewableActivityId(createdActivity.id);
setActivityTargetableEntityArray(targetableEntities ?? []);
setActivityTargetableEntityArray(targetableObjects ?? []);
openRightDrawer(RightDrawerPages.CreateActivity);
},
[
@ -84,7 +92,7 @@ export const useOpenCreateActivityDrawer = () => {
setHotkeyScope,
setViewableActivityId,
createOneActivity,
createOneActivityTarget,
createManyActivityTargets,
currentWorkspaceMember,
],
);

18
packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts
View File

@ -4,10 +4,7 @@ import { ActivityType } from '@/activities/types/Activity';
import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates';
import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector';
import {
ActivityTargetableEntity,
ActivityTargetableEntityType,
} from '../types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer';
@ -25,8 +22,8 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
({ snapshot }) =>
(
type: ActivityType,
entityType: ActivityTargetableEntityType,
relatedEntities?: ActivityTargetableEntity[],
objectNameSingular: string,
relatedEntities?: ActivityTargetableObject[],
) => {
const selectedRowIds =
injectSelectorSnapshotValueWithRecordTableScopeId(
@ -34,18 +31,21 @@ export const useOpenCreateActivityDrawerForSelectedRowIds = (
selectedRowIdsScopeInjector,
);
let activityTargetableEntityArray: ActivityTargetableEntity[] =
let activityTargetableEntityArray: ActivityTargetableObject[] =
selectedRowIds.map((id: string) => ({
type: entityType,
type: 'Custom',
targetObjectNameSingular: objectNameSingular,
id,
}));
if (relatedEntities) {
activityTargetableEntityArray =
activityTargetableEntityArray.concat(relatedEntities);
}
openCreateActivityDrawer({
type,
targetableEntities: activityTargetableEntityArray,
targetableObjects: activityTargetableEntityArray,
});
},
[

198
packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
View File

@ -1,22 +1,15 @@
import { useCallback, useMemo, useState } from 'react';
import { useQuery } from '@apollo/client';
import styled from '@emotion/styled';
import { v4 } from 'uuid';
import { useHandleCheckableActivityTargetChange } from '@/activities/hooks/useHandleCheckableActivityTargetChange';
import { ActivityTarget } from '@/activities/types/ActivityTarget';
import { flatMapAndSortEntityForSelectArrayOfArrayByName } from '@/activities/utils/flatMapAndSortEntityForSelectArrayByName';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ActivityTargetObjectRecord } from '@/activities/types/ActivityTargetObject';
import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
import { MultipleEntitySelect } from '@/object-record/relation-picker/components/MultipleEntitySelect';
import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { assertNotNull } from '~/utils/assert';
type ActivityTargetInlineCellEditModeProps = {
activityId: string;
activityTargets: Array<Pick<ActivityTarget, 'id' | 'personId' | 'companyId'>>;
};
import { MultipleObjectRecordSelect } from '@/object-record/relation-picker/components/MultipleObjectRecordSelect';
import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
const StyledSelectContainer = styled.div`
left: 0px;
@ -24,125 +17,77 @@ const StyledSelectContainer = styled.div`
top: -8px;
`;
type ActivityTargetInlineCellEditModeProps = {
activityId: string;
activityTargetObjectRecords: ActivityTargetObjectRecord[];
};
export const ActivityTargetInlineCellEditMode = ({
activityId,
activityTargets,
activityTargetObjectRecords,
}: ActivityTargetInlineCellEditModeProps) => {
const [searchFilter, setSearchFilter] = useState('');
const initialPeopleIds = useMemo(
() =>
activityTargets
?.filter(({ personId }) => personId !== null)
.map(({ personId }) => personId)
.filter(assertNotNull) ?? [],
[activityTargets],
const selectedObjectRecordIds = activityTargetObjectRecords.map(
(activityTarget) => ({
objectNameSingular: activityTarget.targetObjectNameSingular,
id: activityTarget.targetObjectRecord.id,
}),
);
const initialCompanyIds = useMemo(
() =>
activityTargets
?.filter(({ companyId }) => companyId !== null)
.map(({ companyId }) => companyId)
.filter(assertNotNull) ?? [],
[activityTargets],
);
const initialSelectedEntityIds = useMemo(
() =>
[...initialPeopleIds, ...initialCompanyIds].reduce<
Record<string, boolean>
>((result, entityId) => ({ ...result, [entityId]: true }), {}),
[initialPeopleIds, initialCompanyIds],
);
const { findManyRecordsQuery: findManyPeopleQuery } = useObjectMetadataItem({
objectNameSingular: CoreObjectNameSingular.Person,
const { createManyRecords: createManyActivityTargets } =
useCreateManyRecords<ActivityTarget>({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
});
const { findManyRecordsQuery: findManyCompaniesQuery } =
useObjectMetadataItem({
objectNameSingular: CoreObjectNameSingular.Company,
});
const useFindManyPeopleQuery = (options: any) =>
useQuery(findManyPeopleQuery, options);
const useFindManyCompaniesQuery = (options: any) =>
useQuery(findManyCompaniesQuery, options);
const [selectedEntityIds, setSelectedEntityIds] = useState<
Record<string, boolean>
>(initialSelectedEntityIds);
const { identifiersMapper, searchQuery } = useRelationPicker();
const people = useFilteredSearchEntityQuery({
queryHook: useFindManyPeopleQuery,
filters: [
const { deleteManyRecords: deleteManyActivityTargets } = useDeleteManyRecords(
{
fieldNames: searchQuery?.computeFilterFields?.('person') ?? [],
filter: searchFilter,
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
},
],
orderByField: 'createdAt',
mappingFunction: (record: any) => identifiersMapper?.(record, 'person'),
selectedIds: initialPeopleIds,
objectNameSingular: CoreObjectNameSingular.Person,
limit: 3,
});
);
const companies = useFilteredSearchEntityQuery({
queryHook: useFindManyCompaniesQuery,
filters: [
{
fieldNames: searchQuery?.computeFilterFields?.('company') ?? [],
filter: searchFilter,
},
],
orderByField: 'createdAt',
mappingFunction: (record: any) => identifiersMapper?.(record, 'company'),
selectedIds: initialCompanyIds,
objectNameSingular: CoreObjectNameSingular.Company,
limit: 3,
});
const selectedEntities = flatMapAndSortEntityForSelectArrayOfArrayByName([
people.selectedEntities,
companies.selectedEntities,
]);
const filteredSelectedEntities =
flatMapAndSortEntityForSelectArrayOfArrayByName([
people.filteredSelectedEntities,
companies.filteredSelectedEntities,
]);
const entitiesToSelect = flatMapAndSortEntityForSelectArrayOfArrayByName([
people.entitiesToSelect,
companies.entitiesToSelect,
]);
const handleCheckItemsChange = useHandleCheckableActivityTargetChange({
activityId,
currentActivityTargets: activityTargets,
});
const { closeInlineCell: closeEditableField } = useInlineCell();
const handleSubmit = useCallback(() => {
handleCheckItemsChange(
selectedEntityIds,
entitiesToSelect,
selectedEntities,
);
const handleSubmit = async (selectedRecords: ObjectRecordForSelect[]) => {
closeEditableField();
}, [
closeEditableField,
entitiesToSelect,
handleCheckItemsChange,
selectedEntities,
selectedEntityIds,
]);
const activityTargetRecordsToDelete = activityTargetObjectRecords.filter(
(activityTargetObjectRecord) =>
!selectedRecords.some(
(selectedRecord) =>
selectedRecord.recordIdentifier.id ===
activityTargetObjectRecord.targetObjectRecord.id,
),
);
const activityTargetRecordsToCreate = selectedRecords.filter(
(selectedRecord) =>
!activityTargetObjectRecords.some(
(activityTargetObjectRecord) =>
activityTargetObjectRecord.targetObjectRecord.id ===
selectedRecord.recordIdentifier.id,
),
);
if (activityTargetRecordsToCreate.length > 0) {
await createManyActivityTargets(
activityTargetRecordsToCreate.map((selectedRecord) => ({
id: v4(),
activityId,
[getActivityTargetObjectFieldIdName({
nameSingular: selectedRecord.objectMetadataItem.nameSingular,
})]: selectedRecord.recordIdentifier.id,
})),
);
}
if (activityTargetRecordsToDelete.length > 0) {
await deleteManyActivityTargets(
activityTargetRecordsToDelete.map(
(activityTargetObjectRecord) =>
activityTargetObjectRecord.activityTargetRecord.id,
),
);
}
};
const handleCancel = () => {
closeEditableField();
@ -150,17 +95,8 @@ export const ActivityTargetInlineCellEditMode = ({
return (
<StyledSelectContainer>
<MultipleEntitySelect
entities={{
entitiesToSelect,
filteredSelectedEntities,
selectedEntities,
loading: false,
}}
onChange={setSelectedEntityIds}
onSearchFilterChange={setSearchFilter}
searchFilter={searchFilter}
value={selectedEntityIds}
<MultipleObjectRecordSelect
selectedObjectRecordIds={selectedObjectRecordIds}
onCancel={handleCancel}
onSubmit={handleSubmit}
/>

21
packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx
View File

@ -1,9 +1,8 @@
import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
import { ActivityTarget } from '@/activities/types/ActivityTarget';
import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { RecordInlineCellContainer } from '@/object-record/record-inline-cell/components/RecordInlineCellContainer';
import { FieldRecoilScopeContext } from '@/object-record/record-inline-cell/states/recoil-scope-contexts/FieldRecoilScopeContext';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
@ -23,14 +22,8 @@ type ActivityTargetsInlineCellProps = {
export const ActivityTargetsInlineCell = ({
activity,
}: ActivityTargetsInlineCellProps) => {
const activityTargetIds =
activity?.activityTargets?.edges?.map(
(activityTarget) => activityTarget.node.id,
) ?? [];
const { records: activityTargets } = useFindManyRecords<ActivityTarget>({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
filter: { id: { in: activityTargetIds } },
const { activityTargetObjectRecords } = useActivityTargetObjectRecords({
activityId: activity?.id ?? '',
});
return (
@ -44,11 +37,15 @@ export const ActivityTargetsInlineCell = ({
editModeContent={
<ActivityTargetInlineCellEditMode
activityId={activity?.id ?? ''}
activityTargets={activityTargets as any}
activityTargetObjectRecords={activityTargetObjectRecords as any}
/>
}
label="Relations"
displayModeContent={<ActivityTargetChips targets={activityTargets} />}
displayModeContent={
<ActivityTargetChips
activityTargetObjectRecords={activityTargetObjectRecords}
/>
}
isDisplayModeContentEmpty={
activity?.activityTargets?.edges?.length === 0
}

16
packages/twenty-front/src/modules/activities/notes/components/Notes.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { NoteList } from '@/activities/notes/components/NoteList';
import { useNotes } from '@/activities/notes/hooks/useNotes';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
@ -44,12 +44,16 @@ const StyledNotesContainer = styled.div`
overflow: auto;
`;
export const Notes = ({ entity }: { entity: ActivityTargetableEntity }) => {
const { notes } = useNotes(entity);
export const Notes = ({
targetableObject,
}: {
targetableObject: ActivityTargetableObject;
}) => {
const { notes } = useNotes(targetableObject);
const openCreateActivity = useOpenCreateActivityDrawer();
if (notes?.length === 0 && entity.type !== 'Custom') {
if (notes?.length === 0) {
return (
<StyledTaskGroupEmptyContainer>
<StyledEmptyTaskGroupTitle>No note yet</StyledEmptyTaskGroupTitle>
@ -61,7 +65,7 @@ export const Notes = ({ entity }: { entity: ActivityTargetableEntity }) => {
onClick={() =>
openCreateActivity({
type: 'Note',
targetableEntities: [entity],
targetableObjects: [targetableObject],
})
}
/>
@ -83,7 +87,7 @@ export const Notes = ({ entity }: { entity: ActivityTargetableEntity }) => {
onClick={() =>
openCreateActivity({
type: 'Note',
targetableEntities: [entity],
targetableObjects: [targetableObject],
})
}
></Button>

13
packages/twenty-front/src/modules/activities/notes/hooks/useNotes.ts
View File

@ -1,17 +1,13 @@
import { useActivityTargets } from '@/activities/hooks/useActivityTargets';
import { Note } from '@/activities/types/Note';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { OrderByField } from '@/object-metadata/types/OrderByField';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { ActivityTargetableEntity } from '../../types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '../../types/ActivityTargetableEntity';
export const useNotes = (entity: ActivityTargetableEntity) => {
const { records: activityTargets } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
filter: {
[entity.type === 'Company' ? 'companyId' : 'personId']: { eq: entity.id },
},
});
export const useNotes = (targetableObject: ActivityTargetableObject) => {
const { activityTargets } = useActivityTargets({ targetableObject });
const filter = {
id: {
@ -19,6 +15,7 @@ export const useNotes = (entity: ActivityTargetableEntity) => {
},
type: { eq: 'Note' },
};
const orderBy = {
createdAt: 'AscNullsFirst',
} as OrderByField;

4
packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
View File

@ -1,9 +1,9 @@
import { atom } from 'recoil';
import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
export const activityTargetableEntityArrayState = atom<
ActivityTargetableEntity[]
ActivityTargetableObject[]
>({
key: 'activities/targetable-entity-array',
default: [],

7
packages/twenty-front/src/modules/activities/tasks/__stories__/TaskGroups.stories.tsx
View File

@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
@ -35,9 +36,11 @@ export const Empty: Story = {};
export const WithTasks: Story = {
args: {
entity: {
targetableObjects: [
{
id: mockedTasks[0].authorId,
type: 'Person',
targetObjectNameSingular: 'person',
},
] as ActivityTargetableObject[],
},
};

12
packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx
View File

@ -1,16 +1,18 @@
import { isNonEmptyArray } from '@sniptt/guards';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
export const AddTaskButton = ({
activityTargetEntity,
activityTargetableObjects,
}: {
activityTargetEntity?: ActivityTargetableEntity;
activityTargetableObjects?: ActivityTargetableObject[];
}) => {
const openCreateActivity = useOpenCreateActivityDrawer();
if (!activityTargetEntity) {
if (!isNonEmptyArray(activityTargetableObjects)) {
return <></>;
}
@ -23,7 +25,7 @@ export const AddTaskButton = ({
onClick={() =>
openCreateActivity({
type: 'Task',
targetableEntities: [activityTargetEntity],
targetableObjects: activityTargetableObjects,
})
}
></Button>

10
packages/twenty-front/src/modules/activities/tasks/components/EntityTasks.tsx → packages/twenty-front/src/modules/activities/tasks/components/ObjectTasks.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
@ -14,16 +14,16 @@ const StyledContainer = styled.div`
overflow: auto;
`;
export const EntityTasks = ({
entity,
export const ObjectTasks = ({
targetableObject,
}: {
entity: ActivityTargetableEntity;
targetableObject: ActivityTargetableObject;
}) => {
return (
<StyledContainer>
<RecoilScope CustomRecoilScopeContext={TasksRecoilScopeContext}>
<ObjectFilterDropdownScope filterScopeId="entity-tasks-filter-scope">
<TaskGroups entity={entity} showAddButton />
<TaskGroups targetableObjects={[targetableObject]} showAddButton />
</ObjectFilterDropdownScope>
</RecoilScope>
</StyledContainer>

39
packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
import { useTasks } from '@/activities/tasks/hooks/useTasks';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import { activeTabIdScopedState } from '@/ui/layout/tab/states/activeTabIdScopedState';
@ -12,12 +12,6 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
import { AddTaskButton } from './AddTaskButton';
import { TaskList } from './TaskList';
type TaskGroupsProps = {
filterDropdownId?: string;
entity?: ActivityTargetableEntity;
showAddButton?: boolean;
};
const StyledTaskGroupEmptyContainer = styled.div`
align-items: center;
align-self: stretch;
@ -52,9 +46,15 @@ const StyledContainer = styled.div`
flex-direction: column;
`;
type TaskGroupsProps = {
filterDropdownId?: string;
targetableObjects?: ActivityTargetableObject[];
showAddButton?: boolean;
};
export const TaskGroups = ({
filterDropdownId,
entity,
targetableObjects,
showAddButton,
}: TaskGroupsProps) => {
const {
@ -62,7 +62,10 @@ export const TaskGroups = ({
upcomingTasks,
unscheduledTasks,
completedTasks,
} = useTasks({ filterDropdownId: filterDropdownId, entity });
} = useTasks({
filterDropdownId: filterDropdownId,
targetableObjects: targetableObjects ?? [],
});
const openCreateActivity = useOpenCreateActivityDrawer();
@ -71,10 +74,6 @@ export const TaskGroups = ({
TasksRecoilScopeContext,
);
if (entity?.type === 'Custom') {
return <></>;
}
if (
(activeTabId !== 'done' &&
todayOrPreviousTasks?.length === 0 &&
@ -93,7 +92,7 @@ export const TaskGroups = ({
onClick={() =>
openCreateActivity({
type: 'Task',
targetableEntities: entity ? [entity] : undefined,
targetableObjects,
})
}
/>
@ -107,7 +106,9 @@ export const TaskGroups = ({
<TaskList
tasks={completedTasks ?? []}
button={
showAddButton && <AddTaskButton activityTargetEntity={entity} />
showAddButton && (
<AddTaskButton activityTargetableObjects={targetableObjects} />
)
}
/>
) : (
@ -116,7 +117,9 @@ export const TaskGroups = ({
title="Today"
tasks={todayOrPreviousTasks ?? []}
button={
showAddButton && <AddTaskButton activityTargetEntity={entity} />
showAddButton && (
<AddTaskButton activityTargetableObjects={targetableObjects} />
)
}
/>
<TaskList
@ -125,7 +128,7 @@ export const TaskGroups = ({
button={
showAddButton &&
!todayOrPreviousTasks?.length && (
<AddTaskButton activityTargetEntity={entity} />
<AddTaskButton activityTargetableObjects={targetableObjects} />
)
}
/>
@ -136,7 +139,7 @@ export const TaskGroups = ({
showAddButton &&
!todayOrPreviousTasks?.length &&
!upcomingTasks?.length && (
<AddTaskButton activityTargetEntity={entity} />
<AddTaskButton activityTargetableObjects={targetableObjects} />
)
}
/>

18
packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
View File

@ -2,12 +2,10 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
import { ActivityTarget } from '@/activities/types/ActivityTarget';
import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
import { getActivitySummary } from '@/activities/utils/getActivitySummary';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { IconCalendar, IconComment } from '@/ui/display/icon';
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
@ -76,14 +74,8 @@ export const TaskRow = ({
const body = getActivitySummary(task.body);
const { completeTask } = useCompleteTask(task);
const activityTargetIds =
task?.activityTargets?.edges?.map(
(activityTarget) => activityTarget.node.id,
) ?? [];
const { records: activityTargets } = useFindManyRecords<ActivityTarget>({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
filter: { id: { in: activityTargetIds } },
const { activityTargetObjectRecords } = useActivityTargetObjectRecords({
activityId: task.id,
});
return (
@ -115,7 +107,9 @@ export const TaskRow = ({
)}
</StyledTaskBody>
<StyledFieldsContainer>
<ActivityTargetChips targets={activityTargets} />
<ActivityTargetChips
activityTargetObjectRecords={activityTargetObjectRecords}
/>
<StyledDueDate
isPast={
!!task.dueAt && hasDatePassed(task.dueAt) && !task.completedAt

88
packages/twenty-front/src/modules/activities/tasks/hooks/useTasks.ts
View File

@ -1,55 +1,75 @@
import { isNonEmptyString } from '@sniptt/guards';
import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards';
import { DateTime } from 'luxon';
import { Activity } from '@/activities/types/Activity';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { LeafObjectRecordFilter } from '@/object-record/record-filter/types/ObjectRecordQueryFilter';
import { parseDate } from '~/utils/date-utils';
import { isDefined } from '~/utils/isDefined';
type UseTasksProps = {
filterDropdownId?: string;
entity?: ActivityTargetableEntity;
targetableObjects: ActivityTargetableObject[];
};
export const useTasks = (props?: UseTasksProps) => {
const { filterDropdownId, entity } = props ?? {};
export const useTasks = ({
targetableObjects,
filterDropdownId,
}: UseTasksProps) => {
const { selectedFilter } = useFilterDropdown({
filterDropdownId: filterDropdownId,
filterDropdownId,
});
const targetableObjectsFilter =
targetableObjects.reduce<LeafObjectRecordFilter>(
(aggregateFilter, targetableObject) => {
const targetableObjectFieldName = getActivityTargetObjectFieldIdName({
nameSingular: targetableObject.targetObjectNameSingular,
});
if (isNonEmptyString(targetableObject.id)) {
aggregateFilter[targetableObjectFieldName] = {
eq: targetableObject.id,
};
}
return aggregateFilter;
},
{},
);
const { records: activityTargets } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
filter: isDefined(entity)
filter: targetableObjectsFilter,
});
const skipRequest = !isNonEmptyArray(activityTargets) && !selectedFilter;
const idFilter = {
id: {
in: activityTargets.map((activityTarget) => activityTarget.activityId),
},
};
const assigneeIdFilter = selectedFilter
? {
[entity?.type === 'Company' ? 'companyId' : 'personId']: {
eq: entity?.id,
assigneeId: {
in: JSON.parse(selectedFilter.value),
},
}
: undefined,
});
: undefined;
const { records: completeTasksData } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.Activity,
skip: !entity && !selectedFilter,
skip: skipRequest,
filter: {
completedAt: { is: 'NOT_NULL' },
...(isDefined(entity) && {
id: {
in: activityTargets?.map(
(activityTarget) => activityTarget.activityId,
),
},
}),
...idFilter,
type: { eq: 'Task' },
...(isNonEmptyString(selectedFilter?.value) && {
assigneeId: {
in: JSON.parse(selectedFilter?.value),
},
}),
...assigneeIdFilter,
},
orderBy: {
createdAt: 'DescNullsFirst',
@ -58,22 +78,12 @@ export const useTasks = (props?: UseTasksProps) => {
const { records: incompleteTaskData } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.Activity,
skip: !entity && !selectedFilter,
skip: skipRequest,
filter: {
completedAt: { is: 'NULL' },
...(isDefined(entity) && {
id: {
in: activityTargets?.map(
(activityTarget) => activityTarget.activityId,
),
},
}),
...idFilter,
type: { eq: 'Task' },
...(isNonEmptyString(selectedFilter?.value) && {
assigneeId: {
in: JSON.parse(selectedFilter?.value),
},
}),
...assigneeIdFilter,
},
orderBy: {
createdAt: 'DescNullsFirst',

29
packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -1,10 +1,12 @@
import React from 'react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
import { useActivityTargets } from '@/activities/hooks/useActivityTargets';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { Activity } from '@/activities/types/Activity';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -48,20 +50,21 @@ const StyledEmptyTimelineSubTitle = styled.div`
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
const { records: activityTargets, loading } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.ActivityTarget,
filter: {
[entity.type === 'Company' ? 'companyId' : 'personId']: { eq: entity.id },
},
});
export const Timeline = ({
targetableObject,
}: {
targetableObject: ActivityTargetableObject;
}) => {
const { activityTargets } = useActivityTargets({ targetableObject });
const { records: activities } = useFindManyRecords({
skip: !activityTargets?.length,
objectNameSingular: CoreObjectNameSingular.Activity,
filter: {
id: {
in: activityTargets?.map((activityTarget) => activityTarget.activityId),
in: activityTargets
?.map((activityTarget) => activityTarget.activityId)
.filter(isNonEmptyString),
},
},
orderBy: {
@ -71,10 +74,6 @@ export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
const openCreateActivity = useOpenCreateActivityDrawer();
if (loading || entity.type === 'Custom') {
return <></>;
}
if (!activities.length) {
return (
<StyledTimelineEmptyContainer>
@ -84,13 +83,13 @@ export const Timeline = ({ entity }: { entity: ActivityTargetableEntity }) => {
onNoteClick={() =>
openCreateActivity({
type: 'Note',
targetableEntities: [entity],
targetableObjects: [targetableObject],
})
}
onTaskClick={() =>
openCreateActivity({
type: 'Task',
targetableEntities: [entity],
targetableObjects: [targetableObject],
})
}
/>

9
packages/twenty-front/src/modules/activities/timeline/components/TimelineActivity.tsx
View File

@ -145,7 +145,7 @@ type TimelineActivityProps = {
| 'type'
| 'comments'
| 'dueAt'
> & { author: Pick<WorkspaceMember, 'name' | 'avatarUrl'> } & {
> & { author?: Pick<WorkspaceMember, 'name' | 'avatarUrl'> } & {
assignee?: Pick<WorkspaceMember, 'id' | 'name' | 'avatarUrl'> | null;
};
isLastActivity?: boolean;
@ -165,8 +165,8 @@ export const TimelineActivity = ({
<StyledTimelineItemContainer>
<StyledAvatarContainer>
<Avatar
avatarUrl={activity.author.avatarUrl}
placeholder={activity.author.name.firstName ?? ''}
avatarUrl={activity.author?.avatarUrl}
placeholder={activity.author?.name.firstName ?? ''}
size="sm"
type="rounded"
/>
@ -175,7 +175,8 @@ export const TimelineActivity = ({
<StyledItemTitleContainer>
<StyledItemAuthorText>
<span>
{activity.author.name.firstName} {activity.author.name.lastName}
{activity.author?.name.firstName}{' '}
{activity.author?.name.lastName}
</span>
created a {activity.type.toLowerCase()}
</StyledItemAuthorText>

9
packages/twenty-front/src/modules/activities/types/ActivityTargetObject.ts Normal file
View File

@ -0,0 +1,9 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
export type ActivityTargetObjectRecord = {
targetObjectMetadataItem: ObjectMetadataItem;
activityTargetRecord: ObjectRecord;
targetObjectRecord: ObjectRecord;
targetObjectNameSingular: string;
};

8
packages/twenty-front/src/modules/activities/types/ActivityTargetableEntity.ts
View File

@ -1,7 +1,5 @@
export type ActivityTargetableEntityType = 'Person' | 'Company' | 'Custom';
export type ActivityTargetableEntity = {
export type ActivityTargetableObject = {
id: string;
type: ActivityTargetableEntityType;
relatedEntities?: ActivityTargetableEntity[];
targetObjectNameSingular: string;
relatedTargetableObjects?: ActivityTargetableObject[];
};

7
packages/twenty-front/src/modules/activities/types/ActivityTargetableEntityForSelect.ts
View File

@ -1,7 +0,0 @@
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { ActivityTargetableEntityType } from './ActivityTargetableEntity';
export type ActivityTargetableEntityForSelect = EntityForSelect & {
entityType: ActivityTargetableEntityType;
};

25
packages/twenty-front/src/modules/activities/utils/__tests__/getTargetableEntitiesWithParents.test.ts
View File

@ -1,40 +1,41 @@
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { getTargetableEntitiesWithParents } from '@/activities/utils/getTargetableEntitiesWithParents';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { flattenTargetableObjectsAndTheirRelatedTargetableObjects } from '@/activities/utils/flattenTargetableObjectsAndTheirRelatedTargetableObjects';
describe('getTargetableEntitiesWithParents', () => {
it('should return the correct value', () => {
const entities: ActivityTargetableEntity[] = [
const entities: ActivityTargetableObject[] = [
{
id: '1',
type: 'Person',
relatedEntities: [
targetObjectNameSingular: 'person',
relatedTargetableObjects: [
{
id: '2',
type: 'Company',
targetObjectNameSingular: 'company',
},
],
},
{
id: '4',
type: 'Company',
targetObjectNameSingular: 'person',
},
{
id: '3',
type: 'Custom',
relatedEntities: [
targetObjectNameSingular: 'car',
relatedTargetableObjects: [
{
id: '6',
type: 'Person',
targetObjectNameSingular: 'person',
},
{
id: '5',
type: 'Company',
targetObjectNameSingular: 'company',
},
],
},
];
const res = getTargetableEntitiesWithParents(entities);
const res =
flattenTargetableObjectsAndTheirRelatedTargetableObjects(entities);
expect(res).toHaveLength(6);
expect(res[0].id).toBe('1');

21
packages/twenty-front/src/modules/activities/utils/flattenTargetableObjectsAndTheirRelatedTargetableObjects.ts Normal file
View File

@ -0,0 +1,21 @@
import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
export const flattenTargetableObjectsAndTheirRelatedTargetableObjects = (
targetableObjectsWithRelatedTargetableObjects: ActivityTargetableObject[],
): ActivityTargetableObject[] => {
const flattenedTargetableObjects: ActivityTargetableObject[] = [];
for (const targetableObject of targetableObjectsWithRelatedTargetableObjects ??
[]) {
flattenedTargetableObjects.push(targetableObject);
if (targetableObject.relatedTargetableObjects) {
for (const relatedEntity of targetableObject.relatedTargetableObjects ??
[]) {
flattenedTargetableObjects.push(relatedEntity);
}
}
}
return flattenedTargetableObjects;
};

15
packages/twenty-front/src/modules/activities/utils/getTargetObjectFilterFieldName.ts Normal file
View File

@ -0,0 +1,15 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
export const getActivityTargetObjectFieldIdName = ({
nameSingular,
}: {
nameSingular: string;
}) => {
const isCoreObject =
nameSingular === CoreObjectNameSingular.Company ||
nameSingular === CoreObjectNameSingular.Person;
const objectFieldIdName = `${!isCoreObject ? '_' : ''}${nameSingular}Id`;
return objectFieldIdName;
};

16
packages/twenty-front/src/modules/activities/utils/getTargetableEntitiesWithParents.ts
View File

@ -1,16 +0,0 @@
import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity';
export const getTargetableEntitiesWithParents = (
entities: ActivityTargetableEntity[],
): ActivityTargetableEntity[] => {
const entitiesWithRelations: ActivityTargetableEntity[] = [];
for (const entity of entities ?? []) {
entitiesWithRelations.push(entity);
if (entity.relatedEntities) {
for (const relatedEntity of entity.relatedEntities ?? []) {
entitiesWithRelations.push(relatedEntity);
}
}
}
return entitiesWithRelations;
};

11
packages/twenty-front/src/modules/companies/hooks/useSpreadsheetCompanyImport.ts
View File

@ -28,7 +28,9 @@ export const useSpreadsheetCompanyImport = () => {
...options,
onSubmit: async (data) => {
// TODO: Add better type checking in spreadsheet import later
const createInputs = data.validData.map((company) => ({
const createInputs = data.validData.map(
(company) =>
({
name: company.name as string | undefined,
domainName: company.domainName as string | undefined,
...(company.linkedinUrl
@ -59,8 +61,11 @@ export const useSpreadsheetCompanyImport = () => {
}
: {}),
address: company.address as string | undefined,
employees: company.employees ? Number(company.employees) : undefined,
}));
employees: company.employees
? Number(company.employees)
: undefined,
}) as Company,
);
// TODO: abstract this part for any object
try {
await createManyCompanies(createInputs);

22
packages/twenty-front/src/modules/object-metadata/hooks/useFilterOutUnexistingObjectMetadataItems.ts Normal file
View File

@ -0,0 +1,22 @@
import { useRecoilValue } from 'recoil';
import { objectMetadataItemsByNameSingularMapSelector } from '@/object-metadata/states/objectMetadataItemsByNameSingularMapSelector';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { isDefined } from '~/utils/isDefined';
export const useFilterOutUnexistingObjectMetadataItems = () => {
const objectMetadataItemsByNameSingularMap = useRecoilValue(
objectMetadataItemsByNameSingularMapSelector,
);
const filterOutUnexistingObjectMetadataItems = (
objectMetadatItem: ObjectMetadataItem,
) =>
isDefined(
objectMetadataItemsByNameSingularMap.get(objectMetadatItem.nameSingular),
);
return {
filterOutUnexistingObjectMetadataItems,
};
};

8
packages/twenty-front/src/modules/object-metadata/hooks/useMapToObjectRecordIdentifier.ts
View File

@ -1,16 +1,16 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
export const useMapToObjectRecordIdentifier = ({
objectMetadataItem,
}: {
objectMetadataItem: ObjectMetadataItem;
}) => {
return (record: any): ObjectRecordIdentifier => {
return getObjectRecordIdentifier({
}): ((record: ObjectRecord) => ObjectRecordIdentifier) => {
return (record: ObjectRecord) =>
getObjectRecordIdentifier({
objectMetadataItem,
record,
});
};
};

5
packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItem.ts
View File

@ -7,6 +7,7 @@ import { useGetObjectOrderByField } from '@/object-metadata/hooks/useGetObjectOr
import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
import { getObjectMetadataItemsMock } from '@/object-metadata/utils/getObjectMetadataItemsMock';
import { useGenerateCreateManyRecordMutation } from '@/object-record/hooks/useGenerateCreateManyRecordMutation';
import { useGenerateCreateOneRecordMutation } from '@/object-record/hooks/useGenerateCreateOneRecordMutation';
@ -121,7 +122,9 @@ export const useObjectMetadataItem = (
({ name }) => name === 'name',
);
const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
const basePathToShowPage = getBasePathToShowPage({
objectMetadataItem,
});
return {
labelIdentifierFieldMetadata,

20
packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNamePluralMapSelector.ts Normal file
View File

@ -0,0 +1,20 @@
import { selector } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
export const objectMetadataItemsByNamePluralMapSelector = selector<
Map<string, ObjectMetadataItem>
>({
key: 'objectMetadataItemsByNamePluralMapSelector',
get: ({ get }) => {
const objectMetadataItems = get(objectMetadataItemsState);
return new Map(
objectMetadataItems.map((objectMetadataItem) => [
objectMetadataItem.namePlural,
objectMetadataItem,
]),
);
},
});

20
packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsByNameSingularMapSelector.ts Normal file
View File

@ -0,0 +1,20 @@
import { selector } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
export const objectMetadataItemsByNameSingularMapSelector = selector<
Map<string, ObjectMetadataItem>
>({
key: 'objectMetadataItemsByNameSingularMapSelector',
get: ({ get }) => {
const objectMetadataItems = get(objectMetadataItemsState);
return new Map(
objectMetadataItems.map((objectMetadataItem) => [
objectMetadataItem.nameSingular,
objectMetadataItem,
]),
);
},
});

11
packages/twenty-front/src/modules/object-metadata/utils/getBasePathToShowPage.ts Normal file
View File

@ -0,0 +1,11 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
export const getBasePathToShowPage = ({
objectMetadataItem,
}: {
objectMetadataItem: ObjectMetadataItem;
}) => {
const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
return basePathToShowPage;
};

12
packages/twenty-front/src/modules/object-metadata/utils/getLabelIdentifierFieldMetadataItem.ts Normal file
View File

@ -0,0 +1,12 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
export const getLabelIdentifierFieldMetadataItem = (
objectMetadataItem: ObjectMetadataItem,
): FieldMetadataItem | undefined => {
return objectMetadataItem.fields.find(
(field) =>
field.id === objectMetadataItem.labelIdentifierFieldMetadataId ||
field.name === 'name',
);
};

10
packages/twenty-front/src/modules/object-metadata/utils/getObjectOrderByField.ts
View File

@ -5,7 +5,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
export const getObjectOrderByField = (
objectMetadataItem: ObjectMetadataItem,
orderBy: OrderBy,
orderBy?: OrderBy | null,
): OrderByField => {
const labelIdentifierFieldMetadata = objectMetadataItem.fields.find(
(field) =>
@ -18,18 +18,18 @@ export const getObjectOrderByField = (
case FieldMetadataType.FullName:
return {
[labelIdentifierFieldMetadata.name]: {
firstName: orderBy,
lastName: orderBy,
firstName: orderBy ?? 'AscNullsLast',
lastName: orderBy ?? 'AscNullsLast',
},
};
default:
return {
[labelIdentifierFieldMetadata.name]: orderBy,
[labelIdentifierFieldMetadata.name]: orderBy ?? 'AscNullsLast',
};
}
} else {
return {
createdAt: orderBy,
createdAt: orderBy ?? 'DescNullsLast',
};
}
};

35
packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts
View File

@ -1,7 +1,10 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
import { FieldMetadataType } from '~/generated/graphql';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
export const getObjectRecordIdentifier = ({
@ -9,30 +12,24 @@ export const getObjectRecordIdentifier = ({
record,
}: {
objectMetadataItem: ObjectMetadataItem;
record: any;
record: ObjectRecord;
}): ObjectRecordIdentifier => {
const basePathToShowPage = `/object/${objectMetadataItem.nameSingular}/`;
const linkToShowPage = `${basePathToShowPage}${record.id}`;
if (objectMetadataItem.nameSingular === CoreObjectNameSingular.Opportunity) {
switch (objectMetadataItem.nameSingular) {
case CoreObjectNameSingular.Opportunity:
return {
id: record.id,
name: record?.company?.name,
avatarUrl: record.avatarUrl,
avatarType: 'rounded',
linkToShowPage,
};
}
const labelIdentifierFieldMetadata = objectMetadataItem.fields.find(
(field) =>
field.id === objectMetadataItem.labelIdentifierFieldMetadataId ||
field.name === 'name',
);
const labelIdentifierFieldMetadataItem =
getLabelIdentifierFieldMetadataItem(objectMetadataItem);
let labelIdentifierFieldValue = '';
switch (labelIdentifierFieldMetadata?.type) {
switch (labelIdentifierFieldMetadataItem?.type) {
case FieldMetadataType.FullName: {
labelIdentifierFieldValue = `${record.name?.firstName ?? ''} ${
record.name?.lastName ?? ''
@ -40,8 +37,8 @@ export const getObjectRecordIdentifier = ({
break;
}
default:
labelIdentifierFieldValue = labelIdentifierFieldMetadata
? record[labelIdentifierFieldMetadata.name]
labelIdentifierFieldValue = labelIdentifierFieldMetadataItem
? record[labelIdentifierFieldMetadataItem.name]
: '';
}
@ -63,11 +60,17 @@ export const getObjectRecordIdentifier = ({
? getLogoUrlFromDomainName(record['domainName'] ?? '')
: imageIdentifierFieldValue ?? null;
const basePathToShowPage = getBasePathToShowPage({
objectMetadataItem,
});
const linkToEntity = `${basePathToShowPage}${record.id}`;
return {
id: record.id,
name: labelIdentifierFieldValue,
avatarUrl,
avatarType,
linkToShowPage,
linkToEntity,
};
};

28
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx Normal file
View File

@ -0,0 +1,28 @@
import * as React from 'react';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { EntityChip } from '@/ui/display/chip/components/EntityChip';
export type RecordChipProps = {
objectNameSingular: string;
record: ObjectRecord;
};
export const RecordChip = ({ objectNameSingular, record }: RecordChipProps) => {
const { mapToObjectRecordIdentifier } = useObjectMetadataItem({
objectNameSingular,
});
const objectRecordIdentifier = mapToObjectRecordIdentifier(record);
return (
<EntityChip
entityId={record.id}
name={objectRecordIdentifier.name}
avatarType={objectRecordIdentifier.avatarType}
avatarUrl={objectRecordIdentifier.avatarUrl ?? undefined}
linkToEntity={objectRecordIdentifier.linkToShowPage}
/>
);
};

23
packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx
View File

@ -77,13 +77,6 @@ export const RecordShowPage = () => {
objectNameSingular,
});
const objectMetadataType =
objectMetadataItem?.nameSingular === 'company'
? 'Company'
: objectMetadataItem?.nameSingular === 'person'
? 'Person'
: 'Custom';
const useUpdateOneObjectRecordMutation: RecordUpdateHook = () => {
const updateEntity = ({ variables }: RecordUpdateHookParams) => {
updateOneRecord?.({
@ -171,7 +164,7 @@ export const RecordShowPage = () => {
hasBackButton
Icon={IconBuildingSkyscraper}
>
{record && objectMetadataType !== 'Custom' && (
{record && (
<>
<PageFavoriteButton
isFavorite={isFavorite}
@ -181,7 +174,7 @@ export const RecordShowPage = () => {
key="add"
entity={{
id: record.id,
type: objectMetadataType,
targetObjectNameSingular: objectMetadataItem?.nameSingular,
}}
/>
<ShowPageMoreButton
@ -275,15 +268,9 @@ export const RecordShowPage = () => {
)}
</ShowPageLeftContainer>
<ShowPageRightContainer
entity={{
id: record?.id || '',
// TODO: refacto
type:
objectMetadataItem?.nameSingular === 'company'
? 'Company'
: objectMetadataItem?.nameSingular === 'person'
? 'Person'
: 'Custom',
targetableObject={{
id: record?.id ?? '',
targetObjectNameSingular: objectMetadataItem?.nameSingular,
}}
timeline
tasks

1
packages/twenty-front/src/modules/object-record/field/meta-types/display/components/ChipFieldDisplay.tsx
View File

@ -10,6 +10,7 @@ export const ChipFieldDisplay = () => {
basePathToShowPage,
} = useChipField();
// TODO: remove this and use ObjectRecordChip instead
const identifiers = identifiersMapper?.(record, objectNameSingular ?? '');
return (

12
packages/twenty-front/src/modules/object-record/hooks/useCreateManyRecords.ts
View File

@ -5,11 +5,10 @@ import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimis
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ObjectMetadataItemIdentifier } from '@/object-metadata/types/ObjectMetadataItemIdentifier';
import { useGenerateEmptyRecord } from '@/object-record/hooks/useGenerateEmptyRecord';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { capitalize } from '~/utils/string/capitalize';
export const useCreateManyRecords = <
T extends Record<string, unknown> & { id: string },
>({
export const useCreateManyRecords = <T extends ObjectRecord>({
objectNameSingular,
}: ObjectMetadataItemIdentifier) => {
const { triggerOptimisticEffects } = useOptimisticEffect({
@ -27,17 +26,16 @@ export const useCreateManyRecords = <
const apolloClient = useApolloClient();
const createManyRecords = async (data: Record<string, any>[]) => {
const createManyRecords = async (data: Partial<T>[]) => {
const withIds = data.map((record) => ({
...record,
id: (record.id as string) ?? v4(),
}));
withIds.forEach((record) => {
const emptyRecord: Record<string, unknown> | undefined =
generateEmptyRecord({
const emptyRecord: T | undefined = generateEmptyRecord({
id: record.id,
});
} as T);
if (emptyRecord) {
triggerOptimisticEffects({

2
packages/twenty-front/src/modules/object-record/hooks/useCreateOneRecord.ts
View File

@ -34,7 +34,7 @@ export const useCreateOneRecord = <T>({
const createOneRecord = async (input: Record<string, any>) => {
const recordId = v4();
const generatedEmptyRecord = generateEmptyRecord<Record<string, unknown>>({
const generatedEmptyRecord = generateEmptyRecord({
id: recordId,
createdAt: new Date().toISOString(),
...input,

9
packages/twenty-front/src/modules/object-record/hooks/useGenerateEmptyRecord.ts
View File

@ -1,4 +1,5 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { generateEmptyFieldValue } from '@/object-record/utils/generateEmptyFieldValue';
export const useGenerateEmptyRecord = ({
@ -7,11 +8,11 @@ export const useGenerateEmptyRecord = ({
objectMetadataItem: ObjectMetadataItem;
}) => {
// Todo fix typing once we generate the return base on Metadata
const generateEmptyRecord = <T>(input: Partial<T> & { id: string }) => {
const generateEmptyRecord = <T extends ObjectRecord>(input: T) => {
// Todo replace this by runtime typing
const validatedInput = input as { id: string } & { [key: string]: any };
const validatedInput = input as T;
const emptyRecord = {} as Record<string, any>;
const emptyRecord = {} as any;
for (const fieldMetadataItem of objectMetadataItem.fields) {
emptyRecord[fieldMetadataItem.name] =
@ -19,7 +20,7 @@ export const useGenerateEmptyRecord = ({
generateEmptyFieldValue(fieldMetadataItem);
}
return emptyRecord;
return emptyRecord as T;
};
return {

84
packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsForMultipleMetadataItemsQuery.ts Normal file
View File

@ -0,0 +1,84 @@
import { gql } from '@apollo/client';
import { useMapFieldMetadataToGraphQLQuery } from '@/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { capitalize } from '~/utils/string/capitalize';
export const useGenerateFindManyRecordsForMultipleMetadataItemsQuery = ({
objectMetadataItems,
depth,
}: {
objectMetadataItems: ObjectMetadataItem[];
depth?: number;
}) => {
const mapFieldMetadataToGraphQLQuery = useMapFieldMetadataToGraphQLQuery();
const capitalizedObjectNameSingulars = objectMetadataItems.map(
({ nameSingular }) => capitalize(nameSingular),
);
const filterPerMetadataItemArray = capitalizedObjectNameSingulars
.map(
(capitalizedObjectNameSingular) =>
`$filter${capitalizedObjectNameSingular}: ${capitalizedObjectNameSingular}FilterInput`,
)
.join(', ');
const orderByPerMetadataItemArray = capitalizedObjectNameSingulars
.map(
(capitalizedObjectNameSingular) =>
`$orderBy${capitalizedObjectNameSingular}: ${capitalizedObjectNameSingular}OrderByInput`,
)
.join(', ');
const lastCursorPerMetadataItemArray = capitalizedObjectNameSingulars
.map(
(capitalizedObjectNameSingular) =>
`$lastCursor${capitalizedObjectNameSingular}: String`,
)
.join(', ');
const limitPerMetadataItemArray = capitalizedObjectNameSingulars
.map(
(capitalizedObjectNameSingular) =>
`$limit${capitalizedObjectNameSingular}: Float = 5`,
)
.join(', ');
return gql`
query FindManyRecordsMultipleMetadataItems(
${filterPerMetadataItemArray},
${orderByPerMetadataItemArray},
${lastCursorPerMetadataItemArray},
${limitPerMetadataItemArray}
) {
${objectMetadataItems
.map(
({ namePlural, nameSingular, fields }) =>
`${namePlural}(filter: $filter${capitalize(
nameSingular,
)}, orderBy: $orderBy${capitalize(
nameSingular,
)}, first: $limit${capitalize(
nameSingular,
)}, after: $lastCursor${capitalize(nameSingular)}){
edges {
node {
id
${fields
.map((field) => mapFieldMetadataToGraphQLQuery(field, depth))
.join('\n')}
}
cursor
}
pageInfo {
hasNextPage
startCursor
endCursor
}
}`,
)
.join('\n')}
}
`;
};

5
packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsQuery.ts
View File

@ -1,7 +1,6 @@
import { gql } from '@apollo/client';
import { useMapFieldMetadataToGraphQLQuery } from '@/object-metadata/hooks/useMapFieldMetadataToGraphQLQuery';
import { EMPTY_QUERY } from '@/object-metadata/hooks/useObjectMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { capitalize } from '~/utils/string/capitalize';
@ -14,10 +13,6 @@ export const useGenerateFindManyRecordsQuery = ({
}) => {
const mapFieldMetadataToGraphQLQuery = useMapFieldMetadataToGraphQLQuery();
if (!objectMetadataItem) {
return EMPTY_QUERY;
}
return gql`
query FindMany${capitalize(
objectMetadataItem.namePlural,

11
packages/twenty-front/src/modules/object-record/hooks/useRecordTableContextMenuEntries.tsx
View File

@ -67,13 +67,6 @@ export const useRecordTableContextMenuEntries = (
const { createFavorite, favorites, deleteFavorite } = useFavorites();
const objectMetadataType =
objectNameSingular === 'company'
? 'Company'
: objectNameSingular === 'person'
? 'Person'
: 'Custom';
const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = injectSelectorSnapshotValueWithRecordTableScopeId(
snapshot,
@ -212,14 +205,14 @@ export const useRecordTableContextMenuEntries = (
label: 'Task',
Icon: IconCheckbox,
onClick: () => {
openCreateActivityDrawer('Task', objectMetadataType);
openCreateActivityDrawer('Task', objectNameSingular);
},
},
{
label: 'Note',
Icon: IconNotes,
onClick: () => {
openCreateActivityDrawer('Note', objectMetadataType);
openCreateActivityDrawer('Note', objectNameSingular);
},
},
...(dataExecuteQuickActionOnmentEnabled

212
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelect.tsx Normal file
View File

@ -0,0 +1,212 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import debounce from 'lodash.debounce';
import { v4 } from 'uuid';
import {
ObjectRecordForSelect,
SelectedObjectRecordId,
useMultiObjectSearch,
} from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { Avatar } from '@/users/components/Avatar';
export const StyledSelectableItem = styled(SelectableItem)`
height: 100%;
width: 100%;
`;
export type EntitiesForMultipleObjectRecordSelect = {
filteredSelectedObjectRecords: ObjectRecordForSelect[];
objectRecordsToSelect: ObjectRecordForSelect[];
loading: boolean;
};
export const MultipleObjectRecordSelect = ({
onChange,
onSubmit,
selectedObjectRecordIds,
}: {
onChange?: (
changedRecordForSelect: ObjectRecordForSelect,
newSelectedValue: boolean,
) => void;
onCancel?: (objectRecordsForSelect: ObjectRecordForSelect[]) => void;
onSubmit?: (objectRecordsForSelect: ObjectRecordForSelect[]) => void;
selectedObjectRecordIds: SelectedObjectRecordId[];
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const [searchFilter, setSearchFilter] = useState<string>('');
const {
filteredSelectedObjectRecords,
loading,
objectRecordsToSelect,
selectedObjectRecords,
} = useMultiObjectSearch({
searchFilterValue: searchFilter,
selectedObjectRecordIds,
excludedObjectRecordIds: [],
limit: 10,
});
const selectedObjectRecordsForSelect = useMemo(
() =>
selectedObjectRecords.filter((selectedObjectRecord) =>
selectedObjectRecordIds.some(
(selectedObjectRecordId) =>
selectedObjectRecordId.id ===
selectedObjectRecord.recordIdentifier.id,
),
),
[selectedObjectRecords, selectedObjectRecordIds],
);
const [internalSelectedRecords, setInternalSelectedRecords] = useState<
ObjectRecordForSelect[]
>([]);
useEffect(() => {
if (!loading) {
setInternalSelectedRecords(selectedObjectRecordsForSelect);
}
}, [selectedObjectRecordsForSelect, loading]);
const debouncedSetSearchFilter = debounce(setSearchFilter, 100, {
leading: true,
});
const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
debouncedSetSearchFilter(event.currentTarget.value);
};
const handleSelectChange = (
changedRecordForSelect: ObjectRecordForSelect,
newSelectedValue: boolean,
) => {
const newSelectedRecords = newSelectedValue
? [...internalSelectedRecords, changedRecordForSelect]
: internalSelectedRecords.filter(
(selectedRecord) =>
selectedRecord.record.id !== changedRecordForSelect.record.id,
);
setInternalSelectedRecords(newSelectedRecords);
onChange?.(changedRecordForSelect, newSelectedValue);
};
const entitiesInDropdown = useMemo(
() =>
[
...(filteredSelectedObjectRecords ?? []),
...(objectRecordsToSelect ?? []),
].filter((entity) => isNonEmptyString(entity.recordIdentifier.id)),
[filteredSelectedObjectRecords, objectRecordsToSelect],
);
useListenClickOutside({
refs: [containerRef],
callback: (event) => {
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
onSubmit?.(internalSelectedRecords);
},
});
const selectableItemIds = entitiesInDropdown.map(
(entity) => entity.record.id,
);
return (
<DropdownMenu ref={containerRef} data-select-disable>
<DropdownMenuSearchInput
value={searchFilter}
onChange={handleFilterChange}
autoFocus
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer hasMaxHeight>
{loading ? (
<MenuItem text="Loading..." />
) : (
<>
<SelectableList
selectableListId="multiple-entity-select-list"
selectableItemIdArray={selectableItemIds}
hotkeyScope={RelationPickerHotkeyScope.RelationPicker}
onEnter={(recordId) => {
const recordIsSelected = internalSelectedRecords?.some(
(selectedRecord) => selectedRecord.record.id === recordId,
);
const correspondingRecordForSelect = entitiesInDropdown?.find(
(entity) => entity.record.id === recordId,
);
if (correspondingRecordForSelect) {
handleSelectChange(
correspondingRecordForSelect,
!recordIsSelected,
);
}
}}
>
{entitiesInDropdown?.map((objectRecordForSelect) => (
<StyledSelectableItem
itemId={objectRecordForSelect.record.id}
key={objectRecordForSelect.record.id + v4()}
>
<MenuItemMultiSelectAvatar
selected={internalSelectedRecords?.some(
(selectedRecord) => {
return (
selectedRecord.record.id ===
objectRecordForSelect.record.id
);
},
)}
onSelectChange={(newCheckedValue) =>
handleSelectChange(objectRecordForSelect, newCheckedValue)
}
avatar={
<Avatar
avatarUrl={
objectRecordForSelect.recordIdentifier.avatarUrl
}
colorId={objectRecordForSelect.record.id}
placeholder={
objectRecordForSelect.recordIdentifier.name
}
size="md"
type={
objectRecordForSelect.recordIdentifier.avatarType ??
'rounded'
}
/>
}
text={objectRecordForSelect.recordIdentifier.name}
/>
</StyledSelectableItem>
))}
</SelectableList>
{entitiesInDropdown?.length === 0 && <MenuItem text="No result" />}
</>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
);
};

24
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useLimitPerMetadataItem.ts Normal file
View File

@ -0,0 +1,24 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { DEFAULT_SEARCH_REQUEST_LIMIT } from '@/search/hooks/useFilteredSearchEntityQuery';
import { isDefined } from '~/utils/isDefined';
import { capitalize } from '~/utils/string/capitalize';
export const useLimitPerMetadataItem = ({
objectMetadataItems,
limit = DEFAULT_SEARCH_REQUEST_LIMIT,
}: {
objectMetadataItems: ObjectMetadataItem[];
limit?: number;
}) => {
const limitPerMetadataItem = Object.fromEntries(
objectMetadataItems
.map(({ nameSingular }) => {
return [`limit${capitalize(nameSingular)}`, limit];
})
.filter(isDefined),
);
return {
limitPerMetadataItem,
};
};

50
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.ts Normal file
View File

@ -0,0 +1,50 @@
import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector';
import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
import { ObjectRecordConnection } from '@/object-record/types/ObjectRecordConnection';
import { isDefined } from '~/utils/isDefined';
export type MultiObjectRecordQueryResult = {
[namePlural: string]: ObjectRecordConnection;
};
export const useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray =
({
multiObjectRecordsQueryResult,
}: {
multiObjectRecordsQueryResult:
| MultiObjectRecordQueryResult
| null
| undefined;
}) => {
const objectMetadataItemsByNamePluralMap = useRecoilValue(
objectMetadataItemsByNamePluralMapSelector,
);
const objectRecordForSelectArray = useMemo(() => {
return Object.entries(multiObjectRecordsQueryResult ?? {}).flatMap(
([namePlural, objectRecordConnection]) => {
const objectMetadataItem =
objectMetadataItemsByNamePluralMap.get(namePlural);
if (!isDefined(objectMetadataItem)) return [];
return objectRecordConnection.edges.map(({ node }) => ({
objectMetadataItem,
record: node,
recordIdentifier: getObjectRecordIdentifier({
objectMetadataItem,
record: node,
}),
})) as ObjectRecordForSelect[];
},
);
}, [multiObjectRecordsQueryResult, objectMetadataItemsByNamePluralMap]);
return {
objectRecordForSelectArray,
};
};

72
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearch.ts Normal file
View File

@ -0,0 +1,72 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery } from '@/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery';
import { useMultiObjectSearchMatchesSearchFilterAndToSelectQuery } from '@/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery';
import { useMultiObjectSearchSelectedItemsQuery } from '@/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { ObjectRecordIdentifier } from '@/object-record/types/ObjectRecordIdentifier';
export const DEFAULT_SEARCH_REQUEST_LIMIT = 5;
export type ObjectRecordForSelect = {
objectMetadataItem: ObjectMetadataItem;
record: ObjectRecord;
recordIdentifier: ObjectRecordIdentifier;
};
export type SelectedObjectRecordId = {
objectNameSingular: string;
id: string;
};
export type MultiObjectSearch = {
selectedObjectRecords: ObjectRecordForSelect[];
filteredSelectedObjectRecords: ObjectRecordForSelect[];
objectRecordsToSelect: ObjectRecordForSelect[];
loading: boolean;
};
export const useMultiObjectSearch = ({
searchFilterValue,
selectedObjectRecordIds,
limit,
excludedObjectRecordIds = [],
}: {
searchFilterValue: string;
selectedObjectRecordIds: SelectedObjectRecordId[];
limit?: number;
excludedObjectRecordIds?: SelectedObjectRecordId[];
}): MultiObjectSearch => {
const { selectedObjectRecords, selectedObjectRecordsLoading } =
useMultiObjectSearchSelectedItemsQuery({
selectedObjectRecordIds,
});
const {
selectedAndMatchesSearchFilterObjectRecords,
selectedAndMatchesSearchFilterObjectRecordsLoading,
} = useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery({
searchFilterValue,
selectedObjectRecordIds,
limit,
});
const {
toSelectAndMatchesSearchFilterObjectRecords,
toSelectAndMatchesSearchFilterObjectRecordsLoading,
} = useMultiObjectSearchMatchesSearchFilterAndToSelectQuery({
excludedObjectRecordIds,
searchFilterValue,
selectedObjectRecordIds,
limit,
});
return {
selectedObjectRecords,
filteredSelectedObjectRecords: selectedAndMatchesSearchFilterObjectRecords,
objectRecordsToSelect: toSelectAndMatchesSearchFilterObjectRecords,
loading:
selectedAndMatchesSearchFilterObjectRecordsLoading ||
toSelectAndMatchesSearchFilterObjectRecordsLoading ||
selectedObjectRecordsLoading,
};
};

113
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery.ts Normal file
View File

@ -0,0 +1,113 @@
import { useQuery } from '@apollo/client';
import { isNonEmptyArray } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useGenerateFindManyRecordsForMultipleMetadataItemsQuery } from '@/object-record/hooks/useGenerateFindManyRecordsForMultipleMetadataItemsQuery';
import { useLimitPerMetadataItem } from '@/object-record/relation-picker/hooks/useLimitPerMetadataItem';
import {
MultiObjectRecordQueryResult,
useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray,
} from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { SelectedObjectRecordId } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
import { useOrderByFieldPerMetadataItem } from '@/object-record/relation-picker/hooks/useOrderByFieldPerMetadataItem';
import { useSearchFilterPerMetadataItem } from '@/object-record/relation-picker/hooks/useSearchFilterPerMetadataItem';
import { isDefined } from '~/utils/isDefined';
import { capitalize } from '~/utils/string/capitalize';
export const useMultiObjectSearchMatchesSearchFilterAndSelectedItemsQuery = ({
selectedObjectRecordIds,
searchFilterValue,
limit,
}: {
selectedObjectRecordIds: SelectedObjectRecordId[];
searchFilterValue: string;
limit?: number;
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const { searchFilterPerMetadataItemNameSingular } =
useSearchFilterPerMetadataItem({
objectMetadataItems,
searchFilterValue,
});
const objectMetadataItemsUsedInSelectedIdsQuery = objectMetadataItems.filter(
({ nameSingular }) => {
return selectedObjectRecordIds.some(({ objectNameSingular }) => {
return objectNameSingular === nameSingular;
});
},
);
const selectedAndMatchesSearchFilterTextFilterPerMetadataItem =
Object.fromEntries(
objectMetadataItems
.map(({ nameSingular }) => {
const selectedIds = selectedObjectRecordIds
.filter(
({ objectNameSingular }) => objectNameSingular === nameSingular,
)
.map(({ id }) => id);
if (!isNonEmptyArray(selectedIds)) return null;
const searchFilter =
searchFilterPerMetadataItemNameSingular[nameSingular] ?? {};
return [
`filter${capitalize(nameSingular)}`,
{
and: [
{
...searchFilter,
},
{
id: {
in: selectedIds,
},
},
],
},
];
})
.filter(isDefined),
);
const { orderByFieldPerMetadataItem } = useOrderByFieldPerMetadataItem({
objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
});
const { limitPerMetadataItem } = useLimitPerMetadataItem({
objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
limit,
});
const multiSelectQueryForSelectedIds =
useGenerateFindManyRecordsForMultipleMetadataItemsQuery({
objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
});
const {
loading: selectedAndMatchesSearchFilterObjectRecordsLoading,
data: selectedAndMatchesSearchFilterObjectRecordsQueryResult,
} = useQuery<MultiObjectRecordQueryResult>(multiSelectQueryForSelectedIds, {
variables: {
...selectedAndMatchesSearchFilterTextFilterPerMetadataItem,
...orderByFieldPerMetadataItem,
...limitPerMetadataItem,
},
});
const {
objectRecordForSelectArray: selectedAndMatchesSearchFilterObjectRecords,
} = useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray({
multiObjectRecordsQueryResult:
selectedAndMatchesSearchFilterObjectRecordsQueryResult,
});
return {
selectedAndMatchesSearchFilterObjectRecordsLoading,
selectedAndMatchesSearchFilterObjectRecords,
};
};

130
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchMatchesSearchFilterAndToSelectQuery.ts Normal file
View File

@ -0,0 +1,130 @@
import { useQuery } from '@apollo/client';
import { isNonEmptyArray } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useGenerateFindManyRecordsForMultipleMetadataItemsQuery } from '@/object-record/hooks/useGenerateFindManyRecordsForMultipleMetadataItemsQuery';
import { useLimitPerMetadataItem } from '@/object-record/relation-picker/hooks/useLimitPerMetadataItem';
import {
MultiObjectRecordQueryResult,
useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray,
} from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { SelectedObjectRecordId } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
import { useOrderByFieldPerMetadataItem } from '@/object-record/relation-picker/hooks/useOrderByFieldPerMetadataItem';
import { useSearchFilterPerMetadataItem } from '@/object-record/relation-picker/hooks/useSearchFilterPerMetadataItem';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
import { isDefined } from '~/utils/isDefined';
import { capitalize } from '~/utils/string/capitalize';
export const useMultiObjectSearchMatchesSearchFilterAndToSelectQuery = ({
selectedObjectRecordIds,
excludedObjectRecordIds,
searchFilterValue,
limit,
}: {
selectedObjectRecordIds: SelectedObjectRecordId[];
excludedObjectRecordIds: SelectedObjectRecordId[];
searchFilterValue: string;
limit?: number;
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const nonSystemObjectMetadataItems = objectMetadataItems.filter(
({ nameSingular, isSystem }) =>
!isSystem && nameSingular !== CoreObjectNameSingular.Opportunity,
);
const { searchFilterPerMetadataItemNameSingular } =
useSearchFilterPerMetadataItem({
objectMetadataItems: nonSystemObjectMetadataItems,
searchFilterValue,
});
const objectRecordsToSelectAndMatchesSearchFilterTextFilterPerMetadataItem =
Object.fromEntries(
nonSystemObjectMetadataItems
.map(({ nameSingular }) => {
const selectedIds = selectedObjectRecordIds
.filter(
({ objectNameSingular }) => objectNameSingular === nameSingular,
)
.map(({ id }) => id);
const excludedIds = excludedObjectRecordIds
.filter(
({ objectNameSingular }) => objectNameSingular === nameSingular,
)
.map(({ id }) => id);
const searchFilter =
searchFilterPerMetadataItemNameSingular[nameSingular] ?? {};
const excludedIdsUnion = [...selectedIds, ...excludedIds];
const noFilter =
!isNonEmptyArray(excludedIdsUnion) &&
isDeeplyEqual(searchFilter, {});
return [
`filter${capitalize(nameSingular)}`,
!noFilter
? {
and: [
{
...searchFilter,
},
isNonEmptyArray(excludedIdsUnion)
? {
not: {
id: {
in: [...selectedIds, ...excludedIds],
},
},
}
: {},
],
}
: {},
];
})
.filter(isDefined),
);
const { orderByFieldPerMetadataItem } = useOrderByFieldPerMetadataItem({
objectMetadataItems: nonSystemObjectMetadataItems,
});
const { limitPerMetadataItem } = useLimitPerMetadataItem({
objectMetadataItems: nonSystemObjectMetadataItems,
limit,
});
const multiSelectQuery =
useGenerateFindManyRecordsForMultipleMetadataItemsQuery({
objectMetadataItems: nonSystemObjectMetadataItems,
});
const {
loading: toSelectAndMatchesSearchFilterObjectRecordsLoading,
data: toSelectAndMatchesSearchFilterObjectRecordsQueryResult,
} = useQuery<MultiObjectRecordQueryResult>(multiSelectQuery, {
variables: {
...objectRecordsToSelectAndMatchesSearchFilterTextFilterPerMetadataItem,
...orderByFieldPerMetadataItem,
...limitPerMetadataItem,
},
});
const {
objectRecordForSelectArray: toSelectAndMatchesSearchFilterObjectRecords,
} = useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray({
multiObjectRecordsQueryResult:
toSelectAndMatchesSearchFilterObjectRecordsQueryResult,
});
return {
toSelectAndMatchesSearchFilterObjectRecordsLoading,
toSelectAndMatchesSearchFilterObjectRecords,
};
};

88
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useMultiObjectSearchSelectedItemsQuery.ts Normal file
View File

@ -0,0 +1,88 @@
import { useQuery } from '@apollo/client';
import { isNonEmptyArray } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { useGenerateFindManyRecordsForMultipleMetadataItemsQuery } from '@/object-record/hooks/useGenerateFindManyRecordsForMultipleMetadataItemsQuery';
import { useLimitPerMetadataItem } from '@/object-record/relation-picker/hooks/useLimitPerMetadataItem';
import {
MultiObjectRecordQueryResult,
useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray,
} from '@/object-record/relation-picker/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
import { SelectedObjectRecordId } from '@/object-record/relation-picker/hooks/useMultiObjectSearch';
import { useOrderByFieldPerMetadataItem } from '@/object-record/relation-picker/hooks/useOrderByFieldPerMetadataItem';
import { isDefined } from '~/utils/isDefined';
import { capitalize } from '~/utils/string/capitalize';
export const useMultiObjectSearchSelectedItemsQuery = ({
selectedObjectRecordIds,
}: {
selectedObjectRecordIds: SelectedObjectRecordId[];
}) => {
const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
const objectMetadataItemsUsedInSelectedIdsQuery = objectMetadataItems.filter(
({ nameSingular }) => {
return selectedObjectRecordIds.some(({ objectNameSingular }) => {
return objectNameSingular === nameSingular;
});
},
);
const selectedIdFilterPerMetadataItem = Object.fromEntries(
objectMetadataItemsUsedInSelectedIdsQuery
.map(({ nameSingular }) => {
const selectedIds = selectedObjectRecordIds
.filter(
({ objectNameSingular }) => objectNameSingular === nameSingular,
)
.map(({ id }) => id);
if (!isNonEmptyArray(selectedIds)) return null;
return [
`filter${capitalize(nameSingular)}`,
{
id: {
in: selectedIds,
},
},
];
})
.filter(isDefined),
);
const { orderByFieldPerMetadataItem } = useOrderByFieldPerMetadataItem({
objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
});
const { limitPerMetadataItem } = useLimitPerMetadataItem({
objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
});
const multiSelectQueryForSelectedIds =
useGenerateFindManyRecordsForMultipleMetadataItemsQuery({
objectMetadataItems: objectMetadataItemsUsedInSelectedIdsQuery,
});
const {
loading: selectedObjectRecordsLoading,
data: selectedObjectRecordsQueryResult,
} = useQuery<MultiObjectRecordQueryResult>(multiSelectQueryForSelectedIds, {
variables: {
...selectedIdFilterPerMetadataItem,
...orderByFieldPerMetadataItem,
...limitPerMetadataItem,
},
});
const { objectRecordForSelectArray: selectedObjectRecords } =
useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray({
multiObjectRecordsQueryResult: selectedObjectRecordsQueryResult,
});
return {
selectedObjectRecordsLoading,
selectedObjectRecords,
};
};

29
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useOrderByFieldPerMetadataItem.ts Normal file
View File

@ -0,0 +1,29 @@
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getObjectOrderByField } from '@/object-metadata/utils/getObjectOrderByField';
import { isDefined } from '~/utils/isDefined';
import { capitalize } from '~/utils/string/capitalize';
export const useOrderByFieldPerMetadataItem = ({
objectMetadataItems,
}: {
objectMetadataItems: ObjectMetadataItem[];
}) => {
const orderByFieldPerMetadataItem = Object.fromEntries(
objectMetadataItems
.map((objectMetadataItem) => {
const orderByField = getObjectOrderByField(objectMetadataItem);
return [
`orderBy${capitalize(objectMetadataItem.nameSingular)}`,
{
...orderByField,
},
];
})
.filter(isDefined),
);
return {
orderByFieldPerMetadataItem,
};
};

67
packages/twenty-front/src/modules/object-record/relation-picker/hooks/useSearchFilterPerMetadataItem.ts Normal file
View File

@ -0,0 +1,67 @@
import { isNonEmptyString } from '@sniptt/guards';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
import { ObjectRecordQueryFilter } from '@/object-record/record-filter/types/ObjectRecordQueryFilter';
import { FieldMetadataType } from '~/generated/graphql';
import { isDefined } from '~/utils/isDefined';
export const useSearchFilterPerMetadataItem = ({
objectMetadataItems,
searchFilterValue,
}: {
objectMetadataItems: ObjectMetadataItem[];
searchFilterValue: string;
}) => {
const searchFilterPerMetadataItemNameSingular =
Object.fromEntries<ObjectRecordQueryFilter>(
objectMetadataItems
.map((objectMetadataItem) => {
if (!isNonEmptyString(searchFilterValue)) return null;
const labelIdentifierFieldMetadataItem =
getLabelIdentifierFieldMetadataItem(objectMetadataItem);
let searchFilter: ObjectRecordQueryFilter = {};
if (labelIdentifierFieldMetadataItem) {
switch (labelIdentifierFieldMetadataItem.type) {
case FieldMetadataType.FullName: {
searchFilter = {
or: [
{
[labelIdentifierFieldMetadataItem.name]: {
firstName: {
ilike: `%${searchFilterValue}%`,
},
},
},
{
[labelIdentifierFieldMetadataItem.name]: {
lastName: {
ilike: `%${searchFilterValue}%`,
},
},
},
],
};
break;
}
default:
searchFilter = {
[labelIdentifierFieldMetadataItem.name]: {
ilike: `%${searchFilterValue}%`,
},
};
}
}
return [objectMetadataItem.nameSingular, searchFilter] as const;
})
.filter(isDefined),
);
return {
searchFilterPerMetadataItemNameSingular,
};
};

1
packages/twenty-front/src/modules/object-record/types/ObjectRecord.ts Normal file
View File

@ -0,0 +1 @@
export type ObjectRecord = Record<string, any> & { id: string };

11
packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts Normal file
View File

@ -0,0 +1,11 @@
import { ObjectRecordEdge } from '@/object-record/types/ObjectRecordEdge';
export type ObjectRecordConnection = {
edges: ObjectRecordEdge[];
pageInfo: {
hasNextPage?: boolean;
hasPreviousPage?: boolean;
startCursor?: string;
endCursor?: string;
};
};

6
packages/twenty-front/src/modules/object-record/types/ObjectRecordEdge.ts Normal file
View File

@ -0,0 +1,6 @@
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
export type ObjectRecordEdge = {
node: ObjectRecord;
cursor: string;
};

1
packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts
View File

@ -5,5 +5,6 @@ export type ObjectRecordIdentifier = {
name: string;
avatarUrl?: string | null;
avatarType?: AvatarType | null;
linkToEntity?: string;
linkToShowPage?: string;
};

8
packages/twenty-front/src/modules/people/hooks/useSpreadsheetPersonImport.ts
View File

@ -29,7 +29,9 @@ export const useSpreadsheetPersonImport = () => {
...options,
onSubmit: async (data) => {
// TODO: Add better type checking in spreadsheet import later
const createInputs = data.validData.map((person) => ({
const createInputs = data.validData.map(
(person) =>
({
id: v4(),
name: {
firstName: person.firstName as string | undefined,
@ -55,7 +57,9 @@ export const useSpreadsheetPersonImport = () => {
jobTitle: person.jobTitle as string | undefined,
phone: person.phone as string | undefined,
city: person.city as string | undefined,
}));
}) as Person,
);
// TODO: abstract this part for any object
try {
await createManyPeople(createInputs);

3
packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx
View File

@ -5,6 +5,7 @@ import { isNonEmptyString } from '@sniptt/guards';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Avatar, AvatarType } from '@/users/components/Avatar';
import { Nullable } from '~/types/Nullable';
import { Chip, ChipVariant } from './Chip';
@ -13,7 +14,7 @@ export type EntityChipProps = {
entityId: string;
name: string;
avatarUrl?: string;
avatarType?: AvatarType;
avatarType?: Nullable<AvatarType>;
variant?: EntityChipVariant;
LeftIcon?: IconComponent;
className?: string;

4
packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
View File

@ -124,13 +124,13 @@ export const Checkbox = ({
React.useState<boolean>(false);
React.useEffect(() => {
setIsInternalChecked(checked);
setIsInternalChecked(checked ?? false);
}, [checked]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onChange?.(event);
onCheckedChange?.(event.target.checked);
setIsInternalChecked(event.target.checked);
setIsInternalChecked(event.target.checked ?? false);
};
const checkboxId = 'checkbox' + v4();

6
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityType } from '@/activities/types/Activity';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { PageHotkeyScope } from '@/types/PageHotkeyScope';
import { IconCheckbox, IconNotes, IconPlus } from '@/ui/display/icon/index';
import { IconButton } from '@/ui/input/button/components/IconButton';
@ -21,13 +21,13 @@ const StyledContainer = styled.div`
export const ShowPageAddButton = ({
entity,
}: {
entity: ActivityTargetableEntity;
entity: ActivityTargetableObject;
}) => {
const { closeDropdown, toggleDropdown } = useDropdown('add-show-page');
const openCreateActivity = useOpenCreateActivityDrawer();
const handleSelect = (type: ActivityType) => {
openCreateActivity({ type, targetableEntities: [entity] });
openCreateActivity({ type, targetableObjects: [entity] });
closeDropdown();
};

39
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
View File

@ -3,9 +3,10 @@ import styled from '@emotion/styled';
import { Threads } from '@/activities/emails/components/Threads';
import { Attachments } from '@/activities/files/components/Attachments';
import { Notes } from '@/activities/notes/components/Notes';
import { EntityTasks } from '@/activities/tasks/components/EntityTasks';
import { ObjectTasks } from '@/activities/tasks/components/ObjectTasks';
import { Timeline } from '@/activities/timeline/components/Timeline';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { isStandardObject } from '@/object-metadata/utils/isStandardObject';
import {
IconCheckbox,
IconMail,
@ -40,7 +41,7 @@ const StyledTabListContainer = styled.div`
`;
type ShowPageRightContainerProps = {
entity?: ActivityTargetableEntity;
targetableObject?: ActivityTargetableObject;
timeline?: boolean;
tasks?: boolean;
notes?: boolean;
@ -48,7 +49,7 @@ type ShowPageRightContainerProps = {
};
export const ShowPageRightContainer = ({
entity,
targetableObject,
timeline,
tasks,
notes,
@ -60,42 +61,44 @@ export const ShowPageRightContainer = ({
ShowPageRecoilScopeContext,
);
if (!entity) return <></>;
if (!targetableObject) return <></>;
const targetableObjectIsStandardObject = isStandardObject(
targetableObject.targetObjectNameSingular,
);
const TASK_TABS = [
{
id: 'timeline',
title: 'Timeline',
Icon: IconTimelineEvent,
hide: !timeline,
disabled: entity.type === 'Custom',
},
{
id: 'tasks',
title: 'Tasks',
Icon: IconCheckbox,
hide: !tasks,
disabled: entity.type === 'Custom',
},
{
id: 'notes',
title: 'Notes',
Icon: IconNotes,
hide: !notes,
disabled: entity.type === 'Custom',
},
{
id: 'files',
title: 'Files',
Icon: IconPaperclip,
hide: !notes,
disabled: entity.type === 'Custom',
disabled: !targetableObjectIsStandardObject,
},
{
id: 'emails',
title: 'Emails',
Icon: IconMail,
hide: !emails,
disabled: !isMessagingEnabled || entity.type === 'Custom',
disabled: !isMessagingEnabled || !targetableObjectIsStandardObject,
},
];
@ -104,11 +107,17 @@ export const ShowPageRightContainer = ({
<StyledTabListContainer>
<TabList context={ShowPageRecoilScopeContext} tabs={TASK_TABS} />
</StyledTabListContainer>
{activeTabId === 'timeline' && <Timeline entity={entity} />}
{activeTabId === 'tasks' && <EntityTasks entity={entity} />}
{activeTabId === 'notes' && <Notes entity={entity} />}
{activeTabId === 'files' && <Attachments targetableEntity={entity} />}
{activeTabId === 'emails' && <Threads entity={entity} />}
{activeTabId === 'timeline' && (
<Timeline targetableObject={targetableObject} />
)}
{activeTabId === 'tasks' && (
<ObjectTasks targetableObject={targetableObject} />
)}
{activeTabId === 'notes' && <Notes targetableObject={targetableObject} />}
{activeTabId === 'files' && (
<Attachments targetableObject={targetableObject} />
)}
{activeTabId === 'emails' && <Threads entity={targetableObject} />}
</StyledShowPageRightContainer>
);
};

4
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
View File

@ -1,6 +1,7 @@
import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
import { Checkbox } from '@/ui/input/components/Checkbox';
import {
@ -14,6 +15,7 @@ const StyledLeftContentWithCheckboxContainer = styled.div`
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
width: 100%;
`;
type MenuItemMultiSelectAvatarProps = {
@ -48,7 +50,7 @@ export const MenuItemMultiSelectAvatar = ({
<StyledMenuItemLeftContent>
{avatar}
<StyledMenuItemLabel hasLeftIcon={!!avatar}>
{text}
<OverflowingTextWithTooltip text={text} />
</StyledMenuItemLabel>
</StyledMenuItemLeftContent>
</StyledLeftContentWithCheckboxContainer>

3
packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
View File

@ -71,10 +71,11 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
export const StyledMenuItemLabel = styled.div<{ hasLeftIcon: boolean }>`
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
overflow: hidden;
padding-left: ${({ theme, hasLeftIcon }) =>
hasLeftIcon ? '' : theme.spacing(1)};
text-overflow: ellipsis;
white-space: nowrap;
`;

3
packages/twenty-front/src/modules/users/components/Avatar.tsx
View File

@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { Nullable } from '~/types/Nullable';
import { stringToHslColor } from '~/utils/string-to-hsl';
import { getImageAbsoluteURIOrBase64 } from '../utils/getProfilePictureAbsoluteURI';
@ -16,7 +17,7 @@ export type AvatarProps = {
size?: AvatarSize;
placeholder: string | undefined;
colorId?: string;
type?: AvatarType;
type?: Nullable<AvatarType>;
onClick?: () => void;
};

5
packages/twenty-front/src/testing/mock-data/activities.ts
View File

@ -34,6 +34,7 @@ type MockedActivity = Pick<
| 'activityId'
| 'personId'
| 'companyId'
| 'targetObjectNameSingular'
> & {
activity: Pick<Activity, 'id' | 'createdAt' | 'updatedAt'>;
person?: Pick<Person, 'id' | 'name' | 'avatarUrl'> | null;
@ -98,6 +99,7 @@ export const mockedActivities: Array<MockedActivity> = [
id: '89bb825c-171e-4bcc-9cf7-43448d6fb300',
createdAt: '2023-04-26T10:12:42.33625+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
targetObjectNameSingular: 'company',
personId: null,
companyId: '89bb825c-171e-4bcc-9cf7-43448d6fb280',
company: {
@ -118,6 +120,7 @@ export const mockedActivities: Array<MockedActivity> = [
id: '89bb825c-171e-4bcc-9cf7-43448d6fb301',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
targetObjectNameSingular: 'company',
personId: null,
companyId: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
company: {
@ -160,6 +163,7 @@ export const mockedActivities: Array<MockedActivity> = [
id: '89bb825c-171e-4bcc-9cf7-43448d6fb278t',
createdAt: '2023-04-26T10:12:42.33625+00:00',
updatedAt: '2023-04-26T10:23:42.33625+00:00',
targetObjectNameSingular: 'person',
personId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b', // Alexandre
person: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
@ -185,6 +189,7 @@ export const mockedActivities: Array<MockedActivity> = [
updatedAt: new Date().toISOString(),
personId: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d', // Jean d'Eau
companyId: null,
targetObjectNameSingular: 'person',
company: null,
person: {
id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6d',

3
packages/twenty-server/src/workspace/workspace-query-builder/factories/relation-field-alias.factory.ts
View File

@ -111,8 +111,9 @@ export class RelationFieldAliasFactory {
}
`;
}
let relationAlias = fieldMetadata.isCustom
? `${fieldKey}: ${fieldMetadata.targetColumnMap.value}`
? `${fieldKey}: ${referencedObjectMetadata.targetTableName}`
: fieldKey;
// For one to one relations, pg_graphql use the targetTableName on the side that is not storing the foreign key

1
packages/twenty-server/test/utils/reset-db.ts
View File

@ -11,7 +11,6 @@ export default async () => {
await prisma.$transaction(
entities.map((entity) => {
console.log('entity: ', entity);
return prisma[entity].deleteMany();
}),
);