Merge branch 'master' of https://git.etud.insa-toulouse.fr/bamarty/Site-Proximo into master
This commit is contained in:
commit
d6c7c56f4e
9 changed files with 175 additions and 24 deletions
|
|
@ -10,6 +10,18 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#bulleSelect{
|
||||
background-color: rgba(255, 255, 255, 0.719);
|
||||
border-radius: 30px;
|
||||
width:200px;
|
||||
height:200px;
|
||||
margin-top:30px;
|
||||
margin-right:15px;
|
||||
margin-left:15px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#imageordescblock{
|
||||
width:100%;
|
||||
height:145px;
|
||||
|
|
|
|||
10
src/css/Components/selected.css
Normal file
10
src/css/Components/selected.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
#selectedBox{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#selectedTxt{
|
||||
color : white;
|
||||
text-align: center;
|
||||
font-family: 'Wellfleet', cursive;
|
||||
font-size:2vw
|
||||
}
|
||||
|
|
@ -7,6 +7,12 @@
|
|||
display:flex
|
||||
}
|
||||
|
||||
#selectedBlock{
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
margin-top:3vh;
|
||||
}
|
||||
|
||||
#articleBlock{
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ class ArticleDetails extends React.Component {
|
|||
currentArticle:'',
|
||||
redirect:false,
|
||||
redcrossPressed:false,
|
||||
quantity:this.props.quantity
|
||||
quantity:this.props.quantity,
|
||||
selected:false
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -81,14 +82,67 @@ class ArticleDetails extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
selectArticles = (e) => {
|
||||
console.log(e.target.id)
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
if (this.state.redirect) {
|
||||
return (<Redirect to='/stock'/>)
|
||||
}
|
||||
return(
|
||||
<div id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
|
||||
this.state.selected ?
|
||||
<div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
|
||||
{this.state.redcrossPressed ?
|
||||
<div id="confirmation">
|
||||
<div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
|
||||
<div id="choice">
|
||||
<div id="yes" onClick={this.deleteArticle}>Oui</div>
|
||||
<div id="no" onClick={this.handleNoDelete}>Non</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
<div id="imageordescblock">
|
||||
{this.state.currentArticle === this.props.id ?
|
||||
<>
|
||||
<div id="icons">
|
||||
<div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
|
||||
<Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
|
||||
</div>
|
||||
<div id="redcross" onClick={this.handleRedCross}>
|
||||
<Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
|
||||
</div>
|
||||
</div>
|
||||
<div id="categoryDiv">
|
||||
<img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
|
||||
</div>
|
||||
<div id="descandprice">
|
||||
<h1 id="desc">{this.props.desc}</h1>
|
||||
<p id ="price">{this.props.price} €</p>
|
||||
</div>
|
||||
</>
|
||||
: <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
|
||||
}
|
||||
</div>
|
||||
<h1 id="name">{this.props.name}</h1>
|
||||
<div id="count">
|
||||
<Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
|
||||
<div id="countNumber">
|
||||
<p id="countNumberTxt">{this.state.quantity}</p>
|
||||
</div>
|
||||
<Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
:
|
||||
<div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}>
|
||||
{this.state.redcrossPressed ?
|
||||
<div id="confirmation">
|
||||
<div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ class Articles extends React.Component {
|
|||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="articleContainer">
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ class Categories extends Component {
|
|||
</div>
|
||||
</div>
|
||||
<div id="catBigIconBlock">
|
||||
<img id="catBigIcon" src={`https://etud.insa-toulouse.fr/~proximo/v2/storage/icon/${this.state.categoryFocused.icon}`} alt="bonjour"/>
|
||||
<img id="catBigIcon" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.state.categoryFocused.icon}`} alt="bonjour"/>
|
||||
</div>
|
||||
<div id="redCrossBlock">
|
||||
<div onClick={this.handleDisplayConfirmation} id="redCross">
|
||||
|
|
@ -106,7 +106,7 @@ class Categories extends Component {
|
|||
{if (category.id !== this.state.categoryFocused.id){
|
||||
return(<div onClick={() => this.handleSwitchCategory(category)} key={category.id} id="categoryItem">
|
||||
<div id="categoryItemIcon">
|
||||
<img id="categoryItemIconImg" src={`https://etud.insa-toulouse.fr/~proximo/v2/storage/icon/${category.icon}`} alt='bonjour'/>
|
||||
<img id="categoryItemIconImg" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${category.icon}`} alt='bonjour'/>
|
||||
</div>
|
||||
<div id="categoryItemName">
|
||||
{category.name}
|
||||
|
|
|
|||
|
|
@ -143,10 +143,7 @@ class EditArticle extends React.Component {
|
|||
this.setState({onNewCategory:false})
|
||||
}
|
||||
|
||||
|
||||
render(){
|
||||
console.log(this.props.article);
|
||||
console.log(this.state);
|
||||
if (this.state.onNewCategory){
|
||||
return <CreateCategory reload={false} handleCloseAbove={this.handleCloseNewCategory}/>
|
||||
} else {
|
||||
|
|
|
|||
22
src/js/Components/Selected.js
Normal file
22
src/js/Components/Selected.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React, { Component } from 'react';
|
||||
import '../../css/Components/selected.css'
|
||||
|
||||
class Selected extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state = {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="selectedBox">
|
||||
<p id="selectedTxt">Vous avez sélectionné 3 articles</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Selected;
|
||||
|
|
@ -16,6 +16,7 @@ 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 {
|
||||
|
||||
|
|
@ -32,18 +33,22 @@ export default class Stock extends React.Component {
|
|||
articles:[],
|
||||
categoryToModify:'',
|
||||
categorySorted:false,
|
||||
dividedArticles:[],
|
||||
onSortedCategories:false,
|
||||
onSearch:false,
|
||||
<<<<<<< HEAD
|
||||
sortOrder: 0
|
||||
=======
|
||||
selectedArticles:[]
|
||||
sortOrder: 0
|
||||
>>>>>>> a7884d9a3b4883254a979124e14663b887b85821
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getArticles()
|
||||
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
// Implémenter la fonction sortArticles :
|
||||
sortArticles = (sortType) => {
|
||||
let sorted;
|
||||
|
|
@ -67,6 +72,32 @@ export default class Stock extends React.Component {
|
|||
this.setState({onSortedCategories:true})
|
||||
})
|
||||
}else{
|
||||
=======
|
||||
|
||||
sortArticles = (sortType) => {
|
||||
|
||||
let sorted;
|
||||
if (sortType === "name"){
|
||||
this.setState({orderIsVisible: false})
|
||||
if (this.state.sortOrder === 0) {
|
||||
//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 {
|
||||
this.setState({orderIsVisible: true})
|
||||
this.setState({sortOrder: 0})
|
||||
sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
|
||||
}
|
||||
|
||||
if (sortType === 'category_id'){
|
||||
>>>>>>> a7884d9a3b4883254a979124e14663b887b85821
|
||||
this.setState({articles:sorted},() => {
|
||||
this.setState({onSortedCategories:true})
|
||||
})
|
||||
}else{
|
||||
this.setState({articles:sorted},() => {
|
||||
console.log(this.state.articles)
|
||||
this.setState({onSortedCategories:false})
|
||||
|
|
@ -184,20 +215,37 @@ export default class Stock extends React.Component {
|
|||
}
|
||||
|
||||
handleSubmit = event => {
|
||||
<<<<<<< HEAD
|
||||
event.preventDefault()
|
||||
this.searchArticles();
|
||||
=======
|
||||
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()
|
||||
}
|
||||
}
|
||||
>>>>>>> a7884d9a3b4883254a979124e14663b887b85821
|
||||
}
|
||||
|
||||
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">
|
||||
<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 ?
|
||||
|
|
@ -207,6 +255,9 @@ export default class Stock extends React.Component {
|
|||
<div id="sortBlock">
|
||||
<Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsVisible={this.state.orderIsVisible}/>
|
||||
</div>
|
||||
<div id="selectedBlock">
|
||||
<Selected/>
|
||||
</div>
|
||||
<div id="articleBlock">
|
||||
{this.state.articles && this.state.articles[0] ?
|
||||
this.state.onSortedCategories ?
|
||||
|
|
|
|||
Loading…
Reference in a new issue