Merge pull request #4 from Aayan-infotech/update

add products ui
Aayan-infotech · Dec 23, 2024 · 1a04edb · 1a04edb
2 parents 40a3262 + 55b6138
commit 1a04edb
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,8 @@
     "react": "^18.3.1",
     "react-big-calendar": "^1.17.0",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
+    "react-quill": "^2.0.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.28.0",
     "react-table": "^7.8.0",

diff --git a/src/views/Product_Management/AddProduct.js b/src/views/Product_Management/AddProduct.js
@@ -1,45 +1,78 @@
 import React, { useState, useEffect } from 'react';
-import {
-  CForm,
-  CFormLabel,
-  CFormInput,
-  CFormSelect,
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CRow,
-  CCol
-} from '@coreui/react';
+import { CCard, CCardHeader, CCardBody, CForm, CFormLabel, CFormSelect, CFormInput, CButton, CRow, CCol } from '@coreui/react';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+import '../Categories_Management/CategoriesManagement.css';
+
 
 const AddProductForm = () => {
-  // Initial state setup for the form
   const [categories, setCategories] = useState([]);
   const [subCategories, setSubCategories] = useState([]);
   const [subSubCategories, setSubSubCategories] = useState([]);
   const [productData, setProductData] = useState({
     category: '',
     subCategory: '',
     subSubCategory: '',
-    skuCode: '',
-    // Add other fields here (e.g., name, price, etc.)
+    productName: '',
+    productDescription: '',
   });
 
-  // Fetch categories, subcategories, and sub-subcategories from the server
+  // Fetch data for categories, subcategories, and subsubcategories
   useEffect(() => {
     // Fetch categories
-    // For demonstration, using mock data:
-    setCategories(['Electronics', 'Clothing', 'Furniture']);
-    setSubCategories(['Smartphones', 'Laptops', 'Tables']); // Example for electronics
-    setSubSubCategories(['Android', 'iOS']); // Example for smartphones
+    fetch('http://localhost:7878/api/categories')
+      .then((response) => response.json())
+      .then((data) => setCategories(data))
+      .catch((error) => console.error('Error fetching categories:', error));
+
+    // Fetch subcategories 
+    fetch('http://localhost:7878/api/subcategory')
+      .then((response) => response.json())
+      .then((data) => setSubCategories(data))
+      .catch((error) => console.error('Error fetching subcategories:', error));
+
+    // Fetch subsubcategories 
+    fetch('http://localhost:7878/api/subSubCategories')
+      .then((response) => response.json())
+      .then((data) => setSubSubCategories(data))
+      .catch((error) => console.error('Error fetching subsubcategories:', error));
   }, []);
 
+  // Handle category change
+  const handleCategoryChange = (e) => {
+    const selectedCategory = e.target.value;
+    setProductData({ ...productData, category: selectedCategory, subCategory: '', subSubCategory: '' });
+
+    // Fetch subcategories based on selected category
+    fetch(`http://localhost:7878/api/subcategory?category=${selectedCategory}`)
+      .then((response) => response.json())
+      .then((data) => setSubCategories(data))
+      .catch((error) => console.error('Error fetching subcategories for category:', error));
+  };
+
+  // Handle subcategory change
+  const handleSubCategoryChange = (e) => {
+    const selectedSubCategory = e.target.value;
+    setProductData({ ...productData, subCategory: selectedSubCategory, subSubCategory: '' });
+
+    // Fetch subsubcategories based on selected subcategory
+    fetch(`http://localhost:7878/api/subSubCategories?subcategory=${selectedSubCategory}`)
+      .then((response) => response.json())
+      .then((data) => setSubSubCategories(data))
+      .catch((error) => console.error('Error fetching subsubcategories for subcategory:', error));
+  };
+
   // Handle change in form fields
   const handleChange = (e) => {
     const { name, value } = e.target;
     setProductData({ ...productData, [name]: value });
   };
 
+  // Handle description change (for ReactQuill)
+  const handleDescriptionChange = (value) => {
+    setProductData({ ...productData, productDescription: value });
+  };
+
   // Handle form submission
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -59,12 +92,12 @@ const AddProductForm = () => {
                 id="category"
                 name="category"
                 value={productData.category}
-                onChange={handleChange}
+                onChange={handleCategoryChange}
               >
                 <option value="">Select Category</option>
                 {categories.map((category, index) => (
-                  <option key={index} value={category}>
-                    {category}
+                  <option key={index} value={category.name}>
+                    {category.name}
                   </option>
                 ))}
               </CFormSelect>
@@ -76,12 +109,12 @@ const AddProductForm = () => {
                 id="subCategory"
                 name="subCategory"
                 value={productData.subCategory}
-                onChange={handleChange}
+                onChange={handleSubCategoryChange}
               >
                 <option value="">Select Subcategory</option>
                 {subCategories.map((subCategory, index) => (
-                  <option key={index} value={subCategory}>
-                    {subCategory}
+                  <option key={index} value={subCategory.name}>
+                    {subCategory.name}
                   </option>
                 ))}
               </CFormSelect>
@@ -99,28 +132,15 @@ const AddProductForm = () => {
               >
                 <option value="">Select Sub-Subcategory</option>
                 {subSubCategories.map((subSubCategory, index) => (
-                  <option key={index} value={subSubCategory}>
-                    {subSubCategory}
+                  <option key={index} value={subSubCategory.name}>
+                    {subSubCategory.name}
                   </option>
                 ))}
               </CFormSelect>
             </CCol>
-
-            <CCol md={6}>
-              <CFormLabel htmlFor="skuCode">SKU Code</CFormLabel>
-              <CFormInput
-                type="text"
-                id="skuCode"
-                name="skuCode"
-                value={productData.skuCode}
-                onChange={handleChange}
-                placeholder="Enter SKU Code"
-              />
-            </CCol>
           </CRow>
 
-          {/* Add more fields based on the client's request */}
-          {/* Example additional field */}
+          {/* Product Name */}
           <CRow>
             <CCol md={12}>
               <CFormLabel htmlFor="productName">Product Name</CFormLabel>
@@ -135,6 +155,18 @@ const AddProductForm = () => {
             </CCol>
           </CRow>
 
+          {/* Product Description using ReactQuill */}
+          <CRow>
+            <CCol md={12}>
+              <CFormLabel htmlFor="productDescription">Product Description</CFormLabel>
+              <ReactQuill
+                value={productData.productDescription}
+                onChange={handleDescriptionChange}
+                placeholder="Enter product description"
+              />
+            </CCol>
+          </CRow>
+
           {/* Submit Button */}
           <CButton type="submit" color="primary" className="mt-3">
             Add Product

diff --git a/src/views/Product_Management/ManageProduct.js b/src/views/Product_Management/ManageProduct.js
@@ -20,13 +20,14 @@ import {
   CInputGroupText,
   CFormInput,
 } 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' },
-    // { id: 2, name: 'MacBook Pro', category: 'Electronics', subCategory: 'Laptops', subSubCategory: 'Business', status: 'Block' },
-    // { id: 3, name: 'Nike T-shirt', category: 'Clothing', subCategory: 'Men', subSubCategory: 'T-shirts', status: 'Active' },
+    { 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' },
   ];
 
   const categories = ['Electronics', 'Clothing', 'Food'];
@@ -172,6 +173,9 @@ const ManageProduct = () => {
                   <CTableHeaderCell>Product Name</CTableHeaderCell>
                   <CTableHeaderCell>Category</CTableHeaderCell>
                   <CTableHeaderCell>Subcategory</CTableHeaderCell>
+                  <CTableHeaderCell>Sub-subcategory</CTableHeaderCell>
+                  <CTableHeaderCell>Dimensions</CTableHeaderCell>
+                  <CTableHeaderCell>Images</CTableHeaderCell>
                   <CTableHeaderCell>Status</CTableHeaderCell>
                   <CTableHeaderCell>Actions</CTableHeaderCell>
                 </CTableRow>
@@ -182,15 +186,40 @@ const ManageProduct = () => {
                     <CTableDataCell>{product.name}</CTableDataCell>
                     <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 color="success" className="mr-2">
+                      <CButton
+                        color={product.status === 'Active' ? 'danger' : 'success'}
+                        className="mr-2"
+                        onClick={() => alert(`${product.status === 'Active' ? 'Block' : 'Activate'} product: ${product.name}`)}
+                      >
                         {product.status === 'Active' ? 'Block' : 'Activate'}
                       </CButton>
-                      <CButton color="warning" className="mr-2">
+                      <CButton
+                        color="warning"
+                        className="mr-2"
+                        onClick={() => alert(`Edit product: ${product.name}`)}
+                      >
                         Edit
                       </CButton>
-                      <CButton color="danger">Delete</CButton>
+                      <CButton
+                        color="danger"
+                        onClick={() => alert(`Delete product: ${product.name}`)}
+                      >
+                        Delete
+                      </CButton>
                     </CTableDataCell>
                   </CTableRow>
                 ))}
@@ -203,4 +232,5 @@ const ManageProduct = () => {
   );
 };
 
+
 export default ManageProduct;