feat: добавление работы с пользователями
- добавление участников в канбан доску - назначение исполнителя на задачу - снятие исполнителя с задачи
This commit is contained in:
Vladiysss
@@ -30,4 +30,16 @@ export const deleteTaskAPI = async (taskId) => {
|
||||
return axios.delete('/api/boards/categories/tasks/delete', {
|
||||
data: { id: taskId }
|
||||
});
|
||||
};
|
||||
|
||||
export const assignMemberAPI = async (updateData) => {
|
||||
return axios.put('/api/boards/categories/tasks/assign', updateData);
|
||||
};
|
||||
|
||||
export const unassignMemberAPI = async (updateData) => {
|
||||
return axios.put('/api/boards/categories/tasks/unassign', updateData);
|
||||
};
|
||||
|
||||
export const addMemberAPI = async (updateData) => {
|
||||
return axios.post('/api/boards/members/add', updateData);
|
||||
};
|
||||
@@ -7,7 +7,10 @@ import {
|
||||
updateTaskAPI,
|
||||
updateCategoryAPI,
|
||||
deleteCategoryAPI,
|
||||
deleteTaskAPI
|
||||
deleteTaskAPI,
|
||||
assignMemberAPI,
|
||||
unassignMemberAPI,
|
||||
addMemberAPI
|
||||
} from './BoardAPI';
|
||||
|
||||
export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading) => {
|
||||
@@ -88,6 +91,7 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
|
||||
update_method: 'category',
|
||||
value: Number(taskCategory)
|
||||
});
|
||||
|
||||
await loadBoardData();
|
||||
modalEditTask({}, null)();
|
||||
} catch (err) {
|
||||
@@ -147,6 +151,45 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
|
||||
}
|
||||
}, [loadBoardData, setLoading, setError]);
|
||||
|
||||
const assignMember = useCallback(async (editedTaskId, memberId, act, modalAssignMember) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
if (act) {
|
||||
await assignMemberAPI({
|
||||
id: editedTaskId,
|
||||
member_id: memberId
|
||||
});
|
||||
} else if (!act) {
|
||||
await unassignMemberAPI({
|
||||
id: editedTaskId,
|
||||
member_id: memberId
|
||||
});
|
||||
}
|
||||
await loadBoardData();
|
||||
modalAssignMember();
|
||||
} catch {
|
||||
setError('Ошибка');
|
||||
} finally{
|
||||
setLoading(false);
|
||||
}
|
||||
}, [loadBoardData, setLoading, setError]);
|
||||
|
||||
const addMember = useCallback(async (username, boardId, modalAddMember) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await addMemberAPI({
|
||||
username: username,
|
||||
board_id: boardId
|
||||
});
|
||||
await loadBoardData();
|
||||
modalAddMember();
|
||||
} catch {
|
||||
setError('Ошибка');
|
||||
} finally{
|
||||
setLoading(false);
|
||||
}
|
||||
}, [loadBoardData, setLoading, setError]);
|
||||
|
||||
return {
|
||||
loadBoardData,
|
||||
createTask,
|
||||
@@ -154,6 +197,8 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
|
||||
editTask,
|
||||
editCategory,
|
||||
deleteCategory,
|
||||
deleteTask
|
||||
deleteTask,
|
||||
assignMember,
|
||||
addMember
|
||||
};
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,9 +31,17 @@
|
||||
margin: 20px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.members-avatar {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-left: 8px;
|
||||
border-radius: 1000px;
|
||||
margin-right: -24px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -208,7 +216,9 @@
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user