diff --git a/src/KBBoard/BoardLogic.js b/src/KBBoard/BoardLogic.js index f43be06..d346ce9 100644 --- a/src/KBBoard/BoardLogic.js +++ b/src/KBBoard/BoardLogic.js @@ -8,7 +8,7 @@ import { addMemberAPI, assignMemberAPI, unassignMemberAPI, deleteMemberAPI, quitMemberAPI } from './BoardAPI'; -export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading) => { +export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading, setItems) => { const navigate = useNavigate(); const loadBoardData = useCallback(async () => { @@ -17,6 +17,7 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading) setError(''); const response = await loadBoardDataAPI(id); setInfo(response.data); + setItems(response.data.members) setCategories(response.data.categories || []); } catch (err) { if (err.response?.data?.message === 'Token Error' || @@ -32,7 +33,7 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading) } finally { setLoading(false); } - }, [id, setError, setInfo, setCategories, setLoading, navigate]); + }, [id, setError, setInfo, setCategories, setLoading, setItems, navigate]); const checkOwner = useCallback(async (ownerId, setIsOwner) => { setLoading(true); diff --git a/src/KBBoard/KBBoard.js b/src/KBBoard/KBBoard.js index de65692..415423c 100644 --- a/src/KBBoard/KBBoard.js +++ b/src/KBBoard/KBBoard.js @@ -1,17 +1,20 @@ import { useState, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; import { useBoardLogic } from './BoardLogic'; import Header from './../Header'; import './../css/Board.css'; 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([]); const [isOwner, setIsOwner] = useState(null); + const [items, setItems] = useState([]); + const [memList, setMemList] = useState(false); const [crTask, setCrTask] = useState(false); const [crCateg, setCrCateg] = useState(false); const [edTask, setEdTask] = useState(false); @@ -56,7 +59,20 @@ const KBBoard = () => { deleteBoards, quitMember, deleteMember - } = useBoardLogic(id, setError, setInfo, setCategories, setLoading); + } = useBoardLogic(id, setError, setInfo, setCategories, setLoading, setItems); + + function ListItem({ item }) { + if (!item) return null; + const user = () => { navigate('/profile/' + item.id); }; + return ( + + ); + }; useEffect(() => { if (id) loadBoardData(); @@ -66,6 +82,9 @@ const KBBoard = () => { if (info?.owner?.id !== undefined) checkOwner(info?.owner?.id, setIsOwner); }, [info?.owner?.id, checkOwner, setIsOwner]); + const modalMemList = () => { + setMemList(!memList); + } const modalCrTask = (categori) => () => { setCrTask(!crTask); setTaskCategori(categori); @@ -182,18 +201,22 @@ const KBBoard = () => {

{info.title}

- Участники: - {(info.members || []).map((member) => ( - (member.id !== info.owner.id) ? ( - - ) : ( - <> - ) - ))} +

- Владелец: {" "+info.owner?.display_name} - +

@@ -278,6 +301,25 @@ const KBBoard = () => { )}
+ {memList && ( +
+
+

Изменение задачи

+ +
+ {items.length > 0 ? ( + items.map((item) => ( + + )) + ) : ( +

Нет участников

+ )} +
+ +
+
+ )} + {crCateg && (
diff --git a/src/css/Board.css b/src/css/Board.css index 04bbf79..46d49d1 100644 --- a/src/css/Board.css +++ b/src/css/Board.css @@ -35,6 +35,10 @@ text-align: center; } +.modal-content .row { + margin: 0px; +} + .members-avatar { height: 32px; width: 32px; @@ -43,10 +47,45 @@ margin-right: -24px; } +.row button { + background-color: #0000; + display: flex; + word-break: break-all; + align-items: center; + margin: 0; + padding: 0; + color: #CAD1D8; +} +.members-list{ + gap: 6px; + padding: 8px; + padding-right: 8px; +} +.members-list button{ + border-radius: 6px; + margin: 0px; + display: flex; + flex-direction: column; + justify-content: space-around; + background-color: #3d4763; +} +.members-list button:hover{ + box-shadow: 0 0 4px 1px #08e8de78; +} +.modal-member { + flex: 0 1 auto; /* занимает всё свободное место */ + overflow-y: auto; /* вертикальный скролл при переполнении */ + overflow-x: hidden; /* горизонтальный скролл отключён */ + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; +} .set-panel{ flex: 0 0 auto; diff --git a/src/css/Modal.css b/src/css/Modal.css index 84d022e..22f4294 100644 --- a/src/css/Modal.css +++ b/src/css/Modal.css @@ -17,6 +17,7 @@ border-radius: 8px; text-align: center; min-width: 300px; + max-height: 80%; } .modal-buttons {