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

* [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

front/src/generated/graphql.tsx

@@ -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'];
+  data: ActivityCreateInput;
-  body?: InputMaybe<Scalars['String']>;
-  title?: InputMaybe<Scalars['String']>;
-  type: ActivityType;
-  authorId: Scalars['String'];
-  createdAt: Scalars['DateTime'];
-  activityTargetArray: Array<ActivityTargetCreateManyActivityInput> | ActivityTargetCreateManyActivityInput;
 }>;
 
 
@@ -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!]!) {
+    mutation CreateActivity($data: ActivityCreateInput!) {
-  createOneActivity(
+  createOneActivity(data: $data) {
-    data: {id: $activityId, createdAt: $createdAt, updatedAt: $createdAt, author: {connect: {id: $authorId}}, body: $body, title: $title, type: $type, activityTargets: {createMany: {data: $activityTargetArray, skipDuplicates: true}}}
-  ) {
     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'
+ *      data: // value for 'data'
- *      body: // value for 'body'
- *      title: // value for 'title'
- *      type: // value for 'type'
- *      authorId: // value for 'authorId'
- *      createdAt: // value for 'createdAt'
- *      activityTargetArray: // value for 'activityTargetArray'
  *   },
  * });
  */

front/src/modules/activities/components/ActivityEditor.tsx

@@ -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) ?? ''],
                     });
                   }}
                 />

front/src/modules/activities/components/TaskGroups.tsx

@@ -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 ?? []} />
     </>
   );
 }

front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -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 ?? '',
+        data: {
-        activityId: v4(),
+          id: v4(),
-        createdAt: new Date().toISOString(),
+          createdAt: now,
-        type: type,
+          updatedAt: now,
-        activityTargetArray: [
+          author: { connect: { id: currentUser?.id ?? '' } },
-          {
+          assignee: { connect: { id: currentUser?.id ?? '' } },
-            commentableId: entity.id,
+          type: type,
-            commentableType: entity.type,
+          activityTargets: {
-            id: v4(),
+            createMany: {
-            createdAt: new Date().toISOString(),
+              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);
       },
     });

front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts

@@ -44,19 +44,28 @@ export function useOpenCreateActivityDrawerForSelectedRowIds() {
         id,
       }),
     );
+    const now = new Date().toISOString();
 
     createActivityMutation({
       variables: {
-        authorId: currentUser?.id ?? '',
+        data: {
-        activityId: v4(),
-        createdAt: new Date().toISOString(),
-        type: ActivityType.Note,
-        activityTargetArray: commentableEntityArray.map((entity) => ({
-          commentableId: entity.id,
-          commentableType: entity.type,
           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) ?? '',

front/src/modules/activities/hooks/useTasks.ts

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

front/src/modules/activities/queries/create.ts

@@ -33,29 +33,8 @@ export const CREATE_COMMENT = gql`
 `;
 
 export const CREATE_ACTIVITY_WITH_COMMENT = gql`
-  mutation CreateActivity(
+  mutation CreateActivity($data: ActivityCreateInput!) {
-    $activityId: String!
+    createOneActivity(data: $data) {
-    $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 }
-        }
-      }
-    ) {
       id
       createdAt
       updatedAt

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

@@ -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);

front/src/modules/activities/timeline/components/Timeline.tsx

@@ -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)}
+          onNoteClick={() => openCreateActivity(ActivityType.Note, entity)}
-          onTaskClick={() => openCreateActivity(entity, ActivityType.Task)}
+          onTaskClick={() => openCreateActivity(ActivityType.Task, entity)}
         />
       </StyledTimelineEmptyContainer>
     );
@@ -132,8 +132,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
     <StyledMainContainer>
       <StyledTopActionBar>
         <ActivityCreateButton
-          onNoteClick={() => openCreateActivity(entity, ActivityType.Note)}
+          onNoteClick={() => openCreateActivity(ActivityType.Note, entity)}
-          onTaskClick={() => openCreateActivity(entity, ActivityType.Task)}
+          onTaskClick={() => openCreateActivity(ActivityType.Task, entity)}
         />
       </StyledTopActionBar>
       <StyledTimelineContainer>