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 { CSidebar, CSidebarBrand, CSidebarNav, CSidebarToggler } from '@coreui/react'
|
||||
@ -14,12 +14,45 @@ import 'simplebar/dist/simplebar.min.css'
|
||||
|
||||
// sidebar nav config
|
||||
import navigation from '../_nav'
|
||||
import { isAutheticated } from 'src/auth'
|
||||
import axios from 'axios'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const AppSidebar = () => {
|
||||
const dispatch = useDispatch()
|
||||
const unfoldable = useSelector((state) => state.sidebarUnfoldable)
|
||||
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 (
|
||||
<CSidebar
|
||||
position="fixed"
|
||||
@ -29,9 +62,10 @@ const AppSidebar = () => {
|
||||
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} /> */}
|
||||
<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" icon={sygnet} height={35} />
|
||||
</CSidebarBrand>
|
||||
|
||||
@ -12,7 +12,7 @@ import axios from 'axios'
|
||||
|
||||
const setupAxios = () => {
|
||||
axios.defaults.baseURL = 'https://atpapi.checkapp.one'
|
||||
// axios.defaults.baseURL = 'http://localhost:5000'
|
||||
//axios.defaults.baseURL = 'http://localhost:5000'
|
||||
axios.defaults.headers = {
|
||||
'Cache-Control': 'no-cache,no-store',
|
||||
'Pragma': 'no-cache',
|
||||
|
||||
@ -27,6 +27,10 @@ import Temples from './views/Temples/Temples'
|
||||
import AddTemple from './views/Temples/AddTemple'
|
||||
import EditTemple from './views/Temples/EditTemple'
|
||||
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 = [
|
||||
|
||||
@ -38,8 +42,11 @@ const routes = [
|
||||
|
||||
//Product
|
||||
{ path: '/products', name: 'products', element: Products },
|
||||
{ path: '/product/add', name: 'Add products', element: AddTemple },
|
||||
{ path: '/products/edit/:id', name: 'Edit products', element: EditTemple },
|
||||
{ path: '/product/add', name: 'Add products', element: AddProduct },
|
||||
{ path: '/product/edit/:id', name: 'Edit products', element: EditProduct },
|
||||
{ path: '/product/view/:id', name: 'view products', element: ViewProduct },
|
||||
|
||||
|
||||
|
||||
//Temple
|
||||
{ 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)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const getProductsData = async () => {
|
||||
axios
|
||||
.get(`/api/product`, {
|
||||
.get(`/api/product/getAll/`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setProductsData(res.data?.data)
|
||||
setProductsData(res.data?.product)
|
||||
setLoading(false)
|
||||
})
|
||||
.catch((err) => {
|
||||
@ -58,7 +60,7 @@ const Products = () => {
|
||||
}).then((value) => {
|
||||
if (value === true) {
|
||||
axios
|
||||
.delete(`/api/product/${id}`, {
|
||||
.delete(`/api/product/delete/${id}`, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
Authorization: `Bearer ${token}`,
|
||||
@ -108,7 +110,7 @@ const Products = () => {
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate('/products/add', { replace: true })
|
||||
navigate('/product/add', { replace: true })
|
||||
}}
|
||||
>
|
||||
Add Product
|
||||
@ -155,10 +157,10 @@ const Products = () => {
|
||||
>
|
||||
<thead className="thead-info" style={{ background: 'rgb(140, 213, 213)' }}>
|
||||
<tr>
|
||||
|
||||
<th className="text-start">Product Name</th>
|
||||
<th className="text-start">Category</th>
|
||||
<th className="text-start">Preview</th>
|
||||
<th className="text-start">Master Price</th>
|
||||
<th className="text-start">Thumbnail</th>
|
||||
<th className="text-start">Base Price</th>
|
||||
<th className="text-start">Added On</th>
|
||||
<th className="text-start">Actions</th>
|
||||
</tr>
|
||||
@ -182,15 +184,14 @@ const Products = () => {
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="text-start">{product.name}</td>
|
||||
<td className="text-start">{product.category?.name}</td>
|
||||
<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 className="text-start">₹ {product.master_price}</th>
|
||||
<th className="text-start">₹{product.base_Price}</th>
|
||||
<td className="text-start">
|
||||
{new Date(product.createdAt).toLocaleString('en-IN', {
|
||||
weekday: 'short',
|
||||
@ -203,22 +204,8 @@ const Products = () => {
|
||||
})}
|
||||
</td>
|
||||
<td className="text-start">
|
||||
<Link to={`/products/variants/${product._id}`}>
|
||||
<button
|
||||
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}`}>
|
||||
|
||||
<Link to={`/product/view/${product._id}`}>
|
||||
<button
|
||||
style={{ color: 'white', marginRight: '1rem' }}
|
||||
type="button"
|
||||
@ -233,7 +220,7 @@ const Products = () => {
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
<Link to={`/products/edit/${product._id}`}>
|
||||
<Link to={`/product/edit/${product._id}`}>
|
||||
<button
|
||||
style={{ color: 'white', marginRight: '1rem' }}
|
||||
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