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 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>
|
||||
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
function Repertoire() {
|
||||
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [SearchTerm, setSearchTerm] = useState("");
|
||||
const [SearchResults, setSearchResults] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
api.get('/Contact/All').then((response) => {
|
||||
setContacts(response.data);
|
||||
setSearchTerm(response.data[0].idcontact);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="page_admin">
|
||||
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
|
||||
|
||||
<div className="page_Repertoire">
|
||||
{/* Create an account page */}
|
||||
<div className="haut_de_page">
|
||||
<h2 className="titre">Repertoire</h2>
|
||||
<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>
|
||||
<img className="logo" srcSet="./LogoApp.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bas_de_page">
|
||||
<NavigationDashboard />
|
||||
<div className="Repertoire">
|
||||
{/* 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>
|
||||
<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>
|
||||
</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;
|
||||
Loading…
Reference in new issue