add add product with back

src/App.tsx

@@ -12,6 +12,7 @@ import Sell from './pages/sell';
 import Login from './pages/login';
 import Stock from './pages/stock';
 import Users from './pages/users';
+import AddProduct from './pages/add_product';
 import Main from './components/layout/main';
 
 export default function App() {
@@ -27,6 +28,7 @@ export default function App() {
                 <Route index element={<Sell />} />
                 <Route path="stock" element={<Stock />} />
                 <Route path="users" element={<Users />} />
+                <Route path="add-product" element={<AddProduct />} />
               </Route>
               <Route path="*" element={<h1>No match !</h1>} />
             </Routes>

src/apis/back.ts

@@ -30,3 +30,57 @@ export async function getItems(): Promise<Product[]> {
 
   return products;
 };
+
+export async function getCategories(): Promise<any[]> {
+  const categories = await axios.get(`${BASE_URL}/category`, {
+    headers: {
+      'Content-Type': 'application/json',
+      'apikey': APIKEY,
+    }
+  }).then(({ data }) => data)
+    .catch(error => {
+      console.error(error);
+      return [];
+    });
+
+  return categories;
+}
+
+export async function addItem(name: string, price: number, priceAdherant: number, stock: number, category_id: any): Promise<any> {
+  // Create the item without stock
+  let item = await axios.post(`${BASE_URL}/item`, {
+    name: name,
+    price: price,
+    subscriber_price: priceAdherant,
+    category: category_id,
+  }, {
+    headers: {
+      'Content-Type': 'application/json',
+      'apikey': APIKEY,
+    }}).then(({ data }) => {
+      console.log(data)
+      return data;
+    })
+    .catch(error => {
+      console.error(error);
+      return null;
+    });
+
+  // Create the stock
+  if (item) {
+    await axios.put(`${BASE_URL}/stock`, {
+      item_id: item.id,
+      quantity: stock,
+    }, {
+      headers: {
+        'Content-Type': 'application/json',
+        'apikey': APIKEY,
+      }}).then(({ data }) => data)
+      .catch(error => {
+        console.error(error);
+        return [];
+      });
+  } else {
+    console.error("Error while creating item");
+  }
+}
\ No newline at end of file

src/components/core/navbar.tsx

@@ -5,7 +5,8 @@ import {
   CurrencyEuroIcon,
   //HomeIcon,
   ShoppingCartIcon,
-  XIcon
+  XIcon,
+  PlusCircleIcon
 } from '@heroicons/react/outline';
 
 import { Link } from 'react-router-dom';
@@ -15,6 +16,7 @@ const navigation = [
   { name: 'Vendre', href: '/dashboard', icon: CurrencyEuroIcon },
   { name: 'Gestion des stocks', href: '/dashboard/stock', icon: ShoppingCartIcon },
   { name: 'Utilisateurs', href: '/dashboard/users', icon: UsersIcon },
+  { name: 'Ajouter un product', href: '/dashboard/add-product', icon: PlusCircleIcon },
 ];
 
 function classNames(...classes: unknown[]) {

src/pages/add_product.tsx

+import { useState, useEffect } from 'react';
+
+import { getCategories, addItem } from '../apis/back';
+
+const AddProduct = () => {
+  const [categories, setCategories] = useState<any[]>([]);
+
+  const [name, setName] = useState("");
+  const [price, setPrice] = useState(0);
+  const [priceAdherant, setPriceAdherant] = useState(0);
+  const [stock, setStock] = useState(0);
+  const [category_id, setCategory] = useState("n/a");
+
+  useEffect(() => {
+    getCategories().then((data) => {
+      setCategories(data);
+    }).catch((_) => {
+      setCategories([]);
+    });
+  }, []);
+
+  function createItem() {
+    if (category_id !== "n/a") {
+      console.log("Creating item: " + name + " " + price + " " + priceAdherant + " " + stock + " " + category_id);
+      addItem(name, price, priceAdherant, stock, category_id).then((data) => {
+        console.log(data);
+  
+        // Reset form data
+        setName("");
+        setPrice(0);
+        setPriceAdherant(0);
+        setStock(0);
+        setCategory("n/a");
+      }).catch((_) => {
+        console.log("Error");
+      });
+    } else {
+      console.log("Please select a category");
+    }
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+    <div className="pt-8">
+      <div className="mb-12">
+        <h3 className="text-3xl leading-6 font-medium text-gray-900">Ajouter un produit</h3>
+      </div>
+      <div className="">
+        <div className="mt-5">
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700">
+            Nom
+          </label>
+          <div className="mt-1">
+            <input
+              type="text"
+              name="name"
+              id="name"
+              onChange={(e) => setName(e.target.value)}
+              value={name}
+              className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+            />
+          </div>
+        </div>
+
+        <div>
+          <p className="mt-10 text-xl">Prix</p>
+          <div className="flex flex-row w-full mt-3">
+            <div className="w-1/2 mr-2">
+              <label htmlFor="price" className="block text-sm font-medium text-gray-700">
+                Prix (normal)
+              </label>
+              <div className="mt-1">
+                <input
+                  type="number"
+                  name="price"
+                  id="price"
+                  onChange={(e) => setPrice(parseFloat(e.target.value))}
+                  value={price}
+                  min="0.5"
+                  placeholder="1.5"
+                  step="0.5"
+                  className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                />
+              </div>
+            </div>
+
+            <div className="w-1/2 ml-2">
+              <label htmlFor="price-adherant" className="block text-sm font-medium text-gray-700">
+                Prix (adhérent)
+              </label>
+              <div className="mt-1">
+                <input
+                  type="number"
+                  name="price-adherant"
+                  id="price-adherant"
+                  onChange={(e) => setPriceAdherant(parseFloat(e.target.value))}
+                  value={priceAdherant}
+                  min="0.5"
+                  placeholder="1.5"
+                  step="0.5"
+                  className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="mt-10 text-xl">Catégorie</p>
+          <div className="flex flex-row w-full mt-3">
+            <div className="w-1/2">
+              <div className="mt-1">
+                <select
+                  id="category"
+                  name="category"
+                  onChange={(e) => setCategory(e.target.value.toString())}
+                  value={category_id}
+                  className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                >
+                  <option value="0">Choisir une catégorie</option>
+                  {categories.map((category) => (
+                    <option key={category.id} value={category.id}>
+                      {category.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p className="mt-10 text-xl">Quantité</p>
+          <div className="flex flex-row w-full mt-3">
+          <div className="w-1/2">
+              <div className="mt-1">
+                <input
+                  type="number"
+                  name="quantity"
+                  id="quantity"
+                  onChange={(e) => setStock(parseInt(e.target.value))}
+                  value={stock}
+                  min="0"
+                  placeholder="1"
+                  step="1"
+                  className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <button type="button" className="mt-10 w-full sm:w-auto bg-indigo-500 text-white py-2 px-4 rounded-md hover:bg-indigo-600" onClick={() => {createItem()}}>
+          Ajouter
+        </button>
+
+      </div>
+    </div>
+    </div>
+  )
+}
+
+export default AddProduct;
\ No newline at end of file