feat: добавление работы с пользователями

- добавление участников в канбан доску
- назначение исполнителя на задачу
- снятие исполнителя с задачи
This commit is contained in:
Vladiysss
2026-03-01 21:37:57 +03:00
parent 66385c8b22
commit 859a45aad9
4 changed files with 202 additions and 9 deletions

View File

@@ -17,6 +17,9 @@ const KBBoard = () => {
const [edCateg, setEdCateg] = 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 [categoryTitle, setCategoryTitle] = useState('');
const [taskTitle, setTaskTitle] = useState('');
@@ -27,6 +30,10 @@ const KBBoard = () => {
const [editedCateg, setEditedCateg] = useState({});
const [taskPosition, setTaskPosition] = useState(null);
const [categoryPosition, setCategoryPosition] = useState(null);
const [assignedMember, setAssignedMember] = useState(0);
const [addedUsername, setAddedUsername] = useState('');
const {
loadBoardData,
@@ -35,7 +42,9 @@ const KBBoard = () => {
editTask,
editCategory,
deleteCategory,
deleteTask
deleteTask,
assignMember,
addMember
} = useBoardLogic(id, setError, setInfo, setCategories, setLoading);
useEffect(() => {
@@ -60,6 +69,7 @@ const KBBoard = () => {
setTaskDescription(task.description);
setTaskPosition(task.position);
setTaskCategory(task.category_id);
//setAssignedMember(task.assigned_users.id)
}
const modalEditCateg = (categ) => () => {
setEdCateg(!edCateg);
@@ -73,7 +83,15 @@ const KBBoard = () => {
const modalDelCateg = () => {
setDelCateg(!delCateg);
}
const modalAssignMember = (action) => () => {
setAsgnMember(!asgnMember);
setAssignAction(action)
}
const modalAddMember = () => {
setAddMemb(!addMemb);
}
const handleCreateCategory = async (e) => {
e.preventDefault();
await createCategory(categoryTitle, modalCrCateg);
@@ -98,6 +116,16 @@ const KBBoard = () => {
e.preventDefault();
await deleteCategory(editedCateg.id, modalDelCateg, modalEditCateg);
};
const handleAssignMember = async (e) => {
e.preventDefault();
await assignMember(editedTask.id, assignedMember, assignAction, modalAssignMember);
};
const handleAddMember = async (e) => {
e.preventDefault();
await addMember(addedUsername, id, modalAddMember);
};
return (
<div className="app-container">
@@ -122,7 +150,9 @@ const KBBoard = () => {
</div>
</div>
<div className="set-panel" >
<p>SetingPanel:В разработке</p>
<button onClick={modalAddMember}>
Добавить участника
</button>
</div>
<div className="board-panel" >
{categories.map((category) => (
@@ -142,7 +172,13 @@ const KBBoard = () => {
category.tasks.map((task) => (
<button className='task' onClick={modalEditTask(task, category.id)} key={task.id}>
<div>{task.title}</div>
<div>{task.description}</div>
<div>{task.description}</div>
<div>Исполнители
{task.assigned_users.map((member) => (
<img key={member.id} className='members-avatar' src={member.avatar_url}></img>
))}
</div>
</button>
))
) : (
@@ -173,6 +209,7 @@ const KBBoard = () => {
<div><h3>Новая категория</h3></div>
<form onSubmit={handleCreateCategory}>
<div>
<label >Название:</label>
<input
type="text"
value={categoryTitle}
@@ -195,12 +232,14 @@ const KBBoard = () => {
<div><h3>Новая задача</h3></div>
<form onSubmit={handleCreateTask}>
<div>
<label >Название:</label>
<input
type="text"
value={taskTitle}
onChange={(e) => setTaskTitle(e.target.value)}
required
/>
<label >Описание:</label>
<input
type="text"
value={taskDescription}
@@ -222,6 +261,7 @@ const KBBoard = () => {
<div><h3>Изменение категории</h3></div>
<form onSubmit={handleEditCategory}>
<div>
<label >Название:</label>
<input
type="text"
value={categoryTitle}
@@ -245,12 +285,14 @@ const KBBoard = () => {
<div><h3>Изменение задачи</h3></div>
<form onSubmit={handleEditTask}>
<div>
<label >Название:</label>
<input
type="text"
value={taskTitle}
onChange={(e) => setTaskTitle(e.target.value)}
required
/>
<label >Описание:</label>
<input
type="text"
value={taskDescription}
@@ -267,6 +309,11 @@ const KBBoard = () => {
))}
</select>
</div>
<div>
<label >Исполнитель:</label>
<button type="button" onClick={modalAssignMember(true)}>Назначить</button>
<button type="button" onClick={modalAssignMember(false)}>Снять</button>
</div>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Изменение...' : 'Изменить'}
@@ -307,7 +354,86 @@ const KBBoard = () => {
</div>
</div>
)}
</div>
{addMemb && (
<div className="confirm-modal">
<div className="modal-content">
<div><h3>Удаление категории</h3></div>
<form onSubmit={handleAddMember}>
<label >Введите логин человека которого хотитепригласить</label>
<input
type="text"
placeholder="Поиск по названию..."
value={addedUsername}
onChange={(e) => setAddedUsername(e.target.value)}
/>
<button onClick={modalAddMember}>Отменить</button>
<button type="submit" disabled={loading}>
{loading ? 'Добавление...' : 'Добавить'}
</button>
</form>
</div>
</div>
)}
{asgnMember && (
<div className="confirm-modal">
{assignAction ? (
<div className="modal-content">
<div><h3>Назначение пользователя</h3></div>
<form onSubmit={handleAssignMember}>
<div>
<div>
<label >Исполнитель:</label>
<select value={assignedMember} onChange={(e) => setAssignedMember(e.target.value)}>
<option value={0}>
Выберите пользователя
</option>
{info.members.map((member) => (
<option key={member.display_name} value={member.id}>
{member.display_name}
</option>
))}
</select>
</div>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Назначение...' : 'Назначить'}
</button>
</form>
<button onClick={modalAssignMember(null)}>Отменить</button>
</div>
) : (
<div className="modal-content">
<div><h3>Снятие пользователя</h3></div>
<form onSubmit={handleAssignMember}>
<div>
<div>
<label >Исполнитель:</label>
<select value={assignedMember} onChange={(e) => setAssignedMember(e.target.value)}>
<option value={0}>
Выберите пользователя
</option>
{info.members.map((member) => (
<option key={member.display_name} value={member.id}>
{member.display_name}
</option>
))}
</select>
</div>
</div>
<button type="submit" disabled={loading}>
{loading ? 'Снятие...' : 'Снять'}
</button>
</form>
<button onClick={modalAssignMember(null)}>Отменить</button>
</div>
)}
</div>
)}
</div>
</div>
);
}