Updated edit product page to handle new details

#14
kianz20 · Sep 7, 2024 · 997ad66 · 997ad66
1 parent 3b08b40
commit 997ad66
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 12 deletions.
diff --git a/client/src/components/ThinProductDetails.tsx b/client/src/components/ThinProductDetails.tsx
@@ -4,6 +4,7 @@ import { Button, Typography } from "@mui/material";
 import React, { useState } from "react";
 import * as api from "../api/productController";
 import { ThemedInput } from "../components";
+import { BACKEND_URL } from "../constants/backendURL";
 import testIds from "../constants/testIds";
 import { useAlert, useAuth } from "../hooks";
 import { ProductDetails } from "../models";
@@ -15,6 +16,9 @@ interface EditFormDetails {
 	name: string;
 	price: number;
 	description: string;
+	franchise: string;
+	stockCount: number;
+	category: string;
 }
 
 interface ThinProductDetailsProps extends ProductDetails {
@@ -25,12 +29,26 @@ interface ThinProductDetailsProps extends ProductDetails {
 const ThinProductDetails: React.FC<ThinProductDetailsProps> = (props) => {
 	const { userToken } = useAuth();
 	const { alertDetails, showAlert } = useAlert();
-	const { _id, name, description, price, color, onRemove } = props;
+	const {
+		_id,
+		name,
+		description,
+		price,
+		franchise,
+		category,
+		stockCount,
+		imgPath,
+		color,
+		onRemove,
+	} = props;
 
 	const [formState, setFormState] = useState<EditFormDetails>({
 		name: name,
 		price: price,
 		description: description,
+		franchise: franchise,
+		stockCount: stockCount,
+		category: category,
 	});
 
 	const [isExpanded, setIsExpanded] = useState(false);
@@ -149,6 +167,39 @@ const ThinProductDetails: React.FC<ThinProductDetailsProps> = (props) => {
 										onChange={handleFormChange}
 									/>
 								</div>
+								<div className={styles.editField}>
+									<Typography className={styles.productDetail}>
+										<b>Category:</b>
+									</Typography>
+									<ThemedInput
+										name="category"
+										multiline
+										value={formState.category}
+										onChange={handleFormChange}
+									/>
+								</div>
+								<div className={styles.editField}>
+									<Typography className={styles.productDetail}>
+										<b>Franchise:</b>
+									</Typography>
+									<ThemedInput
+										name="franchise"
+										multiline
+										value={formState.franchise}
+										onChange={handleFormChange}
+									/>
+								</div>
+								<div className={styles.editField}>
+									<Typography className={styles.productDetail}>
+										<b>Stock Count:</b>
+									</Typography>
+									<ThemedInput
+										name="stockCount"
+										multiline
+										value={formState.stockCount}
+										onChange={handleFormChange}
+									/>
+								</div>
 							</>
 						) : (
 							<>
@@ -161,6 +212,19 @@ const ThinProductDetails: React.FC<ThinProductDetailsProps> = (props) => {
 								<Typography className={styles.productDetail}>
 									<b>Description:</b> {description}
 								</Typography>
+								<Typography className={styles.productDetail}>
+									<b>Franchise:</b> {franchise}
+								</Typography>
+								<Typography className={styles.productDetail}>
+									<b>Category:</b> {category}
+								</Typography>
+								<Typography className={styles.productDetail}>
+									<b>Stock Count:</b> {stockCount}
+								</Typography>
+								<img
+									className={styles.productImg}
+									src={`${BACKEND_URL}${imgPath}`}
+								/>
 							</>
 						)}
 					</div>

diff --git a/client/src/styles/ThinProductDetails.module.css b/client/src/styles/ThinProductDetails.module.css
@@ -13,7 +13,7 @@
 }
 
 .productLineExpanded {
-	height: 260px;
+	height: 490px;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -47,3 +47,8 @@
 	border-radius: 15px;
 	padding: 10px;
 }
+
+.productImg {
+	max-width: 250px;
+	max-height: 250px;
+}
diff --git a/server/src/routes/product.ts b/server/src/routes/product.ts
@@ -74,26 +74,21 @@ router.post("/", authenticateToken, async (req, res) => {
 router.put("/edit/:id", authenticateToken, async (req, res) => {
 	try {
 		const { id } = req.params;
-		const {
-			name,
-			price,
-			description,
-			imgPath,
-			stockCount,
-			category,
-			franchise,
-		} = req.body;
+		const { name, price, description, stockCount, category, franchise } =
+			req.body;
 		if (!id) {
 			return res.status(400).json({ error: "Product ID is required" });
 		}
 
 		const query = { _id: id.toString() };
+
+		console.log(name, price, description, stockCount, category, franchise);
+
 		const update = {
 			$set: {
 				name: name.toString(),
 				price: Number(price),
 				details: description.toString(),
-				imgPath: imgPath.toString(),
 				stockCount: Number(stockCount),
 				category: category.toString(),
 				franchise: franchise.toString(),