Skip to content
Snippets Groups Projects
Commit f4756a1b authored by Princelle Maxime's avatar Princelle Maxime :gay_pride_flag:
Browse files

:sparkles: update navigation

parent 5f72c00c
1 merge request!6Finalisation du panier
......@@ -23,9 +23,7 @@ export default function App() {
<Route path="login" element={<Login/>} />
<Route path="dashboard" element={<Main />}>
<Route index element={<Sell />} />
<Route path="sell" element={<h1>Sell...</h1>} />
<Route path="stock" element={<Stock />} />
<Route path="settings" element={<h1>Settings...</h1>} />
</Route>
<Route path="*" element={<h1>No match !</h1>} />
</Routes>
......
import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import {
CogIcon,
//CogIcon,
CurrencyEuroIcon,
HomeIcon,
//HomeIcon,
ShoppingCartIcon,
XIcon
} from '@heroicons/react/outline';
......@@ -11,10 +11,10 @@ import {
import { Link } from 'react-router-dom';
const navigation = [
{ name: 'Accueil', href: '/dashboard', icon: HomeIcon },
{ name: 'Vendre', href: '/dashboard/sell', icon: CurrencyEuroIcon },
// { name: 'Accueil', href: '/dashboard', icon: HomeIcon },
{ name: 'Vendre', href: '/dashboard', icon: CurrencyEuroIcon },
{ name: 'Gestion des stocks', href: '/dashboard/stock', icon: ShoppingCartIcon },
{ name: 'Réglages', href: '/dashboard/settings', icon: CogIcon },
// { name: 'Réglages', href: '/dashboard/settings', icon: CogIcon },
];
function classNames(...classes: unknown[]) {
......
import {ShoppingCartIcon} from '@heroicons/react/outline';
import {useState} from 'react';
const StockListItem = ({ product }) => {
let [stock, setStock] = useState(product.quantity);
return (
<li className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200">
<div className="w-full flex items-center justify-between p-6 space-x-6">
<div className="flex-1 truncate">
<div className="flex items-center space-x-3">
<h3 className="text-gray-900 text-sm font-medium truncate">{product.name}</h3>
<input type="text" name="stock" id="stock" value={stock} style={{width: "60px"}} onChange={(e) => { setStock(e.target.value) }} className="flex-shrink-0 inline-block px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full"/>
</div>
<p className="mt-1 text-gray-500 text-sm truncate">{product.price}</p>
</div>
</div>
<div>
<div className="-mt-px flex divide-x divide-gray-200">
<div className="-ml-px w-0 flex-1 flex">
<a
href='/'
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
>
<ShoppingCartIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Ajouter</span>
</a>
</div>
</div>
</div>
</li>
);
};
export default StockListItem;
\ No newline at end of file
import React, { useState, useEffect } from 'react';
import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
import StockListItem from "../components/stockListItem";
interface Product {
name: string,
category: string,
......@@ -98,10 +96,10 @@ const Stock = () => {
let toggleEditMode = (productId) => {
let productsTemp = productsList
let product = productsTemp[productId]
product.edit = product.edit == true ? false : true;
product.edit = product.edit === true ? false : true;
setProductsList([...productsTemp]);
if (product.edit == false) {
if (product.edit === false) {
console.log("Save product: " + product.name)
//TODO: Do some stuff with API
}
......@@ -119,6 +117,22 @@ const Stock = () => {
</div>
</div>
{productsList.length === 0 ?
<div className="text-center w-full mt-10">
<EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400" />
<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun produit trouvé !</h3>
<p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p>
<div className="mt-6">
<button
type="button"
onClick={() => setSearch("")}
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<CollectionIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Afficher tout
</button>
</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">
......@@ -164,15 +178,15 @@ const Stock = () => {
: <span>{product.quantity}</span>}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a onClick={() => {toggleEditMode(productIdx)}} className="text-indigo-600 hover:text-indigo-900">
{product.edit ? "Save" : "Edit"}
</a>
<button onClick={() => {toggleEditMode(productIdx)}} type="button" className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{product.edit ? "Save" : "Edit"}
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>}
</div>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment