From b934e694debf01ae2343101e7fa3a848887e557c Mon Sep 17 00:00:00 2001 From: Flo E Date: Wed, 3 Feb 2021 16:01:12 +0100 Subject: [PATCH] =?UTF-8?q?Premiere=20version=20du=20tri=20alphab=C3=A9tiq?= =?UTF-8?q?ue=20ordre=20croissant/d=C3=A9croissant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/Components/sort.css | 97 +++++++++++++++++++++---------------- src/js/Components/Sort.js | 21 +++++--- src/js/Views/Stock.js | 41 ++++++++++++---- 3 files changed, 99 insertions(+), 60 deletions(-) diff --git a/src/css/Components/sort.css b/src/css/Components/sort.css index e444534..9d4dad5 100644 --- a/src/css/Components/sort.css +++ b/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 ; - } \ No newline at end of file + 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 ; + } \ No newline at end of file diff --git a/src/js/Components/Sort.js b/src/js/Components/Sort.js index e868455..885fc4f 100644 --- a/src/js/Components/Sort.js +++ b/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 {
Trier par
-
-
- +
+
+
+ +
+
+
diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js index 2699fc0..0b70bbe 100644 --- a/src/js/Views/Stock.js +++ b/src/js/Views/Stock.js @@ -34,7 +34,8 @@ export default class Stock extends React.Component { categorySorted:false, dividedArticles:[], onSortedCategories:false, - onSearch:false + onSearch:false, + sortOrder: 0 } } @@ -45,18 +46,26 @@ 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)) + 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]); } if (sortType === 'category_id'){ - this.setState({articles:sorted},() => { - this.setState({onSortedCategories:true}) - }) + this.setState({articles:sorted},() => { + this.setState({onSortedCategories:true}) + }) }else{ this.setState({articles:sorted},() => { console.log(this.state.articles) @@ -127,7 +136,7 @@ export default class Stock extends React.Component { 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 +149,18 @@ export default class Stock extends React.Component { }) } + //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,8 +184,8 @@ export default class Stock extends React.Component { } handleSubmit = event => { - event.preventDefault() - this.searchArticles(); + event.preventDefault() + this.searchArticles(); } @@ -184,7 +205,7 @@ export default class Stock extends React.Component { : null}
- +
{this.state.articles && this.state.articles[0] ?