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

Mise en forme Selected Actions

Browse source
This commit is contained in:
Kongzibapt 2021-02-04 19:27:45 +01:00
parent 820dac4f12
commit 056396092b
6 changed files with 64 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/css/Components/articles.css
View file

@ -1,7 +1,7 @@
#articleContainer{
display:flex;
justify-content:center;
margin-top:5vw;
margin-top:2vw;
margin-bottom:5vw
}

9
src/css/Components/selected.css
View file

@ -1,5 +1,9 @@
#selectedBox{
display: flex;
height:5vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
#selectedTxt{
@ -8,3 +12,8 @@
font-family: 'Wellfleet', cursive;
font-size:2vw
}
#selectedActions{
display: flex;
flex-direction:row;
}

5
src/js/Components/ArticleDetails.js
View file

@ -87,6 +87,11 @@ class ArticleDetails extends React.Component {
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")){
this.setState({selected:!this.state.selected},()=>{
console.log(this.state.selected)
if (this.state.selected){
this.props.select()
} else {
this.props.deselect()
}
})
}
}

3
src/js/Components/Articles.js
View file

@ -14,13 +14,14 @@ class Articles extends React.Component {
}
render() {
return (
<div id="articleContainer">
<div id="articles">
{
this.props.articles.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}/>
<ArticleDetails deselect={this.props.deselect} select={this.props.select} 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>

29
src/js/Components/Selected.js
View file

@ -1,5 +1,9 @@
import React, { Component } from 'react';
import '../../css/Components/selected.css'
import '../../css/Components/selected.css';
import { Icon} from '@iconify/react';
import minusIcon from '@iconify/icons-fa-solid/minus';
import plusIcon from '@iconify/icons-fa-solid/plus';
import { Tooltip, Zoom } from '@material-ui/core';
class Selected extends Component {
@ -13,7 +17,28 @@ class Selected extends Component {
render() {
return (
<div id="selectedBox">
<p id="selectedTxt">Vous avez sélectionné 3 articles</p>
{this.props.counter ?
<>
<p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
<div id = "selectedActions">
<Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
<div>
<Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
</div>
</Tooltip>
<Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
<div>
<Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
</div>
</Tooltip>
<Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
<div>
<Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
</div>
</Tooltip>
</div>
</>
: null}
</div>
);
}

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

@ -36,7 +36,8 @@ export default class Stock extends React.Component {
onSortedCategories:false,
onSearch:false,
sortOrder: 0,
selectedArticles:[]
selectedArticles:[],
counter:0
}
}
@ -44,6 +45,22 @@ export default class Stock extends React.Component {
this.getArticles()
}
select = () => {
this.setState({counter:this.state.counter+1},()=>{
console.log(this.state.counter)
})
}
deselect = () => {
this.setState({counter:this.state.counter-1},()=>{
console.log(this.state.counter)
})
}
// Implémenter la fonction sortArticles :
sortArticles = (sortType) => {
@ -218,13 +235,13 @@ export default class Stock extends React.Component {
<Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsVisible={this.state.orderIsVisible}/>
</div>
<div id="selectedBlock">
<Selected/>
<Selected counter={this.state.counter}/>
</div>
<div id="articleBlock">
{this.state.articles && this.state.articles[0] ?
this.state.onSortedCategories ?
<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}/>
: <Articles deselect={this.deselect} select={this.select} handleCategories={this.handleCategories} articles={this.state.articles} editionArticle={this.handleArticleEdition}/>
: <AppLoader/>
}
</div>