Nouvelle View : Ticket

src/js/Components/AppRouter.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {Switch, Route} from "react-router-dom";
 import Stock from '../Views/Stock';
 import Home from '../Views/Home';
+import Ticket from '../Views/Ticket';
 
  class AppRouter extends React.Component {
     render() {
@@ -9,6 +10,7 @@ import Home from '../Views/Home';
         <>
             <Switch>
                 <Route exact path="/stock" component={Stock}/>
+                <Route exact path="/ticket" component={Ticket}/>
                 <Route exact path="/" component={Home}/>
             </Switch>
         </>

src/js/Components/Navbar.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Redirect } from 'react-router';
 import '../../css/Components/navbar.css';
 
 
@@ -19,7 +20,14 @@ class Navbar extends React.Component {
         this.setState({mouseOn:false})
     }
 
+    navToTicket = () => {
+        this.setState({redirect:true})
+    }
+
     render(){
+        if (this.state.redirect){
+          return (<Redirect to="/ticket"/>)
+        }
         return (
             <div id="navbar">
                 <div id="createedit" onClick={this.handleDisplay} onMouseLeave={this.handleNormal}>
@@ -29,8 +37,8 @@ class Navbar extends React.Component {
                 <div id="blank">
                   OK
                 </div>
-                <div id="update">
-                  <p>Mettre à jour</p>
+                <div id="update" onClick={this.navToTicket}>
+                  <p>Le Ticket de Caisse</p>
                 </div>
               </div>
         )

src/js/Components/Sort.js

@@ -19,6 +19,7 @@ class Sort extends Component {
                 <div id="selectBlock">
                     <div id="selectBox">
                         <select id="sortSelect" onChange={this.props.handleChangeSortType}>
+                            <option className="optionSort" value="Id"></option>
                             <option className="optionSort" value="Ordre Alphabétique">Ordre Alphabétique</option>
                             <option className="optionSort" value="Catégorie">Catégorie</option>
                             <option className="optionSort" value="Quantité">Quantité</option>

src/js/Views/Stock.js

@@ -30,19 +30,18 @@ export default class Stock extends React.Component {
       imageFile:{},
       search:'',
       articles:[],
-      categoryToModify:'',
-      sortType:''
+      categoryToModify:''
     }
   }
 
   componentDidMount() {
-    this.getArticles("name")
+    this.getArticles()
 }
 
-  getArticles = sortType => {
-    let bodyFormData = new FormData();
-    bodyFormData.set('sortType', sortType)
-    axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/articles/sort',bodyFormData)
+// Implémenter la fonction sortArticles :
+
+  getArticles = () => {
+    axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
         .then(res => {
             this.setState({articles : res.data}, () => {
                 console.log(this.state.articles)
@@ -130,11 +129,11 @@ export default class Stock extends React.Component {
   handleChangeSortType = e => {
     this.setState({sortType:e.target.value},()=>{
       if (this.state.sortType === "Ordre Alphabétique"){
-        this.getArticles("name")
+        this.sortArticles("name")
       } else if(this.state.sortType === "Catégorie"){
-        this.getArticles("category_id")
+        this.sortArticles("category_id")
       } else if(this.state.sortType === "Quantité"){
-        this.getArticles("quantity")
+        this.sortArticles("quantity")
       } 
 
     })

src/js/Views/Ticket.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import '../../css/Views/ticket.css';
+import Header from '../Components/Header';
+import Navbar from '../Components/Navbar';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import Footer from '../Components/Footer';
+import { Link } from 'react-router-dom';
+
+export default class Stock extends React.Component {
+
+  constructor(props){
+    super(props)
+    this.state = {
+    }
+  }
+
+  componentDidMount() {
+}
+
+    render() {
+      if (!sessionStorage.getItem('token')){
+        return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
+      } else {
+      return (
+          <div id="stock">
+              <Header title='Le Ticket de Caisse'/>
+              <Navbar/>
+              <Footer/>
+          </div>
+      )}
+    }
+  }