Neca
/
HRCenter
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull requests 1 Versões 0 Wiki Atividade
Ver código fonte

Merge branch 'feature/1372_updated_nav_and_responsive_for_usermanagement' of Neca/HRCenter into FE_dev

pull/26/head
safet.purkovic 3 anos atrás
pai
3dd631d22d 34acb586f8
commit
3e4f74ed37
4 arquivos alterados com 139 adições e 77 exclusões
Visão unificada Mostrar estatísticas do Diff
  1. 24
    0
      src/assets/styles/components/_nav.scss
  2. 6
    0
      src/assets/styles/components/_usersPage.scss
  3. 32
    7
      src/components/MUI/NavbarComponent.js
  4. 77
    70
      src/pages/UsersPage/UsersPage.js

+ 24
- 0
src/assets/styles/components/_nav.scss Ver arquivo

.search-Icon{ .search-Icon{
margin-right: 50px; margin-right: 50px;
cursor: pointer; cursor: pointer;
}
.user-avatar{
font-weight: 600;
letter-spacing: 0.5px;
text-align: center !important;
padding-left: 1.2px;
padding-bottom: 1.2px;
}
.responsive-nav-cont{
width: 100% !important;
height: 75px;
}
.responsive-logo{
margin-left: 35px !important;
}
.icons-cont{
background: linear-gradient(90deg, rgba(255,255,255,0.15) 50%, white);
/* Gray F4 */

padding-right: 35px;
border-bottom: 1px solid #F0F0F0 !important;
height: 100%;
width: 75%;
justify-content: flex-end;
} }

+ 6
- 0
src/assets/styles/components/_usersPage.scss Ver arquivo

overflow-x: auto !important; overflow-x: auto !important;
} }
} }
.table-cont{
@include media-below($bp-xl) {
overflow-x: auto !important;
}
}
.usersTable .headingRow { .usersTable .headingRow {
background-color: $mainBlueLight; background-color: $mainBlueLight;
} }

+ 32
- 7
src/components/MUI/NavbarComponent.js Ver arquivo

color: "#353535", color: "#353535",
marginY: "0", marginY: "0",
padding: "0", padding: "0",
textDecoration: "none",
}} }}
className="text-black" className="text-black"
as={Link}
to={n}
> >
{t("nav." + n)} {t("nav." + n)}
</ListItemText> </ListItemText>
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
width: matches ? '100%' : 'auto'
}} }}
> >
{matches ? ( {matches ? (
<Box>
<IconButton
sx={{ marginLeft: "15px" }}
onClick={handleToggleDrawer}
<Box
className="responsive-nav-cont"
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<img
style={{ height: "37px", width: "37px", marginLeft: "0px" }}
src={HrLogo}
className='responsive-logo'
/>
<div
style={{
display: "flex",
alignItems: "center",
}}
className='icons-cont'
> >
<MenuOutlinedIcon />
</IconButton>
<img src={searchIcon} />
<IconButton
sx={{ marginLeft: "27px" }}
onClick={handleToggleDrawer}
>
<MenuOutlinedIcon />
</IconButton>
</div>
</Box> </Box>
) : ( ) : (
<Box> <Box>
// color: "text.primary", // color: "text.primary",
marginY: "0", marginY: "0",
padding: "0", padding: "0",
textDecoration: "none"
textDecoration: "none",
}} }}
className="text-black" className="text-black"
as={Link} as={Link}

+ 77
- 70
src/pages/UsersPage/UsersPage.js Ver arquivo

import { useMediaQuery } from "@mui/material"; import { useMediaQuery } from "@mui/material";


const UsersPage = () => { const UsersPage = () => {
const theme = useTheme(); const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down("sm")); const matches = useMediaQuery(theme.breakpoints.down("sm"));
const dispatch = useDispatch(); const dispatch = useDispatch();
const { users } = useSelector((s) => s.users); const { users } = useSelector((s) => s.users);
useEffect(() => { useEffect(() => {
dispatch(setUsersReq()); dispatch(setUsersReq());
},[dispatch]);
}, [dispatch]);


return ( return (
<div> <div>
<h1 className="page-heading">Upravljanje korisnicima</h1> <h1 className="page-heading">Upravljanje korisnicima</h1>
<div className="flex-center"> <div className="flex-center">
{/* <button></button> */} {/* <button></button> */}
{!matches && <IconButton className={"c-btn--primary-outlined c-btn userPageBtn"}>
Režim uređivanja
<img
style={{
position: "relative",
top: -0.25,
paddingLeft: "10px",
}}
src={userPageBtnIcon}
/>
</IconButton>}
{!matches && (
<IconButton
className={"c-btn--primary-outlined c-btn userPageBtn"}
>
Režim uređivanja
<img
style={{
position: "relative",
top: -0.25,
paddingLeft: "10px",
}}
src={userPageBtnIcon}
/>
</IconButton>
)}
<IconButton <IconButton
className={"c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"}
className={
"c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
}
> >
{!matches && 'Filteri'}
{!matches && "Filteri"}
<img <img
style={{ style={{
position: "relative", position: "relative",
top: -0.25, top: -0.25,
paddingLeft: (matches ? '0px' : "10px"),
paddingLeft: matches ? "0px" : "10px",
}} }}
src={filters} src={filters}
/> />
minHeight: "500px", minHeight: "500px",
}} }}
> >
<table className="usersTable" style={{ width: "1117px" }}>
<thead>
<tr className="headingRow">
<th>Ime i prezime</th>
<th>E-mail</th>
<th>Pozicija</th>
<th>CV Link</th>
<th></th>
</tr>
</thead>
<tbody>
{users.map((n) => (
<tr key={n.id} className="secondaryRow">
<td>
{n.firstName} {n.lastName}
</td>
<td>{n.email}</td>
<td>HR Specialist</td>
<td className="cvLink">CV_Ermin.pdf</td>
<td>
<IconButton
className={"c-btn--primary-outlined c-btn td-btn"}
>
<img
style={{
position: "relative",
}}
src={lock}
/>
</IconButton>
<IconButton
className={"c-btn--primary-outlined c-btn td-btn"}
>
<img
style={{
position: "relative",
}}
src={forbiden}
/>
</IconButton>
<IconButton
className={"c-btn--primary-outlined c-btn td-btn"}
>
<img
style={{
position: "relative",
}}
src={edit}
/>
</IconButton>
</td>
<div className=" table-cont">
<table className="usersTable" style={{ width: "1117px" }}>
<thead>
<tr className="headingRow">
<th>Ime i prezime</th>
<th>E-mail</th>
<th>Pozicija</th>
<th>CV Link</th>
<th></th>
</tr> </tr>
))}
</tbody>
</table>
</thead>
<tbody>
{users.map((n) => (
<tr key={n.id} className="secondaryRow">
<td>
{n.firstName} {n.lastName}
</td>
<td>{n.email}</td>
<td>HR Specialist</td>
<td className="cvLink">CV_Ermin.pdf</td>
<td>
<IconButton
className={"c-btn--primary-outlined c-btn td-btn"}
>
<img
style={{
position: "relative",
}}
src={lock}
/>
</IconButton>
<IconButton
className={"c-btn--primary-outlined c-btn td-btn"}
>
<img
style={{
position: "relative",
}}
src={forbiden}
/>
</IconButton>
<IconButton
className={"c-btn--primary-outlined c-btn td-btn"}
>
<img
style={{
position: "relative",
}}
src={edit}
/>
</IconButton>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div style={{ display: "flex", justifyContent: "flex-end" }}> <div style={{ display: "flex", justifyContent: "flex-end" }}>
<IconButton className={"c-btn--primary c-btn inviteBtn"}> <IconButton className={"c-btn--primary c-btn inviteBtn"}>
<img <img

Escrever Pré-visualização
Carregando…
Cancelar
Salvar