debut ajout tri par prix

This commit is contained in:
Florian Ehr 2021-02-05 18:47:17 +01:00
parent 6d41983135
commit 4f47f96b4c
3 changed files with 79 additions and 35 deletions

View file

@ -23,10 +23,11 @@ class Sort extends Component {
<option className="optionSort" value="Ordre Alphabétique">Ordre Alphabétique</option> <option className="optionSort" value="Ordre Alphabétique">Ordre Alphabétique</option>
<option className="optionSort" value="Catégorie">Catégorie</option> <option className="optionSort" value="Catégorie">Catégorie</option>
<option className="optionSort" value="Quantité">Quantité</option> <option className="optionSort" value="Quantité">Quantité</option>
<option className="optionSort" value="Quantité">Prix</option>
</select> </select>
</div> </div>
</div> </div>
<p id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsVisible}> <p id="sortOrder" onClick={this.props.handleChangeSortOrder} hidden={this.props.orderIsHidden}>
{this.props.lowToHigh ? "A-Z" : "Z-A"} {this.props.lowToHigh ? "A-Z" : "Z-A"}
</p> </p>
</div> </div>

View file

@ -17,7 +17,6 @@ import EditCategory from '../Components/EditCategory';
import Sort from '../Components/Sort'; import Sort from '../Components/Sort';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Selected from '../Components/Selected'; import Selected from '../Components/Selected';
import BarcodeReader from 'react-barcode-reader'
export default class Stock extends React.Component { export default class Stock extends React.Component {
@ -67,8 +66,9 @@ export default class Stock extends React.Component {
sortArticles = (sortType) => { sortArticles = (sortType) => {
let sorted; let sorted;
//TRI PAR ORDRE ALPHABETIQUE
if (sortType === "name"){ if (sortType === "name"){
this.setState({orderIsVisible: false}) this.setState({orderIsHidden: false})
if (this.state.lowToHigh) { if (this.state.lowToHigh) {
//ordre alphabétique croissant //ordre alphabétique croissant
sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name)) sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name))
@ -77,21 +77,27 @@ export default class Stock extends React.Component {
sorted = [...this.state.articles].sort((a, b) => b.name.localeCompare(a.name)) sorted = [...this.state.articles].sort((a, b) => b.name.localeCompare(a.name))
} }
} else { } else {
this.setState({orderIsVisible: true}) this.setState({orderIsHidden: true})
this.setState({lowToHigh: false}) this.setState({lowToHigh: false})
sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]); sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
} }
//TRI PAR CATEGORIE
if (sortType === 'category_id'){ if (sortType === 'category_id'){
this.setState({articles:sorted},() => { this.setState({articles:sorted},() => {
this.setState({onSortedCategories:true}) this.setState({onSortedCategories:true})
}) })
}else{ }else{
this.setState({articles:sorted},() => { this.setState({articles:sorted},() => {
console.log(this.state.articles) console.log(this.state.articles)
this.setState({onSortedCategories:false}) this.setState({onSortedCategories:false})
}) })
} }
//TRI PAR PRIX
if (sortType === 'price') {
}
} }
getArticles = () => { getArticles = () => {
@ -161,6 +167,8 @@ export default class Stock extends React.Component {
this.sortArticles("category_id") this.sortArticles("category_id")
} else if(this.state.sortType === "Quantité"){ } else if(this.state.sortType === "Quantité"){
this.sortArticles("quantity") this.sortArticles("quantity")
} else if(this.state.sortType === "Prix"){
this.sortArticles("price");
} }
}) })
@ -216,19 +224,12 @@ export default class Stock extends React.Component {
} }
} }
handleScan = (data) => {
this.setState({code:data},()=>{
console.log(this.state.code)
})
}
render() { render() {
if (!sessionStorage.getItem('token')){ if (!sessionStorage.getItem('token')){
return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>) return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
} else { } else {
return ( return (
<div id="stock" tabIndex={-1} onKeyDown={this.closeWithEscape}> <div id="stock" tabIndex={-1} onKeyDown={this.closeWithEscape}>
<BarcodeReader onScan={this.handleScan}/>
<Header title='Le Stock'/> <Header title='Le Stock'/>
<Navbar handleNewArticle={this.handleNewArticle} handleNewCategory={this.handleNewCategory} right="Le Ticket de Caisse" left="Créer" leftLeft="Article" leftMiddle="|" leftRight="Catégorie" redirect="/ticket"/> <Navbar handleNewArticle={this.handleNewArticle} handleNewCategory={this.handleNewCategory} right="Le Ticket de Caisse" left="Créer" leftLeft="Article" leftMiddle="|" leftRight="Catégorie" redirect="/ticket"/>
{this.state.onNewArticle ? {this.state.onNewArticle ?
@ -236,7 +237,7 @@ export default class Stock extends React.Component {
: null} : null}
<SearchBar handleSubmit={this.handleSubmit} handleSearchChange={this.handleSearchChange}/> <SearchBar handleSubmit={this.handleSubmit} handleSearchChange={this.handleSearchChange}/>
<div id="sortBlock"> <div id="sortBlock">
<Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsVisible={this.state.orderIsVisible} lowToHigh={this.state.lowToHigh}/> <Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsHidden={this.state.orderIsHidden} lowToHigh={this.state.lowToHigh}/>
</div> </div>
<div id="selectedBlock"> <div id="selectedBlock">
<Selected counter={this.state.counter}/> <Selected counter={this.state.counter}/>

View file

@ -6,34 +6,76 @@ import 'react-perfect-scrollbar/dist/css/styles.css';
import Footer from '../Components/Footer'; import Footer from '../Components/Footer';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import SearchBar from '../Components/SearchBar'; import SearchBar from '../Components/SearchBar';
import BarcodeReader from 'react-barcode-reader';
import axios from 'axios';
export default class Stock extends React.Component { export default class Stock extends React.Component {
constructor(props){ constructor(props){
super(props) super(props)
this.state = { this.state = {
articles: [],
scannedCode: ''
} }
this.handleScan = this.handleScan.bind(this);
}
getArticles = () => {
axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
.then(res => {
this.setState({articles : res.data}, () => {
console.log(this.state.articles)
})
})
.catch(error => {
console.log(error.response)
})
} }
componentDidMount() { componentDidMount() {
} this.getArticles();
}
render() {
if (!sessionStorage.getItem('token')){ // RECHERCHE DE L'ARTICLE
return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>) getArticleByCode() {
} else { let i=0;
return ( let current = this.state.articles[i];
<div id="stock"> let trouve = current === this.state.scannedCode ? true : false;
<Header title='Le Ticket de Caisse'/> while(!trouve) {
<Navbar redirect="/stock" left="Monnaie" right="Le Stock"/> i++;
<SearchBar/> current = this.state.articles[i];
<div id="emptyTicketBox"> if (current.scannedCode === this.state.scannedCode) {
<p id="emptyTicket"> trouve = !trouve;
Scanne tes articles pour remplir le ticket de caisse ! }
</p>
</div>
<Footer/>
</div>
)}
} }
} console.log(current);
}
handleScan(code) {
this.setState({result: code}, () => {
console.log(this.state.result);
});
}
render() {
if (!sessionStorage.getItem('token')){
return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
} else {
return (
<div id="stock">
<Header title='Le Ticket de Caisse'/>
<Navbar redirect="/stock" left="Monnaie" right="Le Stock"/>
<BarcodeReader onScan={this.handleScan}/>
<SearchBar/>
<div id="emptyTicketBox">
<p id="emptyTicket">
Scanne tes articles pour remplir le ticket de caisse !
</p>
</div>
<Footer/>
</div>
)}
}
}