fix: изменение структуры кода страницы канбан доски
разделение на 3 файла: - UI - Бизнес логика - Обращение к бэку
This commit is contained in:
Vladiysss
315
src/KBBoard/KBBoard.js
Normal file
315
src/KBBoard/KBBoard.js
Normal file
@@ -0,0 +1,315 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useBoardLogic } from './BoardLogic';
|
||||
import Header from './../Header';
|
||||
import './../css/Board.css';
|
||||
|
||||
const KBBoard = () => {
|
||||
const { id } = useParams();
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [info, setInfo] = useState({});
|
||||
const [categories, setCategories] = useState([]);
|
||||
|
||||
const [crTask, setCrTask] = useState(false);
|
||||
const [crCateg, setCrCateg] = useState(false);
|
||||
const [edTask, setEdTask] = useState(false);
|
||||
const [edCateg, setEdCateg] = useState(false);
|
||||
const [delTask, setDelTask] = useState(false);
|
||||
const [delCateg, setDelCateg] = useState(false);
|
||||
|
||||
const [categoryTitle, setCategoryTitle] = useState('');
|
||||
const [taskTitle, setTaskTitle] = useState('');
|
||||
const [taskDescription, setTaskDescription] = useState('');
|
||||
const [taskCategory, setTaskCategory] = useState(null);
|
||||
const [taskCategori, setTaskCategori] = useState(null);
|
||||
const [editedTask, setEditedTask] = useState({});
|
||||
const [editedCateg, setEditedCateg] = useState({});
|
||||
const [taskPosition, setTaskPosition] = useState(null);
|
||||
const [categoryPosition, setCategoryPosition] = useState(null);
|
||||
|
||||
const {
|
||||
loadBoardData,
|
||||
createTask,
|
||||
createCategory,
|
||||
editTask,
|
||||
editCategory,
|
||||
deleteCategory,
|
||||
deleteTask
|
||||
} = useBoardLogic(id, setError, setInfo, setCategories, setLoading);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) loadBoardData();
|
||||
}, [id, loadBoardData]);
|
||||
|
||||
const modalCrTask = (categori) => () => {
|
||||
setCrTask(!crTask);
|
||||
setTaskCategori(categori);
|
||||
setTaskTitle('');
|
||||
setTaskDescription('');
|
||||
}
|
||||
const modalCrCateg = () => {
|
||||
setCrCateg(!crCateg);
|
||||
setCategoryTitle('');
|
||||
}
|
||||
const modalEditTask = (task, id_categ) => () => {
|
||||
setEdTask(!edTask);
|
||||
setTaskCategori(id_categ);
|
||||
setEditedTask(task);
|
||||
setTaskTitle(task.title);
|
||||
setTaskDescription(task.description);
|
||||
setTaskPosition(task.position);
|
||||
setTaskCategory(task.category_id);
|
||||
}
|
||||
const modalEditCateg = (categ) => () => {
|
||||
setEdCateg(!edCateg);
|
||||
setEditedCateg(categ);
|
||||
setCategoryTitle(categ.title);
|
||||
setCategoryPosition(categ.position);
|
||||
}
|
||||
const modalDelTask = () => {
|
||||
setDelTask(!delTask);
|
||||
}
|
||||
const modalDelCateg = () => {
|
||||
setDelCateg(!delCateg);
|
||||
}
|
||||
|
||||
const handleCreateCategory = async (e) => {
|
||||
e.preventDefault();
|
||||
await createCategory(categoryTitle, modalCrCateg);
|
||||
};
|
||||
const handleCreateTask = async (e) => {
|
||||
e.preventDefault();
|
||||
await createTask(taskCategori, taskTitle, taskDescription, modalCrTask);
|
||||
};
|
||||
const handleEditCategory = async (e) => {
|
||||
e.preventDefault();
|
||||
await editCategory(editedCateg.id, categoryTitle, modalEditCateg);
|
||||
};
|
||||
const handleEditTask = async (e) => {
|
||||
e.preventDefault();
|
||||
await editTask(editedTask.id, taskTitle, taskDescription, taskCategory, modalEditTask);
|
||||
};
|
||||
const handleDeleteTask = async (e) => {
|
||||
e.preventDefault();
|
||||
await deleteTask(editedTask.id, modalDelTask, modalEditTask);
|
||||
};
|
||||
const handleDeleteCategory = async (e) => {
|
||||
e.preventDefault();
|
||||
await deleteCategory(editedCateg.id, modalDelCateg, modalEditCateg);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app-container">
|
||||
<Header />
|
||||
<div className="page-container">
|
||||
{
|
||||
error && <div className="error">{error}</div>
|
||||
}
|
||||
<div className="inf-panel" >
|
||||
<div className="row">
|
||||
<h3>{info.title}</h3>
|
||||
<p>
|
||||
<strong>Участники: </strong> В разработке
|
||||
</p>
|
||||
<p>
|
||||
<strong>Владелец: </strong> {" "+info.owner?.display_name}
|
||||
<img className="nav-avatar" src={info.owner?.avatar_url} alt=''></img>
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<p><strong>Описание: </strong> {info.description ? info.description : 'Отсутствует'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="set-panel" >
|
||||
<p>SetingPanel:В разработке</p>
|
||||
</div>
|
||||
<div className="board-panel" >
|
||||
{categories.map((category) => (
|
||||
<div className="categori" key={category.position}>
|
||||
<button onClick={modalEditCateg(category)}><h3>{category.title}</h3></button>
|
||||
<div className="categ-h">
|
||||
<p>Позиция: {category.position}</p>
|
||||
<p>Задач: {category.tasks.length}</p>
|
||||
</div>
|
||||
<div className='task create'>
|
||||
<button onClick={modalCrTask(category.id)}>
|
||||
Новая задача
|
||||
</button>
|
||||
</div>
|
||||
<div className='task-list'>
|
||||
{category.tasks.length > 0 ? (
|
||||
category.tasks.map((task) => (
|
||||
<button className='task' onClick={modalEditTask(task, category.id)} key={task.id}>
|
||||
<div>{task.title}</div>
|
||||
<div>{task.description}</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<p>Нет задач</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{categories.length < 10 ? (
|
||||
<div className="categori create">
|
||||
<div className="bib">
|
||||
<button onClick={modalCrCateg}>
|
||||
<div>
|
||||
+
|
||||
</div>
|
||||
Новая категория
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{crCateg && (
|
||||
<div className="confirm-modal">
|
||||
<div className="modal-content">
|
||||
<div><h3>Новая категория</h3></div>
|
||||
<form onSubmit={handleCreateCategory}>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={categoryTitle}
|
||||
onChange={(e) => setCategoryTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Создание...' : 'Создать'}
|
||||
</button>
|
||||
</form>
|
||||
<button onClick={modalCrCateg}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{crTask && (
|
||||
<div className="confirm-modal">
|
||||
<div className="modal-content">
|
||||
<div><h3>Новая задача</h3></div>
|
||||
<form onSubmit={handleCreateTask}>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={taskTitle}
|
||||
onChange={(e) => setTaskTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={taskDescription}
|
||||
onChange={(e) => setTaskDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Создание...' : 'Создать'}
|
||||
</button>
|
||||
</form>
|
||||
<button onClick={modalCrTask(null)}>Отменить</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{edCateg && (
|
||||
<div className="confirm-modal">
|
||||
<div className="modal-content">
|
||||
<div><h3>Изменение категории</h3></div>
|
||||
<form onSubmit={handleEditCategory}>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={categoryTitle}
|
||||
onChange={(e) => setCategoryTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Изменение...' : 'Изменить'}
|
||||
</button>
|
||||
</form>
|
||||
<button onClick={modalEditCateg({})}>Отменить</button>
|
||||
<button className="Important-button" onClick={modalDelCateg}>Удалить</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{edTask && (
|
||||
<div className="confirm-modal">
|
||||
<div className="modal-content">
|
||||
<div><h3>Изменение задачи</h3></div>
|
||||
<form onSubmit={handleEditTask}>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={taskTitle}
|
||||
onChange={(e) => setTaskTitle(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={taskDescription}
|
||||
onChange={(e) => setTaskDescription(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<label >Категория:</label>
|
||||
<select value={taskCategory} onChange={(e) => setTaskCategory(e.target.value)}>
|
||||
{categories.map((category) => (
|
||||
<option key={category.position} value={category.id}>
|
||||
{category.title}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? 'Изменение...' : 'Изменить'}
|
||||
</button>
|
||||
</form>
|
||||
<button onClick={modalEditTask({},null)}>Отменить</button>
|
||||
<button className="Important-button" onClick={modalDelTask}>Удалить</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{delTask && (
|
||||
<div className="confirm-modal">
|
||||
<div className="modal-content">
|
||||
<div><h3>Удаление задачи</h3></div>
|
||||
<form onSubmit={handleDeleteTask}>
|
||||
<label >Вы точно хотите удалить задачу {editedTask.title}</label>
|
||||
<button onClick={modalDelTask}>Отменить</button>
|
||||
<button className="Important-button" type="submit" disabled={loading}>
|
||||
{loading ? 'Удаление...' : 'Удалить'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{delCateg && (
|
||||
<div className="confirm-modal">
|
||||
<div className="modal-content">
|
||||
<div><h3>Удаление категории</h3></div>
|
||||
<form onSubmit={handleDeleteCategory}>
|
||||
<label >Вы точно хотите удалить эту категорию</label>
|
||||
<button onClick={modalDelCateg}>Отменить</button>
|
||||
<button className="Important-button" type="submit" disabled={loading}>
|
||||
{loading ? 'Удаление...' : 'Удалить'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default KBBoard;
|
||||
Reference in New Issue
Block a user