Add dueDate and assignee on notes

front/src/generated/graphql.tsx

@@ -2236,14 +2236,14 @@ export type GetActivitiesByTargetsQueryVariables = Exact<{
 }>;
 
 
-export type GetActivitiesByTargetsQuery = { __typename?: 'Query', findManyActivities: Array<{ __typename?: 'Activity', id: string, createdAt: string, title?: string | null, body?: string | null, type: ActivityType, completedAt?: string | null, author: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string }, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } }> | null, activityTargets?: Array<{ __typename?: 'ActivityTarget', id: string, commentableType?: CommentableType | null, commentableId?: string | null }> | null }> };
+export type GetActivitiesByTargetsQuery = { __typename?: 'Query', findManyActivities: Array<{ __typename?: 'Activity', id: string, createdAt: string, title?: string | null, body?: string | null, type: ActivityType, completedAt?: string | null, dueAt?: string | null, assignee?: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null, author: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string }, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } }> | null, activityTargets?: Array<{ __typename?: 'ActivityTarget', id: string, commentableType?: CommentableType | null, commentableId?: string | null }> | null }> };
 
 export type GetActivityQueryVariables = Exact<{
   activityId: Scalars['String'];
 }>;
 
 
-export type GetActivityQuery = { __typename?: 'Query', findManyActivities: Array<{ __typename?: 'Activity', id: string, createdAt: string, body?: string | null, title?: string | null, type: ActivityType, completedAt?: string | null, author: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string }, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } }> | null, activityTargets?: Array<{ __typename?: 'ActivityTarget', id: string, commentableType?: CommentableType | null, commentableId?: string | null }> | null }> };
+export type GetActivityQuery = { __typename?: 'Query', findManyActivities: Array<{ __typename?: 'Activity', id: string, createdAt: string, body?: string | null, title?: string | null, type: ActivityType, completedAt?: string | null, dueAt?: string | null, assignee?: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null, author: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string }, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } }> | null, activityTargets?: Array<{ __typename?: 'ActivityTarget', id: string, commentableType?: CommentableType | null, commentableId?: string | null }> | null }> };
 
 export type AddActivityTargetsOnActivityMutationVariables = Exact<{
   activityId: Scalars['String'];
@@ -2269,15 +2269,12 @@ export type DeleteActivityMutationVariables = Exact<{
 export type DeleteActivityMutation = { __typename?: 'Mutation', deleteManyActivities: { __typename?: 'AffectedRows', count: number } };
 
 export type UpdateActivityMutationVariables = Exact<{
-  id: Scalars['String'];
-  body?: InputMaybe<Scalars['String']>;
-  title?: InputMaybe<Scalars['String']>;
-  type?: InputMaybe<ActivityType>;
-  completedAt?: InputMaybe<Scalars['DateTime']>;
+  where: ActivityWhereUniqueInput;
+  data: ActivityUpdateInput;
 }>;
 
 
-export type UpdateActivityMutation = { __typename?: 'Mutation', updateOneActivity: { __typename?: 'Activity', id: string, body?: string | null, title?: string | null, type: ActivityType, completedAt?: string | null } };
+export type UpdateActivityMutation = { __typename?: 'Mutation', updateOneActivity: { __typename?: 'Activity', id: string, body?: string | null, title?: string | null, type: ActivityType, completedAt?: string | null, dueAt?: string | null, assignee?: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null } };
 
 export type UploadAttachmentMutationVariables = Exact<{
   file: Scalars['Upload'];
@@ -2775,6 +2772,13 @@ export const GetActivitiesByTargetsDocument = gql`
     body
     type
     completedAt
+    dueAt
+    assignee {
+      id
+      firstName
+      lastName
+      displayName
+    }
     author {
       id
       firstName
@@ -2840,6 +2844,13 @@ export const GetActivityDocument = gql`
     title
     type
     completedAt
+    dueAt
+    assignee {
+      id
+      firstName
+      lastName
+      displayName
+    }
     author {
       id
       firstName
@@ -3021,16 +3032,20 @@ export type DeleteActivityMutationHookResult = ReturnType<typeof useDeleteActivi
 export type DeleteActivityMutationResult = Apollo.MutationResult<DeleteActivityMutation>;
 export type DeleteActivityMutationOptions = Apollo.BaseMutationOptions<DeleteActivityMutation, DeleteActivityMutationVariables>;
 export const UpdateActivityDocument = gql`
-    mutation UpdateActivity($id: String!, $body: String, $title: String, $type: ActivityType, $completedAt: DateTime) {
-  updateOneActivity(
-    where: {id: $id}
-    data: {body: $body, title: $title, type: $type, completedAt: $completedAt}
-  ) {
+    mutation UpdateActivity($where: ActivityWhereUniqueInput!, $data: ActivityUpdateInput!) {
+  updateOneActivity(where: $where, data: $data) {
     id
     body
     title
     type
     completedAt
+    dueAt
+    assignee {
+      id
+      firstName
+      lastName
+      displayName
+    }
   }
 }
     `;
@@ -3049,11 +3064,8 @@ export type UpdateActivityMutationFn = Apollo.MutationFunction<UpdateActivityMut
  * @example
  * const [updateActivityMutation, { data, loading, error }] = useUpdateActivityMutation({
  *   variables: {
- *      id: // value for 'id'
- *      body: // value for 'body'
- *      title: // value for 'title'
- *      type: // value for 'type'
- *      completedAt: // value for 'completedAt'
+ *      where: // value for 'where'
+ *      data: // value for 'data'
  *   },
  * });
  */

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

@@ -0,0 +1,79 @@
+import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
+import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import {
+  Activity,
+  User,
+  useSearchUserQuery,
+  useUpdateActivityMutation,
+} from '~/generated/graphql';
+
+export type OwnProps = {
+  activity: Pick<Activity, 'id'> & {
+    accountOwner?: Pick<User, 'id' | 'displayName'> | null;
+  };
+  onSubmit?: () => void;
+  onCancel?: () => void;
+};
+
+type UserForSelect = EntityForSelect & {
+  entityType: Entity.User;
+};
+
+export function ActivityAssigneePicker({
+  activity,
+  onSubmit,
+  onCancel,
+}: OwnProps) {
+  const [searchFilter] = useRecoilScopedState(
+    relationPickerSearchFilterScopedState,
+  );
+  const [updateActivity] = useUpdateActivityMutation();
+
+  const companies = useFilteredSearchEntityQuery({
+    queryHook: useSearchUserQuery,
+    selectedIds: activity?.accountOwner?.id ? [activity?.accountOwner?.id] : [],
+    searchFilter: searchFilter,
+    mappingFunction: (user) => ({
+      entityType: Entity.User,
+      id: user.id,
+      name: user.displayName,
+      avatarType: 'rounded',
+      avatarUrl: user.avatarUrl ?? '',
+    }),
+    orderByField: 'firstName',
+    searchOnFields: ['firstName', 'lastName'],
+  });
+
+  async function handleEntitySelected(
+    selectedUser: UserForSelect | null | undefined,
+  ) {
+    if (selectedUser) {
+      await updateActivity({
+        variables: {
+          where: { id: activity.id },
+          data: {
+            assignee: { connect: { id: selectedUser.id } },
+          },
+        },
+      });
+    }
+
+    onSubmit?.();
+  }
+
+  return (
+    <SingleEntitySelect
+      onEntitySelected={handleEntitySelected}
+      onCancel={onCancel}
+      entities={{
+        loading: companies.loading,
+        entitiesToSelect: companies.entitiesToSelect,
+        selectedEntity: companies.selectedEntities[0],
+      }}
+    />
+  );
+}

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

@@ -35,8 +35,12 @@ export function ActivityBodyEditor({ activity, onChange }: OwnProps) {
       setBody(activityBody);
       updateActivityMutation({
         variables: {
-          id: activity.id,
-          body: activityBody,
+          where: {
+            id: activity.id,
+          },
+          data: {
+            body: activityBody,
+          },
         },
         refetchQueries: [getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? ''],
       });

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

@@ -4,20 +4,23 @@ import styled from '@emotion/styled';
 
 import { ActivityBodyEditor } from '@/activities/components/ActivityBodyEditor';
 import { ActivityComments } from '@/activities/components/ActivityComments';
-import { ActivityRelationPicker } from '@/activities/components/ActivityRelationPicker';
 import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdown';
 import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
-import { PropertyBoxItem } from '@/ui/editable-field/property-box/components/PropertyBoxItem';
+import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
 import { useIsMobile } from '@/ui/hooks/useIsMobile';
-import { IconArrowUpRight } from '@/ui/icon/index';
+import { IconCalendar } from '@/ui/icon/index';
 import {
   Activity,
   ActivityTarget,
+  ActivityType,
+  User,
   useUpdateActivityMutation,
 } from '~/generated/graphql';
 import { debounce } from '~/utils/debounce';
 
+import { ActivityAssigneeEditableField } from '../editable-fields/components/ActivityAssigneeEditableField';
+import { ActivityRelationEditableField } from '../editable-fields/components/ActivityRelationEditableField';
 import { ActivityActionBar } from '../right-drawer/components/ActivityActionBar';
 import { CommentForDrawer } from '../types/CommentForDrawer';
 
@@ -65,8 +68,16 @@ const StyledTopActionsContainer = styled.div`
 `;
 
 type OwnProps = {
-  activity: Pick<Activity, 'id' | 'title' | 'body' | 'type' | 'completedAt'> & {
+  activity: Pick<
+    Activity,
+    'id' | 'title' | 'body' | 'type' | 'completedAt' | 'dueAt'
+  > & {
     comments?: Array<CommentForDrawer> | null;
+  } & {
+    assignee?: Pick<
+      User,
+      'id' | 'firstName' | 'lastName' | 'displayName'
+    > | null;
   } & {
     activityTargets?: Array<
       Pick<ActivityTarget, 'id' | 'commentableId' | 'commentableType'>
@@ -95,8 +106,12 @@ export function ActivityEditor({
     (newTitle: string) => {
       updateActivityMutation({
         variables: {
-          id: activity.id,
-          title: newTitle ?? '',
+          where: {
+            id: activity.id,
+          },
+          data: {
+            title: newTitle ?? '',
+          },
         },
         refetchQueries: [getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? ''],
       });
@@ -108,8 +123,12 @@ export function ActivityEditor({
     (value: boolean) => {
       updateActivityMutation({
         variables: {
-          id: activity.id,
-          completedAt: value ? new Date().toISOString() : null,
+          where: {
+            id: activity.id,
+          },
+          data: {
+            completedAt: value ? new Date().toISOString() : null,
+          },
         },
         refetchQueries: [getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? ''],
       });
@@ -152,18 +171,29 @@ export function ActivityEditor({
             onCompletionChange={handleActivityCompletionChange}
           />
           <PropertyBox>
-            <PropertyBoxItem
-              icon={<IconArrowUpRight />}
-              value={
-                <ActivityRelationPicker
-                  activity={{
-                    id: activity.id,
-                    activityTargets: activity.activityTargets ?? [],
+            {activity.type === ActivityType.Task && (
+              <>
+                <DateEditableField
+                  value={activity.dueAt}
+                  icon={<IconCalendar />}
+                  label="Due date"
+                  onSubmit={(newDate) => {
+                    updateActivityMutation({
+                      variables: {
+                        where: {
+                          id: activity.id,
+                        },
+                        data: {
+                          dueAt: newDate,
+                        },
+                      },
+                    });
                   }}
                 />
-              }
-              label="Relations"
-            />
+                <ActivityAssigneeEditableField activity={activity} />
+              </>
+            )}
+            <ActivityRelationEditableField activity={activity} />
           </PropertyBox>
         </StyledTopContainer>
         <ActivityBodyEditor

front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx

@@ -0,0 +1,47 @@
+import { EditableField } from '@/ui/editable-field/components/EditableField';
+import { FieldContext } from '@/ui/editable-field/states/FieldContext';
+import { IconUserCircle } from '@/ui/icon';
+import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { UserChip } from '@/users/components/UserChip';
+import { Company, User } from '~/generated/graphql';
+
+import { ActivityAssigneeEditableFieldEditMode } from './ActivityAssigneeEditableFieldEditMode';
+
+type OwnProps = {
+  activity: Pick<Company, 'id' | 'accountOwnerId'> & {
+    assignee?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
+  };
+};
+
+export function ActivityAssigneeEditableField({ activity }: OwnProps) {
+  return (
+    <RecoilScope SpecificContext={FieldContext}>
+      <RecoilScope>
+        <EditableField
+          customEditHotkeyScope={{
+            scope: RelationPickerHotkeyScope.RelationPicker,
+          }}
+          label="Assignee"
+          iconLabel={<IconUserCircle />}
+          editModeContent={
+            <ActivityAssigneeEditableFieldEditMode activity={activity} />
+          }
+          displayModeContent={
+            activity.assignee?.displayName ? (
+              <UserChip
+                id={activity.assignee.id}
+                name={activity.assignee?.displayName ?? ''}
+                pictureUrl={activity.assignee?.avatarUrl ?? ''}
+              />
+            ) : (
+              <></>
+            )
+          }
+          isDisplayModeContentEmpty={!activity.assignee}
+          isDisplayModeFixHeight={true}
+        />
+      </RecoilScope>
+    </RecoilScope>
+  );
+}