168 lines
9.3 KiB
JavaScript
168 lines
9.3 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||
Панель мониторинга: Корневая панель доски задач
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
|
||
import { Stack, Card, CardHeader, CardContent, Typography, Box, Button, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
|
||
//import { Draggable } from "react-draggable";
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
const STYLES = {
|
||
CONTAINER: { width: "100%", padding: 1 },
|
||
DEF_SIZE: { minWidth: "200px", minHeight: "100px" },
|
||
SETTINGS_BUTTON: {
|
||
position: "absolute",
|
||
right: 8,
|
||
top: 8,
|
||
color: theme => theme.palette.grey[500]
|
||
}
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Корневая панель доски задач
|
||
const ClntTaskBoard = () => {
|
||
const [categories, setCategories] = useState([
|
||
{ id: 1, name: "Новое" },
|
||
{ id: 2, name: "Старое" }
|
||
]);
|
||
const [tasks, setTasks] = useState([
|
||
{ id: 1, name: "Задание1", category: 1 },
|
||
{ id: 2, name: "Задание2", category: 1 },
|
||
{ id: 3, name: "Задание3", category: 2 },
|
||
{ id: 4, name: "Задание4", category: 2 }
|
||
]);
|
||
|
||
const onDragEnd = result => {
|
||
const { source, destination } = result;
|
||
|
||
if (!destination) {
|
||
return;
|
||
}
|
||
|
||
if (destination.droppableId === "Categories") {
|
||
setCategories(categories);
|
||
} else if (destination.droppableId !== source.droppableId) {
|
||
setTasks(tasks =>
|
||
tasks.map(task =>
|
||
task.id === parseInt(result.draggableId)
|
||
? {
|
||
...task,
|
||
category: parseInt(result.destination.droppableId)
|
||
}
|
||
: task
|
||
)
|
||
);
|
||
} else {
|
||
setTasks(tasks);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Box sx={STYLES.CONTAINER}>
|
||
<DragDropContext onDragEnd={onDragEnd}>
|
||
<div>
|
||
<Droppable droppableId="Categories" type="droppableTask">
|
||
{provided => (
|
||
<div ref={provided.innerRef}>
|
||
<Stack direction="row" spacing={2}>
|
||
{categories.map((category, index) => (
|
||
<div key={index}>
|
||
<Droppable droppableId={category.id.toString()}>
|
||
{provided => (
|
||
<div ref={provided.innerRef}>
|
||
<Card
|
||
className="category-card"
|
||
sx={{ ...STYLES.DEF_SIZE, backgroundColor: "#FFA500", padding: 1 }}
|
||
>
|
||
<CardHeader
|
||
action={
|
||
<IconButton
|
||
aria-label="settings"
|
||
onClick={() => {
|
||
console.log("Опции типа");
|
||
}}
|
||
>
|
||
<Icon>more_vert</Icon>
|
||
</IconButton>
|
||
}
|
||
title={category.name}
|
||
subheader={
|
||
<Button onClick={() => console.log("Добавление события")}>+ Добавить</Button>
|
||
}
|
||
sx={{ padding: 0 }}
|
||
/>
|
||
<CardContent sx={{ padding: 0 }}>
|
||
<Stack spacing={1}>
|
||
{tasks
|
||
.filter(item => item.category === category.id)
|
||
.map((item, index) => (
|
||
<Draggable draggableId={item.id.toString()} key={item.id} index={index}>
|
||
{provided => (
|
||
<Card
|
||
ref={provided.innerRef}
|
||
{...provided.draggableProps}
|
||
{...provided.dragHandleProps}
|
||
>
|
||
<CardHeader
|
||
action={
|
||
<IconButton
|
||
aria-label="settings"
|
||
onClick={() => {
|
||
console.log("Опции задачи");
|
||
}}
|
||
>
|
||
<Icon>more_vert</Icon>
|
||
</IconButton>
|
||
}
|
||
title={
|
||
<Typography
|
||
className="task-info"
|
||
sx={{ padding: "2px" }}
|
||
>
|
||
{item.id} {item.name}
|
||
</Typography>
|
||
}
|
||
sx={{ padding: 0 }}
|
||
/>
|
||
</Card>
|
||
)}
|
||
</Draggable>
|
||
))}
|
||
{provided.placeholder}
|
||
</Stack>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
</Droppable>
|
||
</div>
|
||
))}
|
||
</Stack>
|
||
{provided.placeholder}
|
||
</div>
|
||
)}
|
||
</Droppable>
|
||
</div>
|
||
</DragDropContext>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { ClntTaskBoard };
|