Maxence LANONE 2 years ago
parent 5e2ceb9787
commit fc1db22d9b

@ -1,5 +1,5 @@
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';
const ContactDetail = (props) => {
@ -9,6 +9,7 @@ const ContactDetail = (props) => {
// FROM CONTACTCARD IN LINK IT TOOK STATE AND THEN IT IS PASSED HERE
let location = useLocation();
const {name, email} = location.state.contact;
const {idcontact} = useParams();
return (
<div className='main'>

@ -40,6 +40,12 @@ function Repertoire() {
});
}, []);
function onClickDetail() {
return <NavLink to="/Repertoire/add">
</NavLink>
}
return (
<body className={theme}>
<div className="page_repertoire">
@ -76,14 +82,19 @@ function Repertoire() {
</TableRow>
</TableHead>
<TableBody>
{contacts.map((contact) => (
<TableRow key={contact.idcontact}>
<TableCell><img className="photoContact" src={user} /></TableCell>
<TableCell>{contact.lastname}</TableCell>
<TableCell>{contact.firstname}</TableCell>
<TableCell>{contact.name}</TableCell>
</TableRow>
))}
{contacts.map((contact) => (
<TableRow key={contact.idcontact} onClick={onClickDetail()}>
<TableCell><img className="photoContact" src={user} /></TableCell>
<TableCell>{contact.lastname}</TableCell>
<TableCell>{contact.firstname}</TableCell>
<TableCell>{contact.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</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;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
flex-direction: column;
justify-content: space-around;
align-items: center;
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;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 5%;
margin: 5px 5px 10px 10px;
width: 100%;
height: 35%;
}
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
.parti_three {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 15px;
width: 100%;
height: 18%;
}
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.parti_four {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.parti_one {
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;
.parti_two {
.logo_nav_bar {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 35%;
margin: 10px;
height: 50px;
width: 50px;
}
}
}
}
.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 {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 94.3%;
height: auto;
margin: 5px 10px 10px 5px;
.name_picture {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.picture {
display: flex;
flex-direction: row;
justify-content: left;
margin-right: 25px;
margin-left: 25px;
border-bottom: 1px solid grey;
.name_picture {
#display_image {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 30%;
margin-bottom: 5px;
height: 135px;
width: 135px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border: 1px solid #cbd0dd;
border-radius: 100px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.picture {
display: flex;
flex-direction: row;
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;
}
}
.img {
border-radius: 100px;
object-fit: cover;
}
}
}
.figure {
width: 45%;
}
.figure {
width: 45%;
}
.img {
width: 100%;
}
}
.img {
width: 100%;
}
}
}
}
/*.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
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;
}
}
}
}
.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
cursor: pointer;
.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 {
display: flex;
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;
}
&:hover {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
}
.parti_mail {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
&:focus {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
}
.mail {
display: flex;
margin-left: 199px;
}
}
&:active {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
.parti_pays {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
&:disabled {
color: #3874ff;
background-color: transparent;
border-color: #3874ff;
}
}
}
.pays_region {
display: flex;
margin-left: 110px;
}
}
.parti_tel {
display: flex;
flex-direction: row;
margin: 0 25px;
.name {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 25px;
.def {
display: flex;
font-weight: bold;
}
.presentationNom {
display: flex;
flex-direction: row;
justify-content: space-evenly;
.tel {
display: flex;
margin-left: 207px;
}
}
.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;
}
}
}
}
.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;
}
}
.infoPerso {
display: flex;
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 {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.parti_mail {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.secteurAct {
display: flex;
margin-left: 98px;
}
}
.def {
display: flex;
font-weight: bold;
}
.parti_nbClient {
display: flex;
flex-direction: row;
margin: 0 25px;
.mail {
display: flex;
margin-left: 199px;
}
}
.def {
display: flex;
font-weight: bold;
}
.parti_pays {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.nbClient {
display: flex;
margin-left: 115px;
}
}
}
.def {
display: flex;
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;
}
}
}
@ -465,5 +462,4 @@ body {
border-radius: 10px;
background-color: $xiketic;
cursor: pointer;
}
}
Loading…
Cancel
Save