97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import Chip from '@mui/material/Chip';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Stack from '@mui/material/Stack';
|
|
import Typography from '@mui/material/Typography';
|
|
import { DotsThree as DotsThreeIcon } from '@phosphor-icons/react/dist/ssr/DotsThree';
|
|
|
|
import { usePopover } from '@/hooks/use-popover';
|
|
|
|
import { ColumnDroppable } from './column-droppable';
|
|
import type { Column, Task } from './types';
|
|
|
|
export interface ColumnItemProps {
|
|
column: Omit<Column, 'taskIds'>;
|
|
onColumnEdit?: (columnId: string) => void;
|
|
onColumnClear?: (columnId: string) => void;
|
|
onColumnDelete?: (columnId: string) => void;
|
|
onTaskOpen?: (taskId: string) => void;
|
|
onTaskCreate?: (columnId: string) => void;
|
|
tasks: Task[];
|
|
}
|
|
|
|
export function ColumnItem({
|
|
column,
|
|
onColumnEdit,
|
|
onColumnClear,
|
|
onColumnDelete,
|
|
onTaskOpen,
|
|
onTaskCreate,
|
|
tasks = [],
|
|
}: ColumnItemProps): React.JSX.Element {
|
|
const { id, name } = column;
|
|
|
|
const morePopover = usePopover<HTMLButtonElement>();
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Stack spacing={3} sx={{ flex: '0 0 auto', width: '360px' }}>
|
|
<Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
|
|
<Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
|
|
<Typography variant="h6">{name}</Typography>
|
|
<Chip label={tasks.length} size="small" variant="soft" />
|
|
</Stack>
|
|
<IconButton onClick={morePopover.handleOpen} ref={morePopover.anchorRef}>
|
|
<DotsThreeIcon weight="bold" />
|
|
</IconButton>
|
|
</Stack>
|
|
<ColumnDroppable
|
|
id={id}
|
|
onTaskCreate={() => {
|
|
onTaskCreate?.(id);
|
|
}}
|
|
onTaskOpen={onTaskOpen}
|
|
tasks={tasks}
|
|
/>
|
|
</Stack>
|
|
<Menu
|
|
anchorEl={morePopover.anchorRef.current}
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
|
onClose={morePopover.handleClose}
|
|
open={morePopover.open}
|
|
slotProps={{ paper: { sx: { width: '200px' } } }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
|
>
|
|
<MenuItem
|
|
onClick={(): void => {
|
|
morePopover.handleClose();
|
|
onColumnEdit?.(id);
|
|
}}
|
|
>
|
|
Edit
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={(): void => {
|
|
morePopover.handleClose();
|
|
onColumnClear?.(id);
|
|
}}
|
|
>
|
|
Clear
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={(): void => {
|
|
morePopover.handleClose();
|
|
onColumnDelete?.(id);
|
|
}}
|
|
>
|
|
Delete
|
|
</MenuItem>
|
|
</Menu>
|
|
</React.Fragment>
|
|
);
|
|
}
|