Skip to content

Commit

Permalink
Merge pull request #6 from Aayan-infotech/update
Browse files Browse the repository at this point in the history 
Update
  • Loading branch information
@imtiyaz-Aayaninfotech
imtiyaz-Aayaninfotech authored Dec 24, 2024
2 parents 41cf25c + 2a86ef4 commit 79547c8
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 41 deletions.
78 changes: 64 additions & 14 deletions src/views/Product_Management/AddProduct.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import '../Categories_Management/CategoriesManagement.css';


const AddProductForm = () => {
const [categories, setCategories] = useState([]);
const [subCategories, setSubCategories] = useState([]);
Expand All @@ -15,23 +14,21 @@ const AddProductForm = () => {
subSubCategory: '',
productName: '',
productDescription: '',
price: '', // Keep only price field
});

// Fetch data for categories, subcategories, and subsubcategories
useEffect(() => {
// Fetch categories
fetch('http://44.196.64.110:7878/api/categories')
.then((response) => response.json())
.then((data) => setCategories(data))
.catch((error) => console.error('Error fetching categories:', error));

// Fetch subcategories

fetch('http://44.196.64.110:7878/api/subcategory')
.then((response) => response.json())
.then((data) => setSubCategories(data))
.catch((error) => console.error('Error fetching subcategories:', error));

// Fetch subsubcategories
fetch('http://44.196.64.110:7878/api/subSubCategories')
.then((response) => response.json())
.then((data) => setSubSubCategories(data))
Expand All @@ -43,7 +40,6 @@ const AddProductForm = () => {
const selectedCategory = e.target.value;
setProductData({ ...productData, category: selectedCategory, subCategory: '', subSubCategory: '' });

// Fetch subcategories based on selected category
fetch(`http://44.196.64.110:7878/api/subcategory?category=${selectedCategory}`)
.then((response) => response.json())
.then((data) => setSubCategories(data))
Expand All @@ -55,7 +51,6 @@ const AddProductForm = () => {
const selectedSubCategory = e.target.value;
setProductData({ ...productData, subCategory: selectedSubCategory, subSubCategory: '' });

// Fetch subsubcategories based on selected subcategory
fetch(`http://44.196.64.110:7878/api/subSubCategories?subcategory=${selectedSubCategory}`)
.then((response) => response.json())
.then((data) => setSubSubCategories(data))
Expand All @@ -76,8 +71,50 @@ const AddProductForm = () => {
// Handle form submission
const handleSubmit = (e) => {
e.preventDefault();
console.log('Product Data:', productData);
// Here you can send the data to the server
const { category, subCategory, subSubCategory, productName, productDescription, price } = productData;

const payload = {
image: "image_url", // Provide a real image URL
category_id: category,
sub_category_id: subCategory,
sub_sub_category_id: subSubCategory,
name: productName,
Description: productDescription,
price, // Include only price in the payload
ins_date: new Date().toISOString(),
ins_ip: "127.0.0.1", // Get the IP address of the client
ins_by: null // Set ins_by to null
};

console.log("Payload:", payload);

fetch('http://44.196.64.110:7878/api/products', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload),
})
.then((response) => response.json())
.then((data) => {
if (data.message === 'Product created successfully') {
alert("Product added successfully!");
setProductData({
category: '',
subCategory: '',
subSubCategory: '',
productName: '',
productDescription: '',
price: '', // Reset price field
});
} else {
alert("Error adding product");
}
})
.catch((error) => {
console.error('Error:', error);
alert("Error occurred while adding product");
});
};

return (
Expand All @@ -96,7 +133,7 @@ const AddProductForm = () => {
>
<option value="">Select Category</option>
{categories.map((category, index) => (
<option key={index} value={category.name}>
<option key={index} value={category._id}>
{category.name}
</option>
))}
Expand All @@ -113,7 +150,7 @@ const AddProductForm = () => {
>
<option value="">Select Subcategory</option>
{subCategories.map((subCategory, index) => (
<option key={index} value={subCategory.name}>
<option key={index} value={subCategory._id}>
{subCategory.name}
</option>
))}
Expand All @@ -132,15 +169,14 @@ const AddProductForm = () => {
>
<option value="">Select Sub-Subcategory</option>
{subSubCategories.map((subSubCategory, index) => (
<option key={index} value={subSubCategory.name}>
<option key={index} value={subSubCategory._id}>
{subSubCategory.name}
</option>
))}
</CFormSelect>
</CCol>
</CRow>

{/* Product Name */}
<CRow>
<CCol md={12}>
<CFormLabel htmlFor="productName">Product Name</CFormLabel>
Expand All @@ -155,6 +191,21 @@ const AddProductForm = () => {
</CCol>
</CRow>

{/* Price Field */}
<CRow>
<CCol md={6}>
<CFormLabel htmlFor="price">Price</CFormLabel>
<CFormInput
type="number"
id="price"
name="price"
value={productData.price}
onChange={handleChange}
placeholder="Enter product price"
/>
</CCol>
</CRow>

{/* Product Description using ReactQuill */}
<CRow>
<CCol md={12}>
Expand All @@ -167,7 +218,6 @@ const AddProductForm = () => {
</CCol>
</CRow>

{/* Submit Button */}
<CButton type="submit" color="primary" className="mt-3">
Add Product
</CButton>
Expand Down
123 changes: 96 additions & 27 deletions src/views/Product_Management/ManageProduct.js
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,36 @@
// src/components/ManageProduct.js
import React, { useState } from 'react';
import {
CRow,
CCol,
CCard,
CCardHeader,
CCardBody,
CForm,
CFormLabel,
CFormSelect,
CButton,
CCard,
CCardHeader,
CCardBody,
CRow,
CCol,
CInputGroup,
CInputGroupText,
CFormInput,
CTable,
CTableHead,
CTableBody,
CTableRow,
CTableHeaderCell,
CTableDataCell,
CInputGroup,
CInputGroupText,
CFormInput,
CModal,
CModalHeader,
CModalTitle,
CModalBody,
CModalFooter
} from '@coreui/react';
import '../Categories_Management/CategoriesManagement.css';

const ManageProduct = () => {
// Sample data (you can replace this with real data from an API)
const productData = [
{ id: 1, name: 'iPhone 15', category: 'Electronics', subCategory: 'Mobile Phones', subSubCategory: 'Smartphones', status: 'Active', images: ['img1.jpg', 'img2.jpg'], dimensions: '6.1 x 2.8 x 0.3 inches' },
{ id: 2, name: 'MacBook Pro', category: 'Electronics', subCategory: 'Laptops', subSubCategory: 'Business', status: 'Active', images: ['img3.jpg'], dimensions: '14.1 x 9.7 x 0.6 inches' },
{ id: 3, name: 'Nike T-shirt', category: 'Clothing', subCategory: 'Men', subSubCategory: 'T-shirts', status: 'Active', images: ['img4.jpg', 'img5.jpg'], dimensions: 'L' },
{ id: 1, name: 'iPhone 15', category: 'Electronics', subCategory: 'Mobile Phones', subSubCategory: 'Smartphones', status: 'Active' },
{ id: 2, name: 'MacBook Pro', category: 'Electronics', subCategory: 'Laptops', subSubCategory: 'Business', status: 'Active' },
{ id: 3, name: 'Nike T-shirt', category: 'Clothing', subCategory: 'Men', subSubCategory: 'T-shirts', status: 'Active' },
];

const categories = ['Electronics', 'Clothing', 'Food'];
Expand All @@ -50,13 +53,41 @@ const ManageProduct = () => {
});

const [data, setData] = useState(productData);
const [showImagesModal, setShowImagesModal] = useState(false);
const [showDimensionsModal, setShowDimensionsModal] = useState(false);
const [currentProduct, setCurrentProduct] = useState(null);
const [newImage, setNewImage] = useState(null);
const [newDimensions, setNewDimensions] = useState('');

// Handle filter change
const handleFilterChange = (e) => {
const { name, value } = e.target;
setFilters({ ...filters, [name]: value });
};

// Handle Add Image modal open
const handleAddImages = (productId) => {
setCurrentProduct(productId);
setShowImagesModal(true);
};

// Handle Add Dimensions modal open
const handleAddDimensions = (productId) => {
setCurrentProduct(productId);
setShowDimensionsModal(true);
};

// Handle adding image
const handleImageChange = (e) => {
const file = e.target.files[0];
setNewImage(file);
};

// Handle adding dimensions
const handleDimensionsChange = (e) => {
setNewDimensions(e.target.value);
};

// Filter products based on selected filters
const filteredData = data.filter((product) => {
return (
Expand Down Expand Up @@ -174,8 +205,6 @@ const ManageProduct = () => {
<CTableHeaderCell>Category</CTableHeaderCell>
<CTableHeaderCell>Subcategory</CTableHeaderCell>
<CTableHeaderCell>Sub-subcategory</CTableHeaderCell>
<CTableHeaderCell>Dimensions</CTableHeaderCell>
<CTableHeaderCell>Images</CTableHeaderCell>
<CTableHeaderCell>Status</CTableHeaderCell>
<CTableHeaderCell>Actions</CTableHeaderCell>
</CTableRow>
Expand All @@ -187,17 +216,6 @@ const ManageProduct = () => {
<CTableDataCell>{product.category}</CTableDataCell>
<CTableDataCell>{product.subCategory}</CTableDataCell>
<CTableDataCell>{product.subSubCategory}</CTableDataCell>
<CTableDataCell>{product.dimensions}</CTableDataCell>
<CTableDataCell>
{product.images.map((img, index) => (
<img
key={index}
src={img}
alt={`product-${index}`}
style={{ width: '50px', marginRight: '5px', borderRadius: '5px' }}
/>
))}
</CTableDataCell>
<CTableDataCell>{product.status}</CTableDataCell>
<CTableDataCell>
<CButton
Expand All @@ -220,6 +238,19 @@ const ManageProduct = () => {
>
Delete
</CButton>
<CButton
color="info"
className="mr-2"
onClick={() => handleAddImages(product.id)}
>
Add Images
</CButton>
<CButton
color="secondary"
onClick={() => handleAddDimensions(product.id)}
>
Add Dimensions
</CButton>
</CTableDataCell>
</CTableRow>
))}
Expand All @@ -228,9 +259,47 @@ const ManageProduct = () => {
</CCardBody>
</CCard>
</CCol>

{/* Modal for Add Image */}
<CModal visible={showImagesModal} onClose={() => setShowImagesModal(false)}>
<CModalHeader>
<CModalTitle>Add Image</CModalTitle>
</CModalHeader>
<CModalBody>
<CForm>
<CFormLabel htmlFor="productImage">Upload Image</CFormLabel>
<CFormInput type="file" id="productImage" onChange={handleImageChange} />
</CForm>
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setShowImagesModal(false)}>Close</CButton>
<CButton color="primary" onClick={() => { alert('Image added'); setShowImagesModal(false); }}>Add Image</CButton>
</CModalFooter>
</CModal>

{/* Modal for Add Dimensions */}
<CModal visible={showDimensionsModal} onClose={() => setShowDimensionsModal(false)}>
<CModalHeader>
<CModalTitle>Add Dimensions</CModalTitle>
</CModalHeader>
<CModalBody>
<CForm>
<CFormLabel htmlFor="productDimensions">Enter Dimensions</CFormLabel>
<CFormInput
id="productDimensions"
type="text"
value={newDimensions}
onChange={handleDimensionsChange}
/>
</CForm>
</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setShowDimensionsModal(false)}>Close</CButton>
<CButton color="primary" onClick={() => { alert('Dimensions added'); setShowDimensionsModal(false); }}>Add Dimensions</CButton>
</CModalFooter>
</CModal>
</CRow>
);
};


export default ManageProduct;

0 comments on commit 79547c8

Please sign in to comment.