edit profile
This commit is contained in:
pawan-dot
parent
a5b18130b7
commit
83bd2c9d22
@ -129,6 +129,12 @@ const AppHeaderDropdown = () => {
|
||||
</CBadge> */}
|
||||
</CDropdownItem>
|
||||
{/* <CDropdownDivider /> */}
|
||||
<Link to='/profile/edit'>
|
||||
<CDropdownItem>
|
||||
<CIcon icon={cilUser} className="me-2" />
|
||||
Edit Profile
|
||||
</CDropdownItem>
|
||||
</Link>
|
||||
<Link to='/change_password'>
|
||||
<CDropdownItem>
|
||||
<CIcon icon={cilPencil} className="me-2" />
|
||||
|
||||
@ -54,6 +54,7 @@ import EditFaqs from './views/FAQs/EditFaqs'
|
||||
// DashBoard
|
||||
const Change_Password = React.lazy(() => import('./views/pages/register/Change_password'))
|
||||
const EditProfile = React.lazy(() => import('./views/Profile/EditProfile'))
|
||||
import Profile from './views/Profile/Profile'
|
||||
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
|
||||
|
||||
|
||||
@ -61,8 +62,8 @@ const routes = [
|
||||
|
||||
{ path: '/', exact: true, name: 'Home' },
|
||||
{ path: '/change_password', name: 'Change Password', component: Change_Password },
|
||||
{ path: '/edit', name: 'Change Password', component: EditProfile },
|
||||
// { path: '/profile', name: 'Change Password', component: Profile },
|
||||
{ path: '/profile/edit', name: 'Edit Profile', component: EditProfile },
|
||||
// { path: '/profile', name: 'Profile', component: Profile },
|
||||
|
||||
//Category route
|
||||
{ path: '/addCategory', name: 'AddCategeory', component: AddCategeory },
|
||||
|
||||
@ -6,60 +6,118 @@ import axios from 'axios'
|
||||
import { useHistory } from 'react-router-dom'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
const EditProfile = () => {
|
||||
const [cities, setCities] = useState([])
|
||||
const { token } = isAutheticated()
|
||||
|
||||
const [image, setImage] = useState("");
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [imagesPreview, setImagesPreview] = useState();
|
||||
const token = isAutheticated()
|
||||
|
||||
const [ownerDetails, setOwnerDetails] = useState({
|
||||
cafeName: '',
|
||||
name: '',
|
||||
email: '',
|
||||
location: '',
|
||||
country: 'India',
|
||||
city: ''
|
||||
phone: ''
|
||||
|
||||
})
|
||||
const history = useHistory()
|
||||
const [processing, setProcessing] = useState(false)
|
||||
const countries = Country.getAllCountries()
|
||||
useEffect(() => {
|
||||
const countryCode = countries.find(item => item.name === ownerDetails.country)
|
||||
setCities(() => City.getCitiesOfCountry(countryCode?.isoCode))
|
||||
|
||||
getData()
|
||||
|
||||
}, [ownerDetails.country])
|
||||
}, [])
|
||||
|
||||
const getData = async () => {
|
||||
let res = await axios.get('/owner', {
|
||||
let res = await axios.get(`/api/v1/user/details`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
if (res) {
|
||||
if (res.data.success) {
|
||||
|
||||
setOwnerDetails({ ...res.data.user })
|
||||
if (res.data.user.avatar) {
|
||||
setImagesPreview(res.data.user.avatar.url)
|
||||
}
|
||||
}
|
||||
console.log(ownerDetails);
|
||||
|
||||
|
||||
|
||||
}
|
||||
const handleChange = (event) => {
|
||||
const { name, value } = event.target;
|
||||
setOwnerDetails({ ...ownerDetails, [name]: value });
|
||||
};
|
||||
const handleImage = (e) => {
|
||||
const files = e.target.files[0];
|
||||
|
||||
// console.log(files)
|
||||
setImage(files);
|
||||
// only for file preview------------------------------------
|
||||
const Reader = new FileReader();
|
||||
Reader.readAsDataURL(files);
|
||||
|
||||
Reader.onload = () => {
|
||||
if (Reader.readyState === 2) {
|
||||
setImagesPreview(Reader.result);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
};
|
||||
async function handleSubmit() {
|
||||
|
||||
let res = await axios.put(`/owner`, ownerDetails, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`,
|
||||
}
|
||||
if (ownerDetails.name.trim() === '' || ownerDetails.email.trim() === '' || ownerDetails.phone === '') {
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: 'Fill all mandatory fields',
|
||||
icon: 'error',
|
||||
button: 'Close',
|
||||
dangerMode: true,
|
||||
})
|
||||
setProcessing(true)
|
||||
console.log(res.data);
|
||||
|
||||
if (res) {
|
||||
// localStorage.setItem("auth", JSON.stringify({
|
||||
|
||||
// token: res.data.token,
|
||||
// }));
|
||||
history.push('/profile')
|
||||
return
|
||||
}
|
||||
const formData = new FormData()
|
||||
formData.append('name', ownerDetails.name)
|
||||
formData.append('email', ownerDetails.email)
|
||||
formData.append('phone', ownerDetails.phone)
|
||||
formData.append('avatar', image)
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await axios
|
||||
.put(`/api/v1//user/update/profile`, formData, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'multipart/formdata',
|
||||
},
|
||||
})
|
||||
if (res.data.success === true) {
|
||||
|
||||
setLoading(false)
|
||||
swal({
|
||||
title: 'Edited',
|
||||
text: 'Profile Edited Successfully!',
|
||||
icon: 'success',
|
||||
button: 'Return',
|
||||
})
|
||||
history.goBack()
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
const message = error?.response?.data?.message || 'Something went wrong!'
|
||||
setLoading(false)
|
||||
swal({
|
||||
title: 'Warning',
|
||||
text: message,
|
||||
icon: 'error',
|
||||
button: 'Retry',
|
||||
dangerMode: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
const handleCancle = () => {
|
||||
history.goBack()
|
||||
}
|
||||
|
||||
return (
|
||||
@ -70,49 +128,46 @@ const EditProfile = () => {
|
||||
<CCol md={8} className='mt-5'>
|
||||
<CCardGroup>
|
||||
<CCard className="p-4">
|
||||
|
||||
<h2 >Edit Profile</h2>
|
||||
<CCardBody>
|
||||
<h1 >Edit Profile</h1>
|
||||
|
||||
<CForm className="row g-3">
|
||||
<CCol xs={12}>
|
||||
<CFormLabel htmlFor="inputAddress">Cafe Name</CFormLabel>
|
||||
<CFormInput id="inputAddress" placeholder="" name='cafeName' value={ownerDetails.cafeName} onChange={handleChange} />
|
||||
<CFormLabel htmlFor="inputAddress">Name *</CFormLabel>
|
||||
<CFormInput id="inputAddress" placeholder="" name='name' value={ownerDetails.name} onChange={handleChange} />
|
||||
</CCol>
|
||||
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
|
||||
<CFormLabel htmlFor="inputEmail4">Email *</CFormLabel>
|
||||
<CFormInput type="email" id="inputEmail4" name='email' value={ownerDetails.email} onChange={handleChange} />
|
||||
</CCol>
|
||||
{/* <CCol md={6}>
|
||||
<CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
|
||||
<CFormInput type="password" id="inputPassword4" name='password' value={ownerDetails.password} onChange={handleChange} />
|
||||
</CCol> */}
|
||||
|
||||
|
||||
<CCol md={12}>
|
||||
<CFormLabel htmlFor="inputCity">Location</CFormLabel>
|
||||
<CFormInput id="inputCity" name='location' value={ownerDetails.location} onChange={handleChange} />
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="inputState">Country</CFormLabel>
|
||||
<CFormSelect id="inputState" name='country' onChange={handleChange}>
|
||||
<option>Select a country</option>
|
||||
{countries.map(item => <option value={item.name}>{item.name}</option>)}
|
||||
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="inputState">City</CFormLabel>
|
||||
<CFormSelect id="inputState" name='city' onChange={handleChange}>
|
||||
<option>Select a city</option>
|
||||
{cities.map(item => <option value={item.name}>{item.name}</option>)}
|
||||
|
||||
</CFormSelect>
|
||||
<CFormLabel htmlFor="inputPassword4">Phone *</CFormLabel>
|
||||
<CFormInput type="number" id="inputPassword4" minlength="8" name='phone' value={ownerDetails.phone} onChange={handleChange} />
|
||||
</CCol>
|
||||
|
||||
|
||||
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
<div id="createProductFormImage" className="w-50 d-flex">
|
||||
|
||||
{imagesPreview && <img className=" w-50 p-1 " src={imagesPreview} alt="Product Preview" />}
|
||||
|
||||
</div>
|
||||
<CCol xs={12}>
|
||||
<CButton onClick={handleSubmit} color='dark'>Submit</CButton>
|
||||
<CButton onClick={handleSubmit} color='primary'>{loading ? 'Loading...' : 'Submit'}</CButton>
|
||||
<CButton className='ml-2' onClick={handleCancle} color='warning'>Cancel</CButton>
|
||||
|
||||
</CCol>
|
||||
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCol,
|
||||
CForm,
|
||||
CFormInput,
|
||||
CFormLabel,
|
||||
CFormSelect,
|
||||
CRow,
|
||||
CTable,
|
||||
CTableBody,
|
||||
@ -48,31 +54,64 @@ const Profile = () => {
|
||||
className="float-right" onClick={() => history.push('/edit')}>Edit Profile</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CTable color="white" striped>
|
||||
<CTableHead>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Cafe Name</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{user.cafeName}</CTableDataCell>
|
||||
</CTableRow>
|
||||
</CTableHead>
|
||||
<CTableBody>
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="col">Email</CTableHeaderCell>
|
||||
<CTableDataCell scope="col">{user.email}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CCard className="p-4">
|
||||
<CCardBody>
|
||||
{/* <h1 >Edit Profile</h1> */}
|
||||
<CForm className="row g-3">
|
||||
<CCol xs={12}>
|
||||
<CFormLabel htmlFor="inputAddress">Cafe Name</CFormLabel>
|
||||
<CFormInput id="inputAddress" placeholder="" name='cafeName' value={"jsw"} />
|
||||
</CCol>
|
||||
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Address</CTableHeaderCell>
|
||||
<CTableDataCell>{user.location},{user.city},{user.country}</CTableDataCell>
|
||||
</CTableRow>
|
||||
<CCol md={6}>
|
||||
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
|
||||
<CFormInput type="email" id="inputEmail4" name='email' value={"habhs"} />
|
||||
</CCol>
|
||||
{/* <CCol md={6}>
|
||||
<CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
|
||||
<CFormInput type="password" id="inputPassword4" name='password' value={ownerDetails.password} onChange={handleChange} />
|
||||
</CCol> */}
|
||||
|
||||
<CTableRow>
|
||||
<CTableHeaderCell scope="row">Item_Name</CTableHeaderCell>
|
||||
<CTableDataCell><img src={user.qr_code} alt="" /></CTableDataCell>
|
||||
</CTableRow>
|
||||
|
||||
</CTableBody>
|
||||
</CTable>
|
||||
<CCol md={12}>
|
||||
<CFormLabel htmlFor="inputCity">Location</CFormLabel>
|
||||
<CFormInput id="inputCity" name='location' value={"ajnsj"} />
|
||||
</CCol>
|
||||
<CCol md={12}>
|
||||
<CFormLabel htmlFor="inputCity">image</CFormLabel>
|
||||
<CFormInput
|
||||
type="file"
|
||||
placeholder="image"
|
||||
accept="image/*"
|
||||
required
|
||||
// onChange={handleImage}
|
||||
|
||||
|
||||
/>
|
||||
</CCol>
|
||||
{/* <CCol md={6}>
|
||||
<CFormLabel htmlFor="inputState">Country</CFormLabel>
|
||||
<CFormSelect id="inputState" name='country' >
|
||||
<option>Select a country</option>
|
||||
{countries.map(item => <option value={item.name}>{item.name}</option>)}
|
||||
|
||||
</CFormSelect>
|
||||
</CCol> */}
|
||||
{/* <CCol md={6}>
|
||||
<CFormLabel htmlFor="inputState">City</CFormLabel>
|
||||
<CFormSelect id="inputState" name='city' >
|
||||
<option>Select a city</option>
|
||||
{cities.map(item => <option value={item.name}>{item.name}</option>)}
|
||||
|
||||
</CFormSelect>
|
||||
</CCol> */}
|
||||
|
||||
{/* <CCol xs={12}>
|
||||
<CButton onClick={handleSubmit} color='dark'>Submit</CButton>
|
||||
</CCol> */}
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user