test push du merge

src/css/Components/sort.css

@@ -2,7 +2,7 @@
     display:flex;
     flex:1;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
 }
 
     #sortTxt{
@@ -12,6 +12,19 @@
         margin-right:1vw;
     }
 
+    #selectAndOrder{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+        
+        #sortOrder{
+            color: white;
+            font-family:'Wellfleet',cursive;
+            font-size: 1.2vw;
+            cursor: pointer;
+        }
+
         #selectBlock{
             background:#057B26;
             margin-left:1vw;

src/js/Components/Sort.js

@@ -16,6 +16,7 @@ class Sort extends Component {
                 <div id="sortTxt">
                     Trier par 
                 </div>
+                <div id="selectAndOrder">
                     <div id="selectBlock">
                         <div id="selectBox">
                             <select id="sortSelect" onChange={this.props.handleChangeSortType}>
@@ -25,6 +26,10 @@ class Sort extends Component {
                             </select>
                         </div>
                     </div>
+                    <div id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsVisible}>
+                            A-Z
+                    </div>
+                </div>
             </div>
         );
     }

src/js/Views/Stock.js

@@ -35,6 +35,7 @@ export default class Stock extends React.Component {
       categorySorted:false,
       onSortedCategories:false,
       onSearch:false,
+      sortOrder: 0,
       selectedArticles:[]
     }
   }
@@ -43,13 +44,22 @@ export default class Stock extends React.Component {
     this.getArticles()
 }
 
-
+// Implémenter la fonction sortArticles :
 sortArticles = (sortType) => {
     
   let sorted;
   if (sortType === "name"){
+    this.setState({orderIsVisible: false})
+    if (this.state.sortOrder === 0) {
+      //ordre alphabétique croissant
       sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name))
     } else {
+      //ordre alphabétique décroissant
+      sorted = [...this.state.articles].sort((a, b) => b.name.localeCompare(a.name))
+    }
+  } else {
+    this.setState({orderIsVisible: true})
+    this.setState({sortOrder: 0})
     sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
   }
 
@@ -63,9 +73,6 @@ sortArticles = (sortType) => {
       this.setState({onSortedCategories:false})
     })
   }
-
-  
-  
 }
 
   getArticles = () => {
@@ -127,7 +134,7 @@ sortArticles = (sortType) => {
     this.setState({onEditCategory:false})
   }
 
-  handleChangeSortType = e => {
+  handleChangeSortType = (e) => {
     this.setState({sortType:e.target.value},()=>{
       if (this.state.sortType === "Ordre Alphabétique"){
         this.sortArticles("name")
@@ -140,6 +147,18 @@ sortArticles = (sortType) => {
     })
   }
 
+  //Gère le choix de tri par ordre croissant ou décroissant quand c'est possible avec le tri actuel
+  handleChangeSortOrder = (e) => {
+    this.setState({sortOrder: (this.state.sortOrder + 1) % 2});
+    console.log(this.state.sortOrder)
+    if (this.state.sortOrder === 1) {
+      e.target.innerHTML = "Z-A"
+    } else {
+      e.target.innerHTML = "A-Z"
+    }
+    this.sortArticles("name");
+  }
+
   searchArticles = () => {
     this.setState({onSearch:true})
     let bodyFormData = new FormData()
@@ -181,7 +200,6 @@ sortArticles = (sortType) => {
       this.handleCloseCategories()
     }
   }
-  }
 
     render() {
       if (!sessionStorage.getItem('token')){
@@ -196,7 +214,7 @@ sortArticles = (sortType) => {
               : null}
               <SearchBar handleSubmit={this.handleSubmit} handleSearchChange={this.handleSearchChange}/>
               <div id="sortBlock">
-                <Sort handleChangeSortType={this.handleChangeSortType}/>
+                <Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsVisible={this.state.orderIsVisible}/>
               </div>
               <div id="selectedBlock">
                 <Selected/>