debut ajout tri par prix
This commit is contained in:
parent
6d41983135
commit
4f47f96b4c
3 changed files with 79 additions and 35 deletions
|
@ -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>
|
||||||
|
|
|
@ -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}/>
|
||||||
|
|
|
@ -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>
|
||||||
|
)}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue