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

Remove activityType and Id (#1179)

Browse Source 
* Remove activityType and Id

* Fix tests

* Fix tests
This commit is contained in:
Charles Bochet
2023-08-12 02:31:54 +02:00
committed by GitHub
parent a30222fe76
commit 35ea6b5a2f
37 changed files with 360 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/activities/components/ActivityEditor.tsx
View File

@ -72,9 +72,7 @@ type OwnProps = {
'id' | 'firstName' | 'lastName' | 'displayName'
> | null;
} & {
activityTargets?: Array<
Pick<ActivityTarget, 'id' | 'commentableId' | 'commentableType'>
> | null;
activityTargets?: Array<Pick<ActivityTarget, 'id'>> | null;
};
showComment?: boolean;
autoFillTitle?: boolean;

251
front/src/modules/activities/components/ActivityRelationPicker.tsx
View File

@ -1,251 +0,0 @@
import { useCallback, useMemo, useState } from 'react';
import styled from '@emotion/styled';
import {
autoUpdate,
flip,
offset,
size,
useFloating,
} from '@floating-ui/react';
import { CompanyChip } from '@/companies/components/CompanyChip';
import { useFilteredSearchCompanyQuery } from '@/companies/queries';
import { PersonChip } from '@/people/components/PersonChip';
import { useFilteredSearchPeopleQuery } from '@/people/queries';
import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { Activity, ActivityTarget, CommentableType } from '~/generated/graphql';
import { assertNotNull } from '~/utils/assert';
import { useHandleCheckableActivityTargetChange } from '../hooks/useHandleCheckableActivityTargetChange';
import { flatMapAndSortEntityForSelectArrayOfArrayByName } from '../utils/flatMapAndSortEntityForSelectArrayByName';
type OwnProps = {
activity?: Pick<Activity, 'id'> & {
activityTargets: Array<
Pick<
ActivityTarget,
'id' | 'commentableId' | 'commentableType' | 'companyId' | 'personId'
>
>;
};
};
const StyledContainer = styled.div`
align-items: flex-start;
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
justify-content: flex-start;
width: 100%;
`;
const StyledRelationContainer = styled.div`
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(1.5)};
border: 1px solid transparent;
cursor: pointer;
display: flex;
flex-wrap: wrap;
gap: ${({ theme }) => theme.spacing(2)};
&:hover {
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
}
min-height: calc(32px - 2 * var(--vertical-padding));
overflow: hidden;
padding: var(--vertical-padding) var(--horizontal-padding);
width: calc(100% - 2 * var(--horizontal-padding));
`;
const StyledMenuWrapper = styled.div`
z-index: ${({ theme }) => theme.lastLayerZIndex};
`;
export function ActivityRelationPicker({ activity }: OwnProps) {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [searchFilter, setSearchFilter] = useState('');
const [selectedEntityIds, setSelectedEntityIds] = useState<
Record<string, boolean>
>({});
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const initialPeopleIds = useMemo(
() =>
activity?.activityTargets
?.filter((relation) => relation.commentableType === 'Person')
.map((relation) => relation.personId || relation.commentableId)
.filter(assertNotNull) ?? [],
[activity?.activityTargets],
);
const initialCompanyIds = useMemo(
() =>
activity?.activityTargets
?.filter((relation) => relation.commentableType === 'Company')
.map((relation) => relation.companyId || relation.commentableId)
.filter(assertNotNull) ?? [],
[activity?.activityTargets],
);
const initialSelectedEntityIds = useMemo(
() =>
[...initialPeopleIds, ...initialCompanyIds].reduce<
Record<string, boolean>
>((result, entityId) => ({ ...result, [entityId]: true }), {}),
[initialPeopleIds, initialCompanyIds],
);
const personsForMultiSelect = useFilteredSearchPeopleQuery({
searchFilter,
selectedIds: initialPeopleIds,
});
const companiesForMultiSelect = useFilteredSearchCompanyQuery({
searchFilter,
selectedIds: initialCompanyIds,
});
const selectedEntities = flatMapAndSortEntityForSelectArrayOfArrayByName([
personsForMultiSelect.selectedEntities,
companiesForMultiSelect.selectedEntities,
]);
const filteredSelectedEntities =
flatMapAndSortEntityForSelectArrayOfArrayByName([
personsForMultiSelect.filteredSelectedEntities,
companiesForMultiSelect.filteredSelectedEntities,
]);
const entitiesToSelect = flatMapAndSortEntityForSelectArrayOfArrayByName([
personsForMultiSelect.entitiesToSelect,
companiesForMultiSelect.entitiesToSelect,
]);
const handleCheckItemsChange = useHandleCheckableActivityTargetChange({
activity,
});
const exitEditMode = useCallback(() => {
goBackToPreviousHotkeyScope();
setIsMenuOpen(false);
setSearchFilter('');
if (Object.values(selectedEntityIds).some((value) => !!value)) {
handleCheckItemsChange(selectedEntityIds, entitiesToSelect);
}
}, [
entitiesToSelect,
selectedEntityIds,
goBackToPreviousHotkeyScope,
handleCheckItemsChange,
]);
const handleRelationContainerClick = useCallback(() => {
if (isMenuOpen) {
exitEditMode();
} else {
setIsMenuOpen(true);
setSelectedEntityIds(initialSelectedEntityIds);
setHotkeyScopeAndMemorizePreviousScope(
RelationPickerHotkeyScope.RelationPicker,
);
}
}, [
initialSelectedEntityIds,
exitEditMode,
isMenuOpen,
setHotkeyScopeAndMemorizePreviousScope,
]);
useScopedHotkeys(
['esc', 'enter'],
() => {
exitEditMode();
},
RelationPickerHotkeyScope.RelationPicker,
[exitEditMode],
);
const { refs, floatingStyles } = useFloating({
strategy: 'absolute',
middleware: [
offset(({ rects }) => {
return -rects.reference.height;
}),
flip(),
size(),
],
whileElementsMounted: autoUpdate,
open: isMenuOpen,
placement: 'bottom-start',
});
useListenClickOutside({
refs: [refs.floating, refs.domReference],
callback: () => {
exitEditMode();
},
});
return (
<StyledContainer>
<StyledRelationContainer
ref={refs.setReference}
onClick={handleRelationContainerClick}
>
{selectedEntities?.map((entity) =>
entity.entityType === CommentableType.Company ? (
<CompanyChip
key={entity.id}
id={entity.id}
name={entity.name}
pictureUrl={entity.avatarUrl}
/>
) : (
<PersonChip
key={entity.id}
name={entity.name}
id={entity.id}
pictureUrl={entity.avatarUrl ?? ''}
/>
),
)}
</StyledRelationContainer>
{isMenuOpen && (
<RecoilScope>
<StyledMenuWrapper ref={refs.setFloating} style={floatingStyles}>
<MultipleEntitySelect
entities={{
entitiesToSelect,
filteredSelectedEntities,
selectedEntities,
loading: false, // TODO implement skeleton loading
}}
onChange={setSelectedEntityIds}
onSearchFilterChange={setSearchFilter}
searchFilter={searchFilter}
value={selectedEntityIds}
/>
</StyledMenuWrapper>
</RecoilScope>
)}
</StyledContainer>
);
}

58
front/src/modules/activities/components/ActivityTargetChips.tsx
View File

@ -2,7 +2,7 @@ import styled from '@emotion/styled';
import { CompanyChip } from '@/companies/components/CompanyChip';
import { PersonChip } from '@/people/components/PersonChip';
import { GetCompaniesQuery, GetPeopleQuery } from '~/generated/graphql';
import { ActivityTarget, Company, Person } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
const StyledContainer = styled.div`
@ -12,32 +12,44 @@ const StyledContainer = styled.div`
`;
export function ActivityTargetChips({
targetCompanies,
targetPeople,
targets,
}: {
targetCompanies?: GetCompaniesQuery;
targetPeople?: GetPeopleQuery;
targets?: Array<
Pick<ActivityTarget, 'id'> & {
person?: Pick<Person, 'id' | 'displayName' | 'avatarUrl'> | null;
company?: Pick<Company, 'id' | 'domainName' | 'name'> | null;
}
> | null;
}) {
if (!targets) {
return null;
}
return (
<StyledContainer>
{targetCompanies?.companies &&
targetCompanies.companies.map((company) => (
<CompanyChip
key={company.id}
id={company.id}
name={company.name}
pictureUrl={getLogoUrlFromDomainName(company.domainName)}
/>
))}
{targetPeople?.people &&
targetPeople.people.map((person) => (
<PersonChip
key={person.id}
id={person.id}
name={person.displayName}
pictureUrl={person.avatarUrl ?? ''}
/>
))}
{targets.map(({ company, person }) => {
if (company) {
return (
<CompanyChip
key={company.id}
id={company.id}
name={company.name}
pictureUrl={getLogoUrlFromDomainName(company.domainName)}
/>
);
}
if (person) {
return (
<PersonChip
key={person.id}
id={person.id}
name={person.displayName}
pictureUrl={person.avatarUrl ?? undefined}
/>
);
}
return <></>;
})}
</StyledContainer>
);
}

36
front/src/modules/activities/components/TaskRow.tsx
View File

@ -9,7 +9,6 @@ import {
CheckboxShape,
} from '@/ui/input/checkbox/components/Checkbox';
import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
import { useGetCompaniesQuery, useGetPeopleQuery } from '~/generated/graphql';
import { beautifyExactDate } from '~/utils/date-utils';
import { useCompleteTask } from '../hooks/useCompleteTask';
@ -62,37 +61,7 @@ const StyledFieldsContainer = styled.div`
export function TaskRow({ task }: { task: TaskForList }) {
const theme = useTheme();
const openActivityRightDrawer = useOpenActivityRightDrawer();
const { data: targetPeople } = useGetPeopleQuery({
variables: {
where: {
id: {
in: task?.activityTargets
? task?.activityTargets
.filter((target) => target.commentableType === 'Person')
.map(
(target) => (target.personId || target.commentableId) ?? '',
)
: [],
},
},
},
});
const { data: targetCompanies } = useGetCompaniesQuery({
variables: {
where: {
id: {
in: task?.activityTargets
? task?.activityTargets
.filter((target) => target.commentableType === 'Company')
.map(
(target) => (target.companyId || target.commentableId) ?? '',
)
: [],
},
},
},
});
const body = JSON.parse(task.body ?? '{}')[0]?.content[0]?.text;
const { completeTask } = useCompleteTask(task);
@ -123,10 +92,7 @@ export function TaskRow({ task }: { task: TaskForList }) {
)}
</StyledTaskBody>
<StyledFieldsContainer>
<ActivityTargetChips
targetCompanies={targetCompanies}
targetPeople={targetPeople}
/>
<ActivityTargetChips targets={task.activityTargets} />
<StyledDueDate>
<IconCalendar size={theme.icon.size.md} />
{task.dueAt && beautifyExactDate(task.dueAt)}

37
front/src/modules/activities/components/__stories__/ActivityRelationPicker.stories.tsx
View File

@ -1,37 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import styled from '@emotion/styled';
import type { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedActivities } from '~/testing/mock-data/activities';
import { ActivityRelationPicker } from '../ActivityRelationPicker';
const StyledContainer = styled.div`
width: 400px;
`;
const meta: Meta<typeof ActivityRelationPicker> = {
title: 'Modules/Comments/ActivityRelationPicker',
component: ActivityRelationPicker,
decorators: [
(Story) => (
<MemoryRouter>
<StyledContainer>
<Story />
</StyledContainer>
</MemoryRouter>
),
ComponentDecorator,
],
args: { activity: mockedActivities[0] },
parameters: {
msw: graphqlMocks,
},
};
export default meta;
type Story = StoryObj<typeof ActivityRelationPicker>;
export const Default: Story = {};

52
front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx
View File

@ -4,59 +4,22 @@ import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { IconArrowUpRight } from '@/ui/icon';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import {
Activity,
ActivityTarget,
useGetCompaniesQuery,
useGetPeopleQuery,
} from '~/generated/graphql';
import { Activity, ActivityTarget, Company, Person } from '~/generated/graphql';
import { ActivityRelationEditableFieldEditMode } from './ActivityRelationEditableFieldEditMode';
type OwnProps = {
activity?: Pick<Activity, 'id'> & {
activityTargets?: Array<
Pick<
ActivityTarget,
'id' | 'commentableId' | 'commentableType' | 'personId' | 'companyId'
>
Pick<ActivityTarget, 'id' | 'personId' | 'companyId'> & {
person?: Pick<Person, 'id' | 'displayName'>;
company?: Pick<Company, 'id' | 'domainName' | 'name'>;
}
> | null;
};
};
export function ActivityRelationEditableField({ activity }: OwnProps) {
const { data: targetPeople } = useGetPeopleQuery({
variables: {
where: {
id: {
in: activity?.activityTargets
? activity?.activityTargets
.filter((target) => target.commentableType === 'Person')
.map(
(target) => (target.personId || target.commentableId) ?? '',
)
: [],
},
},
},
});
const { data: targetCompanies } = useGetCompaniesQuery({
variables: {
where: {
id: {
in: activity?.activityTargets
? activity?.activityTargets
.filter((target) => target.commentableType === 'Company')
.map(
(target) => (target.companyId || target.commentableId) ?? '',
)
: [],
},
},
},
});
return (
<RecoilScope SpecificContext={FieldContext}>
<RecoilScope>
@ -71,10 +34,7 @@ export function ActivityRelationEditableField({ activity }: OwnProps) {
}
label="Relations"
displayModeContent={
<ActivityTargetChips
targetCompanies={targetCompanies}
targetPeople={targetPeople}
/>
<ActivityTargetChips targets={activity?.activityTargets} />
}
/>
</RecoilScope>

13
front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx
View File

@ -13,10 +13,7 @@ import { assertNotNull } from '~/utils/assert';
type OwnProps = {
activity?: Pick<Activity, 'id'> & {
activityTargets?: Array<
Pick<
ActivityTarget,
'id' | 'commentableId' | 'commentableType' | 'personId' | 'companyId'
>
Pick<ActivityTarget, 'id' | 'personId' | 'companyId'>
> | null;
};
};
@ -33,8 +30,8 @@ export function ActivityRelationEditableFieldEditMode({ activity }: OwnProps) {
const initialPeopleIds = useMemo(
() =>
activity?.activityTargets
?.filter((relation) => relation.commentableType === 'Person')
.map((relation) => relation.personId || relation.commentableId)
?.filter((relation) => relation.personId !== null)
.map((relation) => relation.personId)
.filter(assertNotNull) ?? [],
[activity?.activityTargets],
);
@ -42,8 +39,8 @@ export function ActivityRelationEditableFieldEditMode({ activity }: OwnProps) {
const initialCompanyIds = useMemo(
() =>
activity?.activityTargets
?.filter((relation) => relation.commentableType === 'Company')
.map((relation) => relation.companyId || relation.commentableId)
?.filter((relation) => relation.companyId !== null)
.map((relation) => relation.companyId)
.filter(assertNotNull) ?? [],
[activity?.activityTargets],
);

27
front/src/modules/activities/hooks/useHandleCheckableActivityTargetChange.ts
View File

@ -6,20 +6,20 @@ import { GET_PEOPLE } from '@/people/queries';
import {
Activity,
ActivityTarget,
CommentableType,
useAddActivityTargetsOnActivityMutation,
useRemoveActivityTargetsOnActivityMutation,
} from '~/generated/graphql';
import { GET_ACTIVITY } from '../queries';
import { CommentableEntityForSelect } from '../types/CommentableEntityForSelect';
import { ActivityTargetableEntityType } from '../types/ActivityTargetableEntity';
import { ActivityTargetableEntityForSelect } from '../types/ActivityTargetableEntityForSelect';
export function useHandleCheckableActivityTargetChange({
activity,
}: {
activity?: Pick<Activity, 'id'> & {
activityTargets?: Array<
Pick<ActivityTarget, 'id' | 'commentableId' | 'commentableType'>
Pick<ActivityTarget, 'id' | 'personId' | 'companyId'>
> | null;
};
}) {
@ -43,14 +43,16 @@ export function useHandleCheckableActivityTargetChange({
return async function handleCheckItemsChange(
entityValues: Record<string, boolean>,
entities: CommentableEntityForSelect[],
entities: ActivityTargetableEntityForSelect[],
) {
if (!activity) {
return;
}
const currentEntityIds = activity.activityTargets
? activity.activityTargets.map(({ commentableId }) => commentableId)
? activity.activityTargets.map(
({ personId, companyId }) => personId ?? companyId,
)
: [];
const entitiesToAdd = entities.filter(
@ -64,12 +66,14 @@ export function useHandleCheckableActivityTargetChange({
activityTargetInputs: entitiesToAdd.map((entity) => ({
id: v4(),
createdAt: new Date().toISOString(),
commentableType: entity.entityType,
commentableId: entity.id,
companyId:
entity.entityType === CommentableType.Company ? entity.id : null,
entity.entityType === ActivityTargetableEntityType.Company
? entity.id
: null,
personId:
entity.entityType === CommentableType.Person ? entity.id : null,
entity.entityType === ActivityTargetableEntityType.Person
? entity.id
: null,
})),
},
});
@ -77,8 +81,9 @@ export function useHandleCheckableActivityTargetChange({
const activityTargetIdsToDelete = activity.activityTargets
? activity.activityTargets
.filter(
({ commentableId }) =>
commentableId && !entityValues[commentableId],
({ personId, companyId }) =>
(personId ?? companyId) &&
!entityValues[personId ?? companyId ?? ''],
)
.map(({ id }) => id)
: [];

29
front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
View File

@ -9,20 +9,19 @@ import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer';
import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope';
import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import {
ActivityType,
CommentableType,
useCreateActivityMutation,
} from '~/generated/graphql';
import { ActivityType, useCreateActivityMutation } from '~/generated/graphql';
import {
GET_ACTIVITIES,
GET_ACTIVITIES_BY_TARGETS,
GET_ACTIVITY,
} from '../queries';
import { commentableEntityArrayState } from '../states/commentableEntityArrayState';
import { activityTargetableEntityArrayState } from '../states/activityTargetableEntityArrayState';
import { viewableActivityIdState } from '../states/viewableActivityIdState';
import { CommentableEntity } from '../types/CommentableEntity';
import {
ActivityTargetableEntity,
ActivityTargetableEntityType,
} from '../types/ActivityTargetableEntity';
export function useOpenCreateActivityDrawer() {
const { openRightDrawer } = useRightDrawer();
@ -30,14 +29,14 @@ export function useOpenCreateActivityDrawer() {
const currentUser = useRecoilValue(currentUserState);
const setHotkeyScope = useSetHotkeyScope();
const [, setCommentableEntityArray] = useRecoilState(
commentableEntityArrayState,
const [, setActivityTargetableEntityArray] = useRecoilState(
activityTargetableEntityArrayState,
);
const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
return function openCreateActivityDrawer(
type: ActivityType,
entities?: CommentableEntity[],
entities?: ActivityTargetableEntity[],
) {
const now = new Date().toISOString();
@ -54,14 +53,14 @@ export function useOpenCreateActivityDrawer() {
createMany: {
data: entities
? entities.map((entity) => ({
commentableId: entity.id,
commentableType: entity.type,
companyId:
entity.type === CommentableType.Company
entity.type === ActivityTargetableEntityType.Company
? entity.id
: null,
personId:
entity.type === CommentableType.Person ? entity.id : null,
entity.type === ActivityTargetableEntityType.Person
? entity.id
: null,
id: v4(),
createdAt: now,
}))
@ -81,7 +80,7 @@ export function useOpenCreateActivityDrawer() {
onCompleted(data) {
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
setViewableActivityId(data.createOneActivity.id);
setCommentableEntityArray(entities ?? []);
setActivityTargetableEntityArray(entities ?? []);
openRightDrawer(RightDrawerPages.CreateActivity);
},
});

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

@ -1,9 +1,12 @@
import { useRecoilValue } from 'recoil';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { ActivityType, CommentableType } from '~/generated/graphql';
import { ActivityType } from '~/generated/graphql';
import { CommentableEntity } from '../types/CommentableEntity';
import {
ActivityTargetableEntity,
ActivityTargetableEntityType,
} from '../types/ActivityTargetableEntity';
import { useOpenCreateActivityDrawer } from './useOpenCreateActivityDrawer';
@ -14,14 +17,13 @@ export function useOpenCreateActivityDrawerForSelectedRowIds() {
return function openCreateCommentDrawerForSelectedRowIds(
type: ActivityType,
entityType: CommentableType,
entityType: ActivityTargetableEntityType,
) {
const commentableEntityArray: CommentableEntity[] = selectedEntityIds.map(
(id) => ({
const activityTargetableEntityArray: ActivityTargetableEntity[] =
selectedEntityIds.map((id) => ({
type: entityType,
id,
}),
);
openCreateActivityDrawer(type, commentableEntityArray);
}));
openCreateActivityDrawer(type, activityTargetableEntityArray);
};
}

12
front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts
View File

@ -5,22 +5,22 @@ import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotke
import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { commentableEntityArrayState } from '../states/commentableEntityArrayState';
import { CommentableEntity } from '../types/CommentableEntity';
import { activityTargetableEntityArrayState } from '../states/activityTargetableEntityArrayState';
import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity';
// TODO: refactor with recoil callback to avoid rerender
export function useOpenTimelineRightDrawer() {
const { openRightDrawer } = useRightDrawer();
const [, setCommentableEntityArray] = useRecoilState(
commentableEntityArrayState,
const [, setActivityTargetableEntityArray] = useRecoilState(
activityTargetableEntityArrayState,
);
const setHotkeyScope = useSetHotkeyScope();
return function openTimelineRightDrawer(
commentableEntityArray: CommentableEntity[],
activityTargetableEntityArray: ActivityTargetableEntity[],
) {
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
setCommentableEntityArray(commentableEntityArray);
setActivityTargetableEntityArray(activityTargetableEntityArray);
openRightDrawer(RightDrawerPages.Timeline);
};
}

2
front/src/modules/activities/queries/create.ts
View File

@ -45,8 +45,6 @@ export const CREATE_ACTIVITY_WITH_COMMENT = gql`
createdAt
updatedAt
activityId
commentableType
commentableId
companyId
personId
}

175
front/src/modules/activities/queries/select.ts
View File

@ -1,5 +1,58 @@
import { gql } from '@apollo/client';
export const ACTIVITY_QUERY_FRAGMENT = gql`
fragment ActivityQueryFragment on Activity {
id
createdAt
title
body
type
completedAt
dueAt
assignee {
id
firstName
lastName
displayName
avatarUrl
}
author {
id
firstName
lastName
displayName
}
comments {
id
body
createdAt
updatedAt
author {
id
displayName
firstName
lastName
avatarUrl
}
}
activityTargets {
id
companyId
personId
company {
id
name
domainName
}
person {
id
displayName
avatarUrl
}
}
}
`;
export const GET_ACTIVITIES_BY_TARGETS = gql`
query GetActivitiesByTargets(
$activityTargetIds: [String!]!
@ -8,49 +61,17 @@ export const GET_ACTIVITIES_BY_TARGETS = gql`
findManyActivities(
orderBy: $orderBy
where: {
activityTargets: { some: { commentableId: { in: $activityTargetIds } } }
}
) {
id
createdAt
title
body
type
completedAt
dueAt
assignee {
id
firstName
lastName
displayName
avatarUrl
}
author {
id
firstName
lastName
displayName
}
comments {
id
body
createdAt
updatedAt
author {
id
displayName
firstName
lastName
avatarUrl
activityTargets: {
some: {
OR: [
{ personId: { in: $activityTargetIds } }
{ companyId: { in: $activityTargetIds } }
]
}
}
}
activityTargets {
id
commentableType
commentableId
companyId
personId
}
) {
...ActivityQueryFragment
}
}
`;
@ -61,36 +82,7 @@ export const GET_ACTIVITIES = gql`
$orderBy: [ActivityOrderByWithRelationInput!]
) {
findManyActivities(orderBy: $orderBy, where: $where) {
id
createdAt
title
body
type
completedAt
dueAt
assignee {
id
firstName
lastName
displayName
avatarUrl
}
author {
id
firstName
lastName
displayName
}
comments {
id
}
activityTargets {
id
commentableType
commentableId
companyId
personId
}
...ActivityQueryFragment
}
}
`;
@ -98,46 +90,7 @@ export const GET_ACTIVITIES = gql`
export const GET_ACTIVITY = gql`
query GetActivity($activityId: String!) {
findManyActivities(where: { id: { equals: $activityId } }) {
id
createdAt
body
title
type
completedAt
dueAt
assignee {
id
firstName
lastName
displayName
avatarUrl
}
author {
id
firstName
lastName
displayName
}
comments {
id
body
createdAt
updatedAt
author {
id
displayName
firstName
lastName
avatarUrl
}
}
activityTargets {
id
commentableType
commentableId
companyId
personId
}
...ActivityQueryFragment
}
}
`;

4
front/src/modules/activities/queries/update.ts
View File

@ -16,8 +16,6 @@ export const ADD_ACTIVITY_TARGETS = gql`
id
createdAt
updatedAt
commentableType
commentableId
companyId
personId
}
@ -43,8 +41,6 @@ export const REMOVE_ACTIVITY_TARGETS = gql`
id
createdAt
updatedAt
commentableType
commentableId
companyId
personId
}

16
front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx
View File

@ -1,19 +1,21 @@
import { useRecoilState } from 'recoil';
import { useRecoilValue } from 'recoil';
import { commentableEntityArrayState } from '@/activities/states/commentableEntityArrayState';
import { activityTargetableEntityArrayState } from '@/activities/states/activityTargetableEntityArrayState';
import { Timeline } from '@/activities/timeline/components/Timeline';
export function RightDrawerTimeline() {
const [commentableEntityArray] = useRecoilState(commentableEntityArrayState);
const activityTargetableEntityArray = useRecoilValue(
activityTargetableEntityArrayState,
);
return (
<>
{commentableEntityArray.map((commentableEntity) => (
{activityTargetableEntityArray.map((targetableEntity) => (
<Timeline
key={commentableEntity.id}
key={targetableEntity.id}
entity={{
id: commentableEntity?.id ?? '',
type: commentableEntity.type,
id: targetableEntity?.id ?? '',
type: targetableEntity.type,
}}
/>
))}

10
front/src/modules/activities/states/activityTargetableEntityArrayState.ts Normal file
View File

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

8
front/src/modules/activities/states/commentableEntityArrayState.ts
View File

@ -1,8 +0,0 @@
import { atom } from 'recoil';
import { CommentableEntity } from '../types/CommentableEntity';
export const commentableEntityArrayState = atom<CommentableEntity[]>({
key: 'activities/commentable-entity-array',
default: [],
});

4
front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -5,7 +5,7 @@ import styled from '@emotion/styled';
import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityForDrawer } from '@/activities/types/ActivityForDrawer';
import { CommentableEntity } from '@/activities/types/CommentableEntity';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { IconCircleDot } from '@/ui/icon';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import {
@ -93,7 +93,7 @@ const StyledStartIcon = styled.div`
width: 20px;
`;
export function Timeline({ entity }: { entity: CommentableEntity }) {
export function Timeline({ entity }: { entity: ActivityTargetableEntity }) {
const theme = useTheme();
const { data: queryResult, loading } = useGetActivitiesByTargetsQuery({

9
front/src/modules/activities/types/ActivityTargetableEntity.ts Normal file
View File

@ -0,0 +1,9 @@
export enum ActivityTargetableEntityType {
Person = 'Person',
Company = 'Company',
}
export type ActivityTargetableEntity = {
id: string;
type: ActivityTargetableEntityType;
};

7
front/src/modules/activities/types/ActivityTargetableEntityForSelect.ts Normal file
View File

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

6
front/src/modules/activities/types/CommentableEntity.ts
View File

@ -1,6 +0,0 @@
import { CommentableType } from '~/generated/graphql';
export type CommentableEntity = {
id: string;
type: CommentableType;
};

6
front/src/modules/activities/types/CommentableEntityForSelect.ts
View File

@ -1,6 +0,0 @@
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { CommentableType } from '~/generated/graphql';
export type CommentableEntityForSelect = EntityForSelect & {
entityType: CommentableType;
};

8
front/src/modules/companies/queries/select.ts
View File

@ -1,10 +1,10 @@
import { gql } from '@apollo/client';
import { CommentableEntityForSelect } from '@/activities/types/CommentableEntityForSelect';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableEntityForSelect } from '@/activities/types/ActivityTargetableEntityForSelect';
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
import {
CommentableType,
CompanyOrderByWithRelationInput as Companies_Order_By,
CompanyWhereInput as Companies_Bool_Exp,
SortOrder as Order_By,
@ -65,11 +65,11 @@ export function useFilteredSearchCompanyQuery({
mappingFunction: (company) =>
({
id: company.id,
entityType: CommentableType.Company,
entityType: ActivityTargetableEntityType.Company,
name: company.name,
avatarUrl: getLogoUrlFromDomainName(company.domainName),
avatarType: 'squared',
} as CommentableEntityForSelect),
} as ActivityTargetableEntityForSelect),
searchFilter,
limit,
});

5
front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx
View File

@ -1,14 +1,15 @@
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments';
import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks';
import { ActivityType, CommentableType } from '~/generated/graphql';
import { ActivityType } from '~/generated/graphql';
export function TableActionBarButtonCreateActivityCompany() {
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleButtonClick(type: ActivityType) {
openCreateActivityRightDrawer(type, CommentableType.Company);
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
}
return (

8
front/src/modules/people/queries/select.ts
View File

@ -1,10 +1,10 @@
import { gql } from '@apollo/client';
import { CommentableEntityForSelect } from '@/activities/types/CommentableEntityForSelect';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ActivityTargetableEntityForSelect } from '@/activities/types/ActivityTargetableEntityForSelect';
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
import {
CommentableType,
PersonOrderByWithRelationInput as People_Order_By,
PersonWhereInput as People_Bool_Exp,
SortOrder,
@ -69,11 +69,11 @@ export function useFilteredSearchPeopleQuery({
mappingFunction: (entity) =>
({
id: entity.id,
entityType: CommentableType.Person,
entityType: ActivityTargetableEntityType.Person,
name: `${entity.firstName} ${entity.lastName}`,
avatarUrl: entity.avatarUrl,
avatarType: 'rounded',
} as CommentableEntityForSelect),
} as ActivityTargetableEntityForSelect),
searchFilter,
limit,
});

5
front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx
View File

@ -1,14 +1,15 @@
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { TableActionBarButtonToggleComments } from '@/ui/table/action-bar/components/TableActionBarButtonOpenComments';
import { TableActionBarButtonToggleTasks } from '@/ui/table/action-bar/components/TableActionBarButtonOpenTasks';
import { ActivityType, CommentableType } from '~/generated/graphql';
import { ActivityType } from '~/generated/graphql';
export function TableActionBarButtonCreateActivityPeople() {
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleButtonClick(type: ActivityType) {
openCreateActivityRightDrawer(type, CommentableType.Person);
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Person);
}
return (

5
front/src/modules/ui/input/relation-picker/types/EntityTypeForSelect.ts
View File

@ -1,4 +1,5 @@
import { CommentableType, PipelineProgressableType } from '~/generated/graphql';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { PipelineProgressableType } from '~/generated/graphql';
export enum Entity {
Company = 'Company',
@ -7,6 +8,6 @@ export enum Entity {
}
export type EntityTypeForSelect =
| CommentableType
| ActivityTargetableEntityType
| PipelineProgressableType
| Entity;