Finalisation du panier

src/pages/stock.tsx

@@ -3,66 +3,74 @@ import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
 
 import StockListItem from "../components/stockListItem";
 
-const products = [
+interface Product {
+	name: string,
+	category: string,
+	price: string,
+	quantity: number,
+	edit?: boolean
+}
+
+const products: Product[] = [
 	{
 		name: "Coca Cola",
 		category: "Boissons",
 		price: "0,50€",
-		quantity: "50",
+		quantity: 50
 	},
 	{
 		name: "Fanta",
 		category: "Boissons",
 		price: "0,50€",
-		quantity: "50",
+		quantity: 50
 	},
 	{
 		name: "Ice Tea",
 		category: "Boissons",
 		price: "0,50€",
-		quantity: "50",
+		quantity: 50
 	},
 	{
 		name: "Eau",
 		category: "Boissons",
 		price: "0,50€",
-		quantity: "50",
+		quantity: 50
 	},
 	{
 		name: "Eau gazeuse",
 		category: "Boissons",
 		price: "0,50€",
-		quantity: "50",
+		quantity: 50
 	},
 	{
 		name: "Sandwich",
 		category: "Manger",
 		price: "2€",
-		quantity: "30",
+		quantity: 30
 	},
 	{
 		name: "Pizza",
 		category: "Manger",
 		price: "2€",
-		quantity: "20",
+		quantity: 20
 	},
 	{
 		name: "Baguettine",
 		category: "Manger",
 		price: "1,50€",
-		quantity: "20",
+		quantity: 20
 	},
 	{
 		name: "Wrap",
 		category: "Manger",
 		price: "1,50€",
-		quantity: "10",
+		quantity: 10
 	},
 	{
 		name: "Donut",
 		category: "Dessert",
 		price: "1€",
-		quantity: "30",
+		quantity: 30
 	},
 ];
 
@@ -86,11 +94,31 @@ const Stock = () => {
 		product.quantity = quantity;
 		setProductsList([...productsTemp]);
 	}
+
+	let toggleEditMode = (productId) => {
+		let productsTemp = productsList
+		let product = productsTemp[productId]
+		product.edit = product.edit == true ? false : true;
+		setProductsList([...productsTemp]);
+
+		if (product.edit == false) {
+			console.log("Save product: " + product.name)
+			//TODO: Do some stuff with API
+		}
+	}
             
 	return (
 	  <div className="flex flex-col">
 		<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
 		  <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+		  <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 pb-5">
+			<label htmlFor="search" className="block text-sm font-medium text-gray-700">Recherche</label>
+			<div className="mt-1 relative flex items-center">
+				<input type="text" name="search" id="search" value={search} onChange={(e) => { setSearch(e.target.value) }} 
+				className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md" />
+			</div>
+		</div>
+
 			<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
 			  <table className="min-w-full divide-y divide-gray-200">
 				<thead className="bg-gray-50">
@@ -131,12 +159,13 @@ const Stock = () => {
 					  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.category}</td>
 					  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{product.price}</td>
 					  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-						  <input className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" 
+						  {product.edit ? <input className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md" 
 						  	onChange={(e)=> {updateProductQuantity(productIdx, e.target.value)}} type="number" value={product.quantity}/>
+						: <span>{product.quantity}</span>}
 					  </td>
 					  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-						<a href="#" className="text-indigo-600 hover:text-indigo-900">
-						  Edit
+						<a onClick={() => {toggleEditMode(productIdx)}} className="text-indigo-600 hover:text-indigo-900">
+						  {product.edit ? "Save" : "Edit"}
 						</a>
 					  </td>
 					</tr>