Skip to content
Snippets Groups Projects
Commit 0751f24b authored by Hugo Brua's avatar Hugo Brua
Browse files

:sparkles: add raw stock page

parent fa1f82b5
Branches
2 merge requests!6Finalisation du panier,!5Stock
Hide whitespace changes
Inline Side-by-side
src/App.tsx
+ 2
− 1
View file @ 0751f24b
......@@ -8,6 +8,7 @@ import {
import Sell from './pages/sell';
import Login from './pages/login';
import Stock from './pages/stock';
import Main from './components/layout/main';
import { AuthProvider } from './auth/AuthProvider';
......@@ -23,7 +24,7 @@ export default function App() {
<Route path="dashboard" element={<Main />}>
<Route index element={<Sell />} />
<Route path="sell" element={<h1>Sell...</h1>} />
<Route path="stock" element={<h1>Stock...</h1>} />
<Route path="stock" element={<Stock />} />
<Route path="settings" element={<h1>Settings...</h1>} />
</Route>
<Route path="*" element={<h1>No match !</h1>} />
......
src/components/stockListItem.tsx 0 → 100644
+ 35
− 0
View file @ 0751f24b
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
src/pages/stock.tsx 0 → 100644
+ 192
− 0
View file @ 0751f24b
import React, { useState, useEffect } from 'react';
import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
import StockListItem from "../components/stockListItem";
const products = [
{
name: "Coca Cola",
category: "Boissons",
price: "0,50€",
quantity: "50",
},
{
name: "Fanta",
category: "Boissons",
price: "0,50€",
quantity: "50",
},
{
name: "Ice Tea",
category: "Boissons",
price: "0,50€",
quantity: "50",
},
{
name: "Eau",
category: "Boissons",
price: "0,50€",
quantity: "50",
},
{
name: "Eau gazeuse",
category: "Boissons",
price: "0,50€",
quantity: "50",
},
{
name: "Sandwich",
category: "Manger",
price: "2€",
quantity: "30",
},
{
name: "Pizza",
category: "Manger",
price: "2€",
quantity: "20",
},
{
name: "Baguettine",
category: "Manger",
price: "1,50€",
quantity: "20",
},
{
name: "Wrap",
category: "Manger",
price: "1,50€",
quantity: "10",
},
{
name: "Donut",
category: "Dessert",
price: "1€",
quantity: "30",
},
];
const Stock = () => {
let [search, setSearch] = useState("");
let [productsList, setProductsList] = useState(products);
useEffect(() => {
// Filter products by name with the search term
setProductsList(products.filter(product => {
return product.name.toLowerCase().includes(search.toLowerCase());
}))
}, [search]);
/*<!-- This example requires Tailwind CSS v2.0+ -->
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Title
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Email
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Role
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody>
<!-- Odd row -->
<tr class="bg-white">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Jane Cooper
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Regional Paradigm Technician
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
jane.cooper@example.com
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Admin
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<!-- Even row -->
<tr class="bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
Cody Fisher
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Product Directives Officer
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
cody.fisher@example.com
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Owner
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<!-- More people... -->
</tbody>
</table>
</div>
</div>
</div>
</div>
*/
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div className="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>
{productsList.length > 0
? [...Array.from(new Set(productsList.map(item => item.category)))].map((category) => (
<div key={category}>
<h1 className="text-lg font-medium py-2 pt-4">{category}</h1>
<ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
{productsList.filter((p) => p.category === category).map((product) => (
<StockListItem product={product} key={product.name} />
))}
</ul>
</div>))
: <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>
);
};
export default Stock;
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