Ajout de ArticlesByCategory

src/css/Views/ticket.css

@@ -0,0 +1,14 @@
+#emptyTicketBox{
+    height:50vh;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#emptyTicket{
+    color : white;
+    text-align: center;
+    font-family: 'Wellfleet', cursive;
+    font-size:max(2.5vw,30px);
+    width:25%;
+}

src/js/Components/Articles.js

@@ -10,16 +10,16 @@ class Articles extends React.Component {
         }
     }
 
-
+    componentDidMount(){
-   
+      
-
+    }
 
     
     render() {
       return (
           <div id="articleContainer">
             <div id="articles">
-            {
+              {
                 this.props.articles.map((article) => 
                 <ArticleDetails handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>    
             )}

src/js/Components/ArticlesByCategory.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import '../../css/Components/articles.css'
+import ArticleDetails from './ArticleDetails'
+
+class ArticlesByCategory extends React.Component {
+    constructor(props){
+        super(props)
+        this.state = {
+            mouseEnter:false,
+            articles:this.props.articles
+        }
+    }
+
+    componentDidMount(){
+      console.log(this.props.articles)
+      this.splitArticlesCategories()
+    }
+
+    splitArticlesCategories = () => {
+        let counterTab = 0;
+        let divided = [];
+        divided.push([this.state.articles[0]])
+        for (let i = 1; i<this.state.articles.length;i++){
+          if (this.state.articles[i].category_id === this.state.articles[i-1].category_id){
+            divided[counterTab].push(this.state.articles[i])
+          } else {
+           counterTab++
+           divided.push([this.state.articles[i]])
+          }
+        }
+        this.setState({articles:divided},()=>{
+          console.log(this.state.articles)
+        })
+        
+      }
+
+    
+    render() {
+      return (
+          <div id="articleContainer">
+            <div id="articles">
+                {this.state.articles[0][0] &&
+                    this.state.articles.map((divided) => 
+                        <>
+                        <p>{divided[0].category.name}</p>
+                        {divided.map((article) =>
+                        <ArticleDetails handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
+                        )}
+                        </>
+                    )
+                }
+            </div>
+          </div>
+      )
+    }
+  }
+
+  export default ArticlesByCategory

src/js/Components/SearchBar.js

@@ -1,4 +1,3 @@
-import axios from 'axios';
 import React from 'react';
 import '../../css/Components/searchbar.css';
 

src/js/Views/Stock.js

@@ -2,6 +2,7 @@ import React from 'react';
 import '../../css/Views/stock.css';
 import Header from '../Components/Header';
 import Articles from '../Components/Articles';
+import ArticlesByCategory from '../Components/ArticlesByCategory';
 import Navbar from '../Components/Navbar';
 import CreateArticle from '../Components/CreateArticle';
 import 'react-perfect-scrollbar/dist/css/styles.css';
@@ -29,7 +30,10 @@ export default class Stock extends React.Component {
       article:{},
       imageFile:{},
       articles:[],
-      categoryToModify:''
+      categoryToModify:'',
+      categorySorted:false,
+      dividedArticles:[],
+      onSortedCategories:false
     }
   }
 
@@ -38,6 +42,29 @@ export default class Stock extends React.Component {
 }
 
 // Implémenter la fonction sortArticles :
+  sortArticles = (sortType) => {
+    
+    let sorted;
+    if (sortType === "name"){
+      sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name))
+    } else {
+      sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
+    }
+
+    if (sortType === 'category_id'){
+        this.setState({articles:sorted},() => {
+          this.setState({onSortedCategories:true})
+        })
+    }else{
+      this.setState({articles:sorted},() => {
+        console.log(this.state.articles)
+        
+      })
+    }
+
+   
+    
+  }
 
   getArticles = () => {
     axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
@@ -137,6 +164,7 @@ export default class Stock extends React.Component {
   }
 
 
+  
 
 
     render() {
@@ -155,8 +183,10 @@ export default class Stock extends React.Component {
                 <Sort handleChangeSortType={this.handleChangeSortType}/>
               </div>
               <div id="articleBlock">
-              {this.state.articles && this.state.articles[0]? 
+              {this.state.articles && this.state.articles[0] ? 
-                <Articles handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
+                this.state.onSortedCategories ?
+                  <ArticlesByCategory handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
+                : <Articles handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
               : <AppLoader/>
               }
               </div>

src/js/Views/Ticket.js

@@ -27,6 +27,11 @@ export default class Stock extends React.Component {
               <Header title='Le Ticket de Caisse'/>
               <Navbar redirect="/stock" left="Monnaie" right="Le Stock"/>
               <SearchBar/>
+              <div id="emptyTicketBox">
+                <p id="emptyTicket">
+                Scanne tes articles pour remplir le ticket de caisse ! 
+                </p>
+              </div>
               <Footer/>
           </div>
       )}