diff --git a/src/Components/LoggedIn/Content/Users/index.tsx b/src/Components/LoggedIn/Content/Users/index.tsx index ec5ba06..f59ee13 100644 --- a/src/Components/LoggedIn/Content/Users/index.tsx +++ b/src/Components/LoggedIn/Content/Users/index.tsx @@ -8,6 +8,11 @@ import TableCell from "@mui/material/TableCell"; import TableRow from "@mui/material/TableRow"; import Radio from "@mui/material/Radio"; import Skeleton from "@mui/material/Skeleton"; +import Accordion from '@mui/material/Accordion'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import ClearIcon from '@mui/icons-material/Clear'; import { getRoles_mock, TMockData } from "../../../../api/roles"; import theme from "../../../../theme" @@ -29,6 +34,28 @@ const Users: React.FC = () => { }) }; + const [accordionHeader, setAccordionHeader] = React.useState("none"); + const [accordionState, setAccordionState] = React.useState(true); + const [accordionText, setAccordionText] = React.useState(""); + const handleChangeAccordion = (text:string) => { + if( text == "" ) { + setAccordionState( true ); + setAccordionHeader("none"); + } + else { + handleToggleAccordion(); + setAccordionHeader("flex") + } + + accordionState + ? setAccordionText( text ) + : setAccordionText( "" ) + } + + const handleToggleAccordion = () => { + setAccordionState( !accordionState ); + } + handleChangeData(); return ( @@ -43,6 +70,7 @@ const Users: React.FC = () => { flexDirection: "column", justifyContent: "center", alignItems: "center", + marginBottom: "35px", border: "2px solid", fontWeight: "normal", borderColor: theme.palette.golden.main, @@ -54,61 +82,98 @@ const Users: React.FC = () => { ИНФОРМАЦИЯ О ПРОЕКТЕ - { - data.length - ? ( - - - + handleToggleAccordion() } + /> + } + aria-controls="panel1a-content" + id="panel1a-header" + > + + { accordionText } + + + + handleChangeAccordion("") } + /> + + + + +
+ + + + - - - Имя - - - - - Описание - - - - - Отобразить - - - - + Имя + + + + + Описание + + + + + Отобразить + + + + - + - { + { + data.length + ? ( data.map(function(item, i) { return( + height: "100px", + cursor: "pointer" + }} + key={ item.key } + onClick={ () => handleChangeAccordion( item.desc ) }> { ); }) - } - - -
- ) : ( - - ) - } + + ) : ( + + + + + + ) + } + + + + + + +