twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-18 09:02:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: Show my completed tasks without date categories (#1375)

Browse Source 
* Show my completed tasks without date categories

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Refactor the code

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

---------

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
This commit is contained in:
gitstart-twenty 2023-09-01 15:50:11 +03:00 committed by GitHub
parent aa47579289
commit f0674767c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 82 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
front/src/modules/activities/tasks/components/TaskGroups.tsx
View File

@ -2,10 +2,13 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
import { useTasks } from '@/activities/tasks/hooks/useTasks';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { Button } from '@/ui/button/components/Button';
import { IconCheckbox } from '@/ui/icon';
import { activeTabIdScopedState } from '@/ui/tab/states/activeTabIdScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { ActivityType } from '~/generated/graphql';
import { AddTaskButton } from './AddTaskButton';
@ -51,16 +54,26 @@ const StyledContainer = styled.div`
`;
export function TaskGroups({ entity, showAddButton }: OwnProps) {
const { todayOrPreviousTasks, upcomingTasks, unscheduledTasks } =
useTasks(entity);
const {
todayOrPreviousTasks,
upcomingTasks,
unscheduledTasks,
completedTasks,
} = useTasks(entity);
const theme = useTheme();
const openCreateActivity = useOpenCreateActivityDrawer();
const [activeTabId] = useRecoilScopedState(
activeTabIdScopedState,
TasksRecoilScopeContext,
);
if (
todayOrPreviousTasks?.length === 0 &&
upcomingTasks?.length === 0 &&
unscheduledTasks?.length === 0
(todayOrPreviousTasks?.length === 0 &&
upcomingTasks?.length === 0 &&
unscheduledTasks?.length === 0) ||
(activeTabId === 'done' && completedTasks?.length === 0)
) {
return (
<StyledTaskGroupEmptyContainer>
@ -80,28 +93,37 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {
return (
<StyledContainer>
<TaskList
title="Today"
tasks={todayOrPreviousTasks ?? []}
button={showAddButton && <AddTaskButton entity={entity} />}
/>
<TaskList
title="Upcoming"
tasks={upcomingTasks ?? []}
button={
showAddButton &&
!todayOrPreviousTasks?.length && <AddTaskButton entity={entity} />
}
/>
<TaskList
title="Unscheduled"
tasks={unscheduledTasks ?? []}
button={
showAddButton &&
!todayOrPreviousTasks?.length &&
!upcomingTasks?.length && <AddTaskButton entity={entity} />
}
/>
{activeTabId === 'done' ? (
<TaskList
tasks={completedTasks ?? []}
button={showAddButton && <AddTaskButton entity={entity} />}
/>
) : (
<>
<TaskList
title="Today"
tasks={todayOrPreviousTasks ?? []}
button={showAddButton && <AddTaskButton entity={entity} />}
/>
<TaskList
title="Upcoming"
tasks={upcomingTasks ?? []}
button={
showAddButton &&
!todayOrPreviousTasks?.length && <AddTaskButton entity={entity} />
}
/>
<TaskList
title="Unscheduled"
tasks={unscheduledTasks ?? []}
button={
showAddButton &&
!todayOrPreviousTasks?.length &&
!upcomingTasks?.length && <AddTaskButton entity={entity} />
}
/>
</>
)}
</StyledContainer>
);
}

10
front/src/modules/activities/tasks/components/TaskList.tsx
View File

@ -6,7 +6,7 @@ import { TaskForList } from '@/activities/types/TaskForList';
import { TaskRow } from './TaskRow';
type OwnProps = {
title: string;
title?: string;
tasks: TaskForList[];
button?: ReactElement | false;
};
@ -52,9 +52,11 @@ export function TaskList({ title, tasks, button }: OwnProps) {
{tasks && tasks.length > 0 && (
<StyledContainer>
<StyledTitleBar>
<StyledTitle>
{title} <StyledCount>{tasks.length}</StyledCount>
</StyledTitle>
{title && (
<StyledTitle>
{title} <StyledCount>{tasks.length}</StyledCount>
</StyledTitle>
)}
{button}
</StyledTitleBar>
<StyledTaskRows>

54
front/src/modules/activities/tasks/hooks/useTasks.ts
View File

@ -9,7 +9,6 @@ import { currentUserState } from '@/auth/states/currentUserState';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { FilterOperand } from '@/ui/filter-n-sort/types/FilterOperand';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
import { activeTabIdScopedState } from '@/ui/tab/states/activeTabIdScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql';
import { tasksFilters } from '~/pages/tasks/tasks-filters';
@ -20,11 +19,6 @@ export function useTasks(entity?: ActivityTargetableEntity) {
availableFilters: tasksFilters,
});
const [activeTabId] = useRecoilScopedState(
activeTabIdScopedState,
TasksRecoilScopeContext,
);
const [filters, setFilters] = useRecoilScopedState(
filtersScopedState,
TasksRecoilScopeContext,
@ -86,34 +80,40 @@ export function useTasks(entity?: ActivityTargetableEntity) {
},
});
const tasksData =
activeTabId === 'to-do' || entity ? incompleteTaskData : completeTasksData;
const todayOrPreviousTasks = incompleteTaskData?.findManyActivities.filter(
(task) => {
if (!task.dueAt) {
return false;
}
const dueDate = parseDate(task.dueAt).toJSDate();
const today = DateTime.now().endOf('day').toJSDate();
return dueDate <= today;
},
);
const todayOrPreviousTasks = tasksData?.findManyActivities.filter((task) => {
if (!task.dueAt) {
return false;
}
const dueDate = parseDate(task.dueAt).toJSDate();
const today = DateTime.now().endOf('day').toJSDate();
return dueDate <= today;
});
const upcomingTasks = incompleteTaskData?.findManyActivities.filter(
(task) => {
if (!task.dueAt) {
return false;
}
const dueDate = parseDate(task.dueAt).toJSDate();
const today = DateTime.now().endOf('day').toJSDate();
return dueDate > today;
},
);
const upcomingTasks = tasksData?.findManyActivities.filter((task) => {
if (!task.dueAt) {
return false;
}
const dueDate = parseDate(task.dueAt).toJSDate();
const today = DateTime.now().endOf('day').toJSDate();
return dueDate > today;
});
const unscheduledTasks = incompleteTaskData?.findManyActivities.filter(
(task) => {
return !task.dueAt;
},
);
const unscheduledTasks = tasksData?.findManyActivities.filter((task) => {
return !task.dueAt;
});
const completedTasks = completeTasksData?.findManyActivities;
return {
todayOrPreviousTasks,
upcomingTasks,
unscheduledTasks,
completedTasks,
};
}