diff --git a/.drone.yml b/.drone.yml
index 97f0696dabe5af084f878704cd93f2ac64fdf57d..9d5a0ecd661dfc5ea41938771bd4c62381507753 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -51,7 +51,9 @@ steps:
script:
- cd /app/uni/erp/rms
- echo -e "REACT_APP_BACK_API_KEY=theapikey" > .env
- - echo -e "\nREACT_APP_BACK_URL=back.erp.uni.princelle.org" >> .env
+ - echo -e "REACT_APP_BACK_URL=back.erp.uni.princelle.org" >> .env
+ - echo -e "\nREACT_APP_MONEY_URL=money.erp.uni.princelle.org" >> .env
+ - echo -e "\nREACT_APP_STUDENT_URL=student.erp.uni.princelle.org" >> .env
- echo -e "\nAPP_PORT=2002" >> .env
- name: build
diff --git a/.env.model b/.env.model
new file mode 100644
index 0000000000000000000000000000000000000000..7b2a38626940bc7708a1188b151b4d9d05554b6b
--- /dev/null
+++ b/.env.model
@@ -0,0 +1,5 @@
+REACT_APP_BACK_URL="back.erp.uni.princelle.org"
+REACT_APP_MONEY_URL="money.erp.uni.princelle.org"
+REACT_APP_STUDENT_URL="student.erp.uni.princelle.org"
+REACT_APP_BACK_API_KEY="theapikey"
+APP_PORT=8889
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 272b0109693ef1945c14bb9a8c23665c5af236d0..a7c8d550039b2b1b6cce8041e3e3ee5ff5fcfbc4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,5 @@ yarn-debug.log*
yarn-error.log*
.idea
-.vscode
\ No newline at end of file
+.vscode
+.env
\ No newline at end of file
diff --git a/README.md b/README.md
index 971b75585554652a8938b5d54ced63663a3c17cb..2f13fe2d9a25648d82d804b3e0a3082b5a23cf27 100644
--- a/README.md
+++ b/README.md
@@ -1,50 +1,57 @@
-# Template repository for React (TypeScript) with Tailwind
+Projet ERP RMS <img src="./public/logo.png" width="60" height="90" />
+==============
[](https://drone.princelle.org/erp-sil/rms)
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+Ce projet est une interface, mise a disposition pour l'administration de l'[AIUS](https://fr-fr.facebook.com/aius.strasbourg/). Elle materialise une caisse enregistreuse dématerialisée permetant la gestion des achat et du stock.
-Tailwind was installed with the method provided in the [documentation on the official website](https://tailwindcss.com/docs/guides/create-react-app).
+### Table des matières
+1. [Installation du module](#module-installation)
+2. [Dépendences](#dependencies)
+6. [Configuration](#configuration)
+7. [Fonctionnalité](#module-operating)
-## Available Scripts
+### Installation du module <a name="module-installation"></a>
-In the project directory, you can run:
+Dans le dossier \RMS, vous pouvez lancer la commande :
+#### `docker-compose up`
-### `yarn start`
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+### Dépendences <a name="dependencies"></a>
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+Ce projet est crée avec [Create React App](https://fr.reactjs.org/) et [Tailwind](https://tailwindcss.com/).
-### `yarn test`
+### Confirguration <a name="configuration"></a>
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Rajoutez un fichier `.env` Ã la racine du dossier \RMS, suivant ce model:
-### `yarn build`
+```
+REACT_APP_BACK_URL=""
+REACT_APP_MONEY_URL=""
+REACT_APP_STUDENT_URL=""
+REACT_APP_BACK_API_KEY=""
+APP_PORT=
+```
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Fonctionnalité <a name="module-operating"></a>
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+Cette application se décompose en trois espaces:
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+#### Vente
-### `yarn eject`
+L'espace vente affiche la liste des produits disponibles.
+Il permet la mise en pannier de produits et de les facturer.
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+<img src="./public/vente.png" width="750" height="300" />
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+#### Gestion des stocks
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+L'espace de Gestion des stocks permet de redéfinir la quantitité disponible de chaque produit.
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+<img src="./public/stock.png" width="750" height="300" />
-## Learn More
+#### Utilisateurs
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+L'espace Utilisateur affiche la liste des utilisateurs en affichant leurs caractéristiques notament s'ils sont adhérant.
-To learn React, check out the [React documentation](https://reactjs.org/).
+<img src="./public/utilisateurs.png" width="750" height="200" />
\ No newline at end of file
diff --git a/package.json b/package.json
index 559408c04a5fcf9b667aca89d1efa2bf3875e7ff..db0c257275887328be5344afee0ed8efbd981d9f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"@types/react": "^17.0.24",
"@types/react-dom": "^17.0.9",
"autoprefixer": "^9",
+ "axios": "^0.24.0",
"postcss": "^7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
diff --git a/public/favicon.ico b/public/favicon.ico
index a11777cc471a4344702741ab1c8a588998b1311a..c25dcb57b8a63be0a94b644d31e8d96d76baedd5 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index aa069f27cbd9d53394428171c3989fd03db73c76..f842f3a0c6e4ce0f713979ec3c3616e39423371e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,9 +7,9 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
- content="Web site created using create-react-app"
+ content="RMS app for AIUS"
/>
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>React App</title>
+ <title>AIUS • RMS</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddd3a4465d78b2403b180dffa1f73578d1480b72
Binary files /dev/null and b/public/logo.png differ
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6545bc15971f8f63fba70e4013df88a664..0000000000000000000000000000000000000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77ac21bb2ef88a6992b2b73ad93daaca92..e277df926eea0b8a3b1df9f6062b71a45c18d3f2 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -8,12 +8,12 @@
"type": "image/x-icon"
},
{
- "src": "logo192.png",
+ "src": "logo.png",
"type": "image/png",
"sizes": "192x192"
},
{
- "src": "logo512.png",
+ "src": "logo.png",
"type": "image/png",
"sizes": "512x512"
}
diff --git a/public/stock.png b/public/stock.png
new file mode 100644
index 0000000000000000000000000000000000000000..4492f3d43b1a134c69b36208ab06c094368e056a
Binary files /dev/null and b/public/stock.png differ
diff --git a/public/utilisateurs.png b/public/utilisateurs.png
new file mode 100644
index 0000000000000000000000000000000000000000..4fc9b4b94b7591c51372a605896531b0e5a51290
Binary files /dev/null and b/public/utilisateurs.png differ
diff --git a/public/vente.png b/public/vente.png
new file mode 100644
index 0000000000000000000000000000000000000000..954343b7a0b81ac0e52d44bbac250433dafac28a
Binary files /dev/null and b/public/vente.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 55d36f12f827cdd4b9cba80125322aeda6069250..228d67605a4500c366e3dda0857dc353757658e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,38 +1,40 @@
import {
BrowserRouter as Router,
Routes,
- Route
+ Route,
+ Navigate
} from "react-router-dom";
+import { AuthProvider } from './auth/AuthProvider';
+import { CartStore } from './cart/CartStore';
+
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';
-import { AuthProvider } from './auth/AuthProvider';
-
-import { CartStore } from './cart/CartStore';
-
export default function App() {
return (
<CartStore>
- <Router>
- <div>
- <AuthProvider>
- <Routes>
- <Route index element={<h1>Welcome!</h1>} />
- <Route path="login" element={<Login/>} />
- <Route path="dashboard" element={<Main />}>
- <Route index element={<Sell />} />
- <Route path="stock" element={<Stock />} />
- <Route path="users" element={<Users />} />
- </Route>
- <Route path="*" element={<h1>No match !</h1>} />
- </Routes>
- </AuthProvider>
- </div>
- </Router>
+ <Router>
+ <div>
+ <AuthProvider>
+ <Routes>
+ <Route index element={<Navigate to="/dashboard" />} />
+ <Route path="login" element={<Login />} />
+ <Route path="dashboard" element={<Main />}>
+ <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>
+ </AuthProvider>
+ </div>
+ </Router>
</CartStore>
);
-}
+};
diff --git a/src/apis/back.ts b/src/apis/back.ts
new file mode 100644
index 0000000000000000000000000000000000000000..862b26df189982a836c8527db19f828a0d7132a0
--- /dev/null
+++ b/src/apis/back.ts
@@ -0,0 +1,108 @@
+import axios from 'axios';
+
+import { Product } from '../cart/CartTypes';
+import { mockedStocks } from './mocks';
+
+const BASE_URL = "https://" + process.env.REACT_APP_BACK_URL + "/api/v1";
+const APIKEY = process.env.REACT_APP_BACK_API_KEY || 'theapikey'
+
+// Fetch items from API
+export async function getItems(): Promise<Product[]> {
+ // Fetch stocks data
+ const stocks: any[] = await axios.get(`${BASE_URL}/stock`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'apikey': APIKEY,
+ }
+ }).then(({ data }) => data)
+ .catch(error => {
+ console.error(error);
+ return mockedStocks;
+ });
+
+ // Format products data
+ const products = stocks.map(stock => new Product({
+ id: stock.item.id,
+ name: stock.item.name,
+ category: stock.item.category.name,
+ price: stock.item.price,
+ subscriberPrice: stock.item.subscriber_price,
+ stock: stock.quantity
+ }));
+
+ // console.table(products);
+
+ return products;
+}
+
+export async function updateStock(itemId: number, stock: number): Promise<boolean> {
+ const response = await axios.put(`${BASE_URL}/stock`, {
+ item_id: itemId,
+ quantity: stock
+ }, {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'apikey': APIKEY,
+ }
+ }).then(({ status }) => status === 200)
+ .catch(error => {
+ console.error(error);
+ return false;
+ });
+
+ return response;
+};
+
+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");
+ }
+}
diff --git a/src/apis/mocks.ts b/src/apis/mocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..566880dfaf94bb6f3cc22a3bbf43e92be91c7289
--- /dev/null
+++ b/src/apis/mocks.ts
@@ -0,0 +1,102 @@
+export const mockedStocks: any[] = [
+ {
+ quantity: 36,
+ item: {
+ name: "Coca-Cola",
+ price: 0.5,
+ subscriber_price: 0.5,
+ category: {
+ name: "Boissons"
+ }
+ }
+ },
+ {
+ quantity: 24,
+ item: {
+ name: "Fanta",
+ price: 0.5,
+ subscriber_price: 0.5,
+ category: {
+ name: "Boissons"
+ }
+ }
+ },
+ {
+ quantity: 50,
+ item: {
+ name: "Ice-tea",
+ price: 0.5,
+ subscriber_price: 0.5,
+ category: {
+ name: "Boissons"
+ }
+ }
+ },
+ {
+ quantity: 12,
+ item: {
+ name: "Bueno",
+ price: 0.6,
+ subscriber_price: 0.6,
+ category: {
+ name: "Snacks"
+ }
+ }
+ },
+ {
+ quantity: 31,
+ item: {
+ name: "Chips",
+ price: 0.3,
+ subscriber_price: 0.3,
+ category: {
+ name: "Snacks"
+ }
+ }
+ },
+ {
+ quantity: 12,
+ item: {
+ name: "Twix",
+ price: 0.5,
+ subscriber_price: 0.5,
+ category: {
+ name: "Snacks"
+ }
+ }
+ },
+ {
+ quantity: 1000,
+ item: {
+ name: "Adhésion",
+ price: 4,
+ subscriber_price: 0,
+ category: {
+ name: "Divers"
+ }
+ }
+ },
+];
+
+export const mockedUsers: any[] = [
+ {
+ "student_number": 12345678,
+ "username": "12345678",
+ "lastname": "Princelle",
+ "firstname": "Maxime",
+ "email": "princelle@etu.unistra.fr",
+ "date_subscription": null,
+ "picture": "https://cdn.pixabay.com/photo/2018/09/06/18/26/person-3658927_960_720.png",
+ "date_birth": "1999-06-05",
+ },
+ {
+ "student_number": 87654321,
+ "username": "Test User",
+ "lastname": "Test",
+ "firstname": "User",
+ "email": "test@test.test",
+ "date_subscription": "2021-01-01",
+ "picture": "https://cdn.pixabay.com/photo/2018/09/06/18/26/person-3658927_960_720.png",
+ "date_birth": "2000-01-01",
+ },
+];
diff --git a/src/apis/money.ts b/src/apis/money.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fae3ef252a0c92a60e12da99882ccad8a0b48723
--- /dev/null
+++ b/src/apis/money.ts
@@ -0,0 +1,44 @@
+import axios from 'axios';
+
+const BASE_URL = "https://" + process.env.REACT_APP_MONEY_URL;
+
+// Fetch transactions from API
+export async function getTransactions(studentNumber: string): Promise<any> {
+ // Fetch transactions data
+ const transactionsData: any[] = await axios.get(`${BASE_URL}/transactions/get/${studentNumber}`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ }
+ }).then(({ data }) => data)
+ .catch(error => {
+ console.error(error);
+ return [];
+ });
+ console.log(transactionsData);
+
+ // TODO: Format transaction data
+
+ return transactionsData;
+}
+
+export async function sendTransaction(studentNumber: string, userName: string, price: number): Promise<boolean> {
+ return await axios.post(`${BASE_URL}/payments/add/mastercard`, {
+ student_number: parseInt(studentNumber),
+ user_name: userName,
+ payment_method: "TODO",
+ payment_name: "mastercard",
+ identifier: "123454678",
+ amount: price,
+ }, {
+ headers: {
+ 'Content-Type': 'application/json',
+ }
+ }).then((res) => {
+ console.log(res);
+ return res.status === 200;
+ })
+ .catch(error => {
+ console.error(error);
+ return false;
+ });
+}
diff --git a/src/apis/student.ts b/src/apis/student.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a48163b782f2be9486c228db221d2424de0c0ff
--- /dev/null
+++ b/src/apis/student.ts
@@ -0,0 +1,74 @@
+import axios from 'axios';
+
+import { mockedUsers } from './mocks';
+
+export class User {
+ nom: string;
+ prenom: string;
+ email: string;
+ studentNumber: string;
+ adherant: boolean;
+ picture?: string;
+
+ constructor(nom, prenom, email, studentNumber, adherant, picture?) {
+ this.nom = nom;
+ this.prenom = prenom;
+ this.email = email;
+ this.studentNumber = studentNumber;
+ this.adherant = adherant;
+ this.picture = picture;
+ }
+};
+
+const BASE_URL = "https://" + process.env.REACT_APP_STUDENT_URL;
+
+// Fetch users from API
+export async function getUsers(): Promise<User[]> {
+ // Fetch users data
+ const usersData: any[] = await axios.get(`${BASE_URL}/api/etudiants`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ }
+ }).then(({ data }) => data)
+ .catch(error => {
+ console.error(error);
+ return mockedUsers;
+ });
+
+ // Format users data
+ const users = usersData.map(user => new User(
+ user.lastname,
+ user.firstname,
+ user.email,
+ user.student_number,
+ validateSubscriptionDate(user.date_subscription),
+ user.picture
+ ));
+
+ return users;
+};
+
+export async function setAdhesion(studentNumber: string) : Promise<boolean> {
+ // Set adhesion for given user
+ const success = await axios.post(`${BASE_URL}/api/pay_adhesion`, {
+ 'student_number': studentNumber ?? '12345678'
+ }, {
+ headers: {
+ 'Content-Type': 'application/json',
+ }
+ }).then(({ status }) => status === 200)
+ .catch(error => {
+ console.error(error);
+ return false;
+ });
+
+ return success;
+}
+
+function validateSubscriptionDate(dateStr: string): boolean {
+ const YEAR_IN_MS = 31536000000;
+ const date = Date.parse(dateStr) ?? Date.parse('01 Jan 1970 00:00:00 GMT');
+ const now = Date.now();
+ // Valid subscription if it was made less than a year ago
+ return (now - date) < YEAR_IN_MS;
+}
diff --git a/src/auth/AuthContext.ts b/src/auth/AuthContext.ts
index f8d7e2bb5cd27487ef31d584b804538985cd490c..9b92deb343cf5542dd2ed7dcf4f9e9c51c9e25a1 100644
--- a/src/auth/AuthContext.ts
+++ b/src/auth/AuthContext.ts
@@ -1,9 +1,9 @@
import React from 'react';
interface AuthContextType {
- user: any;
- signin: (user: string, callback: VoidFunction) => void;
- signout: (callback: VoidFunction) => void;
+ user: any;
+ signin: (user: string, callback: VoidFunction) => void;
+ signout: (callback: VoidFunction) => void;
};
const AuthContext = React.createContext<AuthContextType>(null!);
diff --git a/src/auth/AuthProvider.tsx b/src/auth/AuthProvider.tsx
index 7c1cdddb04b461cb1e6b39874463c9f4243bc2bc..25e64db3ce62697a362751c314ecba02cc7786e0 100644
--- a/src/auth/AuthProvider.tsx
+++ b/src/auth/AuthProvider.tsx
@@ -4,39 +4,43 @@ import { AuthContext } from './AuthContext';
import { bake_cookie, delete_cookie } from 'sfcookies';
const fakeAuthProvider = {
- isAuthenticated: false,
- signin(callback: VoidFunction) {
- fakeAuthProvider.isAuthenticated = true;
- setTimeout(callback, 100); // fake async
- },
- signout(callback: VoidFunction) {
- fakeAuthProvider.isAuthenticated = false;
- setTimeout(callback, 100);
- },
+ isAuthenticated: false,
+ signin(callback: VoidFunction) {
+ fakeAuthProvider.isAuthenticated = true;
+ setTimeout(callback, 100); // fake async
+ },
+ signout(callback: VoidFunction) {
+ fakeAuthProvider.isAuthenticated = false;
+ setTimeout(callback, 100);
+ },
};
function AuthProvider({ children }: { children: React.ReactNode }) {
- let [user, setUser] = React.useState<any>(null);
-
- let signin = (newUser: string, callback: VoidFunction) => {
- return fakeAuthProvider.signin(() => {
- setUser(newUser);
- bake_cookie('user', newUser);
- callback();
- });
- };
-
- let signout = (callback: VoidFunction) => {
- return fakeAuthProvider.signout(() => {
- setUser(null);
- delete_cookie('user');
- callback();
- });
- };
-
- let value = { user, signin, signout };
-
- return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+ let [user, setUser] = React.useState<any>(null);
+
+ let signin = (newUser: string, callback: VoidFunction) => {
+ return fakeAuthProvider.signin(() => {
+ setUser(newUser);
+ bake_cookie('user', newUser);
+ callback();
+ });
+ };
+
+ let signout = (callback: VoidFunction) => {
+ return fakeAuthProvider.signout(() => {
+ setUser(null);
+ delete_cookie('user');
+
+ // Refresh browser page to auto-redirect to login page
+ window.location.reload();
+
+ callback();
+ });
+ };
+
+ let value = { user, signin, signout };
+
+ return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
export { AuthProvider };
\ No newline at end of file
diff --git a/src/auth/useAuth.ts b/src/auth/useAuth.ts
index 49ecb7f2ee7dbe3ae8ea7809ca89ebeb618639ad..6332e40050b6b2312bc9965911b2add15b0eaef6 100644
--- a/src/auth/useAuth.ts
+++ b/src/auth/useAuth.ts
@@ -4,12 +4,12 @@ import { AuthContext } from './AuthContext';
import { read_cookie } from 'sfcookies';
function useAuth() {
- let auth = React.useContext(AuthContext);
+ let auth = React.useContext(AuthContext);
- if(!auth.user && read_cookie('user').length !== 0)
- auth.user = read_cookie('user');
+ if(!auth.user && read_cookie('user').length !== 0)
+ auth.user = read_cookie('user');
- return auth;
+ return auth;
}
export { useAuth };
\ No newline at end of file
diff --git a/src/cart/CartActions.ts b/src/cart/CartActions.ts
index 528f1f71119965c07f15a8c1c7c576df033c0cb5..1ef04b724c3aeb2b8ded9b002a9a68192d6f4906 100644
--- a/src/cart/CartActions.ts
+++ b/src/cart/CartActions.ts
@@ -2,58 +2,58 @@ import { Dispatch } from 'react';
import { Product, ActionType } from './CartTypes';
export function addToCart(cart: Product[], dispatch: Dispatch<ActionType>, product: Product): Product[] {
- let newCart: Product[] = cart;
+ let newCart: Product[] = cart;
- // Check if product already exists in cart, then update quantity
- const existingProduct = newCart.find(p => p.name === product.name);
+ // Check if product already exists in cart, then update quantity
+ const existingProduct = newCart.find(p => p.name === product.name);
- if (existingProduct) {
- existingProduct.quantity = existingProduct.quantity ? existingProduct.quantity + 1 : 1;
- existingProduct.stockPrice = existingProduct.price * existingProduct.quantity;
- return setCart(newCart, dispatch);
- }
+ if (existingProduct) {
+ existingProduct.quantity = existingProduct.quantity ? existingProduct.quantity + 1 : 1;
+ existingProduct.stockPrice = existingProduct.price * existingProduct.quantity;
+ return setCart(newCart, dispatch);
+ }
- // If not, add product to cart
- return setCart([...cart, { ...product, quantity: 1, stockPrice: product.price}], dispatch);
-}
+ // If not, add product to cart
+ return setCart([...cart, { ...product, quantity: 1, stockPrice: product.price}], dispatch);
+};
export function removeFromCart(cart: Product[], dispatch: Dispatch<ActionType>, product: Product): Product[] {
- let newCart: Product[] = cart;
-
- // Check if product already exists in cart, then update quantity
- const existingProduct = newCart.find(p => p.name === product.name);
- if (existingProduct) {
- existingProduct.quantity = existingProduct.quantity ? existingProduct.quantity - 1 : 0;
- existingProduct.stockPrice = existingProduct.price * existingProduct.quantity;
- // If quantity is 0, remove product from cart
- if (existingProduct.quantity === 0) {
- return setCart(newCart.filter(p => p.name !== product.name), dispatch);
- }
- return setCart(newCart, dispatch);
+ let newCart: Product[] = cart;
+
+ // Check if product already exists in cart, then update quantity
+ const existingProduct = newCart.find(p => p.name === product.name);
+ if (existingProduct) {
+ existingProduct.quantity = existingProduct.quantity ? existingProduct.quantity - 1 : 0;
+ existingProduct.stockPrice = existingProduct.price * existingProduct.quantity;
+ // If quantity is 0, remove product from cart
+ if (existingProduct.quantity === 0) {
+ return setCart(newCart.filter(p => p.name !== product.name), dispatch);
}
+ return setCart(newCart, dispatch);
+ }
- return setCart(cart, dispatch);
-}
+ return setCart(cart, dispatch);
+};
export function updateProductQuantity(cart: Product[], dispatch: Dispatch<ActionType>, product: Product, quantity: number): Product[] {
- let newCart: Product[] = cart;
-
- // Check if product already exists in cart, then update quantity
- const existingProduct = newCart.find(p => p.name === product.name);
- if (existingProduct) {
- existingProduct.quantity = quantity;
- existingProduct.stockPrice = existingProduct.price * quantity;
-
- if (existingProduct.quantity === 0) {
- return setCart(newCart.filter(p => p.name !== product.name), dispatch);
- }
- return setCart(newCart, dispatch);
- }
+ let newCart: Product[] = cart;
+ // Check if product already exists in cart, then update quantity
+ const existingProduct = newCart.find(p => p.name === product.name);
+ if (existingProduct) {
+ existingProduct.quantity = quantity;
+ existingProduct.stockPrice = existingProduct.price * quantity;
+
+ if (existingProduct.quantity === 0) {
+ return setCart(newCart.filter(p => p.name !== product.name), dispatch);
+ }
return setCart(newCart, dispatch);
-}
+ }
+
+ return setCart(newCart, dispatch);
+};
function setCart(newCart: Product[], dispatch: Dispatch<ActionType>): Product[]{
- dispatch({ type: 'SET_CART', payload: newCart });
- return newCart;
+ dispatch({ type: 'SET_CART', payload: newCart });
+ return newCart;
}
\ No newline at end of file
diff --git a/src/cart/CartReducer.ts b/src/cart/CartReducer.ts
index 5ddffeb87d76c66a09c737e1390bc32ee30aaae3..a148289734fb785246f43ece19c853424d3f5da6 100644
--- a/src/cart/CartReducer.ts
+++ b/src/cart/CartReducer.ts
@@ -2,24 +2,24 @@ import { ActionType, CartType } from "./CartTypes";
import { initialState } from "./CartStore";
const Reducer = (state: CartType, action: ActionType): any => {
- switch (action.type) {
- case "SET_CART":
- //console.log("SET_CART");
- return {
- ...state,
- cart: action.payload,
- };
- case "TOGGLE_CART":
- //console.log("TOGGLE_CART");
- return {
- ...state,
- showCart: !state.showCart,
- };
- case "PURGE_STATE":
- return initialState;
- default:
- return state;
- }
+ switch (action.type) {
+ case "SET_CART":
+ //console.log("SET_CART");
+ return {
+ ...state,
+ cart: action.payload,
+ };
+ case "TOGGLE_CART":
+ //console.log("TOGGLE_CART");
+ return {
+ ...state,
+ showCart: !state.showCart,
+ };
+ case "PURGE_STATE":
+ return initialState;
+ default:
+ return state;
+ }
};
export default Reducer;
diff --git a/src/cart/CartStore.tsx b/src/cart/CartStore.tsx
index d147932d3c616120143b6f81678c76c13bfab6c1..a667a121c2012779c79bebd6c11240eab6e526b0 100644
--- a/src/cart/CartStore.tsx
+++ b/src/cart/CartStore.tsx
@@ -1,10 +1,10 @@
import React, {
- createContext,
- ReactElement,
- ReactNode,
- useEffect,
- useReducer,
- useRef,
+ createContext,
+ ReactElement,
+ ReactNode,
+ useEffect,
+ useReducer,
+ useRef,
} from "react";
import Reducer from "./CartReducer";
import { ContextType, CartType } from "./CartTypes";
@@ -14,79 +14,79 @@ import { ContextType, CartType } from "./CartTypes";
* and persistent saves to sessionStorage/localStorage
**/
export function CartStore({
- children,
+ children,
}: {
- children: ReactNode;
+ children: ReactNode;
}): ReactElement {
- const [cartState, dispatch] = useReducer(Reducer, initializeState());
- const initialRenderCartState = useRef(true);
- const initialRenderPersistenceType = useRef(true);
+ const [cartState, dispatch] = useReducer(Reducer, initializeState());
+ const initialRenderCartState = useRef(true);
+ const initialRenderPersistenceType = useRef(true);
- useEffect(() => {
- /*
- populate either sessionStorage or localStorage
- data from cartState based on persistenceType
+ useEffect(() => {
+ /*
+ populate either sessionStorage or localStorage
+ data from cartState based on persistenceType
*/
- if (initialRenderCartState.current) {
- initialRenderCartState.current = false;
- return;
- }
- const getPersistenceType = cartState.persistenceType;
- if (getPersistenceType === "sessionStorage") {
- sessionStorage.setItem("cartState", JSON.stringify(cartState));
- } else if (getPersistenceType === "localStorage") {
- localStorage.setItem("cartState", JSON.stringify(cartState));
- }
- }, [cartState]);
+ if (initialRenderCartState.current) {
+ initialRenderCartState.current = false;
+ return;
+ }
+ const getPersistenceType = cartState.persistenceType;
+ if (getPersistenceType === "sessionStorage") {
+ sessionStorage.setItem("cartState", JSON.stringify(cartState));
+ } else if (getPersistenceType === "localStorage") {
+ localStorage.setItem("cartState", JSON.stringify(cartState));
+ }
+ }, [cartState]);
- useEffect(() => {
- /*
- purge sessionStorage or localStorage when either is selected
+ useEffect(() => {
+ /*
+ purge sessionStorage or localStorage when either is selected
*/
- if (initialRenderPersistenceType.current) {
- initialRenderPersistenceType.current = false;
- return;
- }
- const getPersistenceType = cartState.persistenceType;
- if (getPersistenceType === "sessionStorage") {
- localStorage.removeItem("cartState");
- } else if (getPersistenceType === "localStorage") {
- sessionStorage.removeItem("cartState");
- }
- }, [cartState.persistenceType]);
+ if (initialRenderPersistenceType.current) {
+ initialRenderPersistenceType.current = false;
+ return;
+ }
+ const getPersistenceType = cartState.persistenceType;
+ if (getPersistenceType === "sessionStorage") {
+ localStorage.removeItem("cartState");
+ } else if (getPersistenceType === "localStorage") {
+ sessionStorage.removeItem("cartState");
+ }
+ }, [cartState.persistenceType]);
- return (
- <cartContext.Provider value={{ cartState, dispatch }}>
- {children}
- </cartContext.Provider>
- );
-}
+ return (
+ <cartContext.Provider value={{ cartState, dispatch }}>
+ {children}
+ </cartContext.Provider>
+ );
+};
export const cartContext = createContext({} as ContextType);
export const initialState: CartType = {
- cart: [],
+ cart: [],
showCart: false,
persistenceType: "sessionStorage",
- totalPrice: 0
+ totalPrice: 0
};
function initializeState() {
- /*
- the order in which the data is compared is very important;
- first try to populate the state from Storage if not return initialState
+ /*
+ the order in which the data is compared is very important;
+ first try to populate the state from Storage if not return initialState
*/
- if (typeof Storage !== "undefined") {
- } else {
- throw new Error("You need to enable Storage to run this app.");
- }
+ if (typeof Storage !== "undefined") {
+ } else {
+ throw new Error("You need to enable Storage to run this app.");
+ }
- const fromLocalStorage = JSON.parse(
- localStorage.getItem("cartState") as string
- );
- const fromSessionStorage = JSON.parse(
- sessionStorage.getItem("cartState") as string
- );
- return fromSessionStorage || fromLocalStorage || initialState;
+ const fromLocalStorage = JSON.parse(
+ localStorage.getItem("cartState") as string
+ );
+ const fromSessionStorage = JSON.parse(
+ sessionStorage.getItem("cartState") as string
+ );
+ return fromSessionStorage || fromLocalStorage || initialState;
}
diff --git a/src/cart/CartTypes.ts b/src/cart/CartTypes.ts
index c4dec14761697cc34b140d7c13a8e758d0270e4a..c154c65393facc6cf9435554274e0fff00becf12 100644
--- a/src/cart/CartTypes.ts
+++ b/src/cart/CartTypes.ts
@@ -1,31 +1,34 @@
import { Dispatch } from "react";
export class Product {
- public name: string;
- public category: string;
- public price: number;
- public stock: number;
- public quantity?: number;
- public stockPrice?: number;
+ public id: number;
+ public name: string;
+ public category: string;
+ public price: number;
+ public subscriberPrice?: number;
+ public stock: number;
+ public quantity?: number;
+ public stockPrice?: number;
+ public edit?: boolean;
- constructor(params: Product) {
- Object.assign(this, params);
- }
-}
+ constructor(params: Product) {
+ Object.assign(this, params);
+ }
+};
export type CartType = {
- cart: Product[];
- showCart: boolean;
- persistenceType: string;
- totalPrice: number;
-}
+ cart: Product[];
+ showCart: boolean;
+ persistenceType: string;
+ totalPrice: number;
+};
export type ActionType = {
- type: string;
- payload?: any;
+ type: string;
+ payload?: any;
};
export type ContextType = {
- cartState: CartType;
- dispatch: Dispatch<ActionType>;
+ cartState: CartType;
+ dispatch: Dispatch<ActionType>;
};
\ No newline at end of file
diff --git a/src/components/core/navbar.tsx b/src/components/core/navbar.tsx
index 6fe80545bcb3675df03e723e93d9dd100295f203..692d1dbe2d8bb5069138facaad2b06d39a6539a9 100644
--- a/src/components/core/navbar.tsx
+++ b/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 produit', href: '/dashboard/add-product', icon: PlusCircleIcon },
];
function classNames(...classes: unknown[]) {
@@ -67,12 +69,13 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, path }) => {
</button>
</div>
</Transition.Child>
- <div className="flex-shrink-0 flex items-center px-4">
+ <div className="flex-shrink-0 flex flow-row items-center px-4">
<img
className="h-8 w-auto"
- src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg"
+ src="/logo.png"
alt="Workflow"
/>
+ <span className="pl-3 text-2xl font-semibold text-gray-100">AIUS • RMS</span>
</div>
<div className="mt-5 flex-1 h-0 overflow-y-auto">
<nav className="px-2 space-y-1">
@@ -110,12 +113,13 @@ const Navbar = ({ sidebarOpen, setSidebarOpen, path }) => {
<div className="flex flex-col w-64">
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex-1 flex flex-col min-h-0">
- <div className="flex items-center h-16 flex-shrink-0 px-4 bg-gray-900">
+ <div className="flex items-center flex-row h-16 flex-shrink-0 px-4 bg-gray-900">
<img
className="h-8 w-auto"
- src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg"
+ src="/logo.png"
alt="Workflow"
/>
+ <span className="pl-3 text-2xl font-semibold text-gray-100">AIUS • RMS</span>
</div>
<div className="flex-1 flex flex-col overflow-y-auto">
<nav className="flex-1 px-2 py-4 bg-gray-800 space-y-1">
diff --git a/src/components/layout/main.tsx b/src/components/layout/main.tsx
index dce269056701541ac12c0421a74260f393a2117f..f52e0b46c003df43d4dcc410ae24b50d7e4f8293 100644
--- a/src/components/layout/main.tsx
+++ b/src/components/layout/main.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState, useContext } from 'react';
+import { Fragment, useState, useContext, useEffect } from 'react';
import { Menu, Transition } from '@headlessui/react';
import {
UserIcon,
@@ -25,10 +25,18 @@ function classNames(...classes: unknown[]) {
const Main = ({ title, subTitle, children }: LayoutProps) => {
let auth = useAuth();
- const { dispatch } = useContext(cartContext);
+ const { cartState, dispatch } = useContext(cartContext);
let navigate = useNavigate();
let path = window.location.pathname;
+ const [cartCount, setCartCount] = useState(0);
+ useEffect(() => {
+ setCartCount(cartState.cart.reduce(
+ (prev, product) => prev + (product?.quantity ?? 0),
+ 0
+ ));
+ }, [cartState]);
+
const userNavigation = [
{ name: 'Se déconnecter', action: () => {return auth.signout(() => navigate("/"))} },
];
@@ -41,80 +49,87 @@ const Main = ({ title, subTitle, children }: LayoutProps) => {
return (
<RequireAuth>
- <div className="h-screen flex overflow-hidden bg-gray-100">
- <Navbar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} path={path} />
+ <div className="h-screen flex overflow-hidden bg-gray-100">
+ <Navbar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} path={path} />
- <div className="flex flex-col w-0 flex-1 overflow-hidden">
- <div className="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
- <button
- type="button"
- className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"
- onClick={() => setSidebarOpen(true)}
- >
- <span className="sr-only">Open sidebar</span>
- <MenuAlt2Icon className="h-6 w-6" aria-hidden="true" />
- </button>
- <div className="flex-1 px-4 flex justify-between">
- <div className="flex-1 flex w-full md:ml-0 items-center"><span className="text-xl font-semibold">Dashboard</span></div>
- <div className="ml-4 flex items-center md:ml-6">
- <button onClick={() => {toggleCart()}} className="max-w-xs mx-2 bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
- <span className="sr-only">Open cart</span>
- <ShoppingCartIcon className="h-8 w-8 rounded-full" />
- </button>
- <Menu as="div" className="mx-2 flex flex-row relative">
- <div>
- <Menu.Button className="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
- <span className="sr-only">Open user menu</span>
- <UserIcon className="h-8 w-8 rounded-full" />
- </Menu.Button>
- </div>
- <Transition
- as={Fragment}
- enter="transition ease-out duration-100"
- enterFrom="transform opacity-0 scale-95"
- enterTo="transform opacity-100 scale-100"
- leave="transition ease-in duration-75"
- leaveFrom="transform opacity-100 scale-100"
- leaveTo="transform opacity-0 scale-95"
- >
- <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
- <Menu.Item key="username"><span className="block px-4 py-2 text-sm text-gray-700 font-semibold">Bienvenue {auth.user} !</span></Menu.Item>
- {userNavigation.map((item) => (
- <Menu.Item key={item.name}>
- {({ active }) => (
- <button
- onClick={() => {item.action()}}
- className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700 w-full')}
- >
- {item.name}
- </button>
- )}
- </Menu.Item>
- ))}
- </Menu.Items>
- </Transition>
- </Menu>
+ <div className="flex flex-col w-0 flex-1 overflow-hidden">
+ <div className="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
+ <button
+ type="button"
+ className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"
+ onClick={() => setSidebarOpen(true)}
+ >
+ <span className="sr-only">Open sidebar</span>
+ <MenuAlt2Icon className="h-6 w-6" aria-hidden="true" />
+ </button>
+ <div className="flex-1 px-4 flex justify-between">
+ <div className="flex-1 flex w-full md:ml-0 items-center"><span className="text-xl font-semibold">Dashboard</span></div>
+ <div className="ml-4 flex items-center md:ml-6">
+ {path === '/dashboard' &&
+ <button onClick={() => { toggleCart() }} className="relative max-w-xs mx-2 bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+ <span className="sr-only">Open cart</span>
+ <ShoppingCartIcon className="h-8 w-8 rounded-full" />
+ {cartCount > 0 &&
+ <div className="absolute -top-2.5 -right-2 w-5 h-5 ring-2 ring-white bg-indigo-600 rounded-full flex justify-center align-sub">
+ <span className="text-gray-100 font-semibold leading-3 pt-1 text-xs">{cartCount}</span>
+ </div>
+ }
+ </button>
+ }
+ <Menu as="div" className="mx-2 flex flex-row relative">
+ <div>
+ <Menu.Button className="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+ <span className="sr-only">Open user menu</span>
+ <UserIcon className="h-8 w-8 rounded-full" />
+ </Menu.Button>
+ </div>
+ <Transition
+ as={Fragment}
+ enter="transition ease-out duration-100"
+ enterFrom="transform opacity-0 scale-95"
+ enterTo="transform opacity-100 scale-100"
+ leave="transition ease-in duration-75"
+ leaveFrom="transform opacity-100 scale-100"
+ leaveTo="transform opacity-0 scale-95"
+ >
+ <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+ <Menu.Item key="username"><span className="block px-4 py-2 text-sm text-gray-700 font-semibold">Bienvenue {auth.user} !</span></Menu.Item>
+ {userNavigation.map((item) => (
+ <Menu.Item key={item.name}>
+ {({ active }) => (
+ <button
+ onClick={() => { item.action() }}
+ className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700 w-full')}
+ >
+ {item.name}
+ </button>
+ )}
+ </Menu.Item>
+ ))}
+ </Menu.Items>
+ </Transition>
+ </Menu>
+ </div>
</div>
</div>
- </div>
- <main className="flex-1 relative overflow-y-auto focus:outline-none">
- <div className="py-6">
- {title && (
- <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 mb-4">
- <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
- </div>
- )}
- {subTitle && (
- <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 -mt-4 mb-4">
- <h1 className="text-xl font-normal text-gray-600">{subTitle}</h1>
- </div>
- )}
- <Outlet />
- </div>
- </main>
+ <main className="flex-1 relative overflow-y-auto focus:outline-none">
+ <div className="py-6">
+ {title && (
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 mb-4">
+ <h1 className="text-2xl font-semibold text-gray-900">{title}</h1>
+ </div>
+ )}
+ {subTitle && (
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 -mt-4 mb-4">
+ <h1 className="text-xl font-normal text-gray-600">{subTitle}</h1>
+ </div>
+ )}
+ <Outlet />
+ </div>
+ </main>
+ </div>
</div>
- </div>
</RequireAuth>
);
};
diff --git a/src/components/sell/cart.tsx b/src/components/sell/cart.tsx
index 219c3351fb0898cb05b978b91ac335e7036a3904..1e482cec98eb34277452084336f07d93162dd54a 100644
--- a/src/components/sell/cart.tsx
+++ b/src/components/sell/cart.tsx
@@ -1,163 +1,231 @@
-import {Fragment, useContext} from 'react'
+import {Fragment, useContext, useEffect, useState} from 'react'
import { Dialog, Transition } from '@headlessui/react'
-import { ArrowLeftIcon, EmojiSadIcon } from '@heroicons/react/outline';
-import { XIcon } from '@heroicons/react/outline'
+import { ArrowLeftIcon, EmojiSadIcon, XIcon } from '@heroicons/react/outline';
+import { XCircleIcon } from '@heroicons/react/solid';
import { cartContext } from '../../cart/CartStore';
+import { updateProductQuantity } from '../../cart/CartActions';
+import { setAdhesion } from '../../apis/student';
+import { sendTransaction } from '../../apis/money';
+import { updateStock } from '../../apis/back';
-import {
- updateProductQuantity
-} from '../../cart/CartActions';
+const Cart = () => {
+ let [cartError, setCartError] = useState("");
+ const { cartState, dispatch } = useContext(cartContext);
-function Cart() {
- const { cartState, dispatch } = useContext(cartContext);
+ function renderPrice(price: number): string {
+ // Render price with currency and fix displaying of price
+ return `${price.toFixed(2).replace(".", ",")} €`;
+ }
- function renderPrice(price: number): string {
- // Render price with currency and fix displaying of price
- return `${price.toFixed(2)} €`;
+ async function doValidate() {
+ const studentNumber: string = "12345678";
+ const userName: string = "UserName";
+
+ // Validate transaction with Money
+ const successTransaction = await sendTransaction(studentNumber, userName, cartState.totalPrice);
+ if (!successTransaction) {
+ console.error("Error during transaction with Money.");
+ setCartError("Error during transaction with payement server.");
+ // return;
+ }
+
+ // Set adhesion in Student
+ const adhesionInCart = cartState.cart.find(p => p.name === "Adhésion");
+ if (adhesionInCart !== undefined){
+ const adhesionSuccess = await setAdhesion(studentNumber);
+ if (!adhesionSuccess) {
+ console.error("Error during adhesion with Student.");
+ setCartError("Error during adhesion with student database.");
+ // return;
+ }
}
- return (
- // S'abonne au contexte
- <Transition.Root show={cartState.showCart} as={Fragment}>
- <Dialog as="div" className="fixed inset-0 overflow-hidden z-40" onClose={() => {dispatch({ type: 'TOGGLE_CART' })}}>
- <div className="absolute inset-0 overflow-hidden">
- <Transition.Child
- as={Fragment}
- enter="ease-in-out duration-500"
- enterFrom="opacity-0"
- enterTo="opacity-100"
- leave="ease-in-out duration-500"
- leaveFrom="opacity-100"
- leaveTo="opacity-0"
+ // Update stock in Back
+ cartState.cart.forEach(product => {
+ updateStock(product.id, -(product?.quantity ?? 1));
+ });
+
+ // Reset cart error message
+ setCartError("");
+
+ // Reset cart
+ dispatch({ type: 'SET_CART', payload: [] });
+ }
+
+ let [totalPrice, setTotalPrice] = useState(0);
+ useEffect(() => {
+ // Update cart totalPrice
+ let totalPrice = 0;
+ cartState.cart.forEach((product) => {
+ if (product.quantity) {
+ totalPrice += product.price * product.quantity;
+ }
+ });
+ setTotalPrice(totalPrice);
+ }, [cartState]);
+
+ return (
+ // S'abonne au contexte
+ <Transition.Root show={cartState.showCart} as={Fragment}>
+ <Dialog as="div" className="fixed inset-0 overflow-hidden z-40" onClose={() => { dispatch({ type: 'TOGGLE_CART' }) }}>
+ <div className="absolute inset-0 overflow-hidden">
+ <Transition.Child
+ as={Fragment}
+ enter="ease-in-out duration-500"
+ enterFrom="opacity-0"
+ enterTo="opacity-100"
+ leave="ease-in-out duration-500"
+ leaveFrom="opacity-100"
+ leaveTo="opacity-0"
+ >
+ <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+ </Transition.Child>
+ <div className="fixed inset-y-0 right-0 pl-14 max-w-full flex">
+ <Transition.Child
+ as={Fragment}
+ enter="transform transition ease-in-out duration-500 sm:duration-700"
+ enterFrom="translate-x-full"
+ enterTo="translate-x-0"
+ leave="transform transition ease-in-out duration-500 sm:duration-700"
+ leaveFrom="translate-x-0"
+ leaveTo="translate-x-full"
+ >
+ <div className="relative w-screen max-w-md">
+ <Transition.Child
+ as={Fragment}
+ enter="ease-in-out duration-500"
+ enterFrom="opacity-0"
+ enterTo="opacity-100"
+ leave="ease-in-out duration-500"
+ leaveFrom="opacity-100"
+ leaveTo="opacity-0"
+ >
+ <div className="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
+ <button
+ type="button"
+ className="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
+ onClick={() => { dispatch({ type: 'TOGGLE_CART' }) }}
>
- <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
- </Transition.Child>
- <div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
- <Transition.Child
- as={Fragment}
- enter="transform transition ease-in-out duration-500 sm:duration-700"
- enterFrom="translate-x-full"
- enterTo="translate-x-0"
- leave="transform transition ease-in-out duration-500 sm:duration-700"
- leaveFrom="translate-x-0"
- leaveTo="translate-x-full"
- >
- <div className="relative w-screen max-w-md">
- <Transition.Child
- as={Fragment}
- enter="ease-in-out duration-500"
- enterFrom="opacity-0"
- enterTo="opacity-100"
- leave="ease-in-out duration-500"
- leaveFrom="opacity-100"
- leaveTo="opacity-0"
- >
- <div className="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
- <button
- type="button"
- className="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
- onClick={() => {dispatch({ type: 'TOGGLE_CART' })}}
- >
- <span className="sr-only">Close panel</span>
- <XIcon className="h-6 w-6" aria-hidden="true" />
- </button>
- </div>
- </Transition.Child>
- <div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
- <div className="px-4 sm:px-6">
- <Dialog.Title className="text-3xl font-extrabold text-gray-900">Panier</Dialog.Title>
- </div>
- <div className="mt-6 relative flex-1 px-4 sm:px-6">
+ <span className="sr-only">Close panel</span>
+ <XIcon className="h-6 w-6" aria-hidden="true" />
+ </button>
+ </div>
+ </Transition.Child>
+ <div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
+ <div className="px-4 sm:px-6">
+ <Dialog.Title className="text-3xl ml-4 sm:ml-0 font-extrabold text-gray-900">Panier</Dialog.Title>
+ </div>
+ <div className="mt-1 relative flex-1 px-4 sm:px-6">
<div className="bg-white">
- <div className="mt-8">
- <div className="flow-root">
- <form className="mt-12">
- <div>
- <ul className="-my-6 divide-y divide-gray-200">
- {cartState.cart.length <= 0 && <div className="text-center w-full mt-10 pb-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 dans le panier !</h3>
- <p className="mt-1 text-sm text-gray-500">Rajoutez-en ^^</p>
- <div className="mt-6">
- <button
- type="button"
- onClick={() => dispatch({ type: 'TOGGLE_CART' })}
- 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"
- >
- <ArrowLeftIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
- Retourner aux produits
- </button>
- </div>
- </div>}
- {cartState.cart.map(cartItem => (
- <li key={cartItem.name} className="py-6 flex">
- <div className="ml-4 flex-1 flex flex-col">
- <div>
- <div className="flex justify-between text-base font-medium text-gray-900">
- <h3>
- <a href={cartItem.name}>{cartItem.name}</a>
- </h3>
- <p className="ml-4">{cartItem.stockPrice && renderPrice(cartItem.stockPrice)}</p>
- </div>
- <p className="mt-1 text-sm text-gray-500">{cartItem.category}</p>
- </div>
- <div className="flex-1 flex items-end justify-between text-sm pt-4">
- {/* <p className="text-gray-500">Qty {cartItem.quantity}</p> */}
- <div className="flex flex-row items-baseline">
- <label htmlFor={`quantity-${cartItem.name}`} className="sr-only">
- Quantity, {cartItem.name}
- </label>
- <input
- id={`quantity-${cartItem.name}`}
- name={`quantity-${cartItem.name}`}
- type="number"
- max={cartItem.stock}
- min={1}
- value={cartItem.quantity}
- onChange={(e) => {updateProductQuantity(cartState.cart, dispatch, cartItem, parseInt(e.target.value))}}
- className="max-w-full rounded-md border border-gray-300 py-1.5 text-base leading-5 font-medium text-gray-700 text-left shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
- /><span className="text-sm pl-1">/ {cartItem.stock} unités</span></div>
-
- <div className="flex">
- <button type="button" className="font-medium text-indigo-600 hover:text-indigo-500" onClick={() => updateProductQuantity(cartState.cart, dispatch, cartItem, 0)}>
- Supprimer
+ <div className="">
+ <div className="flow-root">
+ <form className="mt-8 mx-4 sm:mx-0">
+ <div>
+ <ul className="-my-6 divide-y divide-gray-200">
+ {cartState.cart.length <= 0 &&
+ <div className="text-center w-full mt-10 pb-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 dans le panier !</h3>
+ <p className="mt-1 text-sm text-gray-500">Rajoutez-en ^^</p>
+ <div className="mt-6">
+ <button
+ type="button"
+ onClick={() => dispatch({ type: 'TOGGLE_CART' })}
+ 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"
+ >
+ <ArrowLeftIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+ Retourner aux produits
</button>
</div>
</div>
- </div>
+ }
+ {cartState.cart.map(cartItem => (
+ <li key={cartItem.name} className="py-6 flex">
+ <div className="flex-1 flex flex-col">
+ <div>
+ <div className="flex justify-between text-base font-medium text-gray-900">
+ <h3>
+ <span>{cartItem.name}</span>
+ </h3>
+ <p className="">{cartItem.stockPrice && renderPrice(cartItem.stockPrice)}</p>
+ </div>
+ <div className="flex justify-between text-sm mt-1 text-gray-500">
+ <p className="">{cartItem.category}</p>
+ <span>{renderPrice(cartItem.price)}/unité</span>
+ </div>
+ </div>
+ <div className="flex-1 flex justify-between items-baseline text-sm pt-4">
+ {/* <p className="text-gray-500">Qty {cartItem.quantity}</p> */}
+ <div className="flex flex-row items-baseline">
+ <label htmlFor={`quantity-${cartItem.name}`} className="sr-only">
+ Quantity, {cartItem.name}
+ </label>
+ <input
+ id={`quantity-${cartItem.name}`}
+ name={`quantity-${cartItem.name}`}
+ type="number"
+ max={cartItem.stock}
+ min={1}
+ value={cartItem.quantity}
+ onChange={(e) => { updateProductQuantity(cartState.cart, dispatch, cartItem, parseInt(e.target.value)) }}
+ className="max-w-full rounded-md border border-gray-300 py-1.5 text-base leading-5 font-medium text-gray-700 text-left shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+ /><span className="text-sm pl-1">/ {cartItem.stock} unités</span></div>
+
+ <div className="flex">
+ <button type="button" className="font-medium text-indigo-600 hover:text-indigo-500" onClick={() => updateProductQuantity(cartState.cart, dispatch, cartItem, 0)}>
+ Supprimer
+ </button>
+ </div>
+ </div>
+ </div>
</li>
))}
- </ul>
- </div>
+ </ul>
+ </div>
- {/* Order summary */}
- <div className="mt-10 sm:ml-32 sm:pl-6">
- <div className="bg-gray-50 rounded-lg px-4 py-6 sm:p-6 lg:p-8">
- <h2 className="sr-only">Panier</h2>
+ {/* Order summary */}
+ {cartState.cart.length > 0 &&
+ <div className="mt-10 sm:ml-32 sm:pl-6">
+ <div className="bg-gray-50 rounded-lg px-4 py-6 sm:p-6 lg:p-8">
+ <h2 className="sr-only">Panier</h2>
- <div className="flow-root">
+ <div className="flow-root">
<dl className="-my-4 text-sm divide-y divide-gray-200">
- <div className="py-4 flex items-center justify-between">
- <dt className="text-gray-600">Total : </dt>
- <dd className="font-medium text-gray-900">{renderPrice(0)}</dd>
- </div>
+ <div className="py-4 flex items-center justify-between">
+ <dt className="text-gray-600">Total : </dt>
+ <dd className="font-medium text-gray-900">{renderPrice(totalPrice)}</dd>
+ </div>
</dl>
+ </div>
</div>
- </div>
- <div className="mt-10">
- <button
- type="submit"
- className="w-full bg-indigo-600 border border-transparent rounded-md shadow-sm py-3 px-4 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-indigo-500"
- >
+ <div className="mt-10">
+ <button
+ onClick={() => doValidate()}
+ type="button"
+ className="w-full bg-indigo-600 border border-transparent rounded-md shadow-sm py-3 px-4 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-indigo-500"
+ >
Valider
- </button>
- </div>
+ </button>
+ </div>
+ </div>
+ }
+ {cartError &&
+ <div className="rounded-md bg-red-50 p-4 mt-4">
+ <div className="flex">
+ <div className="flex-shrink-0">
+ <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+ </div>
+ <div className="ml-3">
+ <h3 className="text-sm font-medium text-red-800">{cartError}</h3>
+ </div>
+ </div>
+ </div>
+ }
+ </form>
</div>
- </form>
- </div>
- </div>
+ </div>
</div>
</div>
</div>
@@ -167,7 +235,7 @@ function Cart() {
</div>
</Dialog>
</Transition.Root>
- )
+ );
};
export default Cart;
\ No newline at end of file
diff --git a/src/components/sellListItem.tsx b/src/components/sellListItem.tsx
index 5443f83ea780ad96996c19d8919dc36ef1df9230..3b8ed499b268ae3f380dc443be56adf810d0233c 100644
--- a/src/components/sellListItem.tsx
+++ b/src/components/sellListItem.tsx
@@ -1,86 +1,89 @@
import {useContext, useState, useEffect} from 'react';
import {
- CubeTransparentIcon,
- ShoppingCartIcon,
+ CubeTransparentIcon,
+ ShoppingCartIcon,
} from '@heroicons/react/outline';
import { addToCart } from '../cart/CartActions';
-
import { Product } from "../cart/CartTypes";
import { cartContext } from '../cart/CartStore';
const SellListItem = ({product}: {product: Product}) => {
- const { cartState, dispatch } = useContext(cartContext);
-
- const [item, setItem] = useState(product);
- useEffect(() => {
- // Set item from product in cartState.cart
- let itemInCart = cartState.cart.find(item => item.name === product.name);
- if (itemInCart) {
- setItem(itemInCart);
- }
- }, [cartState.cart, product.name]);
+ const { cartState, dispatch } = useContext(cartContext);
- function addProductToCart() {
- // product.stock--;
- // cartState.totalPrice += product.price;
- addToCart(cartState.cart, dispatch, product);
+ const [item, setItem] = useState(product);
+ useEffect(() => {
+ // Set item from product in cartState.cart
+ let itemInCart = cartState.cart.find(item => item.name === product.name);
+ if (itemInCart) {
+ setItem(itemInCart);
}
+ }, [cartState.cart, product.name]);
+
+ function addProductToCart() {
+ // product.stock--;
+ // cartState.totalPrice += product.price;
+ addToCart(cartState.cart, dispatch, product);
+ }
- function renderPrice(price: number): string {
- // Render price with currency and fix displaying of price
- return `${price.toFixed(2)} €`;
- }
+ function renderPrice(price: number): string {
+ // Render price with currency and fix displaying of price
+ return `${price.toFixed(2).replace(".", ",")} €`;
+ }
- function renderStock(stock: number): string {
- if (stock === 0) {
- return 'bg-red-100 text-red-800';
- } else if (stock <= 5) {
- return 'bg-orange-100 text-orange-800';
- } else {
- return 'bg-green-100 text-green-800';
- }
+ function renderStock(stock: number): string {
+ if (stock === 0) {
+ return 'bg-red-100 text-red-800';
+ } else if (stock <= 5) {
+ return 'bg-orange-100 text-orange-800';
+ } else {
+ return 'bg-green-100 text-green-800';
}
+ }
- function getStockWithCart(element: Product): number {
- if (element.quantity !== undefined) {
- return element.stock - element.quantity;
- }
- return element.stock;
+ function getStockWithCart(element: Product): number {
+ if (element.quantity !== undefined) {
+ return element.stock - element.quantity;
}
+ return element.stock;
+ }
- 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">{item.name}</h3>
- <span className={"flex-shrink-0 inline-block px-2 py-0.5 text-xs font-medium rounded-full " + renderStock(getStockWithCart(item))}>
- {getStockWithCart(item)}
- </span>
- </div>
- <p className="mt-1 text-gray-500 text-sm truncate">{renderPrice(item.price)}</p>
- </div>
- </div>
- <div>
- <div className="-mt-px flex divide-x divide-gray-200">
- <div className="-ml-px w-0 flex-1 flex">
- {getStockWithCart(item) > 0 ? <button
- //onClick={() => addToCart(cartState.cart, dispatch, item)}
- onClick={() => addProductToCart()}
- disabled={getStockWithCart(item) === 0}
- 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-b-lg hover:text-gray-500 active:bg-indigo-100 active:text-gray-900 focus:shadow-outline-indigo hover:border-indigo-700 transition ease-in-out duration-150"
- >
- <ShoppingCartIcon className="w-5 h-5 mr-2" aria-hidden="true"/>
- Ajouter
- </button> :
- <span className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-red-700 font-medium border border-transparent rounded-b-lg"><CubeTransparentIcon className="w-5 h-5 mr-2" aria-hidden="true"/>Rupture de stock</span>}
- </div>
- </div>
- </div>
- </li>
- );
+ 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">{item.name}</h3>
+ <span className={"flex-shrink-0 inline-block px-2 py-0.5 text-xs font-medium rounded-full " + renderStock(getStockWithCart(item))}>
+ {getStockWithCart(item)}
+ </span>
+ </div>
+ <p className="mt-1 text-gray-500 text-sm truncate">{renderPrice(item.price)}</p>
+ </div>
+ </div>
+ <div>
+ <div className="-mt-px flex divide-x divide-gray-200">
+ <div className="-ml-px w-0 flex-1 flex">
+ {getStockWithCart(item) > 0
+ ? <button
+ //onClick={() => addToCart(cartState.cart, dispatch, item)}
+ onClick={() => addProductToCart()}
+ disabled={getStockWithCart(item) === 0}
+ 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-b-lg hover:text-gray-500 active:bg-indigo-100 active:text-gray-900 focus:shadow-outline-indigo hover:border-indigo-700 transition ease-in-out duration-150"
+ >
+ <ShoppingCartIcon className="w-5 h-5 mr-2" aria-hidden="true" />
+ Ajouter
+ </button>
+ : <span className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-red-700 font-medium border border-transparent rounded-b-lg"><CubeTransparentIcon className="w-5 h-5 mr-2" aria-hidden="true" />
+ Rupture de stock
+ </span>
+ }
+ </div>
+ </div>
+ </div>
+ </li>
+ );
};
export default SellListItem;
\ No newline at end of file
diff --git a/src/pages/add_product.tsx b/src/pages/add_product.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ee68b9527bfd6deeacabb0f726b6b0a65fbb87db
--- /dev/null
+++ b/src/pages/add_product.tsx
@@ -0,0 +1,163 @@
+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" && name !== "" && price > 0 && priceAdherant > 0 && stock > 0) {
+ 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 on creating item");
+ });
+ } 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
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index a7dfd035f792229c65f3cd577f6a6157f997c7c3..e7a826dcab440cefb5060784d8aad077a1364e3d 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -3,95 +3,97 @@ import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../auth/useAuth';
-export default function Login(props) {
- let navigate = useNavigate();
- let location = useLocation();
- let auth = useAuth();
+const Login = () => {
+ let navigate = useNavigate();
+ let location = useLocation();
+ let auth = useAuth();
- let from = location.state?.from?.pathname || "/";
+ let from = location.state?.from?.pathname || "/";
- function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
- event.preventDefault();
+ function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+ event.preventDefault();
- let formData = new FormData(event.currentTarget);
- let username = formData.get("email") as string;
+ let formData = new FormData(event.currentTarget);
+ let username = formData.get("email") as string;
- auth.signin(username, () => {
- // Send them back to the page they tried to visit when they were
- // redirected to the login page. Use { replace: true } so we don't create
- // another entry in the history stack for the login page. This means that
- // when they get to the protected page and click the back button, they
- // won't end up back on the login page, which is also really nice for the
- // user experience.
- navigate(from, { replace: true });
- });
- }
+ auth.signin(username, () => {
+ // Send them back to the page they tried to visit when they were
+ // redirected to the login page. Use { replace: true } so we don't create
+ // another entry in the history stack for the login page. This means that
+ // when they get to the protected page and click the back button, they
+ // won't end up back on the login page, which is also really nice for the
+ // user experience.
+ navigate(from, { replace: true });
+ });
+ }
- return (
- <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
- <div className="sm:mx-auto sm:w-full sm:max-w-md">
- <img
- className="mx-auto h-12 w-auto"
- src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
- alt="Workflow"
- />
- <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
- Se connecter au Back-Office
- </h2>
- </div>
+ return (
+ <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+ <div className="sm:mx-auto sm:w-full sm:max-w-md">
+ <img
+ className="mx-auto h-24 w-auto"
+ src="/logo.png"
+ alt="Workflow"
+ />
+ <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+ Connexion RMS
+ </h2>
+ </div>
- <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
- <form className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10" onSubmit={handleSubmit}>
- <div className="space-y-6">
- <div>
- <label
- htmlFor="email"
- className="block text-sm font-medium text-gray-700"
- >
- Adresse email
- </label>
- <div className="mt-1">
- <input
- id="email"
- name="email"
- type="email"
- autoComplete="email"
- required
- className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
- />
- </div>
- </div>
+ <div className="mt-8 sm:mx-auto mx-2 sm:w-full sm:max-w-md">
+ <form className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10" onSubmit={handleSubmit}>
+ <div className="space-y-6">
+ <div>
+ <label
+ htmlFor="email"
+ className="block text-sm font-medium text-gray-700"
+ >
+ Adresse email
+ </label>
+ <div className="mt-1">
+ <input
+ id="email"
+ name="email"
+ type="email"
+ autoComplete="email"
+ required
+ className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+ />
+ </div>
+ </div>
- <div>
- <label
- htmlFor="password"
- className="block text-sm font-medium text-gray-700"
- >
- Mot de passe
- </label>
- <div className="mt-1">
- <input
- id="password"
- name="password"
- type="password"
- autoComplete="current-password"
- required
- className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
- />
- </div>
- </div>
+ <div>
+ <label
+ htmlFor="password"
+ className="block text-sm font-medium text-gray-700"
+ >
+ Mot de passe
+ </label>
+ <div className="mt-1">
+ <input
+ id="password"
+ name="password"
+ type="password"
+ autoComplete="current-password"
+ required
+ className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+ />
+ </div>
+ </div>
- <div>
- <button
- type="submit"
- className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
- >
- Se connecter
- </button>
- </div>
- </div>
- </form>
- </div>
- </div>
- );
-}
+ <div>
+ <button
+ type="submit"
+ className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+ >
+ Se connecter
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
+ );
+};
+
+export default Login;
diff --git a/src/pages/sell.tsx b/src/pages/sell.tsx
index 5ba58fa51b617762c39a1aef5e9aa9f42cd9df8c..cb1a7dd5f9f7551a0bdb8bab405d43c427535dd1 100644
--- a/src/pages/sell.tsx
+++ b/src/pages/sell.tsx
@@ -1,125 +1,87 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
import SellListItem from "../components/sellListItem";
-
import Cart from '../components/sell/cart';
import { Product } from '../cart/CartTypes'
+import { getItems } from '../apis/back';
-const products: Product[] = [
- {
- name: "Coca Cola",
- category: "Boissons",
- price: 0.5,
- stock: 50,
- },
- {
- name: "Fanta",
- category: "Boissons",
- price: 0.5,
- stock: 50,
- },
- {
- name: "Ice Tea",
- category: "Boissons",
- price: 0.5,
- stock: 50,
- },
- {
- name: "Eau",
- category: "Boissons",
- price: 0.5,
- stock: 50,
- },
- {
- name: "Eau gazeuse",
- category: "Boissons",
- price: 0.5,
- stock: 50,
- },
- {
- name: "Sandwich",
- category: "Manger",
- price: 2,
- stock: 30,
- },
- {
- name: "Pizza",
- category: "Manger",
- price: 2,
- stock: 20,
- },
- {
- name: "Baguettine",
- category: "Manger",
- price: 1.5,
- stock: 20,
- },
- {
- name: "Wrap",
- category: "Manger",
- price: 1.5,
- stock: 10,
- },
- {
- name: "Donut",
- category: "Dessert",
- price: 1,
- stock: 30,
- },
-];
const Sell = () => {
- 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]);
+ let [search, setSearch] = useState("");
+ let [productsList, setProductsList] = useState<Product[]>([]);
+ let [rawProductList, setRawProductList] = useState<Product[]>([]);
+
+ useEffect(() => {
+ // Filter products by name with the search term
+ setProductsList(rawProductList.filter(product => {
+ return product.name.toLowerCase().includes(search.toLowerCase());
+ }));
+ }, [search, rawProductList]);
+
+ useEffect(() => {
+ getItems().then((items) => {
+ setRawProductList(items);
+ setProductsList(items);
+ }).catch((_) => {
+ setRawProductList([]);
+ setProductsList([]);
+ });
+ }, []);
- return (
- <div>
- <div className="max-w-7xl mx-auto px-4 sm:px-6 md: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>
- {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) => (
- <SellListItem 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>
- <Cart />
- </div>
- );
+ return (
+ <div>
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+ {rawProductList.length > 0 &&
+ <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>
+ }
+ {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) => (
+ <SellListItem 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>
+ {rawProductList.length > 0 &&
+ <>
+ <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>
+ <Cart />
+ </div>
+ );
};
export default Sell;
diff --git a/src/pages/stock.tsx b/src/pages/stock.tsx
index 8d3dd1c048f6335c209f0020829acb67e1be25dd..6be785d0e426ca805ad2a6e3ff4d31271d6cd049 100644
--- a/src/pages/stock.tsx
+++ b/src/pages/stock.tsx
@@ -1,194 +1,175 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
-interface Product {
- name: string,
- category: string,
- price: string,
- quantity: number,
- edit?: boolean
-}
+import { Product } from '../cart/CartTypes';
+import { getItems, updateStock } from '../apis/back';
-const products: Product[] = [
- {
- 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<Product[]>([]);
+ let [rawProductList, setRawProductList] = useState<Product[]>([]);
+ let [oldQuantity, setOldQuantity] = useState((0));
+
+ useEffect(() => {
+ // Filter products by name with the search term
+ setProductsList(rawProductList.filter(product => {
+ return product.name.toLowerCase().includes(search.toLowerCase());
+ }));
+ }, [search, rawProductList]);
+ useEffect(() => {
+ getItems().then((items) => {
+ setRawProductList(items);
+ setProductsList(items);
+ }).catch((_) => {
+ setRawProductList([]);
+ setProductsList([]);
+ });
+ }, []);
+ const updateProductQuantity = (productId, quantity) => {
+ let productsTemp = productsList;
+ let product = productsTemp[productId];
+ product.stock = quantity;
+ setProductsList([...productsTemp]);
+ };
-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]);
+ const toggleEditMode = (productId) => {
+ let productsTemp = productsList;
+ let product = productsTemp[productId];
- let updateProductQuantity = (productId, quantity) =>
- {
- let productsTemp = productsList
- let product = productsTemp[productId]
- product.quantity = quantity;
- setProductsList([...productsTemp]);
- }
+ // Set all product.edit in productsTemp to false
+ productsTemp.forEach((p) => {
+ p.edit = false;
+ });
- let toggleEditMode = (productId) => {
- let productsTemp = productsList
- let product = productsTemp[productId]
- product.edit = product.edit === true ? false : true;
- setProductsList([...productsTemp]);
+ 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="max-w-7xl mx-auto px-4 sm:px-6 md: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="max-w-7xl mx-auto">
- {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">
- <tr>
- <th
- scope="col"
- className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Produit
- </th>
- <th
- scope="col"
- className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Catégorie
- </th>
- <th
- scope="col"
- className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Prix
- </th>
- <th
- scope="col"
- className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Quantité
- </th>
- <th scope="col" className="pr-4 py-3">
- <span className="sr-only">Éditer</span>
- </th>
- </tr>
- </thead>
- <tbody>
- {productsList.map((product, productIdx) => (
- <tr key={product.name} className={productIdx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
- <td className="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{product.name}</td>
- <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{product.category}</td>
- <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{product.price}</td>
- <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
- {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="pr-4 py-4 whitespace-nowrap text-right text-sm font-medium">
- <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 ? "Sauvegarder" : "Éditer"}
- </button>
- </td>
- </tr>
- ))}
- </tbody>
- </table>
- </div>}
- </div>
- </div>
- )
-
+ if (product.edit === false) {
+ // console.log("oldQuantity: ",oldQuantity);
+ updateStock(product.id, product.stock - oldQuantity).then(() => {
+ console.log("Save product: " + product.name + " with quantity: " + product.stock);
+ }).catch((_) => {
+ console.log("Error update stock BACK");
+ });
+ }else{
+ setOldQuantity(product.stock);
+ }
+ };
+
+ const getPrice = (product: Product):string => {
+ let price = `${product.price.toFixed(2).replace(".", ",")} €`;
+ if (product.subscriberPrice !== undefined) {
+ price += ` / ${product.subscriberPrice.toFixed(2).replace(".", ",")} €`;
+ } else {
+ // Display the same price if there is not subscription price
+ price += ` / ${product.price.toFixed(2).replace(".", ",")} €`;
+ }
+ return price;
+ };
+
+ return (
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+ {rawProductList.length > 0 &&
+ <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="max-w-7xl mx-auto">
+ {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>
+ {rawProductList.length > 0 &&
+ <>
+ <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-y-auto border-b border-gray-200 sm:rounded-lg">
+ <table className="min-w-full divide-y divide-gray-200">
+ <thead className="bg-gray-50">
+ <tr>
+ <th
+ scope="col"
+ className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+ >
+ Produit
+ </th>
+ <th
+ scope="col"
+ className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+ >
+ Catégorie
+ </th>
+ <th
+ scope="col"
+ className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+ >
+ Prix / Adhérent
+ </th>
+ <th
+ scope="col"
+ className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+ >
+ Quantité
+ </th>
+ <th scope="col" className="pr-4 py-3">
+ <span className="sr-only">Éditer</span>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ {productsList.map((product, productIdx) => (
+ <tr key={product.name} className={productIdx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+ <td className="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{product.name}</td>
+ <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{product.category}</td>
+ <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{getPrice(product)}</td>
+ <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
+ {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.stock}
+ />
+ : <span>{product.stock}</span>
+ }
+ </td>
+ <td className="pr-4 py-4 whitespace-nowrap text-right text-sm font-medium">
+ <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 ? "Sauvegarder" : "Éditer"}
+ </button>
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>}
+ </div>
+ </div>
+ );
};
export default Stock;
diff --git a/src/pages/users.tsx b/src/pages/users.tsx
index 93ca1d3f270b82515da27db299c1c904c927a4d0..2eb63886c37ccc361b355c62803e1ff7250b3d13 100644
--- a/src/pages/users.tsx
+++ b/src/pages/users.tsx
@@ -1,119 +1,137 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
-interface User {
- nom: string,
- prenom: string,
- email: string,
- studentNumber: string,
- adherant: boolean
-}
-
-const users: User[] = [
- {nom: "Dupont", prenom: "Jean", email: "jean.dupont@etu.unistra.fr", studentNumber: "123456789", adherant: true},
- {nom: "Durand", prenom: "Paul", email: "paul.durand@etu.unistra.fr", studentNumber: "987654321", adherant: true},
- {nom: "Martin", prenom: "Pierre", email: "pierre.martin@etu.unistra.fr", studentNumber: "1234589", adherant: false},
-]
+import { User, getUsers } from '../apis/student';
const Users = () => {
- let [search, setSearch] = useState("");
- let [usersList, setUsersList] = useState(users);
-
- useEffect(() => {
- // Filter users by nom or prenom with search term
- let filteredUsers = users.filter(user => {
- return user.nom.toLowerCase().includes(search.toLowerCase()) ||
- user.prenom.toLowerCase().includes(search.toLowerCase()) ||
- user.studentNumber.toLowerCase().includes(search.toLowerCase());
- });
- setUsersList(filteredUsers);
- }, [search]);
-
- return (
- <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
+ let [search, setSearch] = useState("");
+ let [rawUsers, setRawUsers] = useState<User[]>([]);
+ let [usersList, setUsersList] = useState<User[]>([]);
+
+ useEffect(() => {
+ // Filter users by nom or prenom with search term
+ let filteredUsers = rawUsers.filter(user => {
+ return user.nom.toLowerCase().includes(search.toLowerCase())
+ || user.prenom.toLowerCase().includes(search.toLowerCase())
+ || user.email.toLowerCase().includes(search.toLowerCase())
+ || user.studentNumber.toString().toLowerCase().includes(search.toLowerCase());
+ });
+ setUsersList(filteredUsers);
+ }, [search, rawUsers]);
+
+ useEffect(() => {
+ // Fetch users from API
+ getUsers().then((users) => {
+ //console.log(users);
+ setRawUsers(users);
+ setUsersList(users);
+ }).catch((_) => {
+ setRawUsers([]);
+ setUsersList([]);
+ });
+ }, []);
+
+ return (
+ <div className="max-w-7xl overflow-y-hidden mx-auto px-4 sm:px-6 md:px-8">
+ {rawUsers.length > 0 &&
<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>
+ <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="max-w-7xl mx-auto">
- {usersList.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 utilisateur 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">
- <tr>
- <th
- scope="col"
- className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Nom
- </th>
- <th
- scope="col"
- className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Prénom
- </th>
- <th
- scope="col"
- className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Email
- </th>
- <th
- scope="col"
- className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Numéro étudiant
- </th>
- <th
- scope="col"
- className="py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
- >
- Adhérent?
- </th>
- </tr>
- </thead>
- <tbody>
- {usersList.map((user, userIdx) => (
- <tr key={user.studentNumber} className={userIdx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
- <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.nom}</td>
- <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.prenom}</td>
- <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.email}</td>
- <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.studentNumber}</td>
- <td className="py-4 whitespace-nowrap text-sm text-gray-500">{
- user.adherant ? <span className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800">
- Non
- </span> : <span className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
- Oui
+ }
+ <div className="max-w-7xl mx-auto">
+ {usersList.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 utilisateur trouvé !</h3>
+ {rawUsers.length > 0 &&
+ <>
+ <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-y-hidden border-b border-gray-200 sm:rounded-lg">
+ <table className="min-w-full overflow-y-auto divide-y divide-gray-200">
+ <thead className="bg-gray-50">
+ <tr>
+ <th
+ scope="col"
+ className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+ >
+ Nom
+ </th>
+ <th
+ scope="col"
+ className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+ >
+ Email
+ </th>
+ <th
+ scope="col"
+ className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+ >
+ Numéro étudiant
+ </th>
+ <th
+ scope="col"
+ className="py-3 pr-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+ >
+ Adhérent?
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ {usersList.map((user, userIdx) => (
+ <tr key={user.studentNumber} className={userIdx % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+ <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+ <div className="flex items-center">
+ <div className="flex-shrink-0 h-10 w-10">
+ <img className="h-10 w-10 rounded-full" src={user.picture} alt="" />
+ </div>
+ <div className="ml-4">
+ <div className="text-sm font-medium text-gray-900">{user.nom.toUpperCase()}</div>
+ <div className="text-sm text-gray-500">{user.prenom}</div>
+ </div>
+ </div>
+ </td>
+ <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.email}</td>
+ <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.studentNumber}</td>
+ <td className="py-4 whitespace-nowrap text-sm text-gray-500">
+ {user.adherant
+ ? <span className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
+ Oui
+ </span>
+ : <span className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800">
+ Non
</span>
- }</td>
- </tr>
- ))}
- </tbody>
- </table>
- </div>}
- </div>
- </div>
- )
-
+ }</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>}
+ </div>
+ </div>
+ );
};
export default Users;
diff --git a/yarn.lock b/yarn.lock
index fab6ed33016d4ab2d1ebea3f8027d3838350218c..59d7541ae0d8aa359f037cd361094ae7230e6ae6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2643,6 +2643,13 @@ axe-core@^4.0.2:
resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.3.3.tgz"
integrity sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==
+axios@^0.24.0:
+ version "0.24.0"
+ resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+ integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+ dependencies:
+ follow-redirects "^1.14.4"
+
axobject-query@^2.2.0:
version "2.2.0"
resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
@@ -5209,6 +5216,11 @@ follow-redirects@^1.0.0:
resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.4.tgz"
integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
+follow-redirects@^1.14.4:
+ version "1.14.6"
+ resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.6.tgz#8cfb281bbc035b3c067d6cd975b0f6ade6e855cd"
+ integrity sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==
+
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"