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

[tasks] add empty state and new task button (#1072)

Browse Source 
* [tasks] add empty state

* add refetch + use spacing for padding

* create task auto assigned with dueAt as today

* add unscheduled tasks section

* remove unnecessary assigneeId fetching

* remove unnecessary refetchQueries

* add refetch for delete task

* rename createCommentMutation to deleteActivityMutation in activityActionBar
This commit is contained in:
Weiko
2023-08-04 20:04:06 +02:00
committed by GitHub
parent c6bec40c90
commit 0d16053c31
9 changed files with 140 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/generated/graphql.tsx
View File

@ -2324,13 +2324,7 @@ export type CreateCommentMutationVariables = Exact<{
export type CreateCommentMutation = { __typename?: 'Mutation', createOneComment: { __typename?: 'Comment', id: string, createdAt: string, body: string, activityId?: string | null, author: { __typename?: 'User', id: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } } };
export type CreateActivityMutationVariables = Exact<{
activityId: Scalars['String'];
body?: InputMaybe<Scalars['String']>;
title?: InputMaybe<Scalars['String']>;
type: ActivityType;
authorId: Scalars['String'];
createdAt: Scalars['DateTime'];
activityTargetArray: Array<ActivityTargetCreateManyActivityInput> | ActivityTargetCreateManyActivityInput;
data: ActivityCreateInput;
}>;
@ -2841,10 +2835,8 @@ export type CreateCommentMutationHookResult = ReturnType<typeof useCreateComment
export type CreateCommentMutationResult = Apollo.MutationResult<CreateCommentMutation>;
export type CreateCommentMutationOptions = Apollo.BaseMutationOptions<CreateCommentMutation, CreateCommentMutationVariables>;
export const CreateActivityDocument = gql`
mutation CreateActivity($activityId: String!, $body: String, $title: String, $type: ActivityType!, $authorId: String!, $createdAt: DateTime!, $activityTargetArray: [ActivityTargetCreateManyActivityInput!]!) {
createOneActivity(
data: {id: $activityId, createdAt: $createdAt, updatedAt: $createdAt, author: {connect: {id: $authorId}}, body: $body, title: $title, type: $type, activityTargets: {createMany: {data: $activityTargetArray, skipDuplicates: true}}}
) {
mutation CreateActivity($data: ActivityCreateInput!) {
createOneActivity(data: $data) {
id
createdAt
updatedAt
@ -2885,13 +2877,7 @@ export type CreateActivityMutationFn = Apollo.MutationFunction<CreateActivityMut
* @example
* const [createActivityMutation, { data, loading, error }] = useCreateActivityMutation({
* variables: {
* activityId: // value for 'activityId'
* body: // value for 'body'
* title: // value for 'title'
* type: // value for 'type'
* authorId: // value for 'authorId'
* createdAt: // value for 'createdAt'
* activityTargetArray: // value for 'activityTargetArray'
* data: // value for 'data'
* },
* });
*/

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

@ -5,7 +5,10 @@ import styled from '@emotion/styled';
import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor';
import { ActivityComments } from '@/activities/components/ActivityComments';
import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown';
import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries';
import {
GET_ACTIVITIES,
GET_ACTIVITIES_BY_TARGETS,
} from '@/activities/queries';
import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
import { IconCalendar } from '@/ui/icon/index';
@ -175,6 +178,7 @@ export function ActivityEditor({
dueAt: newDate,
},
},
refetchQueries: [getOperationName(GET_ACTIVITIES) ?? ''],
});
}}
/>

63
front/src/modules/activities/components/TaskGroups.tsx
View File

@ -1,13 +1,74 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCheckbox } from '@tabler/icons-react';
import { Button, ButtonVariant } from '@/ui/button/components/Button';
import { ActivityType } from '~/generated/graphql';
import { useOpenCreateActivityDrawer } from '../hooks/useOpenCreateActivityDrawer';
import { useTasks } from '../hooks/useTasks';
import { TaskList } from './TaskList';
const StyledTaskGroupEmptyContainer = styled.div`
align-items: center;
align-self: stretch;
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(2)};
justify-content: center;
padding-bottom: ${({ theme }) => theme.spacing(16)};
padding-left: ${({ theme }) => theme.spacing(4)};
padding-right: ${({ theme }) => theme.spacing(4)};
padding-top: ${({ theme }) => theme.spacing(3)};
`;
const StyledEmptyTaskGroupTitle = styled.div`
color: ${({ theme }) => theme.font.color.secondary};
font-size: ${({ theme }) => theme.font.size.xxl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.md};
`;
const StyledEmptyTaskGroupSubTitle = styled.div`
color: ${({ theme }) => theme.font.color.extraLight};
font-size: ${({ theme }) => theme.font.size.xxl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.md};
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;
export function TaskGroups() {
const { todayOrPreviousTasks, upcomingTasks } = useTasks();
const { todayOrPreviousTasks, upcomingTasks, unscheduledTasks } = useTasks();
const theme = useTheme();
const openCreateActivity = useOpenCreateActivityDrawer();
if (
todayOrPreviousTasks?.length === 0 &&
upcomingTasks?.length === 0 &&
unscheduledTasks?.length === 0
) {
return (
<StyledTaskGroupEmptyContainer>
<StyledEmptyTaskGroupTitle>No task yet</StyledEmptyTaskGroupTitle>
<StyledEmptyTaskGroupSubTitle>Create one:</StyledEmptyTaskGroupSubTitle>
<Button
icon={<IconCheckbox size={theme.icon.size.sm} />}
title="New task"
variant={ButtonVariant.Secondary}
onClick={() => openCreateActivity(ActivityType.Task)}
/>
</StyledTaskGroupEmptyContainer>
);
}
return (
<>
<TaskList title="Today" tasks={todayOrPreviousTasks ?? []} />
<TaskList title="Upcoming" tasks={upcomingTasks ?? []} />
<TaskList title="Unscheduled" tasks={unscheduledTasks ?? []} />
</>
);
}

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

@ -11,7 +11,11 @@ import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { ActivityType, useCreateActivityMutation } from '~/generated/graphql';
import { GET_ACTIVITIES_BY_TARGETS, GET_ACTIVITY } from '../queries';
import {
GET_ACTIVITIES,
GET_ACTIVITIES_BY_TARGETS,
GET_ACTIVITY,
} from '../queries';
import { commentableEntityArrayState } from '../states/commentableEntityArrayState';
import { viewableActivityIdState } from '../states/viewableActivityIdState';
import { CommentableEntity } from '../types/CommentableEntity';
@ -28,34 +32,48 @@ export function useOpenCreateActivityDrawer() {
const [, setViewableActivityId] = useRecoilState(viewableActivityIdState);
return function openCreateActivityDrawer(
entity: CommentableEntity,
type: ActivityType,
entity?: CommentableEntity,
) {
createActivityMutation({
const now = new Date().toISOString();
return createActivityMutation({
variables: {
authorId: currentUser?.id ?? '',
activityId: v4(),
createdAt: new Date().toISOString(),
type: type,
activityTargetArray: [
{
commentableId: entity.id,
commentableType: entity.type,
id: v4(),
createdAt: new Date().toISOString(),
data: {
id: v4(),
createdAt: now,
updatedAt: now,
author: { connect: { id: currentUser?.id ?? '' } },
assignee: { connect: { id: currentUser?.id ?? '' } },
type: type,
activityTargets: {
createMany: {
data: entity
? [
{
commentableId: entity.id,
commentableType: entity.type,
id: v4(),
createdAt: now,
},
]
: [],
skipDuplicates: true,
},
},
],
},
},
refetchQueries: [
getOperationName(GET_COMPANIES) ?? '',
getOperationName(GET_PEOPLE) ?? '',
getOperationName(GET_ACTIVITY) ?? '',
getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? '',
getOperationName(GET_ACTIVITIES) ?? '',
],
onCompleted(data) {
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
setViewableActivityId(data.createOneActivity.id);
setCommentableEntityArray([entity]);
setCommentableEntityArray(entity ? [entity] : []);
openRightDrawer(RightDrawerPages.CreateActivity);
},
});

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

@ -44,19 +44,28 @@ export function useOpenCreateActivityDrawerForSelectedRowIds() {
id,
}),
);
const now = new Date().toISOString();
createActivityMutation({
variables: {
authorId: currentUser?.id ?? '',
activityId: v4(),
createdAt: new Date().toISOString(),
type: ActivityType.Note,
activityTargetArray: commentableEntityArray.map((entity) => ({
commentableId: entity.id,
commentableType: entity.type,
data: {
id: v4(),
createdAt: new Date().toISOString(),
})),
createdAt: now,
updatedAt: now,
author: { connect: { id: currentUser?.id ?? '' } },
type: ActivityType.Note,
activityTargets: {
createMany: {
data: commentableEntityArray.map((entity) => ({
commentableId: entity.id,
commentableType: entity.type,
id: v4(),
createdAt: new Date().toISOString(),
})),
skipDuplicates: true,
},
},
},
},
refetchQueries: [
getOperationName(GET_COMPANIES) ?? '',

5
front/src/modules/activities/hooks/useTasks.ts
View File

@ -96,8 +96,13 @@ export function useTasks() {
return dueDate > today;
});
const unscheduledTasks = tasksData?.findManyActivities.filter((task) => {
return !task.dueAt;
});
return {
todayOrPreviousTasks,
upcomingTasks,
unscheduledTasks,
};
}

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

@ -33,29 +33,8 @@ export const CREATE_COMMENT = gql`
`;
export const CREATE_ACTIVITY_WITH_COMMENT = gql`
mutation CreateActivity(
$activityId: String!
$body: String
$title: String
$type: ActivityType!
$authorId: String!
$createdAt: DateTime!
$activityTargetArray: [ActivityTargetCreateManyActivityInput!]!
) {
createOneActivity(
data: {
id: $activityId
createdAt: $createdAt
updatedAt: $createdAt
author: { connect: { id: $authorId } }
body: $body
title: $title
type: $type
activityTargets: {
createMany: { data: $activityTargetArray, skipDuplicates: true }
}
}
) {
mutation CreateActivity($data: ActivityCreateInput!) {
createOneActivity(data: $data) {
id
createdAt
updatedAt

10
front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
View File

@ -3,7 +3,10 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries';
import {
GET_ACTIVITIES,
GET_ACTIVITIES_BY_TARGETS,
} from '@/activities/queries';
import { GET_COMPANIES } from '@/companies/queries';
import { GET_PEOPLE } from '@/people/queries';
import { IconButton } from '@/ui/button/components/IconButton';
@ -22,16 +25,17 @@ type OwnProps = {
export function ActivityActionBar({ activityId }: OwnProps) {
const theme = useTheme();
const [createCommentMutation] = useDeleteActivityMutation();
const [deleteActivityMutation] = useDeleteActivityMutation();
const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
function deleteActivity() {
createCommentMutation({
deleteActivityMutation({
variables: { activityId },
refetchQueries: [
getOperationName(GET_COMPANIES) ?? '',
getOperationName(GET_PEOPLE) ?? '',
getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? '',
getOperationName(GET_ACTIVITIES) ?? '',
],
});
setIsRightDrawerOpen(false);

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

@ -121,8 +121,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
<StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
<StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
<ActivityCreateButton
onNoteClick={() => openCreateActivity(entity, ActivityType.Note)}
onTaskClick={() => openCreateActivity(entity, ActivityType.Task)}
onNoteClick={() => openCreateActivity(ActivityType.Note, entity)}
onTaskClick={() => openCreateActivity(ActivityType.Task, entity)}
/>
</StyledTimelineEmptyContainer>
);
@ -132,8 +132,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
<StyledMainContainer>
<StyledTopActionBar>
<ActivityCreateButton
onNoteClick={() => openCreateActivity(entity, ActivityType.Note)}
onTaskClick={() => openCreateActivity(entity, ActivityType.Task)}
onNoteClick={() => openCreateActivity(ActivityType.Note, entity)}
onTaskClick={() => openCreateActivity(ActivityType.Task, entity)}
/>
</StyledTopActionBar>
<StyledTimelineContainer>