Feat/activity optimistic activities (#4009)
* Fix naming * Fixed cache.evict bug for relation target deletion * Fixed cascade delete activity targets * Working version * Fix * fix * WIP * Fixed optimistic effect target inline cell * Removed openCreateActivityDrawer v1 * Ok for timeline * Removed console.log * Fix update record optimistic effect * Refactored activity queries into useActivities for everything * Fixed bugs * Cleaned * Fix lint --------- Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
@ -1,28 +1,15 @@
|
||||
import { isNonEmptyString } from '@sniptt/guards';
|
||||
|
||||
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
|
||||
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
|
||||
import { PageAddButton } from '@/ui/layout/page/PageAddButton';
|
||||
|
||||
type PageAddTaskButtonProps = {
|
||||
filterDropdownId: string;
|
||||
};
|
||||
|
||||
export const PageAddTaskButton = ({
|
||||
filterDropdownId,
|
||||
}: PageAddTaskButtonProps) => {
|
||||
const { selectedFilter } = useFilterDropdown({
|
||||
filterDropdownId: filterDropdownId,
|
||||
});
|
||||
|
||||
export const PageAddTaskButton = () => {
|
||||
const openCreateActivity = useOpenCreateActivityDrawer();
|
||||
|
||||
// TODO: fetch workspace member from filter here
|
||||
|
||||
const handleClick = () => {
|
||||
openCreateActivity({
|
||||
type: 'Task',
|
||||
assigneeId: isNonEmptyString(selectedFilter?.value)
|
||||
? selectedFilter?.value
|
||||
: undefined,
|
||||
targetableObjects: [],
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -40,6 +40,7 @@ export const TaskGroups = ({
|
||||
upcomingTasks,
|
||||
unscheduledTasks,
|
||||
completedTasks,
|
||||
initialized,
|
||||
} = useTasks({
|
||||
filterDropdownId: filterDropdownId,
|
||||
targetableObjects: targetableObjects ?? [],
|
||||
@ -50,6 +51,10 @@ export const TaskGroups = ({
|
||||
const { getActiveTabIdState } = useTabList(TASKS_TAB_LIST_COMPONENT_ID);
|
||||
const activeTabId = useRecoilValue(getActiveTabIdState());
|
||||
|
||||
if (!initialized) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
if (
|
||||
(activeTabId !== 'done' &&
|
||||
todayOrPreviousTasks?.length === 0 &&
|
||||
@ -73,7 +78,7 @@ export const TaskGroups = ({
|
||||
onClick={() =>
|
||||
openCreateActivity({
|
||||
type: 'Task',
|
||||
targetableObjects,
|
||||
targetableObjects: targetableObjects ?? [],
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
@ -2,13 +2,12 @@ import { ReactElement } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { Activity } from '@/activities/types/Activity';
|
||||
import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
|
||||
|
||||
import { TaskRow } from './TaskRow';
|
||||
|
||||
type TaskListProps = {
|
||||
title?: string;
|
||||
tasks: Omit<Activity, 'assigneeId'>[];
|
||||
tasks: Activity[];
|
||||
button?: ReactElement | false;
|
||||
};
|
||||
|
||||
@ -61,7 +60,7 @@ export const TaskList = ({ title, tasks, button }: TaskListProps) => (
|
||||
</StyledTitleBar>
|
||||
<StyledTaskRows>
|
||||
{tasks.map((task) => (
|
||||
<TaskRow key={task.id} task={task as unknown as GraphQLActivity} />
|
||||
<TaskRow key={task.id} task={task} />
|
||||
))}
|
||||
</StyledTaskRows>
|
||||
</StyledContainer>
|
||||
|
||||
@ -4,7 +4,7 @@ import styled from '@emotion/styled';
|
||||
import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
|
||||
import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
|
||||
import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
|
||||
import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
|
||||
import { Activity } from '@/activities/types/Activity';
|
||||
import { getActivitySummary } from '@/activities/utils/getActivitySummary';
|
||||
import { IconCalendar, IconComment } from '@/ui/display/icon';
|
||||
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
|
||||
@ -71,11 +71,7 @@ const StyledPlaceholder = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
`;
|
||||
|
||||
export const TaskRow = ({
|
||||
task,
|
||||
}: {
|
||||
task: Omit<GraphQLActivity, 'assigneeId'>;
|
||||
}) => {
|
||||
export const TaskRow = ({ task }: { task: Activity }) => {
|
||||
const theme = useTheme();
|
||||
const openActivityRightDrawer = useOpenActivityRightDrawer();
|
||||
|
||||
@ -89,7 +85,7 @@ export const TaskRow = ({
|
||||
return (
|
||||
<StyledContainer
|
||||
onClick={() => {
|
||||
openActivityRightDrawer(task.id);
|
||||
openActivityRightDrawer(task);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards';
|
||||
import { isNonEmptyArray } from '@sniptt/guards';
|
||||
import { DateTime } from 'luxon';
|
||||
|
||||
import { useActivities } from '@/activities/hooks/useActivities';
|
||||
import { FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY } from '@/activities/timeline/constants/FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY';
|
||||
import { Activity } from '@/activities/types/Activity';
|
||||
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';
|
||||
|
||||
type UseTasksProps = {
|
||||
@ -23,43 +21,6 @@ export const useTasks = ({
|
||||
filterDropdownId,
|
||||
});
|
||||
|
||||
const isTargettingObjectRecords = isNonEmptyArray(targetableObjects);
|
||||
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: targetableObjectsFilter,
|
||||
skip: !isTargettingObjectRecords,
|
||||
});
|
||||
|
||||
const skipRequest = !isNonEmptyArray(activityTargets) && !selectedFilter;
|
||||
|
||||
const idFilter = isTargettingObjectRecords
|
||||
? {
|
||||
id: {
|
||||
in: activityTargets.map(
|
||||
(activityTarget) => activityTarget.activityId,
|
||||
),
|
||||
},
|
||||
}
|
||||
: { id: {} };
|
||||
|
||||
const assigneeIdFilter = selectedFilter
|
||||
? {
|
||||
assigneeId: {
|
||||
@ -68,32 +29,34 @@ export const useTasks = ({
|
||||
}
|
||||
: undefined;
|
||||
|
||||
const { records: completeTasksData } = useFindManyRecords({
|
||||
objectNameSingular: CoreObjectNameSingular.Activity,
|
||||
skip: skipRequest,
|
||||
filter: {
|
||||
const skipActivityTargets = !isNonEmptyArray(targetableObjects);
|
||||
|
||||
const {
|
||||
activities: completeTasksData,
|
||||
initialized: initializedCompleteTasks,
|
||||
} = useActivities({
|
||||
targetableObjects,
|
||||
activitiesFilters: {
|
||||
completedAt: { is: 'NOT_NULL' },
|
||||
...idFilter,
|
||||
type: { eq: 'Task' },
|
||||
...assigneeIdFilter,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: 'DescNullsFirst',
|
||||
},
|
||||
activitiesOrderByVariables: FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
|
||||
skipActivityTargets,
|
||||
});
|
||||
|
||||
const { records: incompleteTaskData } = useFindManyRecords({
|
||||
objectNameSingular: CoreObjectNameSingular.Activity,
|
||||
skip: skipRequest,
|
||||
filter: {
|
||||
const {
|
||||
activities: incompleteTaskData,
|
||||
initialized: initializedIncompleteTasks,
|
||||
} = useActivities({
|
||||
targetableObjects,
|
||||
activitiesFilters: {
|
||||
completedAt: { is: 'NULL' },
|
||||
...idFilter,
|
||||
type: { eq: 'Task' },
|
||||
...assigneeIdFilter,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: 'DescNullsFirst',
|
||||
},
|
||||
activitiesOrderByVariables: FIND_MANY_TIMELINE_ACTIVITIES_ORDER_BY,
|
||||
skipActivityTargets,
|
||||
});
|
||||
|
||||
const todayOrPreviousTasks = incompleteTaskData?.filter((task) => {
|
||||
@ -125,5 +88,6 @@ export const useTasks = ({
|
||||
upcomingTasks: (upcomingTasks ?? []) as Activity[],
|
||||
unscheduledTasks: (unscheduledTasks ?? []) as Activity[],
|
||||
completedTasks: (completedTasks ?? []) as Activity[],
|
||||
initialized: initializedCompleteTasks && initializedIncompleteTasks,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user