forked from CRM_Production/JTT_CrM
Merge branch 'master' of https://codefirst.iut.uca.fr/git/maxence.lanone/JTT_CrM
commit
f7e00c20f4
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"path": ".."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "../../Downloads/react-contact-management-app-master"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {}
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import React, {useState} from 'react'
|
||||||
|
import {useNavigate} from 'react-router-dom';
|
||||||
|
// HERE ABOVE useHistory IS REPLACED WITH useNavigate
|
||||||
|
|
||||||
|
function AddContact(props) {
|
||||||
|
|
||||||
|
const navigate=useNavigate();
|
||||||
|
const [User, setUser] = useState({name:"", email:""});
|
||||||
|
|
||||||
|
let add = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if(User.name === "" || User.email === ""){
|
||||||
|
alert("All fields are mandatory!!!");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// THIS IS USED TO SHOW THE LIST DATA ON THE APP.JS FILE
|
||||||
|
props.addContactHandler(User);
|
||||||
|
// THIS IS USED FOR WHEN THE ADD BUTTON IS PRESSED THE INPUT FILED AGAIN GETS EMPTY
|
||||||
|
setUser({name:"", email:""});
|
||||||
|
//console.log(props);
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='ui main'>
|
||||||
|
<h2>Add Contact</h2>
|
||||||
|
<form className='ui form' onSubmit={add}>
|
||||||
|
<div className='field'>
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({...User, name: e.target.value})}/>
|
||||||
|
</div>
|
||||||
|
<div className='field'>
|
||||||
|
<label>Email</label>
|
||||||
|
<input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({...User, email: e.target.value})}/>
|
||||||
|
</div>
|
||||||
|
<button className='ui secondary button'>Add</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddContact
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import icon from '../../images/icon.jpg';
|
||||||
|
|
||||||
|
function ContactCard(props) {
|
||||||
|
|
||||||
|
const { id, name, email } = props.contact;
|
||||||
|
console.log(props.contact);
|
||||||
|
return (
|
||||||
|
<div className='item'>
|
||||||
|
<img className='ui avatar image' src={icon} alt='icon' />
|
||||||
|
<div className='content'>
|
||||||
|
<Link to={`/contact/${id}`} state={{ contact: props.contact }}>
|
||||||
|
<div className='header'>{name} </div>
|
||||||
|
<div>{email}</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<i className='trash alternate outline icon right floated'
|
||||||
|
style={{ color: "red", fontSize: "20px", marginLeft: "10px" }}
|
||||||
|
onClick={() => props.clickHandler(id)}
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
<Link to={`/edit`} state={{ contact: props.contact }}>
|
||||||
|
<i className='edit alternate outline icon right floated'
|
||||||
|
style={{ color: "blue", fontSize: "20px" }}
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ContactCard
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import {Link,useLocation} from'react-router-dom';
|
||||||
|
import user from '../../images/user.jpg';
|
||||||
|
|
||||||
|
const ContactDetail = (props) => {
|
||||||
|
|
||||||
|
//console.log(location);
|
||||||
|
// HERE DUE TO NEW VERSION OF ROUTER useLocation IS USED AND
|
||||||
|
// FROM CONTACTCARD IN LINK IT TOOK STATE AND THEN IT IS PASSED HERE
|
||||||
|
let location = useLocation();
|
||||||
|
const {name, email} = location.state.contact;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='main'>
|
||||||
|
<div className='ui center aligned card'>
|
||||||
|
<div className='image'>
|
||||||
|
<img src={user} alt='user'></img>
|
||||||
|
</div>
|
||||||
|
<div className='content'>
|
||||||
|
<div className='header'>{name}</div>
|
||||||
|
<div className='description'>{email}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Link to="/">
|
||||||
|
<div className='center div'>
|
||||||
|
<button className='ui red button center aligned '>Contact List</button>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ContactDetail
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import React, {useRef} from 'react'
|
||||||
|
import ContactCard from './ContactCard';
|
||||||
|
import {Link} from 'react-router-dom';
|
||||||
|
|
||||||
|
function ContactList(props) {
|
||||||
|
|
||||||
|
console.log(props);
|
||||||
|
const inputEl = useRef("");
|
||||||
|
|
||||||
|
const deletContactHandler = (id) => {
|
||||||
|
props.getContactId(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderContactList = props.contacts.map((contact)=>{
|
||||||
|
return(
|
||||||
|
<ContactCard contact={contact} clickHandler={deletContactHandler} key={contact.id}/>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
|
||||||
|
const getSearchTerm = () =>{
|
||||||
|
props.searchKeyword(inputEl.current.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='main'>
|
||||||
|
<h2>Contact List
|
||||||
|
<Link to="/add">
|
||||||
|
<button className='ui primary button right floated'>Add Contact</button>
|
||||||
|
</Link>
|
||||||
|
</h2>
|
||||||
|
<div className='ui search'>
|
||||||
|
<div className='ui icon input'>
|
||||||
|
<input ref={inputEl} type="text" placeholder='Search Contact' className='prompt' value={props.term} onChange={getSearchTerm}/>
|
||||||
|
<i className='search icon'/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='ui celled list'>
|
||||||
|
{renderContactList.length >0 ? renderContactList:"No Contacts available"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default ContactList
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import React, {useState} from 'react'
|
||||||
|
import {Link,useLocation} from'react-router-dom';
|
||||||
|
import {useNavigate} from 'react-router-dom';
|
||||||
|
// HERE ABOVE useHistory IS REPLACED WITH useNavigate
|
||||||
|
|
||||||
|
function EditContact(props) {
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
let location = useLocation();
|
||||||
|
const {id, name, email} = location.state.contact;
|
||||||
|
const [User, setUser] = useState({id,name,email});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let update = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if(User.name === "" || User.email === ""){
|
||||||
|
alert("All fields are mandatory!!!");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// THIS IS USED TO SHOW THE LIST DATA ON THE APP.JS FILE
|
||||||
|
props.updateContactHandler(User);
|
||||||
|
// THIS IS USED FOR WHEN THE ADD BUTTON IS PRESSED THE INPUT FILED AGAIN GETS EMPTY
|
||||||
|
setUser({name:"", email:""});
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='ui main'>
|
||||||
|
<h2>Edit Contact</h2>
|
||||||
|
<form className='ui form' onSubmit={update}>
|
||||||
|
<div className='field'>
|
||||||
|
<label>Name</label>
|
||||||
|
<input type="text" name="Name" placeholder='Name' value={User.name} onChange={e => setUser({...User, name: e.target.value})}/>
|
||||||
|
</div>
|
||||||
|
<div className='field'>
|
||||||
|
<label>Email</label>
|
||||||
|
<input type="text" name="Email" placeholder='Email' value={User.email} onChange={e => setUser({...User, email: e.target.value})}/>
|
||||||
|
</div>
|
||||||
|
<button className='ui orange button'>Update</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditContact
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
function Header() {
|
||||||
|
return (
|
||||||
|
<div className="ui.fixed.menu">
|
||||||
|
<div className="ui center aligned container">
|
||||||
|
<h2>Contact Manager</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header
|
||||||
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 704 B |
|
After Width: | Height: | Size: 743 B |
|
After Width: | Height: | Size: 913 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 952 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 680 B |
|
After Width: | Height: | Size: 450 B |
|
After Width: | Height: | Size: 695 B |
|
After Width: | Height: | Size: 525 B |
|
After Width: | Height: | Size: 799 B |
@ -1,35 +1,171 @@
|
|||||||
import React from 'react';
|
|
||||||
import NavigationDashboard from '../components/NavigationDashboard';
|
import NavigationDashboard from '../components/NavigationDashboard';
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { BrowserRouter as Router, Switch, Route, Routes } from 'react-router-dom';
|
||||||
|
import { v4 as uuid } from 'uuid';
|
||||||
|
import Header from '../components/Contact/Header';
|
||||||
|
import AddContact from '../components/Contact/AddContact'
|
||||||
|
import ContactList from '../components/Contact/ContactList';
|
||||||
|
import ContactDetail from '../components/Contact/ContactDetail';
|
||||||
|
import EditContact from '../components/Contact/EditContact';
|
||||||
|
import axios from 'axios';
|
||||||
|
import user from '../images/user.jpg';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
|
||||||
|
import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
|
||||||
|
import { Paper } from '@mui/material';
|
||||||
|
|
||||||
const Repertoire = () => {
|
|
||||||
return (
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
|
||||||
|
|
||||||
<div className="page_Repertoire">
|
const api = axios.create({
|
||||||
{/* Create an account page */}
|
baseURL: 'http://localhost:8080'
|
||||||
<div className="haut_de_page">
|
})
|
||||||
<h2 className="titre">Repertoire</h2>
|
|
||||||
<div className="rechLogo">
|
function Repertoire() {
|
||||||
<div className="input_box">
|
|
||||||
<input type="search" placeholder="Rechercher..."/>
|
const [contacts, setContacts] = useState([]);
|
||||||
<span className="search">
|
const [SearchTerm, setSearchTerm] = useState("");
|
||||||
<i class="uil uil-search search-icon"></i>
|
const [SearchResults, setSearchResults] = useState([]);
|
||||||
</span>
|
|
||||||
</div>
|
useEffect(() => {
|
||||||
<img className="logo" srcSet="./LogoApp.svg"/>
|
api.get('/Contact/All').then((response) => {
|
||||||
</div>
|
setContacts(response.data);
|
||||||
</div>
|
setSearchTerm(response.data[0].idcontact);
|
||||||
<div className="bas_de_page">
|
});
|
||||||
<NavigationDashboard />
|
}, []);
|
||||||
<div className="Repertoire">
|
|
||||||
|
return (
|
||||||
|
<div className="page_admin">
|
||||||
|
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
||||||
|
{/* Create a page to delete an user in the admin page*/}
|
||||||
|
<NavigationDashboard />
|
||||||
|
<div className="Titre_Formulaire_Rech">
|
||||||
|
<p className="Titre">Admin</p>
|
||||||
|
<p className="Sous-titre">Liste des utilisateurs</p>
|
||||||
|
<div className="rechLogo">
|
||||||
|
<div className="input_box">
|
||||||
|
<input type="search" placeholder="Rechercher..." />
|
||||||
|
<span className="search">
|
||||||
|
<i class="uil uil-search search-icon"></i>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<TableContainer component={Paper} sx={{ maxHeight: 0.8 }}>
|
||||||
|
<Table aria-label="simple table" size="small" stickyHeader>
|
||||||
|
<TableHead >
|
||||||
|
<TableRow>
|
||||||
|
<TableCell sx={{ bgcolor: 'info.main' }} align="left">Nom</TableCell>
|
||||||
|
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Prénom</TableCell>
|
||||||
|
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Identifiant</TableCell>
|
||||||
|
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Téléphone</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody >
|
||||||
|
{contacts.map((contact) => (
|
||||||
|
<TableRow
|
||||||
|
key={contact.idcontact}
|
||||||
|
hover
|
||||||
|
// onClick={(event) => handleClick(event, contact.idcontact)}
|
||||||
|
// selected={contact.idcontact === selectedIdcontact}
|
||||||
|
>
|
||||||
|
<TableCell align="left">{contact.lastname}</TableCell>
|
||||||
|
<TableCell align="center">{contact.firstname}</TableCell>
|
||||||
|
<TableCell align="center">{contact.phone}</TableCell>
|
||||||
|
<TableCell align="center">{contact.mail}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
|
// function Repertoire() {
|
||||||
|
|
||||||
|
// // NOW WITH THE USE OF HOOKS WE WILL GET THE CONTACTS
|
||||||
|
// const LOCAL_STORAGE_KEY = "contacts"
|
||||||
|
// const [contacts, setContacts] = useState([]);
|
||||||
|
// const [SearchTerm, setSearchTerm] = useState("");
|
||||||
|
// const [SearchResults, setSearchResults] = useState([]);
|
||||||
|
|
||||||
|
// const addContactHandler = async (contact) => {
|
||||||
|
// const request = {
|
||||||
|
// id: uuid(),
|
||||||
|
// ...contact
|
||||||
|
// }
|
||||||
|
// const response = await api.post("/contacts", request)
|
||||||
|
// setContacts([...contacts, response.data]);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // UPDATE CONTACT
|
||||||
|
// const updateContactHandler = async (contact) => {
|
||||||
|
// const response = await api.put(`/contacts/${contact.id}`, contact);
|
||||||
|
// const { id, name, email } = response.data;
|
||||||
|
// setContacts(contacts.map(contact => {
|
||||||
|
// return contact.id === id ? { ...response.data } : contact;
|
||||||
|
// }))
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // FOR DELETING THE ITEMS
|
||||||
|
// const removeContactHandler = async (id) => {
|
||||||
|
// await api.delete(`/contacts/${id}`);
|
||||||
|
// const newContactList = contacts.filter((contact) => {
|
||||||
|
// return contact.id !== id;
|
||||||
|
// });
|
||||||
|
// setContacts(newContactList);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // SEARCHING THE CONTACTS
|
||||||
|
// const searchHandler = (searchTerm) => {
|
||||||
|
// setSearchTerm(searchTerm);
|
||||||
|
// if (searchTerm !== "") {
|
||||||
|
// const newContactList = contacts.filter((contact) => {
|
||||||
|
// return Object.values(contact).join(" ").toLowerCase().includes(searchTerm.toLowerCase());
|
||||||
|
// });
|
||||||
|
// setSearchResults(newContactList);
|
||||||
|
// } else {
|
||||||
|
// setSearchResults(contacts);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// const retrieveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
|
||||||
|
// if (retrieveContacts) setContacts(retrieveContacts);
|
||||||
|
// }
|
||||||
|
// , []);
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts));
|
||||||
|
// }
|
||||||
|
// , [contacts]);
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div className="ui container">
|
||||||
|
// <Router>
|
||||||
|
// <Header />
|
||||||
|
// <Routes>
|
||||||
|
// <Route path="/Repertoire/"
|
||||||
|
// element={<ContactList contacts={SearchTerm.length < 1 ? contacts : SearchResults} getContactId={removeContactHandler} term={SearchTerm} searchKeyword={searchHandler} />}
|
||||||
|
// render={(props)=><ContactList contacts={contacts} getContactId={removeContactHandler} {...props} />}
|
||||||
|
// />
|
||||||
|
// <Route path="/Repertoire/add"
|
||||||
|
// element={<AddContact addContactHandler={addContactHandler} />}
|
||||||
|
// //render={(props)=><AddContact {...props} addContactHandler={addContactHandler}/>}
|
||||||
|
// />
|
||||||
|
// <Route path="Repertoire/edit"
|
||||||
|
// element={<EditContact updateContactHandler={updateContactHandler} />}
|
||||||
|
// />
|
||||||
|
// <Route path="/Repertoire/contact/:id" element={<ContactDetail />} />
|
||||||
|
// </Routes>
|
||||||
|
// {/* <AddContact addContactHandler={addContactHandler}/> */}
|
||||||
|
// {/*Here in contact list props are used to get the values in the above contact array*/}
|
||||||
|
// {/* <ContactList contacts={contacts} getContactId={removeContactHandler}/> */}
|
||||||
|
// </Router>
|
||||||
|
// </div>
|
||||||
|
// )
|
||||||
|
|
||||||
|
|
||||||
|
// };
|
||||||
|
|
||||||
export default Repertoire;
|
export default Repertoire;
|
||||||
Loading…
Reference in new issue