From db3eb58fa69c7e5d05f6df44a74a433405d4143c Mon Sep 17 00:00:00 2001 From: naveen8801 Date: Thu, 24 Feb 2022 23:33:38 +0530 Subject: [PATCH 1/2] EditDetails Modal added --- frontend/package-lock.json | 12 ++ frontend/package.json | 1 + frontend/src/App.js | 1 - frontend/src/Component/AllUsers.jsx | 3 +- frontend/src/Component/EditDetailModal.jsx | 159 +++++++++++++++++++ frontend/src/Component/EditUser.jsx | 174 +++++++++++++-------- frontend/src/Component/UserCard.jsx | 22 ++- 7 files changed, 302 insertions(+), 70 deletions(-) create mode 100644 frontend/src/Component/EditDetailModal.jsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 445d559..09a553b 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1861,6 +1861,18 @@ "@babel/runtime": "^7.4.4" } }, + "@material-ui/lab": { + "version": "4.0.0-alpha.56", + "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz", + "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.10.2", + "clsx": "^1.0.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, "@material-ui/styles": { "version": "4.11.4", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz", diff --git a/frontend/package.json b/frontend/package.json index 3d1934c..0d8c093 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,6 +7,7 @@ "@iconify/react": "^3.1.3", "@material-ui/core": "^4.11.3", "@material-ui/icons": "^4.11.2", + "@material-ui/lab": "^4.0.0-alpha.56", "@testing-library/jest-dom": "^5.12.0", "@testing-library/react": "^11.2.6", "@testing-library/user-event": "^12.8.3", diff --git a/frontend/src/App.js b/frontend/src/App.js index 9b1d63b..d66dc57 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -16,7 +16,6 @@ function App() { - diff --git a/frontend/src/Component/AllUsers.jsx b/frontend/src/Component/AllUsers.jsx index 6e3abda..7aac9bf 100644 --- a/frontend/src/Component/AllUsers.jsx +++ b/frontend/src/Component/AllUsers.jsx @@ -52,9 +52,10 @@ const AllUsers = () => { id={item._id} name={item.name} lat={item.lat} - long={item.lng} + lng={item.lng} phone={item.phone} setUsers={setUsers} + category={item.category} /> ))} diff --git a/frontend/src/Component/EditDetailModal.jsx b/frontend/src/Component/EditDetailModal.jsx new file mode 100644 index 0000000..0281d41 --- /dev/null +++ b/frontend/src/Component/EditDetailModal.jsx @@ -0,0 +1,159 @@ +import React, { useState, useEffect } from 'react'; +import { useHistory, useParams } from 'react-router-dom'; +import { getUsers, editUser } from '../Service/api'; +import { + FormGroup, + FormControl, + InputLabel, + Input, + Button, + makeStyles, + Typography, + Modal, + Box, + Dialog, + DialogContent, + DialogContentText, + DialogActions, + DialogTitle, + TextField, +} from '@material-ui/core'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles({ + heading: { + marginTop: '1rem', + fontFamily: 'Sora', + fontWeight: '600', + color: 'black', + textAlign: 'center', + }, +}); + +function EditDetailModal({ user, show, setShow, setUsers, userid }) { + const classes = useStyles(); + const [initData, setInitData] = useState( + user ? user : { name: '', lat: '', lng: '', phone: '', category: '' } + ); + const [alert, setAlert] = useState({ show: false, text: '' }); + const [loading, setloading] = useState(false); + useEffect(() => { + setInitData(user); + }, [user]); + + const onValueChange = (k, v) => { + let curr = { ...initData }; + curr[k] = v; + setInitData(curr); + }; + + const submitHandler = async () => { + if ( + initData.name === '' || + initData.lat === '' || + initData.lng === '' || + initData.phone === '' || + initData.category === '' + ) { + setAlert({ show: true, text: 'Input fields can not be empty' }); + return; + } + setAlert({ show: false, text: '' }); + try { + setloading(true); + const res = await editUser(userid, initData); + let response = await getUsers(); + setUsers(response.data); + setShow(false); + setloading(false); + } catch (error) { + console.log(error); + setloading(false); + } + }; + + return ( + setShow(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + + Edit Details + + + {alert.show ? {alert.text} : null} + + onValueChange(e.target.name, e.target.value)} + name="name" + value={initData.name} + id="my-input" + /> + onValueChange(e.target.name, e.target.value)} + name="lat" + value={initData.lat} + id="my-input" + /> + onValueChange(e.target.name, e.target.value)} + name="lng" + value={initData.lng} + id="my-input" + /> + onValueChange(e.target.name, e.target.value)} + name="phone" + value={initData.phone} + id="my-input" + /> + onValueChange(e.target.name, e.target.value)} + name="category" + value={initData.category} + id="my-input" + /> + + + + + + + + ); +} + +export default EditDetailModal; diff --git a/frontend/src/Component/EditUser.jsx b/frontend/src/Component/EditUser.jsx index c5ecbaf..8145c3d 100644 --- a/frontend/src/Component/EditUser.jsx +++ b/frontend/src/Component/EditUser.jsx @@ -1,80 +1,124 @@ import { useState, useEffect } from 'react'; -import { FormGroup, FormControl, InputLabel, Input, Button, makeStyles, Typography } from '@material-ui/core'; +import { + FormGroup, + FormControl, + InputLabel, + Input, + Button, + makeStyles, + Typography, +} from '@material-ui/core'; import { useHistory, useParams } from 'react-router-dom'; import { getUsers, editUser } from '../Service/api'; const initialValue = { - name: '', - lat: '', - lng:'', - phone: '', - category:'' -} + name: '', + lat: '', + lng: '', + phone: '', + category: '', +}; const useStyles = makeStyles({ - container: { - width: '50%', - margin: '5% 0 0 25%', - '& > *': { - marginTop: 20 - } - } -}) + container: { + width: '50%', + margin: '5% 0 0 25%', + '& > *': { + marginTop: 20, + }, + }, +}); const EditUser = () => { - const [user, setUser] = useState(initialValue); - const { name, lat, lng, phone , category} = user; - const { id } = useParams(); - const classes = useStyles(); - let history = useHistory(); + const [user, setUser] = useState(initialValue); + const { name, lat, lng, phone, category } = user; + const { id } = useParams(); + const classes = useStyles(); + let history = useHistory(); - useEffect(() => { - loadUserDetails(); - }, []); + useEffect(() => { + loadUserDetails(); + }, []); - const loadUserDetails = async() => { - const response = await getUsers(id); - setUser(response.data); - } + const loadUserDetails = async () => { + const response = await getUsers(id); + setUser(response.data); + }; - const editUserDetails = async() => { - const response = await editUser(id, user); - history.push('/all'); - } + const editUserDetails = async () => { + const response = await editUser(id, user); + history.push('/all'); + }; - const onValueChange = (e) => { - console.log(e.target.value); - setUser({...user, [e.target.name]: e.target.value}) - } + const onValueChange = (e) => { + console.log(e.target.value); + setUser({ ...user, [e.target.name]: e.target.value }); + }; - return ( - - Edit Information - - Name - onValueChange(e)} name='name' value={name} id="my-input" aria-describedby="my-helper-text" /> - - - Username - onValueChange(e)} name='lat' value={lat} id="my-input" aria-describedby="my-helper-text" /> - - - Email - onValueChange(e)} name='lng' value={lng} id="my-input" aria-describedby="my-helper-text" /> - - - Phone - onValueChange(e)} name='phone' value={phone} id="my-input" aria-describedby="my-helper-text" /> - - - Phone - onValueChange(e)} name='category' value={category} id="my-input" aria-describedby="my-helper-text" /> - - - - - - ) -} + return ( + + Edit Information + + Name + onValueChange(e)} + name="name" + value={name} + id="my-input" + aria-describedby="my-helper-text" + /> + + + Username + onValueChange(e)} + name="lat" + value={lat} + id="my-input" + aria-describedby="my-helper-text" + /> + + + Email + onValueChange(e)} + name="lng" + value={lng} + id="my-input" + aria-describedby="my-helper-text" + /> + + + Phone + onValueChange(e)} + name="phone" + value={phone} + id="my-input" + aria-describedby="my-helper-text" + /> + + + Phone + onValueChange(e)} + name="category" + value={category} + id="my-input" + aria-describedby="my-helper-text" + /> + + + + + + ); +}; -export default EditUser; \ No newline at end of file +export default EditUser; diff --git a/frontend/src/Component/UserCard.jsx b/frontend/src/Component/UserCard.jsx index 713b7c6..83d6a02 100644 --- a/frontend/src/Component/UserCard.jsx +++ b/frontend/src/Component/UserCard.jsx @@ -14,6 +14,7 @@ import CallIcon from '@material-ui/icons/Call'; import LocationOnIcon from '@material-ui/icons/LocationOn'; import { Link } from 'react-router-dom'; import { getUsers, deleteUser } from '../Service/api'; +import EditDetailModal from './EditDetailModal'; const useStyles = makeStyles({ root: { @@ -66,7 +67,8 @@ const useStyles = makeStyles({ }, }); -function UserCard({ id, name, lat, long, phone, setUsers }) { +function UserCard({ id, name, lat, lng, phone, setUsers, category }) { + const [showEditModal, setShowEditModal] = useState(false); const classes = useStyles(); const deleteUserData = async (id) => { await deleteUser(id); @@ -85,8 +87,9 @@ function UserCard({ id, name, lat, long, phone, setUsers }) { @@ -98,6 +101,19 @@ function UserCard({ id, name, lat, long, phone, setUsers }) { Delete + ); } From bed7e2d44da9bfd9074c13c5683ce4c949973b28 Mon Sep 17 00:00:00 2001 From: naveen8801 Date: Thu, 24 Feb 2022 23:46:00 +0530 Subject: [PATCH 2/2] Delete Modal added --- frontend/src/Component/UserCard.jsx | 53 +++++++++++++++++++++++++++-- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/frontend/src/Component/UserCard.jsx b/frontend/src/Component/UserCard.jsx index 83d6a02..45cd656 100644 --- a/frontend/src/Component/UserCard.jsx +++ b/frontend/src/Component/UserCard.jsx @@ -9,6 +9,11 @@ import { Typography, TextField, Grid, + Dialog, + DialogContent, + DialogContentText, + DialogActions, + DialogTitle, } from '@material-ui/core'; import CallIcon from '@material-ui/icons/Call'; import LocationOnIcon from '@material-ui/icons/LocationOn'; @@ -34,6 +39,13 @@ const useStyles = makeStyles({ justifyContent: 'space-between', flexDirection: 'column', }, + heading: { + margin: '1rem', + fontFamily: 'Sora', + fontWeight: '600', + color: 'black', + textAlign: 'center', + }, name: { margin: '0px', fontFamily: 'Sora', @@ -69,10 +81,15 @@ const useStyles = makeStyles({ function UserCard({ id, name, lat, lng, phone, setUsers, category }) { const [showEditModal, setShowEditModal] = useState(false); + const [showDeleteDialog, setshowDeleteDialog] = useState(false); + const [loading, setloading] = useState(false); + const classes = useStyles(); const deleteUserData = async (id) => { + setloading(true); await deleteUser(id); - getAllUsers(); + await getAllUsers(); + setloading(false); }; const getAllUsers = async () => { let response = await getUsers(); @@ -96,7 +113,7 @@ function UserCard({ id, name, lat, lng, phone, setUsers, category }) { @@ -114,6 +131,38 @@ function UserCard({ id, name, lat, lng, phone, setUsers, category }) { category: category, }} /> + setshowDeleteDialog(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + + Are you sure, you want to remove this user ? + + + + + + + ); }