Maxence LANONE 3 years ago
parent 5e2ceb9787
commit fc1db22d9b

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import {Link,useLocation} from'react-router-dom'; import {Link,useLocation, useParams} from'react-router-dom';
import user from '../../images/user.jpg'; import user from '../../images/user.jpg';
const ContactDetail = (props) => { const ContactDetail = (props) => {
@ -9,6 +9,7 @@ const ContactDetail = (props) => {
// FROM CONTACTCARD IN LINK IT TOOK STATE AND THEN IT IS PASSED HERE // FROM CONTACTCARD IN LINK IT TOOK STATE AND THEN IT IS PASSED HERE
let location = useLocation(); let location = useLocation();
const {name, email} = location.state.contact; const {name, email} = location.state.contact;
const {idcontact} = useParams();
return ( return (
<div className='main'> <div className='main'>

@ -40,6 +40,12 @@ function Repertoire() {
}); });
}, []); }, []);
function onClickDetail() {
return <NavLink to="/Repertoire/add">
</NavLink>
}
return ( return (
<body className={theme}> <body className={theme}>
<div className="page_repertoire"> <div className="page_repertoire">
@ -76,14 +82,19 @@ function Repertoire() {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{contacts.map((contact) => (
<TableRow key={contact.idcontact}> {contacts.map((contact) => (
<TableCell><img className="photoContact" src={user} /></TableCell> <TableRow key={contact.idcontact} onClick={onClickDetail()}>
<TableCell>{contact.lastname}</TableCell>
<TableCell>{contact.firstname}</TableCell> <TableCell><img className="photoContact" src={user} /></TableCell>
<TableCell>{contact.name}</TableCell> <TableCell>{contact.lastname}</TableCell>
</TableRow> <TableCell>{contact.firstname}</TableCell>
))} <TableCell>{contact.name}</TableCell>
</TableRow>
))}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>

@ -45,403 +45,400 @@ body {
} }
.bas_de_page { .bas_de_page {
display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
.nav_bar_verticale {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-between; justify-content: space-around;
width: auto; align-items: center;
height: 86%; width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.parti_one {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.nav_bar_verticale { .parti_two {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
width: 5%; width: 100%;
margin: 5px 5px 10px 10px; height: 35%;
}
background: rgba(255, 255, 255, 1); .parti_three {
border: 1px solid #cbd0dd; display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 15px;
width: 100%;
height: 18%;
}
border-radius: 5px; .parti_four {
backdrop-filter: blur(3px); display: flex;
-webkit-backdrop-filter: blur(15px); flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.parti_one { .button {
display: flex; display: flex;
flex-direction: row; object-fit: cover;
justify-content: space-around; background-color: transparent;
align-items: center; border: none;
width: 100%; cursor: pointer;
height: 18%;
}
.parti_two { .logo_nav_bar {
display: flex; display: flex;
flex-direction: column; margin: 10px;
justify-content: space-around; height: 50px;
align-items: center; width: 50px;
width: 100%;
height: 35%;
} }
}
}
}
.parti_three {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 15px;
width: 100%;
height: 18%;
}
.parti_four {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.button {
display: flex;
object-fit: cover;
background-color: transparent;
border: none;
cursor: pointer;
.logo_nav_bar {
display: flex;
margin: 10px;
height: 50px;
width: 50px;
}
}
}
}
.Compte {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 94.3%;
height: auto;
margin: 5px 10px 10px 5px;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.Compte { .name_picture {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
width: 94.3%; margin: 13px;
height: auto; width: auto;
margin: 5px 10px 10px 5px; height: 30%;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 0.1);
border: 1px solid #cbd0dd; border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
border-radius: 5px; .picture {
backdrop-filter: blur(3px); display: flex;
-webkit-backdrop-filter: blur(15px); flex-direction: row;
justify-content: left;
margin-right: 25px;
margin-left: 25px;
border-bottom: 1px solid grey;
.name_picture { #display_image {
display: flex; display: flex;
flex-direction: column; margin-bottom: 5px;
justify-content: space-evenly; height: 135px;
margin: 13px; width: 135px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 5px; border: 1px solid #cbd0dd;
border-radius: 100px;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
.picture { .img {
display: flex; border-radius: 100px;
flex-direction: row; object-fit: cover;
justify-content: left;
margin-right: 25px;
margin-left: 25px;
border-bottom: 1px solid grey;
#display_image {
display: flex;
margin-bottom: 5px;
height: 135px;
width: 135px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid #cbd0dd;
border-radius: 100px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.img {
border-radius: 100px;
object-fit: cover;
}
}
} }
}
}
.figure { .figure {
width: 45%; width: 45%;
} }
.img { .img {
width: 100%; width: 100%;
}
}
} }
} }
}
}
/*.bouton_submit { .bouton_submit {
display: flex; display: flex;
margin-left: 30px; margin-left: 30px;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.fileUpload {
color: #3874ff;
border-color: #3874ff;
background-color: transparent;
border: 1px solid #004dff;
border-radius: .375rem;
gap: 1rem;
font-size: 1rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
&:hover {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
}
&:focus {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
}
&:active {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #3874ff;
background-color: transparent;
border-color: #3874ff;
}
}
}
}
.name {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 25px;
.presentationNom {
display: flex;
flex-direction: row;
justify-content: space-evenly;
.def {
display: flex;
font-weight: bold;
}
.nom {
display: flex;
margin-left: 125px;
;
}
.texte {
display: flex;
flex-wrap: wrap;
margin-left: 125px;
}
}
.bouton_submit {
display: flex;
.bouton_modifierNom {
width: 75px;
height: 20px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
&:hover {
background-color: lightgrey;
}
}
}
}
}
.fileUpload {
color: #3874ff;
border-color: #3874ff;
background-color: transparent;
border: 1px solid #004dff;
border-radius: .375rem;
gap: 1rem;
font-size: 1rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
.infoPerso { &:hover {
display: flex; color: #fff;
flex-direction: column; background-color: #3874ff;
justify-content: space-evenly; border-color: #004dff;
margin-left: 13px; }
margin-right: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.description {
display: flex;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 10px 0;
font-weight: bold;
}
.parti_mail { &:focus {
display: flex; color: #fff;
flex-direction: row; background-color: #3874ff;
margin: 0 25px; border-color: #004dff;
border-bottom: 1px solid grey; box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
padding: 0 0 15px 0; }
.def {
display: flex;
font-weight: bold;
}
.mail { &:active {
display: flex; color: #fff;
margin-left: 199px; background-color: #3874ff;
} border-color: #004dff;
} box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
.parti_pays { &:disabled {
display: flex; color: #3874ff;
flex-direction: row; background-color: transparent;
margin: 0 25px; border-color: #3874ff;
border-bottom: 1px solid grey; }
padding: 0 0 15px 0; }
}
.def {
display: flex;
font-weight: bold;
}
.pays_region {
display: flex;
margin-left: 110px;
}
}
.parti_tel { .name {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0 25px; justify-content: space-between;
margin: 0 25px;
.def { .presentationNom {
display: flex; display: flex;
font-weight: bold; flex-direction: row;
} justify-content: space-evenly;
.tel { .def {
display: flex; display: flex;
margin-left: 207px; font-weight: bold;
} }
}
.nom {
display: flex;
margin-left: 125px;
;
}
.texte {
display: flex;
flex-wrap: wrap;
margin-left: 125px;
}
}
.bouton_submit {
display: flex;
.bouton_modifierNom {
width: 75px;
height: 20px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
&:hover {
background-color: lightgrey;
} }
}
}
}
.infoEntreprise {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.description {
display: flex;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 10px 0;
font-weight: bold;
}
.parti_name {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.name { .infoPerso {
display: flex; display: flex;
margin-left: 92px; flex-direction: column;
} justify-content: space-evenly;
} margin-left: 13px;
margin-right: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.description {
display: flex;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 10px 0;
font-weight: bold;
}
.parti_secteurAct { .parti_mail {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: 0 25px; margin: 0 25px;
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
padding: 0 0 15px 0; padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.secteurAct { .def {
display: flex; display: flex;
margin-left: 98px; font-weight: bold;
} }
}
.parti_nbClient { .mail {
display: flex; display: flex;
flex-direction: row; margin-left: 199px;
margin: 0 25px; }
}
.def { .parti_pays {
display: flex; display: flex;
font-weight: bold; flex-direction: row;
} margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.nbClient { .def {
display: flex; display: flex;
margin-left: 115px; font-weight: bold;
} }
}
} .pays_region {
display: flex;
margin-left: 110px;
}
}
.parti_tel {
display: flex;
flex-direction: row;
margin: 0 25px;
.def {
display: flex;
font-weight: bold;
}
.tel {
display: flex;
margin-left: 207px;
}
}
}
.infoEntreprise {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.description {
display: flex;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 10px 0;
font-weight: bold;
}
.parti_name {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.name {
display: flex;
margin-left: 92px;
}
}
.parti_secteurAct {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.secteurAct {
display: flex;
margin-left: 98px;
}
}
.parti_nbClient {
display: flex;
flex-direction: row;
margin: 0 25px;
.def {
display: flex;
font-weight: bold;
}
.nbClient {
display: flex;
margin-left: 115px;
} }
} }
} }
@ -466,4 +463,3 @@ body {
background-color: $xiketic; background-color: $xiketic;
cursor: pointer; cursor: pointer;
} }
}
Loading…
Cancel
Save