Fool-Stack/Kanban-Front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: добавлена возможность удаления и редактирования самой доски

Browse Source
This commit is contained in:
Vladiysss
2026-03-07 14:11:04 +03:00
parent 92bc9b74f4
commit 21f34c2832
3 changed files with 152 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/KBBoard/BoardLogic.js
View File

@@ -1,6 +1,7 @@
import { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import {
//me,
loadBoardDataAPI,
createTaskAPI,
createCategoryAPI,
@@ -10,7 +11,9 @@ import {
deleteTaskAPI,
assignMemberAPI,
unassignMemberAPI,
addMemberAPI
addMemberAPI,
deleteBoardsAPI,
updateBoardsAPI
} from './BoardAPI';
export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading) => {
@@ -28,6 +31,9 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
err.response?.data?.message === 'Invalid Token') {
setError('Вы не авторизованы');
setTimeout(() => navigate('/login'), 1000);
} else if (err.response?.data?.detail === "Доска не найдена.") {
setError("Доска не существует");
setTimeout(() => navigate('/kanban-boards-list'), 1000);
} else {
setError('Ошибка загрузки доски');
}
@@ -36,6 +42,23 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
}
}, [id, setError, setInfo, setCategories, setLoading, navigate]);
const checkOwner = useCallback((ownerId) => {
return /*me()*/22 === ownerId
}, []);
const deleteBoards = useCallback(async (boardId, modalDelBoard) => {
setLoading(true);
try {
await deleteBoardsAPI(boardId);
modalDelBoard();
navigate('/kanban-boards-list');
} catch (err) {
setError('Ошибка удаления доски: '+ (err.response?.data?.message || err.response?.data?.detail));
} finally {
setLoading(false);
}
}, [setLoading, setError]);
const createTask = useCallback(async (taskCategori, taskTitle, taskDescription, modalCrTask) => {
setLoading(true);
try {
@@ -65,7 +88,6 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
await createCategoryAPI(newCategory);
await loadBoardData();
} catch (err) {
console.error('Ошибка создания категории:', err);
setError(err.response?.data?.message || 'Ошибка создания категории');
} finally {
modalCrCateg();
@@ -73,6 +95,29 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
}
}, [id, loadBoardData, setLoading, setError]);
const editBoard = useCallback(async (editedBoardId, boardTitle, boardDescription, modalEditBoard) => {
setLoading(true);
try {
await updateBoardsAPI({
id: editedBoardId,
update_method: 'title',
value: boardTitle
});
await updateBoardsAPI({
id: editedBoardId,
update_method: 'description',
value: boardDescription
});
await modalEditBoard();
await loadBoardData();
} catch (err) {
setError(err.response?.data?.message || 'Ошибка редактирования доски');
} finally {
modalEditBoard();
setLoading(false);
}
}, [loadBoardData, setLoading, setError]);
const editTask = useCallback(async (editedTaskId, taskTitle, taskDescription, taskCategory, modalEditTask) => {
setLoading(true);
try {
@@ -193,12 +238,15 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
return {
loadBoardData,
createTask,
checkOwner,
createCategory,
editBoard,
editTask,
editCategory,
deleteCategory,
deleteTask,
assignMember,
addMember
addMember,
deleteBoards
};
};

106
src/KBBoard/KBBoard.js
View File

@@ -15,12 +15,16 @@ const KBBoard = () => {
const [crCateg, setCrCateg] = useState(false);
const [edTask, setEdTask] = useState(false);
const [edCateg, setEdCateg] = useState(false);
const [edBoard, setEdBoard] = useState(false);
const [delTask, setDelTask] = useState(false);
const [delCateg, setDelCateg] = useState(false);
const [asgnMember, setAsgnMember] = useState(false);
const [assignAction, setAssignAction] = useState(false);
const [addMemb, setAddMemb] = useState(false);
const [delBoards, setDelBoards] = useState(false);
const [boardTitle, setBoardTitle] = useState('');
const [boardDescription, setBoardDescription] = useState('');
const [categoryTitle, setCategoryTitle] = useState('');
const [taskTitle, setTaskTitle] = useState('');
const [taskDescription, setTaskDescription] = useState('');
@@ -33,18 +37,19 @@ const KBBoard = () => {
const [assignedMember, setAssignedMember] = useState(0);
const [addedUsername, setAddedUsername] = useState('');
const {
loadBoardData,
createTask,
checkOwner,
createCategory,
editBoard,
editTask,
editCategory,
deleteCategory,
deleteTask,
assignMember,
addMember
addMember,
deleteBoards
} = useBoardLogic(id, setError, setInfo, setCategories, setLoading);
useEffect(() => {
@@ -61,6 +66,11 @@ const KBBoard = () => {
setCrCateg(!crCateg);
setCategoryTitle('');
}
const modalEditBoard = () => {
setEdBoard(!edBoard);
setBoardTitle(info.title);
setBoardDescription(info.description);
}
const modalEditTask = (task, id_categ) => () => {
setEdTask(!edTask);
setTaskCategori(id_categ);
@@ -90,8 +100,12 @@ const KBBoard = () => {
const modalAddMember = () => {
setAddMemb(!addMemb);
}
const modalDeleteBoards = () => {
setDelBoards(!delBoards);
}
const handleCreateCategory = async (e) => {
e.preventDefault();
await createCategory(categoryTitle, modalCrCateg);
@@ -100,6 +114,11 @@ const KBBoard = () => {
e.preventDefault();
await createTask(taskCategori, taskTitle, taskDescription, modalCrTask);
};
const handleEditBoard = async (e) => {
e.preventDefault();
await editBoard(id, boardTitle, boardDescription, modalEditBoard);
};
const handleEditCategory = async (e) => {
e.preventDefault();
await editCategory(editedCateg.id, categoryTitle, modalEditCateg);
@@ -124,9 +143,12 @@ const KBBoard = () => {
e.preventDefault();
await addMember(addedUsername, id, modalAddMember);
};
const handleDeleteBoards = async (e) => {
e.preventDefault();
await deleteBoards(id, modalDeleteBoards);
};
return (
<div className="app-container">
<Header />
@@ -150,9 +172,28 @@ const KBBoard = () => {
</div>
</div>
<div className="set-panel" >
<button onClick={modalAddMember}>
Добавить участника
</button>
{checkOwner(info?.owner?.id) ? (
<>
<button onClick={modalAddMember}>
Добавить участника
</button>
<button onClick={null}>
Выгнать участника
</button>
<button onClick={modalEditBoard}>
Настройки доски
</button>
<button className='Important-button' onClick={modalDeleteBoards}>
Удаление доски
</button>
</>
) : (
<>
<button onClick={null}>
Покинуть доску
</button>
</>
)}
</div>
<div className="board-panel" >
{categories.map((category) => (
@@ -255,6 +296,35 @@ const KBBoard = () => {
</div>
)}
{edBoard && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Изменение доски</h3></div>
<form onSubmit={handleEditBoard}>
<div>
<label >Название:</label>
<input
type="text"
value={boardTitle}
onChange={(e) => setBoardTitle(e.target.value)}
required
/>
<label >Описание:</label>
<input
type="text"
value={boardDescription}
onChange={(e) => setBoardDescription(e.target.value)}
/>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Изменение...' : 'Изменить'}
</button>
</form>
<button onClick={modalEditBoard}>Отменить</button>
</div>
</div>
)}
{edCateg && (
<div className="confirm-modal">
<div className="modal-content">
@@ -355,15 +425,31 @@ const KBBoard = () => {
</div>
)}
{delBoards && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Удаление доски</h3></div>
<form onSubmit={handleDeleteBoards}>
<label >Вы точно хотите удалить эту Канбан доску</label>
<button onClick={modalDeleteBoards} type='reset'>Отменить</button>
<button className="Important-button" type="submit" disabled={loading}>
{loading ? 'Удаление...' : 'Удалить'}
</button>
</form>
</div>
</div>
)}
{addMemb && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Удаление категории</h3></div>
<div><h3>Добавление участников</h3></div>
<form onSubmit={handleAddMember}>
<label >Введите логин человека которого хотитепригласить</label>
<input
type="text"
placeholder="Поиск по названию..."
placeholder="Поиск по логину..."
value={addedUsername}
onChange={(e) => setAddedUsername(e.target.value)}
/>
@@ -376,8 +462,6 @@ const KBBoard = () => {
</div>
)}
{asgnMember && (
<div className="confirm-modal">
{assignAction ? (

7
src/css/Board.css
View File

@@ -55,8 +55,13 @@
border-radius: 6px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-around;
gap: 8px;
}
.set-panel button{
margin: 0px;
}
.board-panel{