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,51 +12,64 @@
         margin-right:1vw;
     }
 
-    #selectBlock{
-        background:#057B26;
-        margin-left:1vw;
-        border-radius: 1.8vw;
+    #selectAndOrder{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
-
-        #selectBox{
-            background: url("../../img/arrow_select.png") no-repeat;
-            background-size: 2.5vw;
-            background-position-y: center;
-            background-position-x: 16vw;
-        }
         
+        #sortOrder{
+            color: white;
+            font-family:'Wellfleet',cursive;
+            font-size: 1.2vw;
+            cursor: pointer;
+        }
 
-            #sortSelect{
-                background: transparent;
-                appearance: none;
-                -webkit-appearance: none;
-                -moz-appearance: none;
-                
-                color:white;
-                font-family:'Wellfleet',cursive;
-                font-size:1.5vw;
-                cursor: pointer;
-                padding:0.3vw 3vw 0.3vw 1vw;
-                border: 0.2vw solid black;
-                border-radius: 1.8vw;
+        #selectBlock{
+            background:#057B26;
+            margin-left:1vw;
+            border-radius: 1.8vw;
+        }
+
+            #selectBox{
+                background: url("../../img/arrow_select.png") no-repeat;
+                background-size: 2.5vw;
+                background-position-y: center;
+                background-position-x: 16vw;
             }
+            
 
-            #sortSelect:focus{
-                background: transparent;
-                appearance: none;
-                -webkit-appearance: none;
-                -moz-appearance: none;
+                #sortSelect{
+                    background: transparent;
+                    appearance: none;
+                    -webkit-appearance: none;
+                    -moz-appearance: none;
+                    
+                    color:white;
+                    font-family:'Wellfleet',cursive;
+                    font-size:1.5vw;
+                    cursor: pointer;
+                    padding:0.3vw 3vw 0.3vw 1vw;
+                    border: 0.2vw solid black;
+                    border-radius: 1.8vw;
+                }
 
-                outline:none;
-                color:white;
-                font-family:'Wellfleet',cursive;
-                font-size:1.5vw;
-                cursor: pointer;
-                padding:0.3vw 3vw 0.3vw 1vw;
-                border: 0.2vw solid black;
-                border-radius: 1.8vw;
-            }
+                #sortSelect:focus{
+                    background: transparent;
+                    appearance: none;
+                    -webkit-appearance: none;
+                    -moz-appearance: none;
 
-                .optionSort{
-                    background:#057B26 ;
-                }
+                    outline:none;
+                    color:white;
+                    font-family:'Wellfleet',cursive;
+                    font-size:1.5vw;
+                    cursor: pointer;
+                    padding:0.3vw 3vw 0.3vw 1vw;
+                    border: 0.2vw solid black;
+                    border-radius: 1.8vw;
+                }
+
+                    .optionSort{
+                        background:#057B26 ;
+                    }

src/js/Components/Sort.js

@@ -6,7 +6,7 @@ class Sort extends Component {
     constructor(props){
         super(props)
         this.state = {
-
+            
         }
     }
 
@@ -16,13 +16,18 @@ class Sort extends Component {
                 <div id="sortTxt">
                     Trier par 
                 </div>
-                <div id="selectBlock">
-                    <div id="selectBox">
-                        <select id="sortSelect" onChange={this.props.handleChangeSortType}>
-                            <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>
-                        </select>
+                <div id="selectAndOrder">
+                    <div id="selectBlock">
+                        <div id="selectBox">
+                            <select id="sortSelect" onChange={this.props.handleChangeSortType}>
+                                <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>
+                            </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"){
-    sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.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()
@@ -163,23 +182,22 @@ sortArticles = (sortType) => {
   }
 
   handleSubmit = event => {
-  event.preventDefault()
-  this.searchArticles();
-  } 
+    event.preventDefault()
+    this.searchArticles();
+  }
 
   closeWithEscape = (e) => {
     if (e.keyCode === 27){
-     if (this.state.onEditArticle){
-       this.handleCloseEditArticle()
-     } else if(this.state.onNewArticle){
-       this.handleCloseNewArticle()
-     } else if(this.state.onNewCategory){
-       this.handleCloseNewCategory()
-     } else if(this.state.onEditCategory){
-       this.handleCloseEditCategory()
-     } else if(this.state.onCategories){
-       this.handleCloseCategories()
-     }
+    if (this.state.onEditArticle){
+      this.handleCloseEditArticle()
+    } else if(this.state.onNewArticle){
+      this.handleCloseNewArticle()
+    } else if(this.state.onNewCategory){
+      this.handleCloseNewCategory()
+    } else if(this.state.onEditCategory){
+      this.handleCloseEditCategory()
+    } else if(this.state.onCategories){
+      this.handleCloseCategories()
     }
   }
 
@@ -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/>