Level 2
ViewProductAttribute.jsx the one above did not come well
import { Link, useNavigate, useParams } from "react-router-dom";
import { useContext, useEffect, useState } from "react";
import DashboardSidebar from "../DashboardSidebar";
import { AppContext } from "../../Context/AppContext";
export default function ViewProductAttributes() {
const { id } = useParams();
const navigate = useNavigate();
const { name, token } = useContext(AppContext);
const [product, setProduct] = useState([]);
const [productAttributes, setProductAttributes] = useState([]);
const [productAttributeInput, setProductAttributeInput] = useState({
size: [],
sku: [],
cost_price: [],
sales_price: [],
stock: [],
});
const [errors, setErrors] = useState({});
async function getProductDetails() {
const res = await fetch(`/api/view_product_attribute/${id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
const data = await res.json();
if (res.ok) {
setProduct(data.product); //this product is the one comming from ProductController.php @ viewProductAttribute function
}
}
async function getProductAttributes() {
const res = await fetch(`/api/view_product_attribute/${id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
const data = await res.json();
if (res.ok) {
setProductAttributes(data.productattributes); //this productattributes is the one comming from ProductController.php @ viewProductAttribute function
}
}
const handleInput = (e) => {
e.persist();
setProductAttributeInput({
...productAttributeInput,
[e.target.name]: e.target.value,
});
};
async function addProductAttribute(e) {
e.preventDefault();
const Formdata = {
size: productAttributeInput.size,
sku: productAttributeInput.sku,
cost_price: productAttributeInput.cost_price,
sales_price: productAttributeInput.sales_price,
stock: productAttributeInput.stock,
};
const res = await fetch(`/api/add_product_attribute/${id}`, {
method: "post",
headers: {
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(Formdata),
});
const data = await res.json();
if (data.errors) {
setErrors(data.errors);
} else {
navigate("/view_products");
alert(data.message);
}
}
//this useEffect is calling the getProductAttributes function at the top
useEffect(() => {
getProductDetails();
getProductAttributes();
}, []);
return (
<>
<div className="xsm:h-[200px] md:h-[220px] w-full bg-primary">
<div className="container">
<div className="flex justify-between">
<div className="xsm:pt-[20px] md:pt-[50px]">
<h1 className="font-roboto text-secondary xsm:text-[30px] md:text-[50px] animation-delay-300 xsm:leading-8 md:leading-[50px]">
Modern Courses
</h1>
<p className="text-white text-[17px] pb-9 xsm:pt-2 md:pt-4">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Debitis reiciendis corrupti.
</p>
</div>
</div>
</div>
</div>
<div className="pt-10">
<div className="container grid grid-cols-4 gap-6 pt-4 pb-16 items-start">
<div className="lg:col-span-3 xsm:col-span-4">
<div className="flex items-center mb-3">
<Link
to="/view_products"
className="flex items-center rounded border border-red-600 py-1 px-2 text-white bg-red-600 hover:bg-tertiary hover:border-tertiary"
>
<i className="fa-light fa-arrow-left mr-1"></i>
BACK
</Link>
</div>
<div className="space-y-4">
<div className="bg-white p-3 border border-gray-200 rounded">
<h1 className="font-roboto text-[25px] text-primary font-semibold capitalize mb-4">
ADD PRODUCT ATTRIBUTE
</h1>
<div
className="grid xsm:grid-cols-1 md:grid-cols-4 gap-4"
key={product.id}
>
<div>
<label className="text-gray-600 mb-2 block">
Product
<span className="text-red-600">
*
</span>
</label>
<input
type="text"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
value={product.product_name}
readOnly
/>
</div>
<div>
<label className="text-gray-600 mb-2 block">
Code
<span className="text-red-600">
*
</span>
</label>
<input
type="email"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
value={product.product_code}
readOnly
/>
</div>
<div>
<label className="text-gray-600 mb-2 block">
Cost Price
<span className="text-red-600">
*
</span>
</label>
<input
type="email"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
value={product.product_cost_price}
readOnly
/>
</div>
<div>
<label className="text-gray-600 mb-2 block">
Sales Price
<span className="text-red-600">
*
</span>
</label>
<input
type="text"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
value={product.product_sales_price}
readOnly
/>
</div>
</div>
<form
onSubmit={addProductAttribute}
className="mt-10"
>
<div className="grid xsm:grid-cols-1 md:grid-cols-5 gap-4">
<div>
<input
type="text"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
placeholder="Size"
name="size"
onChange={handleInput}
value={
productAttributeInput.size
}
/>
{errors.size && (
<p className="text-red-600">
{errors.size[0]}
</p>
)}
</div>
<div>
<input
type="text"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
placeholder="SKU"
name="sku"
onChange={handleInput}
value={
productAttributeInput.sku
}
/>
{errors.sku && (
<p className="text-red-600">
{errors.sku[0]}
</p>
)}
</div>
<div>
<input
type="text"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
placeholder="Cost Price"
name="cost_price"
onChange={handleInput}
value={
productAttributeInput.cost_price
}
/>
{errors.cost_price && (
<p className="text-red-600">
{errors.cost_price[0]}
</p>
)}
</div>
<div>
<input
type="text"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
placeholder="Sales Price"
name="sales_price"
onChange={handleInput}
value={
productAttributeInput.sales_price
}
/>
{errors.sales_price && (
<p className="text-red-600">
{errors.sales_price[0]}
</p>
)}
</div>
<div>
<input
type="number"
className="block w-full border border-gray-300 px-4 py-3 text-gray-600 text-sm rounded placeholder-gray-400 focus:border-primary focus:ring-0"
placeholder="Stock"
name="stock"
onChange={handleInput}
value={
productAttributeInput.stock
}
/>
{errors.stock && (
<p className="text-red-600">
{errors.stock[0]}
</p>
)}
</div>
</div>
<div class="pt-2">
<button class="bg-primary border border-primary text-white px-8 py-2 mb-3 font-medium rounded text-uppercase flex items-center gap-2 hover:bg-transparent hover:text-primary transition">
ADD
</button>
</div>
</form>
</div>
</div>
<div>
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-500 uppercase bg-gray-50 dark:text-gray-400 border-b-2 border-gray-400">
<tr className="text-nowrap">
<th className="px-3 py-2">ID</th>
<th className="px-3 py-2">
Product ID
</th>
<th className="px-3 py-2">Size</th>
<th className="px-3 py-2">SKU</th>
<th className="px-3 py-2">
Cost Price
</th>
<th className="px-3 py-2">
Sales Price
</th>
<th className="px-3 py-2">Status</th>
<th className="px-3 py-2">Action</th>
</tr>
</thead>
<tbody>
{productAttributes.length > 0 ? (
productAttributes.map(
(productAttribute) => (
<tr
key={productAttribute.id}
className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
>
<td className="px-3 py-2">
1
</td>
<td className="px-3 py-2">
{
productAttribute.product_id
}
</td>
<td className="px-3 py-2">
{productAttribute.size}
</td>
<td className="px-3 py-2">
{productAttribute.sku}
</td>
<td className="px-3 py-2">
{
productAttribute.cost_price
}
</td>
<td className="px-3 py-2">
{
productAttribute.sales_price
}
</td>
<td className="px-3 py-2 text-nowrap">
{
productAttribute.status
}
</td>
<td className="px-3 py-2">
<div className="flex text-center gap-2">
<button>
<i className="fa-light fa-trash"></i>
</button>
</div>
</td>
</tr>
)
)
) : (
<p className="py-4 text-red-500 text-[20px]">
No product attributes
</p>
)}
</tbody>
</table>
{/* pagination */}
</div>
</div>
<div className="xsm:col-span-4 md:col-span-4 lg:col-span-1 px-4 pb-6 shadow rounded overflow-hidden xsm:mt-10 md:mt-[0px]">
<div className="divide-y divide-gray-200 space-y-5">
<DashboardSidebar />
</div>
</div>
</div>
</div>
</>
);
}
