From 43934a7e9a642083800fd8cb365bf6eb954c6ce8 Mon Sep 17 00:00:00 2001 From: pawan-dot <71133473+pawan-dot@users.noreply.github.com> Date: Wed, 25 Jan 2023 23:18:53 +0530 Subject: [PATCH] product --- src/components/AppSidebar.js | 40 +++- src/index.js | 2 +- src/routes.js | 11 +- src/views/Products/AddProduct.js | 299 ++++++++++++++++++++++++++- src/views/Products/EditProduct.js | 333 ++++++++++++++++++++++++++++++ src/views/Products/Products.js | 43 ++-- src/views/Products/ViewProduct.js | 128 ++++++++++++ 7 files changed, 821 insertions(+), 35 deletions(-) create mode 100644 src/views/Products/EditProduct.js create mode 100644 src/views/Products/ViewProduct.js diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js index d49650a..da51ca6 100644 --- a/src/components/AppSidebar.js +++ b/src/components/AppSidebar.js @@ -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 ( { dispatch({ type: 'set', sidebarShow: visible }) }} > - + {/* */} -

ATP Dashboard

+ + {HeaderlogoUrl ? {`${<h1ATP Dashboard}`} /> :

ATP Dashboard

} {/* */} diff --git a/src/index.js b/src/index.js index bc52aee..62a8094 100644 --- a/src/index.js +++ b/src/index.js @@ -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', diff --git a/src/routes.js b/src/routes.js index c8cae34..9062e71 100644 --- a/src/routes.js +++ b/src/routes.js @@ -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 }, diff --git a/src/views/Products/AddProduct.js b/src/views/Products/AddProduct.js index 0b04d79..d435137 100644 --- a/src/views/Products/AddProduct.js +++ b/src/views/Products/AddProduct.js @@ -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 ( +
+
+
+
+
+ Add Product +
+
+

+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ + handleChange(e)} + /> + {data.name ? <> + {25 - data.name.length} characters left + : <> + + }
+ +
+ + handleChange(e)} + /> + {data.description ? <> + {100 - data.description.length} characters left + : <> + } +
+ + +
+ + handleChange(e)} + /> +

Upload jpg, jpeg and png only*

+
+
+ Uploaded Image will be shown here + +
+ + +
+
+
+
+
+
+ +
+ + handleChange(e)} + + /> +
+
+ + handleChange(e)} + + + /> +
+
+ + handleChange(e)} + + + /> +
+
+
+
+
+
+ ) +} + +export default AddProduct diff --git a/src/views/Products/EditProduct.js b/src/views/Products/EditProduct.js new file mode 100644 index 0000000..1091b1b --- /dev/null +++ b/src/views/Products/EditProduct.js @@ -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 ( +
+
+
+
+
+ Edit Product +
+
+

+
+ +
+ + + + +
+
+
+
+
+
+
+
+
+ + handleChange(e)} + /> + {data.name ? <> + {25 - data.name.length} characters left + : <> + + }
+ +
+ + handleChange(e)} + /> + {data.description ? <> + {100 - data.description.length} characters left + : <> + } +
+ + +
+ + handleChange(e)} + /> +

Upload jpg, jpeg and png only*

+
+
+ Uploaded Image will be shown here + +
+ + +
+
+
+
+
+
+ +
+ + handleChange(e)} + + /> +
+
+ + handleChange(e)} + + + /> +
+
+ + handleChange(e)} + + + /> +
+
+
+
+
+
+ ) +} + +export default EditProduct diff --git a/src/views/Products/Products.js b/src/views/Products/Products.js index 441f730..a4dbc81 100644 --- a/src/views/Products/Products.js +++ b/src/views/Products/Products.js @@ -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 = () => { > + Product Name - Category - Preview - Master Price + Thumbnail + Base Price Added On Actions @@ -182,15 +184,14 @@ const Products = () => { return ( {product.name} - {product.category?.name} - {product?.images && ( + {product?.image && ( <> - preview + preview )} - ₹ {product.master_price} + ₹{product.base_Price} {new Date(product.createdAt).toLocaleString('en-IN', { weekday: 'short', @@ -203,22 +204,8 @@ const Products = () => { })} - - - - + + - + + {/*
+
    +
  1. + CMD-App +
    2. +
  2. CMD-Category
    3. +
+
*/} + + + + {/* */} + +
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + {/* + */} + + + + + + + + + +
Id {product?._id}
Name {product?.name}
image + +
Description{product?.description}
Base Price{product?.base_Price}
Price Level 2{product?.price_Level_2}
Price Level 3{product?.price_Level_3}
Product Time{product?.time}
Location{product?.location}
Created On + {new Date(`${product?.createdAt}`).toDateString()} , {`${formatAMPM(product?.createdAt)}`} +
Updated At + {new Date(`${product?.updatedAt}`).toDateString()} , {`${formatAMPM(product?.updatedAt)}`} +
+
+ + + {/* */} +
+
+
+
+ + {/* */} + + + ); +} + +export default ViewProduct;