94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
|
|
|
|
import { BoardView } from './board-view';
|
|
import { ColumnModal } from './column-modal';
|
|
import { TaskModal } from './task-modal';
|
|
import { TasksContext } from './tasks-context';
|
|
|
|
// You may want to also have the List instead of Board.
|
|
// We do not handle the list at this moment.
|
|
|
|
export interface TasksViewProps {
|
|
mode?: 'board' | 'list';
|
|
}
|
|
|
|
export function TasksView(_: TasksViewProps): React.JSX.Element {
|
|
const {
|
|
columns,
|
|
tasks,
|
|
currentColumnId,
|
|
currentTaskId,
|
|
setCurrentColumnId,
|
|
setCurrentTaskId,
|
|
updateColumn,
|
|
updateTask,
|
|
deleteTask,
|
|
addComment,
|
|
} = React.useContext(TasksContext);
|
|
|
|
const currentColumn = currentColumnId ? columns.get(currentColumnId) : undefined;
|
|
const currentTask = currentTaskId ? tasks.get(currentTaskId) : undefined;
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flex: '1 1 auto',
|
|
flexDirection: 'column',
|
|
px: 'var(--Content-paddingX)',
|
|
py: 'var(--Content-paddingY)',
|
|
}}
|
|
>
|
|
<Stack spacing={4}>
|
|
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={3} sx={{ alignItems: 'flex-start' }}>
|
|
<Box sx={{ flex: '1 1 auto' }}>
|
|
<Typography variant="h4">Tasks</Typography>
|
|
</Box>
|
|
<div>
|
|
<Button startIcon={<PlusIcon />} variant="contained">
|
|
Member
|
|
</Button>
|
|
</div>
|
|
</Stack>
|
|
<Box sx={{ display: 'flex', flex: '1 1 auto', flexDirection: 'column' }}>
|
|
<BoardView />
|
|
</Box>
|
|
</Stack>
|
|
</Box>
|
|
{currentColumn ? (
|
|
<ColumnModal
|
|
column={currentColumn}
|
|
onClose={(): void => {
|
|
setCurrentColumnId(undefined);
|
|
}}
|
|
onColumnUpdate={updateColumn}
|
|
open
|
|
/>
|
|
) : null}
|
|
{currentTask ? (
|
|
<TaskModal
|
|
onClose={(): void => {
|
|
setCurrentTaskId(undefined);
|
|
}}
|
|
onCommentAdd={addComment}
|
|
onTaskDelete={(taskId: string): void => {
|
|
setCurrentColumnId(undefined);
|
|
deleteTask(taskId);
|
|
}}
|
|
onTaskUpdate={updateTask}
|
|
open
|
|
task={currentTask}
|
|
/>
|
|
) : null}
|
|
</React.Fragment>
|
|
);
|
|
}
|