bamarty/Site-Proximo
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Premiere version du tri alphabétique ordre croissant/décroissant

Browse source
This commit is contained in:
Florian Ehr 2021-02-03 16:01:12 +01:00
parent 98c5bd6d81
commit b934e694de
3 changed files with 99 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
src/css/Components/sort.css
View file

@ -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;
}
#selectBlock{
background:#057B26;
margin-left:1vw;
border-radius: 1.8vw;
}
#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;
#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;
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{
background: transparent;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
.optionSort{
background:#057B26 ;
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;
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 ;
}

19
src/js/Components/Sort.js
View file

@ -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>

41
src/js/Views/Stock.js
View file

@ -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}
<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="articleBlock">
{this.state.articles && this.state.articles[0] ?