diff --git a/src/views/Products/AddProduct.js b/src/views/Products/AddProduct.js index aac06b3..bb79edd 100644 --- a/src/views/Products/AddProduct.js +++ b/src/views/Products/AddProduct.js @@ -1,214 +1,182 @@ -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 React, { useState, useEffect } from "react"; +import { Button } from "@mui/material"; import axios from "axios"; -import { isAutheticated } from "src/auth"; -import CloudUploadIcon from "@mui/icons-material/CloudUpload"; -import DeleteSharpIcon from "@mui/icons-material/DeleteSharp"; +// import { API } from "src/API"; +// import { isAutheticated } from "../../components/auth/authhelper"; +import { Link, useNavigate } from "react-router-dom"; import { - Box, - FormControl, - IconButton, - MenuItem, - Select, - TextField, -} from "@mui/material"; -// import { WebsiteURL } from '../WebsiteURL' + CCard, + CCardBody, + CCardGroup, + CCol, + CContainer, + CRow, +} from "@coreui/react"; +import ProductDetails from "./Productcomponents/ProductDetails.js"; +import ProductVarients from "./Productcomponents/ProductVarients.js"; +import ProductsImages from "./Productcomponents/ProductImages.js"; +import { isAutheticated } from "src/auth.js"; +// import ReleventProduct from "./Productcomponents/ReleventProduct"; +// import ProductFabric from "./Productcomponents/ProductFabric.js"; const AddProduct = () => { const token = isAutheticated(); + const [productId, setProductId] = useState(""); + const [viewState, setViewState] = useState(1); + const [images, setImages] = useState([]); + const [categories, setCategories] = useState([]); + const [taxes, setTaxes] = useState([]); + const [sizes, setSizes] = useState([]); + const [relevantProduct, setRelevantProduct] = useState([]); + const [allreleventSelectedProduct, setallReleventSelectedProduct] = useState( + [] + ); + const navigate = useNavigate(); - const [loading, setLoading] = useState(false); - const [allTax, setAllTax] = useState([]); - const [categories, setCategoies] = useState([]); - const [imagesPreview, setImagesPreview] = useState([]); - // const [allimage, setAllImage] = useState([]); - const [name, setName] = useState(""); - const [description, setDescription] = useState(""); - const [productImages, setProductImages] = useState([]); - const [price, setPrice] = useState(0); - const [category, setCategoryName] = useState(""); - const [error, setError] = useState(""); - const [selectedTax, setselectedTax] = useState(); - const [product_Status, setproduct_Status] = useState(""); - const [totalAmt, setTotalAmt] = useState(0); - const [gst_amount, setGst_amount] = useState(0); + const [data, setData] = useState({ + name: "", + category: "", + // sku: "", + description: "", + master_price: "", + // discontinue_on: "", + // hsn_code: "", + product_Status: "", - const handleFileChange = (e) => { - const files = e.target.files; + special_instructions: "", + // productImages.length == 0 || + // gst_amount === "" || + // price === "" || + // totalAmt === "" || + // gst_amount === "" || + }); - // Check the total number of selected files - if (productImages.length + files.length > 4) { - setError("You can only upload up to 4 images."); - return; - } + const [varients, setVarients] = useState([ + { + variant_Name: "", + weight: "", + volume: "", + price: "", - // Check file types and append to selectedFiles - const allowedTypes = ["image/jpeg", "image/png", "image/jpg"]; - const selected = []; + gst_Id: "", + }, + { + variant_Name: "", + weight: "", + volume: "", + price: "", - for (let i = 0; i < files.length; i++) { - if (productImages.length + selected.length >= 4) { - break; // Don't allow more than 4 images - } + gst_Id: "", + }, - if (allowedTypes.includes(files[i].type)) { - selected.push(files[i]); - } - } + { + variant_Name: "", + weight: "", + volume: "", + price: "", - if (selected.length === 0) { - setError("Please upload only PNG, JPEG, or JPG files."); - } else { - setError(""); - setProductImages([...productImages, ...selected]); - } - }; - - const handelDelete = (image) => { - const filtered = productImages.filter((item) => item !== image); - setProductImages(filtered); - }; - // get All categories - const getCategories = async () => { - try { - const response = await axios.get("/api/category/getCategories", { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - - if (response.status === 200) { - setCategoies(response?.data?.categories); - } - } catch (error) { - swal({ - title: error, - text: " please login to access the resource ", - icon: "error", - button: "Retry", - dangerMode: true, - }); - } - }; - // Get all tax - const getAllTax = async () => { - const res = await axios.get(`/api/tax/view_tax`, { - headers: { - "Access-Control-Allow-Origin": "*", - Authorization: `Bearer ${token}`, - }, - }); - if (res.data) { - setAllTax(res.data); - } - }; - useEffect(() => { - getAllTax(); - getCategories(); - }, [token]); - const TaxRatechange = async (e) => { - let m = JSON.parse(e.target.value); - if (m?.tax) { - let totalprice = Number(price) + Number((price * m?.tax) / 100); - setGst_amount(Number((price * m?.tax) / 100)?.toFixed(2)); - setTotalAmt(totalprice?.toFixed(2)); - setselectedTax(m?._id); - } - }; - - const handleSubmit = () => { - if ( - name === "" || - description === "" || - productImages.length == 0 || - category === "" || - selectedTax === "" || - gst_amount === "" || - product_Status === "" || - price === "" - ) { - swal({ - title: "Warning", - text: "Fill all mandatory fields", - icon: "error", - button: "Close", - dangerMode: true, - }); - return; - } - setLoading(true); - const formData = new FormData(); - formData.append("name", name); - - formData.append("description", description); - formData.append("price", price); - formData.append("category", category); - formData.append("total_amount", totalAmt); - formData.append("gst_amount", gst_amount); - formData.append("product_Status", product_Status); - - formData.append("gst", selectedTax); - - productImages.forEach((Singleimage) => { - // console.log(Singleimage) - formData.append("image", Singleimage); - }); + gst_Id: "", + }, + ]); + const [allFabrics, setAllFabrics] = useState([]); + const [fabrics, setFabrics] = useState([ + { _id: "", fabric_Name: "", for_Part: "" }, + { _id: "", fabric_Name: "", for_Part: "" }, + { _id: "", fabric_Name: "", for_Part: "" }, + ]); + const getCategories = () => { axios - .post(`/api/product/create/`, formData, { + .get(`/api/category/getCategories`, { headers: { - Authorization: `Bearer ${token}`, - "Content-Type": "multipart/formdata", "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, }, }) .then((res) => { - swal({ - title: "Added", - text: "Product added successfully!", - icon: "success", - button: "ok", - }); + setCategories(res?.data?.categories); setLoading(false); - navigate("/products", { replace: true }); }) .catch((err) => { setLoading(false); - const message = err.response?.data?.message - ? err.response?.data?.message - : "Something went wrong!"; - swal({ - title: "Warning", - text: message, - icon: "error", - button: "Retry", - dangerMode: true, - }); }); }; - const handlePriceChange = (e) => { - const newPrice = e.target.value; - setPrice(newPrice); - const selectedTaxObj = allTax.find((t) => t._id === selectedTax); - if (selectedTaxObj && !isNaN(newPrice)) { - const gstAmount = (newPrice * selectedTaxObj.tax) / 100; - const totalAmount = Number(newPrice) + gstAmount; - - setGst_amount(gstAmount.toFixed(2)); - setTotalAmt(totalAmount.toFixed(2)); - } + const getTaxes = () => { + axios + .get(`/api/tax/view_tax`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + setTaxes(res.data); + }); }; - // console.log(data); - // console.log(productImages); + + // const getSizes = () => { + // axios + // .get(`/api/erp/sizemaster/size`, { + // headers: { + // "Access-Control-Allow-Origin": "*", + // Authorization: `Bearer ${token}`, + // }, + // }) + // .then((res) => { + // setSizes(res.data?.data); + // }); + // }; + // const getItemWhichcontaiNameFabric = () => { + // axios + // .get(`/api/erp/item/name_contain_fabric`, { + // headers: { + // "Access-Control-Allow-Origin": "*", + // Authorization: `Bearer ${token}`, + // }, + // }) + // .then((res) => { + // console.log(res?.data); + // // setSizes(res.data?.data) + // setAllFabrics(res?.data?.data); + // }) + // .catch((err) => { + // console.log(err); + // }); + // }; + + // const getProductsData = async () => { + // axios + // .get(`/api/product`, { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + // }) + // .then((res) => { + // setRelevantProduct(res.data?.data); + // }) + // .catch((err) => { + // console.log(err); + // }); + // }; + useEffect(() => { + getCategories(); + getTaxes(); + // getSizes(); + // getProductsData(); + // getItemWhichcontaiNameFabric(); + }, []); + const handleView = (n) => { + if (viewState === n) return; + setViewState(n); + }; + return ( -
-
-
+ + +
- Add Product + Add Product : {data?.name && data?.name}
-
-

-
-
-
-
-
-
-
-
-
-
- - setName(e.target.value)} - /> - {name ? ( - <> - - {35 - name.length} characters left - - - ) : ( - <> - )}{" "} -
- -
- -