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

Mise en forme tri categorie

Browse source
This commit is contained in:
Kongzibapt 2021-02-01 12:09:50 +01:00
parent 3756e90ee5
commit 98c5bd6d81
4 changed files with 46 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/css/Components/articlesbycategory.css Normal file
View file

@ -0,0 +1,21 @@
#categoryName{
color : white;
text-align: left;
font-family: 'Wellfleet', cursive;
font-size:max(2.5vw,30px);
}
#categoryBlock{
width:60vw;
margin-bottom:5vh;
}
#bulles{
display:flex;
}
#underlinment{
background-color: white;
width:30%;
height:0.3vh;
}

26
src/js/Components/ArticlesByCategory.js
View file

@ -1,5 +1,5 @@
import React from 'react';
import '../../css/Components/articles.css'
import '../../css/Components/articlesbycategory.css'
import ArticleDetails from './ArticleDetails'
class ArticlesByCategory extends React.Component {
@ -12,10 +12,16 @@ class ArticlesByCategory extends React.Component {
}
componentDidMount(){
console.log(this.props.articles)
this.splitArticlesCategories()
}
componentDidUpdate(){
if (this.props.onSearch){
// implémenter une fonction de recherche en React sur articles
}
}
splitArticlesCategories = () => {
let counterTab = 0;
let divided = [];
@ -36,17 +42,21 @@ class ArticlesByCategory extends React.Component {
render() {
console.log(this.state.articles)
return (
<div id="articleContainer">
<div id="articles">
{this.state.articles[0][0] &&
this.state.articles.map((divided) =>
<>
<p>{divided[0].category.name}</p>
{divided.map((article) =>
<ArticleDetails handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
)}
</>
<div id="categoryBlock">
<p id="categoryName">{divided[0].category.name}</p>
<div id="underlinment"></div>
<div id="bulles">
{divided.map((article) =>
<ArticleDetails handleCategories={this.props.handleCategories} editArticle={this.props.editionArticle} key={article.id} id={article.id} name={article.name} img={article.image} desc={article.description} price={article.price} quantity={article.quantity} code={article.code} category={article.category}/>
)}
</div>
</div>
)
}
</div>

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

@ -19,7 +19,6 @@ class Sort extends Component {
<div id="selectBlock">
<div id="selectBox">
<select id="sortSelect" onChange={this.props.handleChangeSortType}>
<option className="optionSort" value="Id"></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="Quantité">Quantité</option>

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

@ -33,12 +33,14 @@ export default class Stock extends React.Component {
categoryToModify:'',
categorySorted:false,
dividedArticles:[],
onSortedCategories:false
onSortedCategories:false,
onSearch:false
}
}
componentDidMount() {
this.getArticles()
}
// Implémenter la fonction sortArticles :
@ -58,7 +60,7 @@ export default class Stock extends React.Component {
}else{
this.setState({articles:sorted},() => {
console.log(this.state.articles)
this.setState({onSortedCategories:false})
})
}
@ -71,6 +73,7 @@ export default class Stock extends React.Component {
.then(res => {
this.setState({articles : res.data}, () => {
console.log(this.state.articles)
this.sortArticles("name")
})
})
.catch(error => {
@ -138,6 +141,7 @@ export default class Stock extends React.Component {
}
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)
@ -185,7 +189,7 @@ export default class Stock extends React.Component {
<div id="articleBlock">
{this.state.articles && this.state.articles[0] ?
this.state.onSortedCategories ?
<ArticlesByCategory handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
<ArticlesByCategory onSearch={this.state.onSearch} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
: <Articles handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
: <AppLoader/>
}