Skip to content

U
userLIstMaterialDetail
Commit b7c73280 authored by Eugenio Marino's avatar Eugenio Marino
Browse files
Options

Complete User Details

parent 5f94087e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 10176 additions and 83 deletions
.idea/.gitignore 0 → 100644
View file @ b7c73280
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml
.idea/facility-test-app.iml 0 → 100644
View file @ b7c73280
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/inspectionProfiles/Project_Default.xml 0 → 100644
View file @ b7c73280
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ b7c73280
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/facility-test-app.iml" filepath="$PROJECT_DIR$/.idea/facility-test-app.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
View file @ b7c73280
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>
\ No newline at end of file
package-lock.json
View file @ b7c73280
This diff is collapsed.
src/App.css
View file @ b7c73280
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
max-width: 800px;
width: 100%;
margin: 0 auto;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
height: 100vh;
}
src/App.js
View file @ b7c73280
import logo from './logo.svg';
import './App.css';
import '@fontsource/roboto/400.css'
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from './Pages/Home'
import Details from './Pages/Details'
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
{/*Imposto le rotte per le diverse viste*/}
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/Details/:id" element={<Details />} />
</Routes>
</BrowserRouter>
</div>
);
}
......
src/App.test.js deleted 100644 → 0
View file @ 5f94087e
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
src/Pages/Details.jsx 0 → 100644
View file @ b7c73280
import React, {useEffect, useState} from 'react';
import CardDetail from '../components/CardDetail'
import {Box, Modal} from "@mui/material";
import FormData from "../components/FormData";
import ModalForm from "../components/ModalForm";
import {useParams} from "react-router-dom";
import axios from "axios";
const Details = () => {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const {id} = useParams()
const url = 'https://ooxvks6089.execute-api.eu-south-1.amazonaws.com/dev/test/facility/' +id
const [detail, setDetail]=useState([])
useEffect(()=>{
const getDetails = async () => {
const response = await axios.get(url)
setDetail(response.data)
}
getDetails()
},[])
return (
<div>
<CardDetail handleOpen={handleOpen} detail={detail}/>
<ModalForm open={open} handleClose={handleClose} detail={detail} url={url}/>
</div>
);
};
export default Details;
src/Pages/Home.jsx 0 → 100644
View file @ b7c73280
import React from 'react';
import BigTable from "../components/BigTable";
const Home = () => {
return (
<div>
{/* <h1>Home Page</h1>*/}
<BigTable/>
</div>
);
};
export default Home;
src/components/BigTable.jsx 0 → 100644
View file @ b7c73280
import React, {useEffect, useState} from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import {Button} from "@mui/material";
import {Link} from "react-router-dom";
const BigTable = () => {
function createData(id, nome, regione, citta) {
return { id, nome, regione, citta };
}
const axios = require('axios')
const [table, setTable] = useState([])
useEffect(() => {
const getTable = async () => {
const response = await axios.get('https://ooxvks6089.execute-api.eu-south-1.amazonaws.com/dev/test/facility')
setTable(response.data)
}
getTable()
}, [])
return (
<div>
<TableContainer component={Paper}>
<Table sx={{maxWidth: 900}} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell align="right">Nome</TableCell>
<TableCell align="right">Regione</TableCell>
<TableCell align="right">Città</TableCell>
</TableRow>
</TableHead>
<TableBody>
{table.map((row) => (
<TableRow
key={row.uuid}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">{row.id}</TableCell>
<TableCell align="right">{row.name}</TableCell>
<TableCell align="right">{row.region}</TableCell>
<TableCell align="right">{row.city}</TableCell>
<TableCell align="right">
<Link style={{textDecoration:'none'}} to={`/Details/${row.uuid}`}>
<Button variant="contained">Dettaglio</Button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
};
export default BigTable;
src/components/CardDetail.jsx 0 → 100644
View file @ b7c73280
import React, {useEffect, useState} from 'react';
import { useParams} from "react-router-dom";
import axios from "axios";
import TableContainer from "@mui/material/TableContainer";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableCell from "@mui/material/TableCell";
import TableBody from "@mui/material/TableBody";
import {Button} from "@mui/material";
function CardDetail({handleOpen,detail}) {
return(
<div>
{/* Details*/}
<TableContainer component={Paper}>
<Table sx={{maxWidth: 900}} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="left">Country</TableCell>
<TableCell align="left">City</TableCell>
<TableCell align="left">District</TableCell>
<TableCell align="left">Name</TableCell>
<TableCell align="left">Phone</TableCell>
<TableCell align="left">Region</TableCell>
<TableCell align="left">Zip Code</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
key={detail.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">{detail.country}</TableCell>
<TableCell align="left">{detail.city}</TableCell>
<TableCell align="left">{detail.district}</TableCell>
<TableCell align="left">{detail.name}</TableCell>
<TableCell align="left">{detail.phone}</TableCell>
<TableCell align="left">{detail.region}</TableCell>
<TableCell align="left">{detail.zip_code}</TableCell>
<TableCell align="right">
<Button variant="contained" size={'small'} handleOpen={handleOpen} onClick={handleOpen}>Modifica</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</div>
)
}
export default CardDetail;
\ No newline at end of file
src/components/FormData.jsx 0 → 100644
View file @ b7c73280
import React, {useEffect, useState} from 'react';
import {Box, Button, FormControl, TextField} from "@mui/material";
import axios from "axios";
/*
* Prendere i valori in input | fatto
* settare i valori vecchi con uno use state e passargli quelli nuovi | fatto
* richiamare onchange | fatto
* Settare il default.value con i dati del DETAIL( fatto)
*
* Al click del submit devo salvare i nuovi valori inseriti in input
* */
function FormData({detail, url}) {
//Setto lo use state
const [name, setName] = useState(detail.name)
const [address, setAddress] = useState(detail.address)
const [city, setCity] = useState(detail.city)
const [zip, setZip] = useState(detail.zip_code)
const [district, setDistrict] = useState(detail.district)
const [region, setRegion] = useState(detail.region)
const [phone, setPhone] = useState(detail.phone)
const [note, setNote] = useState(detail.note)
//Funzione al submit
const handleSubmit = (e)=> {
e.preventDefault()
axios.put(url, {
name,
address,
city,
zip,
district,
region,
phone,
note
}).then(response => {
console.log(response)
})
/* console.log('ciao')*/
}
console.log(url)
return (
<div>
<FormControl onSubmit={handleSubmit}
component="form"
sx={{
'& .MuiTextField-root': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<div>
<TextField
onChange={(e)=> setName(e.target.value)}
id="outlined-error"
label="name"
defaultValue={detail.name}
/>
<TextField
onChange={(e)=> setAddress(e.target.value)}
id="outlined-error"
label="address"
defaultValue={detail.address}
/>
</div>
<div>
<TextField
onChange={(e)=> setCity(e.target.value)}
id="outlined-error"
label="city"
defaultValue={detail.city}
/>
<TextField
onChange={(e)=> setZip(e.target.value)}
id="outlined-error"
label="zip_code"
defaultValue={detail.zip_code}
/>
</div>
<div>
<TextField
onChange={(e)=> setDistrict(e.target.value)}
id="outlined-error"
label="district"
defaultValue={detail.district}
/>
<TextField
onChange={(e)=> setRegion(e.target.value)}
id="outlined-error"
label="region"
defaultValue={detail.region}
/>
<TextField
onChange={(e)=> setCity(e.target.value)}
id="outlined-error"
label="country"
defaultValue={detail.country}
/>
<TextField
onChange={(e)=> setPhone(e.target.value)}
id="outlined-error"
label="phone"
defaultValue={detail.phone}
/>
<TextField
onChange={(e)=> setNote(e.target.value)}
id="outlined-error"
label="Note"
defaultValue={detail.note}
/>
</div>
<Button type={'submit'} variant="contained">Salva</Button>
</FormControl>
</div>
);
}
export default FormData;
\ No newline at end of file
src/components/ModalForm.jsx 0 → 100644
View file @ b7c73280
import React, {useState} from 'react';
import {Box, Modal,} from "@mui/material";
import FormData from "./FormData";
const ModalForm = ({open, handleClose,detail,url}) => {
const style = {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
bgcolor: 'background.paper',
boxShadow: 24,
p: 4,
};
return (
<div>
<Modal
open={open}
onClose={handleClose}
>
<Box sx={style}>
<FormData detail={detail} url={url}/>
</Box>
</Modal>
</div>
);
};
export default ModalForm;
src/index.css
View file @ b7c73280
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
font-family: "Roboto",sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
......
src/index.js
View file @ b7c73280
......@@ -2,7 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
......@@ -10,8 +9,3 @@ ReactDOM.render(
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
src/logo.svg deleted 100644 → 0
View file @ 5f94087e
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
src/reportWebVitals.js deleted 100644 → 0
View file @ 5f94087e
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
src/setupTests.js deleted 100644 → 0
View file @ 5f94087e
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
yarn.lock 0 → 100644
View file @ b7c73280
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment