product
This commit is contained in:
pawan-dot
parent
5833b24b1f
commit
43934a7e9a
@ -1,4 +1,4 @@
|
|||||||
import React from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
import { useSelector, useDispatch } from 'react-redux'
|
import { useSelector, useDispatch } from 'react-redux'
|
||||||
|
|
||||||
import { CSidebar, CSidebarBrand, CSidebarNav, CSidebarToggler } from '@coreui/react'
|
import { CSidebar, CSidebarBrand, CSidebarNav, CSidebarToggler } from '@coreui/react'
|
||||||
@ -14,12 +14,45 @@ import 'simplebar/dist/simplebar.min.css'
|
|||||||
|
|
||||||
// sidebar nav config
|
// sidebar nav config
|
||||||
import navigation from '../_nav'
|
import navigation from '../_nav'
|
||||||
|
import { isAutheticated } from 'src/auth'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
const AppSidebar = () => {
|
const AppSidebar = () => {
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
const unfoldable = useSelector((state) => state.sidebarUnfoldable)
|
const unfoldable = useSelector((state) => state.sidebarUnfoldable)
|
||||||
const sidebarShow = useSelector((state) => state.sidebarShow)
|
const sidebarShow = useSelector((state) => state.sidebarShow)
|
||||||
|
|
||||||
|
///----------------------//
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
const token = isAutheticated()
|
||||||
|
|
||||||
|
// urlcreated images
|
||||||
|
|
||||||
|
const [HeaderlogoUrl, setHeaderlogoUrl] = useState('')
|
||||||
|
const [FooterlogoUrl, setFooterlogoUrl] = useState('')
|
||||||
|
const [AdminlogoUrl, setAdminlogoUrl] = useState('')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function getConfiguration() {
|
||||||
|
const configDetails = await axios.get(`/api/config`, {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
console.log(configDetails.data.result)
|
||||||
|
configDetails.data.result.map((item) => {
|
||||||
|
setHeaderlogoUrl(item?.logo[0]?.Headerlogo)
|
||||||
|
setFooterlogoUrl(item?.logo[0]?.Footerlogo)
|
||||||
|
setAdminlogoUrl(item?.logo[0]?.Adminlogo)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
getConfiguration()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
console.log(HeaderlogoUrl)
|
||||||
|
//---------------------------//
|
||||||
return (
|
return (
|
||||||
<CSidebar
|
<CSidebar
|
||||||
position="fixed"
|
position="fixed"
|
||||||
@ -29,9 +62,10 @@ const AppSidebar = () => {
|
|||||||
dispatch({ type: 'set', sidebarShow: visible })
|
dispatch({ type: 'set', sidebarShow: visible })
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CSidebarBrand className="d-none bg-info d-md-flex" to="/">
|
<CSidebarBrand className="d-none d-md-flex" style={{ background: 'rgb(140, 213, 213)' }} to="/">
|
||||||
{/* <CIcon className="sidebar-brand-full" icon={logoNegative} height={35} /> */}
|
{/* <CIcon className="sidebar-brand-full" icon={logoNegative} height={35} /> */}
|
||||||
<h2>ATP Dashboard</h2>
|
|
||||||
|
{HeaderlogoUrl ? <Link to='/dashboard'><img src={HeaderlogoUrl} alt={`${<h1>ATP Dashboard</h1>}`} /></Link> : <h1>ATP Dashboard</h1>}
|
||||||
{/* <CIcon className="sidebar-brand-narrow" height={35} /> */}
|
{/* <CIcon className="sidebar-brand-narrow" height={35} /> */}
|
||||||
<CIcon className="sidebar-brand-narrow" icon={sygnet} height={35} />
|
<CIcon className="sidebar-brand-narrow" icon={sygnet} height={35} />
|
||||||
</CSidebarBrand>
|
</CSidebarBrand>
|
||||||
|
|||||||
@ -27,6 +27,10 @@ import Temples from './views/Temples/Temples'
|
|||||||
import AddTemple from './views/Temples/AddTemple'
|
import AddTemple from './views/Temples/AddTemple'
|
||||||
import EditTemple from './views/Temples/EditTemple'
|
import EditTemple from './views/Temples/EditTemple'
|
||||||
import Products from './views/Products/Products'
|
import Products from './views/Products/Products'
|
||||||
|
//product
|
||||||
|
import AddProduct from './views/Products/AddProduct'
|
||||||
|
import EditProduct from './views/Products/EditProduct'
|
||||||
|
import ViewProduct from './views/Products/ViewProduct'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
|
|
||||||
@ -38,8 +42,11 @@ const routes = [
|
|||||||
|
|
||||||
//Product
|
//Product
|
||||||
{ path: '/products', name: 'products', element: Products },
|
{ path: '/products', name: 'products', element: Products },
|
||||||
{ path: '/product/add', name: 'Add products', element: AddTemple },
|
{ path: '/product/add', name: 'Add products', element: AddProduct },
|
||||||
{ path: '/products/edit/:id', name: 'Edit products', element: EditTemple },
|
{ path: '/product/edit/:id', name: 'Edit products', element: EditProduct },
|
||||||
|
{ path: '/product/view/:id', name: 'view products', element: ViewProduct },
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//Temple
|
//Temple
|
||||||
{ path: '/temples', name: 'Temples', element: Temples },
|
{ path: '/temples', name: 'Temples', element: Temples },
|
||||||
|
|||||||
@ -1 +1,298 @@
|
|||||||
rafce
|
|
||||||
|
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import Button from '@material-ui/core/Button'
|
||||||
|
import { Link, useNavigate } from 'react-router-dom'
|
||||||
|
import swal from 'sweetalert'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { isAutheticated } from 'src/auth'
|
||||||
|
// import { WebsiteURL } from '../WebsiteURL'
|
||||||
|
|
||||||
|
const AddProduct = () => {
|
||||||
|
const token = isAutheticated()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [data, setData] = useState({
|
||||||
|
image: '',
|
||||||
|
imageURL: '',
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
|
||||||
|
base_Price: '',
|
||||||
|
price_Level_2: '',
|
||||||
|
price_Level_3: ''
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const handleChange = (e) => {
|
||||||
|
|
||||||
|
if (e.target.id === 'image') {
|
||||||
|
if (
|
||||||
|
e.target.files[0]?.type === 'image/jpeg' ||
|
||||||
|
e.target.files[0]?.type === 'image/png' ||
|
||||||
|
e.target.files[0]?.type === 'image/jpg'
|
||||||
|
) {
|
||||||
|
setData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
imageURL: URL.createObjectURL(e.target.files[0]),
|
||||||
|
image: e.target.files[0],
|
||||||
|
}))
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
swal({
|
||||||
|
title: 'Warning',
|
||||||
|
text: 'Upload jpg, jpeg, png only.',
|
||||||
|
icon: 'error',
|
||||||
|
button: 'Close',
|
||||||
|
dangerMode: true,
|
||||||
|
})
|
||||||
|
setData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
imageURL: '',
|
||||||
|
image: '',
|
||||||
|
}))
|
||||||
|
e.target.value = null
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
if (
|
||||||
|
data.name.trim() === '' ||
|
||||||
|
|
||||||
|
data.description.trim() === '' ||
|
||||||
|
data.base_Price === '' ||
|
||||||
|
data.price_Level_2 === '' ||
|
||||||
|
data.price_Level_3 === '' ||
|
||||||
|
data.imageURL.trim() === ''
|
||||||
|
) {
|
||||||
|
swal({
|
||||||
|
title: 'Warning',
|
||||||
|
text: 'Fill all mandatory fields',
|
||||||
|
icon: 'error',
|
||||||
|
button: 'Close',
|
||||||
|
dangerMode: true,
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setLoading(true)
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.set('name', data.name)
|
||||||
|
|
||||||
|
formData.set('description', data.description)
|
||||||
|
formData.set('base_Price', data.base_Price)
|
||||||
|
formData.set('price_Level_2', data.price_Level_2)
|
||||||
|
formData.set('price_Level_3', data.price_Level_3)
|
||||||
|
formData.append('image', data.image)
|
||||||
|
|
||||||
|
|
||||||
|
axios
|
||||||
|
.post(`/api/product/create/`, formData, {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
'Content-Type': 'multipart/formdata',
|
||||||
|
'Access-Control-Allow-Origin': '*',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
swal({
|
||||||
|
title: 'Added',
|
||||||
|
text: 'Product added successfully!',
|
||||||
|
icon: 'success',
|
||||||
|
button: 'Return',
|
||||||
|
})
|
||||||
|
setLoading(false)
|
||||||
|
navigate('/products', { replace: true })
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setLoading(false)
|
||||||
|
const message = err.response?.data?.message || 'Something went wrong!'
|
||||||
|
swal({
|
||||||
|
title: 'Warning',
|
||||||
|
text: message,
|
||||||
|
icon: 'error',
|
||||||
|
button: 'Retry',
|
||||||
|
dangerMode: true,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<div
|
||||||
|
className="
|
||||||
|
page-title-box
|
||||||
|
d-flex
|
||||||
|
align-items-center
|
||||||
|
justify-content-between
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||||
|
Add Product
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||||
|
<h4 className="mb-0"></h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="page-title-right">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '1rem',
|
||||||
|
textTransform: 'capitalize',
|
||||||
|
marginRight: '5px',
|
||||||
|
}}
|
||||||
|
onClick={() => handleSubmit()}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? 'Loading' : 'Save'}
|
||||||
|
</Button>
|
||||||
|
<Link to="/products">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="secondary"
|
||||||
|
style={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '1rem',
|
||||||
|
textTransform: 'capitalize',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-body px-5">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Product Name*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="name"
|
||||||
|
value={data.name}
|
||||||
|
maxLength={25}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
{data.name ? <><small className="charLeft mt-4 fst-italic">
|
||||||
|
{25 - data.name.length} characters left
|
||||||
|
</small></> : <></>
|
||||||
|
|
||||||
|
} </div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Description*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="description"
|
||||||
|
value={data.description}
|
||||||
|
maxLength="100"
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
{data.description ? <><small className="charLeft mt-4 fst-italic">
|
||||||
|
{100 - data.description.length} characters left
|
||||||
|
</small></> : <></>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="image" className="form-label">
|
||||||
|
Product Image*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
className="form-control"
|
||||||
|
id="image"
|
||||||
|
accept="image/*"
|
||||||
|
multiple
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
<p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3" style={{ height: '200px', maxWdth: '100%' }}>
|
||||||
|
<img
|
||||||
|
src={data.imageURL}
|
||||||
|
alt="Uploaded Image will be shown here"
|
||||||
|
style={{ maxHeight: '200px', maxWidth: '100%' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-body px-5">
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Base Price*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
id="base_Price"
|
||||||
|
value={data.base_Price}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Price Level 2*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
id="price_Level_2"
|
||||||
|
value={data.price_Level_2}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Price Level 3*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
id="price_Level_3"
|
||||||
|
value={data.price_Level_3}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddProduct
|
||||||
|
|||||||
333
src/views/Products/EditProduct.js
Normal file
333
src/views/Products/EditProduct.js
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import Button from '@material-ui/core/Button'
|
||||||
|
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||||
|
import swal from 'sweetalert'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { isAutheticated } from 'src/auth'
|
||||||
|
// import { WebsiteURL } from '../WebsiteURL'
|
||||||
|
|
||||||
|
const EditProduct = () => {
|
||||||
|
const token = isAutheticated()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const id = useParams()?.id
|
||||||
|
const [data, setData] = useState({
|
||||||
|
image: '',
|
||||||
|
imageURL: '',
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
|
||||||
|
base_Price: '',
|
||||||
|
price_Level_2: '',
|
||||||
|
price_Level_3: ''
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
//get Productdata
|
||||||
|
const getProduct = async () => {
|
||||||
|
|
||||||
|
axios
|
||||||
|
.get(`/api/product/getOne/${id}`, {
|
||||||
|
headers: {
|
||||||
|
'Access-Control-Allow-Origin': '*',
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
setData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
...res.data?.product,
|
||||||
|
imageURL: res.data?.product?.image?.url,
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
.catch((err) => { })
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getProduct()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleChange = (e) => {
|
||||||
|
|
||||||
|
if (e.target.id === 'image') {
|
||||||
|
if (
|
||||||
|
e.target.files[0]?.type === 'image/jpeg' ||
|
||||||
|
e.target.files[0]?.type === 'image/png' ||
|
||||||
|
e.target.files[0]?.type === 'image/jpg'
|
||||||
|
) {
|
||||||
|
setData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
imageURL: URL.createObjectURL(e.target.files[0]),
|
||||||
|
image: e.target.files[0],
|
||||||
|
}))
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
swal({
|
||||||
|
title: 'Warning',
|
||||||
|
text: 'Upload jpg, jpeg, png only.',
|
||||||
|
icon: 'error',
|
||||||
|
button: 'Close',
|
||||||
|
dangerMode: true,
|
||||||
|
})
|
||||||
|
setData((prev) => ({
|
||||||
|
...prev,
|
||||||
|
imageURL: '',
|
||||||
|
image: '',
|
||||||
|
}))
|
||||||
|
e.target.value = null
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
if (
|
||||||
|
data.name.trim() === '' ||
|
||||||
|
|
||||||
|
data.description.trim() === '' ||
|
||||||
|
data.base_Price === '' ||
|
||||||
|
data.price_Level_2 === '' ||
|
||||||
|
data.price_Level_3 === '' ||
|
||||||
|
data.imageURL.trim() === ''
|
||||||
|
) {
|
||||||
|
swal({
|
||||||
|
title: 'Warning',
|
||||||
|
text: 'Fill all mandatory fields',
|
||||||
|
icon: 'error',
|
||||||
|
button: 'Close',
|
||||||
|
dangerMode: true,
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setLoading(true)
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.set('name', data.name)
|
||||||
|
|
||||||
|
formData.set('description', data.description)
|
||||||
|
formData.set('base_Price', data.base_Price)
|
||||||
|
formData.set('price_Level_2', data.price_Level_2)
|
||||||
|
formData.set('price_Level_3', data.price_Level_3)
|
||||||
|
formData.append('image', data.image)
|
||||||
|
|
||||||
|
|
||||||
|
axios
|
||||||
|
.put(`/api//product/update/${id}`, formData, {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
'Content-Type': 'multipart/formdata',
|
||||||
|
'Access-Control-Allow-Origin': '*',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
swal({
|
||||||
|
title: 'Added',
|
||||||
|
text: 'Product Edited successfully!',
|
||||||
|
icon: 'success',
|
||||||
|
button: 'Return',
|
||||||
|
})
|
||||||
|
setLoading(false)
|
||||||
|
navigate('/products', { replace: true })
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setLoading(false)
|
||||||
|
const message = err.response?.data?.message || 'Something went wrong!'
|
||||||
|
swal({
|
||||||
|
title: 'Warning',
|
||||||
|
text: message,
|
||||||
|
icon: 'error',
|
||||||
|
button: 'Retry',
|
||||||
|
dangerMode: true,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(data)
|
||||||
|
return (
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<div
|
||||||
|
className="
|
||||||
|
page-title-box
|
||||||
|
d-flex
|
||||||
|
align-items-center
|
||||||
|
justify-content-between
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style={{ fontSize: '22px' }} className="fw-bold">
|
||||||
|
Edit Product
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||||
|
<h4 className="mb-0"></h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="page-title-right">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
style={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '1rem',
|
||||||
|
textTransform: 'capitalize',
|
||||||
|
marginRight: '5px',
|
||||||
|
}}
|
||||||
|
onClick={() => handleSubmit()}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
{loading ? 'Loading' : 'Save'}
|
||||||
|
</Button>
|
||||||
|
<Link to="/products">
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
color="secondary"
|
||||||
|
style={{
|
||||||
|
fontWeight: 'bold',
|
||||||
|
marginBottom: '1rem',
|
||||||
|
textTransform: 'capitalize',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Back
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-body px-5">
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Product Name*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="name"
|
||||||
|
value={data.name}
|
||||||
|
maxLength={25}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
{data.name ? <><small className="charLeft mt-4 fst-italic">
|
||||||
|
{25 - data.name.length} characters left
|
||||||
|
</small></> : <></>
|
||||||
|
|
||||||
|
} </div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Description*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
id="description"
|
||||||
|
value={data.description}
|
||||||
|
maxLength="100"
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
{data.description ? <><small className="charLeft mt-4 fst-italic">
|
||||||
|
{100 - data.description.length} characters left
|
||||||
|
</small></> : <></>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="image" className="form-label">
|
||||||
|
Product Image*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
className="form-control"
|
||||||
|
id="image"
|
||||||
|
accept="image/*"
|
||||||
|
multiple
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
/>
|
||||||
|
<p className="pt-1 pl-2 text-secondary">Upload jpg, jpeg and png only*</p>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3" style={{ height: '200px', maxWdth: '100%' }}>
|
||||||
|
<img
|
||||||
|
src={data.imageURL}
|
||||||
|
alt="Uploaded Image will be shown here"
|
||||||
|
style={{ maxHeight: '200px', maxWidth: '100%' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
|
||||||
|
<div className="card h-100">
|
||||||
|
<div className="card-body px-5">
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Base Price*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
id="base_Price"
|
||||||
|
value={data.base_Price}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Price Level 2*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
id="price_Level_2"
|
||||||
|
value={data.price_Level_2}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="title" className="form-label">
|
||||||
|
Price Level 3*
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
className="form-control"
|
||||||
|
id="price_Level_3"
|
||||||
|
value={data.price_Level_3}
|
||||||
|
onChange={(e) => handleChange(e)}
|
||||||
|
|
||||||
|
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditProduct
|
||||||
@ -21,15 +21,17 @@ const Products = () => {
|
|||||||
setItemPerPage(e.target.value)
|
setItemPerPage(e.target.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const getProductsData = async () => {
|
const getProductsData = async () => {
|
||||||
axios
|
axios
|
||||||
.get(`/api/product`, {
|
.get(`/api/product/getAll/`, {
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
setProductsData(res.data?.data)
|
setProductsData(res.data?.product)
|
||||||
setLoading(false)
|
setLoading(false)
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -58,7 +60,7 @@ const Products = () => {
|
|||||||
}).then((value) => {
|
}).then((value) => {
|
||||||
if (value === true) {
|
if (value === true) {
|
||||||
axios
|
axios
|
||||||
.delete(`/api/product/${id}`, {
|
.delete(`/api/product/delete/${id}`, {
|
||||||
headers: {
|
headers: {
|
||||||
'Access-Control-Allow-Origin': '*',
|
'Access-Control-Allow-Origin': '*',
|
||||||
Authorization: `Bearer ${token}`,
|
Authorization: `Bearer ${token}`,
|
||||||
@ -108,7 +110,7 @@ const Products = () => {
|
|||||||
textTransform: 'capitalize',
|
textTransform: 'capitalize',
|
||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigate('/products/add', { replace: true })
|
navigate('/product/add', { replace: true })
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Add Product
|
Add Product
|
||||||
@ -155,10 +157,10 @@ const Products = () => {
|
|||||||
>
|
>
|
||||||
<thead className="thead-info" style={{ background: 'rgb(140, 213, 213)' }}>
|
<thead className="thead-info" style={{ background: 'rgb(140, 213, 213)' }}>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
||||||
<th className="text-start">Product Name</th>
|
<th className="text-start">Product Name</th>
|
||||||
<th className="text-start">Category</th>
|
<th className="text-start">Thumbnail</th>
|
||||||
<th className="text-start">Preview</th>
|
<th className="text-start">Base Price</th>
|
||||||
<th className="text-start">Master Price</th>
|
|
||||||
<th className="text-start">Added On</th>
|
<th className="text-start">Added On</th>
|
||||||
<th className="text-start">Actions</th>
|
<th className="text-start">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
@ -182,15 +184,14 @@ const Products = () => {
|
|||||||
return (
|
return (
|
||||||
<tr key={i}>
|
<tr key={i}>
|
||||||
<td className="text-start">{product.name}</td>
|
<td className="text-start">{product.name}</td>
|
||||||
<td className="text-start">{product.category?.name}</td>
|
|
||||||
<th>
|
<th>
|
||||||
{product?.images && (
|
{product?.image && (
|
||||||
<>
|
<>
|
||||||
<img src={product.images[0]?.url} width="50" alt="preview" />
|
<img src={product.image?.url} width="50" alt="preview" />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</th>
|
</th>
|
||||||
<th className="text-start">₹ {product.master_price}</th>
|
<th className="text-start">₹{product.base_Price}</th>
|
||||||
<td className="text-start">
|
<td className="text-start">
|
||||||
{new Date(product.createdAt).toLocaleString('en-IN', {
|
{new Date(product.createdAt).toLocaleString('en-IN', {
|
||||||
weekday: 'short',
|
weekday: 'short',
|
||||||
@ -203,22 +204,8 @@ const Products = () => {
|
|||||||
})}
|
})}
|
||||||
</td>
|
</td>
|
||||||
<td className="text-start">
|
<td className="text-start">
|
||||||
<Link to={`/products/variants/${product._id}`}>
|
|
||||||
<button
|
<Link to={`/product/view/${product._id}`}>
|
||||||
style={{ color: 'white', marginRight: '1rem' }}
|
|
||||||
type="button"
|
|
||||||
className="
|
|
||||||
btn btn-primary btn-sm
|
|
||||||
waves-effect waves-light
|
|
||||||
btn-table
|
|
||||||
mx-1
|
|
||||||
mt-1
|
|
||||||
"
|
|
||||||
>
|
|
||||||
Variants
|
|
||||||
</button>
|
|
||||||
</Link>
|
|
||||||
<Link to={`/products/view/${product._id}`}>
|
|
||||||
<button
|
<button
|
||||||
style={{ color: 'white', marginRight: '1rem' }}
|
style={{ color: 'white', marginRight: '1rem' }}
|
||||||
type="button"
|
type="button"
|
||||||
@ -233,7 +220,7 @@ const Products = () => {
|
|||||||
View
|
View
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link to={`/products/edit/${product._id}`}>
|
<Link to={`/product/edit/${product._id}`}>
|
||||||
<button
|
<button
|
||||||
style={{ color: 'white', marginRight: '1rem' }}
|
style={{ color: 'white', marginRight: '1rem' }}
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
128
src/views/Products/ViewProduct.js
Normal file
128
src/views/Products/ViewProduct.js
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
|
||||||
|
|
||||||
|
import axios from "axios";
|
||||||
|
import React, { useEffect, useState, useCallback, useMemo } from "react";
|
||||||
|
import swal from 'sweetalert';
|
||||||
|
|
||||||
|
import { Link, useParams } from "react-router-dom";
|
||||||
|
import { isAutheticated } from "src/auth";
|
||||||
|
|
||||||
|
function ViewProduct() {
|
||||||
|
const [product, setProduct] = useState([])
|
||||||
|
const { id } = useParams();
|
||||||
|
const token = isAutheticated();
|
||||||
|
|
||||||
|
const getProduct = useCallback(async () => {
|
||||||
|
let res = await axios.get(
|
||||||
|
`/api/product/getOne/${id}`,
|
||||||
|
{
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
console.log(res.data.product)
|
||||||
|
setProduct(res.data.product)
|
||||||
|
|
||||||
|
|
||||||
|
}, [token]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getProduct();
|
||||||
|
}, [getProduct]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//change time formate
|
||||||
|
function formatAMPM(date) {
|
||||||
|
var hours = new Date(date).getHours();
|
||||||
|
var minutes = new Date(date).getMinutes();
|
||||||
|
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||||
|
hours = hours % 12;
|
||||||
|
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||||
|
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||||
|
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||||
|
return strTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className=" main-content">
|
||||||
|
<div className=" my-3 page-content">
|
||||||
|
<div className="container-fluid">
|
||||||
|
{/* <!-- start page title --> */}
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<div className="page-title-box d-flex align-items-center justify-content-between">
|
||||||
|
<h4 className="mb-3">Product</h4>
|
||||||
|
<Link to="/product/add"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Product</button></Link>
|
||||||
|
{/* <div className="page-title-right">
|
||||||
|
<ol className="breadcrumb m-0">
|
||||||
|
<li className="breadcrumb-item">
|
||||||
|
<Link to="/dashboard">CMD-App</Link>
|
||||||
|
</li>
|
||||||
|
<li className="breadcrumb-item">CMD-Category</li>
|
||||||
|
</ol>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <!-- end page title --> */}
|
||||||
|
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-12">
|
||||||
|
<div className="card">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="row ml-0 mr-0 mb-10">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="table-responsive table-shoot">
|
||||||
|
<table className="table table-centered table-nowrap mb-0">
|
||||||
|
<thead className="thead-light">
|
||||||
|
|
||||||
|
<tr><th>Id</th> <td>{product?._id}</td></tr>
|
||||||
|
<tr><th>Name</th> <td>{product?.name}</td></tr>
|
||||||
|
|
||||||
|
<tr><th>image</th><td>
|
||||||
|
<img src={`${product.image?.url}`} width="50" alt="" />
|
||||||
|
</td></tr>
|
||||||
|
<tr><th>Description</th><td>{product?.description}</td></tr>
|
||||||
|
<tr><th>Base Price</th><td>{product?.base_Price}</td></tr>
|
||||||
|
<tr><th>Price Level 2</th><td>{product?.price_Level_2}</td></tr>
|
||||||
|
|
||||||
|
<tr><th>Price Level 3</th><td>{product?.price_Level_3}</td></tr>
|
||||||
|
|
||||||
|
{/* <tr><th>Product Time</th><td>{product?.time}</td></tr>
|
||||||
|
<tr><th>Location</th><td>{product?.location}</td></tr> */}
|
||||||
|
<tr><th>Created On</th><td>
|
||||||
|
{new Date(`${product?.createdAt}`).toDateString()}<span> , {`${formatAMPM(product?.createdAt)}`}</span>
|
||||||
|
</td></tr>
|
||||||
|
<tr><th>Updated At</th>
|
||||||
|
<td>
|
||||||
|
{new Date(`${product?.updatedAt}`).toDateString()}<span> , {`${formatAMPM(product?.updatedAt)}`}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{/* <!-- end table-responsive --> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <!-- container-fluid --> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ViewProduct;
|
||||||
Loading…
Reference in New Issue
Block a user