diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 941eb68..1757990 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -7,6 +7,9 @@ import CartPage from './CartPage'; import AdminLayout from './AdminLayout'; import AdminRoute from './AdminRoute'; import ProductManagement from './ProductManagement'; +import ProductForm from './ProductForm'; +import SellerManagement from './SellerManagement'; +import CategoryManagement from './CategoryManagement'; import { CartProvider } from './CartContext'; import { AuthProvider } from './AuthContext'; @@ -32,8 +35,10 @@ function App() { }> }> } /> - Category Management (To be implemented)} /> - Seller Management (To be implemented)} /> + } /> + } /> + } /> + } /> @@ -43,4 +48,4 @@ function App() { ) } -export default App; +export default App; \ No newline at end of file diff --git a/frontend/src/CategoryManagement.tsx b/frontend/src/CategoryManagement.tsx new file mode 100644 index 0000000..bdccb88 --- /dev/null +++ b/frontend/src/CategoryManagement.tsx @@ -0,0 +1,74 @@ +import React, { useEffect, useState } from 'react'; +import axios from 'axios'; + +interface Category { + id: number; + name: string; + slug: string; +} + +const CategoryManagement: React.FC = () => { + const [categories, setCategories] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + fetchCategories(); + }, []); + + const fetchCategories = () => { + axios.get('http://127.0.0.1:8000/categories/') + .then(response => { + setCategories(response.data); + setLoading(false); + }) + .catch(error => { + console.error('Error fetching categories:', error); + setLoading(false); + }); + }; + + const deleteCategory = (id: number) => { + if (window.confirm('Are you sure you want to delete this category?')) { + axios.delete(`http://127.0.0.1:8000/categories/${id}/`) + .then(() => fetchCategories()) + .catch(error => console.error('Error deleting category:', error)); + } + }; + + if (loading) return
Loading...
; + + return ( +
+

Category Management

+ + + + + + + + + + + {categories.map(category => ( + + + + + + + ))} + +
IDNameSlugActions
{category.id}{category.name}{category.slug} + +
+
+ ); +}; + +export default CategoryManagement; diff --git a/frontend/src/ProductForm.tsx b/frontend/src/ProductForm.tsx new file mode 100644 index 0000000..d62bef0 --- /dev/null +++ b/frontend/src/ProductForm.tsx @@ -0,0 +1,44 @@ +import React, { useState, useEffect } from 'react'; +import axios from 'axios'; +import { useNavigate, useParams } from 'react-router-dom'; + +const ProductForm: React.FC = () => { + const { id } = useParams<{ id: string }>(); + const navigate = useNavigate(); + const [formData, setFormData] = useState({ name: '', price: '', description: '', category: '' }); + const [categories, setCategories] = useState<{ id: number; name: string }[]>([]); + + useEffect(() => { + axios.get('http://127.0.0.1:8000/categories/') + .then(res => setCategories(res.data)); + + if (id) { + axios.get(`http://127.0.0.1:8000/products/${id}/`) + .then(res => setFormData(res.data)); + } + }, [id]); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + const action = id ? axios.put(`http://127.0.0.1:8000/products/${id}/`, formData) : axios.post('http://127.0.0.1:8000/products/', formData); + action.then(() => navigate('/admin/products')); + }; + + return ( +
+

{id ? 'Edit' : 'Create'} Product

+
+ setFormData({...formData, name: e.target.value})} /> + setFormData({...formData, price: e.target.value})} /> +