529 lines
No EOL
17 KiB
JavaScript
529 lines
No EOL
17 KiB
JavaScript
import React from 'react';
|
|
import '../../css/Views/stock.css';
|
|
import Header from '../Components/Header';
|
|
import Articles from '../Components/Articles';
|
|
import ArticlesByCategory from '../Components/ArticlesByCategory';
|
|
import Navbar from '../Components/Navbar';
|
|
import CreateArticle from '../Components/CreateArticle';
|
|
import 'react-perfect-scrollbar/dist/css/styles.css';
|
|
import EditArticle from '../Components/EditArticle';
|
|
import CreateCategory from '../Components/CreateCategory';
|
|
import Footer from '../Components/Footer';
|
|
import SearchBar from '../Components/SearchBar';
|
|
import axios from 'axios';
|
|
import AppLoader from '../Components/AppLoader';
|
|
import Categories from '../Components/Categories';
|
|
import EditCategory from '../Components/EditCategory';
|
|
import Sort from '../Components/Sort';
|
|
import { Link } from 'react-router-dom';
|
|
import Selected from '../Components/Selected';
|
|
|
|
export default class Stock extends React.Component {
|
|
|
|
constructor(props){
|
|
super(props)
|
|
this.state = {
|
|
onNewArticle:false,
|
|
onEditArticle:false,
|
|
onNewCategory:false,
|
|
onCategories:false,
|
|
onEditCategory:false,
|
|
article:{},
|
|
imageFile:{},
|
|
articles:[],
|
|
categoryToModify:'',
|
|
categorySorted:false,
|
|
onSortedCategories:false,
|
|
onSearch:false,
|
|
lowToHigh: true,
|
|
selectedArticles:[],
|
|
counter:0,
|
|
code:'',
|
|
dividedArticles:[]
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.getArticles()
|
|
}
|
|
|
|
|
|
|
|
|
|
deleteSelectedArticles = () => {
|
|
for (let i = 0 ; i < this.state.selectedArticles.length ; i++) {
|
|
|
|
axios.delete(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`)
|
|
.then(res => {
|
|
console.log(res.data)
|
|
if (i === this.state.selectedArticles.length-1){
|
|
this.setState({counter:0,selectedArticles:[]},()=>{
|
|
this.getArticles()
|
|
})
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log(error.response)
|
|
})
|
|
}
|
|
}
|
|
|
|
// OnClick : selon si on clique sur tel ou tel element : on va colorer en blanc et selectionner
|
|
// on va minus ou plus quantity et colorer en rouge
|
|
|
|
selectArticles = (e,id) => {
|
|
let currentElement = e.target;
|
|
let iconElement = e.target;
|
|
if (e.target.tagName === "path"){
|
|
currentElement = e.target.parentElement
|
|
iconElement = currentElement
|
|
}
|
|
if ((e.target.id === "minusIcon") || (e.target.id === "plusIcon")){
|
|
iconElement = currentElement
|
|
}
|
|
while (currentElement.id !== "bulle"){
|
|
currentElement = currentElement.parentElement
|
|
}
|
|
|
|
if ((e.target.id !== "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross") && (e.target.id !== "no") && (e.target.id !== "minusIcon") && (e.target.id !== "plusIcon")){
|
|
let index = this.getArticleById(id).i;
|
|
let articles = this.state.articles;
|
|
articles[index].selected = !this.state.articles[index].selected;
|
|
console.log(articles[index].selected);
|
|
this.setState({articles:articles},()=>{
|
|
if (this.state.articles[index].selected){
|
|
this.select(id)
|
|
if (this.state.articles[index].quantity === 0){
|
|
this.colorArticle("red&white",currentElement)
|
|
} else {
|
|
this.colorArticle("white",currentElement)
|
|
}
|
|
} else {
|
|
this.deselect(id)
|
|
if (this.state.articles[index].quantity === 0){
|
|
this.colorArticle("red",currentElement)
|
|
} else {
|
|
this.colorArticle("grey",currentElement)
|
|
}
|
|
}
|
|
})
|
|
} else if (iconElement.id === "minusIcon"){
|
|
this.minusQuantity(currentElement,id)
|
|
} else if (iconElement.id === "plusIcon"){
|
|
this.plusQuantity(currentElement,id)
|
|
}
|
|
}
|
|
|
|
colorArticle = (color,element) => {
|
|
|
|
switch (color) {
|
|
case "white":
|
|
element.style.cssText = "background-color:rgba(255, 255, 255, 0.75);"
|
|
break;
|
|
case "grey" :
|
|
element.style.cssText = "background-color:rgba(105, 105, 105, 0.28);"
|
|
break;
|
|
case "red" :
|
|
element.style.cssText = "background-color:rgba(255, 21, 21, 0.28);"
|
|
break;
|
|
case "red&white" :
|
|
element.style.cssText = "background-color:rgba(255, 139, 139, 0.60);"
|
|
break;
|
|
default :
|
|
break;
|
|
}
|
|
}
|
|
|
|
plusQuantity = (element,id) => {
|
|
let index = this.getArticleById(id).i;
|
|
let articles = this.state.articles;
|
|
articles[index].quantity++;
|
|
console.log(articles[index]);
|
|
this.setState({articles:articles},()=>{
|
|
this.updateArticle(index,id);
|
|
if (this.state.articles[index].quantity > 0 ){
|
|
if (this.state.articles[index].selected){
|
|
this.colorArticle("white",element)
|
|
} else {
|
|
this.colorArticle("grey",element)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
minusQuantity = (element,id) => {
|
|
let index = this.getArticleById(id).i;
|
|
|
|
if (this.state.articles[index].quantity > 0){
|
|
let articles = this.state.articles;
|
|
articles[index].quantity--;
|
|
console.log(articles[index]);
|
|
this.setState({articles:articles},()=>{
|
|
this.updateArticle(index,id);
|
|
if (this.state.articles[index].quantity === 0 ){
|
|
if (this.state.articles[index].selected){
|
|
this.colorArticle("red&white",element)
|
|
} else {
|
|
this.colorArticle("red",element)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
getBulleById = (id) => {
|
|
let element;
|
|
let articles = document.getElementById("articles")
|
|
for (let i = 0; i < articles.childElementCount ; i++){
|
|
if (id == articles.children[i].title){
|
|
element = articles.children[i]
|
|
}
|
|
}
|
|
|
|
return element
|
|
}
|
|
|
|
|
|
updateSelectedArticles = (value) => {
|
|
|
|
|
|
let articles = this.state.selectedArticles;
|
|
|
|
for (let i = 0 ; i < this.state.selectedArticles.length ; i++) {
|
|
|
|
|
|
if ((value !== -1) || articles[i].quantity !== 0){
|
|
articles[i].quantity+=value;
|
|
|
|
|
|
this.setState({selectedArticles:articles},() => {
|
|
axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${this.state.selectedArticles[i].id}`,
|
|
{
|
|
'name':this.state.selectedArticles[i].name,
|
|
'description':this.state.selectedArticles[i].description,
|
|
'quantity':this.state.selectedArticles[i].quantity,
|
|
'price':this.state.selectedArticles[i].price,
|
|
'code':this.state.selectedArticles[i].code,
|
|
'category_id':this.state.selectedArticles[i].category.id
|
|
}
|
|
)
|
|
|
|
.then(res => {
|
|
let element = this.getBulleById(this.state.selectedArticles[i].id)
|
|
if (this.state.selectedArticles[i].quantity > 0){
|
|
this.colorArticle("white",element)
|
|
} else {
|
|
this.colorArticle("red&white",element)
|
|
}
|
|
|
|
})
|
|
.catch(error => {
|
|
console.log(error.response)
|
|
})
|
|
|
|
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
updateArticle = (index,id) => {
|
|
axios.put(`https://etud.insa-toulouse.fr/~proximo/v2/api/articles/${id}`,
|
|
{
|
|
'name':this.state.articles[index].name,
|
|
'description':this.state.articles[index].description,
|
|
'quantity':this.state.articles[index].quantity,
|
|
'price':this.state.articles[index].price,
|
|
'code':this.state.articles[index].code,
|
|
'category_id':this.state.articles[index].category.id
|
|
}
|
|
)
|
|
.then(res => {
|
|
console.log(res.data)
|
|
})
|
|
.catch(error => {
|
|
console.log(error.response)
|
|
})
|
|
}
|
|
|
|
select = (id) => {
|
|
console.log(id)
|
|
this.setState({counter:this.state.counter+1},()=>{
|
|
console.log(this.state.counter)
|
|
this.state.selectedArticles.push(this.getArticleById(id).current)
|
|
console.log(this.state.selectedArticles)
|
|
})
|
|
}
|
|
|
|
// RECHERCHE DE L'ARTICLE
|
|
getArticleById(id) {
|
|
let i=0;
|
|
let current = this.state.articles[i];
|
|
let trouve = current.id === id ? true : false;
|
|
while(!trouve) {
|
|
i++;
|
|
current = this.state.articles[i];
|
|
if (current.id === id) {
|
|
trouve = !trouve;
|
|
}
|
|
}
|
|
return({current,i});
|
|
}
|
|
|
|
deselect = (id) => {
|
|
|
|
this.setState({counter:this.state.counter-1},()=>{
|
|
console.log(this.state.counter)
|
|
this.setState({selectedArticles: this.state.selectedArticles.filter((item) => item !== this.getArticleById(id).current)},()=>{
|
|
console.log(this.state.selectedArticles)
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
// Implémenter la fonction sortArticles :
|
|
sortArticles = (sortType) => {
|
|
|
|
let sorted;
|
|
//TRI PAR ORDRE ALPHABETIQUE OU PRIX
|
|
if (sortType === "name"){
|
|
this.setState({orderIsHidden: false}) //choix d'ordre possible
|
|
if (this.state.lowToHigh) {
|
|
//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 if (sortType === "price") {
|
|
console.log('tri pix')
|
|
this.setState({orderIsHidden: false}) //choix d'ordre possible
|
|
if (this.state.lowToHigh) {
|
|
//ordre croissant
|
|
sorted = [...this.state.articles].sort((a, b) => a.price - b.price)
|
|
} else {
|
|
//ordre décroissant
|
|
sorted = [...this.state.articles].sort((a, b) => b.price - a.price)
|
|
}
|
|
} else {
|
|
console.log('autre 1')
|
|
this.setState({orderIsHidden: true})
|
|
this.setState({lowToHigh: false})
|
|
sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
|
|
}
|
|
|
|
//TRI PAR CATEGORIE
|
|
if (sortType === 'category_id'){
|
|
this.setState({articles:sorted},() => {
|
|
this.splitArticlesCategories()
|
|
this.setState({onSortedCategories:true})
|
|
})
|
|
}else{
|
|
console.log('autre 2')
|
|
this.setState({articles:sorted},() => {
|
|
console.log(this.state.articles)
|
|
this.setState({onSortedCategories:false})
|
|
})
|
|
}
|
|
}
|
|
|
|
getArticles = () => {
|
|
axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
|
|
.then(res => {
|
|
for (let i = 0; i<res.data.length;i++){
|
|
res.data[i].selected = false;
|
|
}
|
|
this.setState({articles : res.data}, () => {
|
|
console.log(this.state.articles)
|
|
this.setState({sortType: "name"})
|
|
})
|
|
})
|
|
.catch(error => {
|
|
console.log(error.response)
|
|
})
|
|
}
|
|
|
|
handleNewArticle = () => {
|
|
this.setState({onNewArticle:true},()=>{
|
|
console.log(this.state.onNewArticle)
|
|
})
|
|
}
|
|
|
|
handleCloseNewArticle = () => {
|
|
this.setState({onNewArticle:false})
|
|
}
|
|
|
|
handleArticleEdition = (article) => {
|
|
this.setState({article:article})
|
|
this.setState({onEditArticle:true});
|
|
}
|
|
|
|
handleCloseEditArticle = () => {
|
|
this.setState({onEditArticle:false})
|
|
}
|
|
|
|
handleNewCategory = () => {
|
|
this.setState({onNewCategory:true})
|
|
}
|
|
|
|
handleCloseNewCategory = () => {
|
|
this.setState({onNewCategory:false})
|
|
}
|
|
|
|
handleCategories = category => {
|
|
this.setState({currentCategory:category})
|
|
this.setState({onCategories:true})
|
|
}
|
|
|
|
handleCloseCategories = () => {
|
|
this.setState({onCategories:false})
|
|
}
|
|
|
|
handleEditCategory = category => {
|
|
this.handleCloseCategories()
|
|
this.setState({categoryToModify:category})
|
|
this.setState({onEditCategory:true})
|
|
}
|
|
|
|
handleCloseEditCategory = () => {
|
|
this.setState({onEditCategory:false})
|
|
}
|
|
|
|
|
|
|
|
//ATTENTION ça a changé, on passe directement le string en argument (j'avais besoin d'utiliser cette fonction autrement, voir dans Sort.js)
|
|
handleChangeSortType = (type) => {
|
|
this.setState({sortType: type}, () => {
|
|
this.sortArticles(this.state.sortType)
|
|
})
|
|
}
|
|
|
|
//Gère le choix de tri par ordre croissant ou décroissant quand c'est possible avec le tri actuel
|
|
handleChangeSortOrder = () => {
|
|
this.setState({lowToHigh: !this.state.lowToHigh},() => {
|
|
this.sortArticles(this.state.sortType);
|
|
});
|
|
}
|
|
|
|
searchArticles = () => {
|
|
this.setState({onSearch:true})
|
|
let bodyFormData = new FormData()
|
|
bodyFormData.set('search',this.state.search)
|
|
axios.post('https://etud.insa-toulouse.fr/~proximo/v2/api/articles',bodyFormData)
|
|
.then(res => {
|
|
this.setState({articles : res.data}, () => {
|
|
if (this.state.sortType === "category_id"){
|
|
this.splitArticlesCategories()
|
|
}
|
|
})
|
|
})
|
|
.catch(error => {
|
|
console.log(error.response)
|
|
})
|
|
}
|
|
|
|
splitArticlesCategories = () => {
|
|
let counterTab = 0;
|
|
let divided = [];
|
|
divided.push([this.state.articles[0]])
|
|
for (let i = 1; i<this.state.articles.length;i++){
|
|
if (this.state.articles[i].category_id === this.state.articles[i-1].category_id){
|
|
divided[counterTab].push(this.state.articles[i])
|
|
} else {
|
|
counterTab++
|
|
divided.push([this.state.articles[i]])
|
|
}
|
|
}
|
|
this.setState({dividedArticles:divided},()=>{
|
|
this.getElementandColorSplit()
|
|
})
|
|
|
|
}
|
|
|
|
getElementandColorSplit = () => {
|
|
let articles = document.getElementById("articles")
|
|
for (let i = 0; i<articles.childElementCount;i++){
|
|
for (let j = 0; j<articles.children[i].children[2].childElementCount; j++){
|
|
if (this.state.dividedArticles[i][j].quantity === 0){
|
|
this.colorArticle("red",articles.children[i].children[2].children[j])
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
handleSearchChange = event => {
|
|
this.setState({search : event.target.value},()=>
|
|
{
|
|
this.searchArticles();
|
|
})
|
|
}
|
|
|
|
handleSubmit = event => {
|
|
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()
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
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" tabIndex={-1} onKeyDown={this.closeWithEscape}>
|
|
<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"/>
|
|
{this.state.onNewArticle ?
|
|
<CreateArticle keepNewArticle={this.handleNewArticle} handleCloseAbove={this.handleCloseNewArticle}/>
|
|
: null}
|
|
<SearchBar handleSubmit={this.handleSubmit} handleSearchChange={this.handleSearchChange}/>
|
|
<div id="sortBlock">
|
|
<Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsHidden={this.state.orderIsHidden} lowToHigh={this.state.lowToHigh}/>
|
|
</div>
|
|
<div id="selectedBlock">
|
|
<Selected delete={this.deleteSelectedArticles} updateArticles={this.updateSelectedArticles} counter={this.state.counter}/>
|
|
</div>
|
|
<div id="articleBlock">
|
|
{this.state.articles && this.state.articles[0] ?
|
|
this.state.onSortedCategories ?
|
|
<ArticlesByCategory selectArticles={this.selectArticles} colorArticle={this.colorArticle} handleCategories={this.handleCategories} articles={this.state.dividedArticles} editionArticle={this.handleArticleEdition}/>
|
|
: <Articles selectArticles={this.selectArticles} colorArticle={this.colorArticle} plus={this.plusQuantity} minus={this.minusQuantity} deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
|
|
: <AppLoader/>
|
|
}
|
|
</div>
|
|
{this.state.onEditArticle ?
|
|
<EditArticle handleCloseAbove={this.handleCloseEditArticle} article={this.state.article}/>
|
|
: null}
|
|
{this.state.onNewCategory ?
|
|
<CreateCategory reload={true} handleCloseAbove={this.handleCloseNewCategory}/>
|
|
: null }
|
|
{this.state.onCategories ?
|
|
<Categories handleEditCategory={this.handleEditCategory} currentCategory={this.state.currentCategory} handleCloseAbove={this.handleCloseCategories}/>
|
|
: null}
|
|
{this.state.onEditCategory ?
|
|
<EditCategory category={this.state.categoryToModify} handleCloseAbove={this.handleCloseEditCategory}/>
|
|
: null}
|
|
<Footer/>
|
|
</div>
|
|
)}
|
|
}
|
|
} |