87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
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 { TaskGroups } from '@/activities/tasks/components/TaskGroups';
|
|
import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
|
|
import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index';
|
|
import { PageAddButton } from '@/ui/layout/components/PageAddButton';
|
|
import { PageBody } from '@/ui/layout/components/PageBody';
|
|
import { PageContainer } from '@/ui/layout/components/PageContainer';
|
|
import { PageHeader } from '@/ui/layout/components/PageHeader';
|
|
import { TabList } from '@/ui/tab/components/TabList';
|
|
import { TopBar } from '@/ui/top-bar/TopBar';
|
|
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
|
|
import { FilterDropdownButton } from '@/ui/view-bar/components/FilterDropdownButton';
|
|
import { FiltersHotkeyScope } from '@/ui/view-bar/types/FiltersHotkeyScope';
|
|
import { ActivityType } from '~/generated/graphql';
|
|
|
|
const StyledTasksContainer = styled.div`
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: auto;
|
|
`;
|
|
|
|
const StyledTabListContainer = styled.div`
|
|
align-items: end;
|
|
display: flex;
|
|
height: 40px;
|
|
`;
|
|
|
|
export function Tasks() {
|
|
const theme = useTheme();
|
|
const openCreateActivity = useOpenCreateActivityDrawer();
|
|
|
|
const TASK_TABS = [
|
|
{
|
|
id: 'to-do',
|
|
title: 'To do',
|
|
icon: <IconCheck size={theme.icon.size.md} />,
|
|
},
|
|
{
|
|
id: 'done',
|
|
title: 'Done',
|
|
icon: <IconArchive size={theme.icon.size.md} />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<PageContainer>
|
|
<PageHeader
|
|
title="Tasks"
|
|
icon={<IconCheckbox size={theme.icon.size.md} />}
|
|
>
|
|
<RecoilScope SpecificContext={DropdownRecoilScopeContext}>
|
|
<PageAddButton
|
|
onClick={() => openCreateActivity(ActivityType.Task)}
|
|
/>
|
|
</RecoilScope>
|
|
</PageHeader>
|
|
<PageBody>
|
|
<StyledTasksContainer>
|
|
<RecoilScope SpecificContext={TasksRecoilScopeContext}>
|
|
<TopBar
|
|
leftComponent={
|
|
<StyledTabListContainer>
|
|
<TabList context={TasksRecoilScopeContext} tabs={TASK_TABS} />
|
|
</StyledTabListContainer>
|
|
}
|
|
rightComponent={
|
|
<FilterDropdownButton
|
|
key="tasks-filter-dropdown-button"
|
|
context={TasksRecoilScopeContext}
|
|
hotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
|
|
/>
|
|
}
|
|
/>
|
|
<TaskGroups />
|
|
</RecoilScope>
|
|
</StyledTasksContainer>
|
|
</PageBody>
|
|
</PageContainer>
|
|
);
|
|
}
|