diff --git a/src/KBBoard.js b/src/KBBoard.js index c581fb4..8eaaca3 100644 --- a/src/KBBoard.js +++ b/src/KBBoard.js @@ -8,6 +8,7 @@ const KBBoard = () => { const navigate = useNavigate(); const { id } = useParams(); const [error, setError] = useState(''); + const [loading, setLoading] = useState(false) const [info, setInfo] = useState({}); const [categories, setCategories] = useState([]); @@ -88,13 +89,16 @@ const KBBoard = () => { const createTask = async (e) => { e.preventDefault(); + setLoading(true); const newTask = { category_id: taskCategori, title: taskTitle, description: taskDescription }; - axios.post('/api/boards/categories/tasks/create', newTask); + await axios.post('/api/boards/categories/tasks/create', newTask); await loadBoardData(); modalCrTask(null)(); + setLoading(false); }; const createCategory = async (e) => { e.preventDefault(); + setLoading(true); try { const newCategory = { board_id: id, title: categoryTitle}; await axios.post('/api/boards/categories/create', newCategory); @@ -103,11 +107,13 @@ const KBBoard = () => { setError(err.response.data.message) } finally { modalCrCateg(); + setLoading(false); } }; const editTask = async (e) => { e.preventDefault(); + setLoading(true); var newTask = { id: editedTask.id, update_method: "title", value: taskTitle }; await axios.put('/api/boards/categories/tasks/update', newTask); newTask = { id: editedTask.id, update_method: "description", value: taskDescription }; @@ -116,9 +122,11 @@ const KBBoard = () => { await axios.put('/api/boards/categories/tasks/update', newTask); await loadBoardData(); modalEditTask({}, null)(); + setLoading(false); }; const editCategory = async (e) => { e.preventDefault(); + setLoading(true); try { const newCategory = { id: editedCateg.id, update_method: "title", value: categoryTitle}; await axios.put('/api/boards/categories/update', newCategory); @@ -127,23 +135,28 @@ const KBBoard = () => { setError(err.response.data.message) } finally { modalEditCateg({})(); + setLoading(false); } }; const deleteCategory = async (e) => { e.preventDefault(); + setLoading(true); await axios.delete('/api/boards/categories/delete', { data: {id: editedCateg.id} }); await loadBoardData(); modalDelCateg(); modalEditCateg({})(); + setLoading(false); } const deleteTask = async (e) => { e.preventDefault(); + setLoading(true); await axios.delete('/api/boards/categories/tasks/delete', { data: { id: editedTask.id } }); await loadBoardData(); modalDelTask(); modalEditTask({},null)(); + setLoading(false); } @@ -216,8 +229,6 @@ const KBBoard = () => { - - {crCateg && (
@@ -231,7 +242,9 @@ const KBBoard = () => { required />
- +
@@ -254,10 +267,11 @@ const KBBoard = () => { type="text" value={taskDescription} onChange={(e) => setTaskDescription(e.target.value)} - required /> - + @@ -277,7 +291,9 @@ const KBBoard = () => { required /> - + @@ -314,7 +330,9 @@ const KBBoard = () => { - + @@ -329,7 +347,9 @@ const KBBoard = () => {
- +
@@ -342,7 +362,9 @@ const KBBoard = () => {
- +
diff --git a/src/css/Board.css b/src/css/Board.css index 6fc2e30..a7c7da2 100644 --- a/src/css/Board.css +++ b/src/css/Board.css @@ -118,6 +118,7 @@ justify-content: flex-start; align-items: center; min-width: 300px; + width: 100%; margin-top: 16px; margin-right: -4px; /* компенсируем отступ контейнера */ padding-right: 4px; /* создаём отступ для контента */ @@ -219,20 +220,20 @@ } .board-panel::-webkit-scrollbar { - height: 8px; + height: 12px; } .task-list::-webkit-scrollbar-track , .board-panel::-webkit-scrollbar-track { background: #fff; - border-radius: 4px; + border-radius: 8px; margin-left: 8px; } .task-list::-webkit-scrollbar-thumb, .board-panel::-webkit-scrollbar-thumb { background: #aaa; - border-radius: 4px; + border-radius: 8px; margin-left: 8px; }