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

NavBar réutilisable + Ajout SearchBar

Browse source
This commit is contained in:
Kongzibapt 2021-01-30 20:00:48 +01:00
parent 5c15b94cc3
commit a806dfd31e
7 changed files with 57 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/css/Components/navbar.css
View file

@ -35,6 +35,7 @@
background:linear-gradient(180deg, #D82903 0%, #720000 100%);
border-radius: 0px 0px 0px 2vw;
z-index: 1;
cursor: pointer;
}
#choice {

7
src/css/Components/searchbar.css
View file

@ -28,4 +28,11 @@
#searchInput::-webkit-search-cancel-button{
display:none;
}
#searchBarBlock{
display:flex;
justify-content: center;
position: relative;
top : -2vw
}

7
src/css/Views/stock.css
View file

@ -3,13 +3,6 @@
overflow: overlay;
}
#searchBarBlock{
display:flex;
justify-content: center;
position: relative;
top : -2vw
}
#sortBlock{
display:flex
}

13
src/js/Components/Navbar.js
View file

@ -26,19 +26,24 @@ class Navbar extends React.Component {
render(){
if (this.state.redirect){
return (<Redirect to="/ticket"/>)
return (<Redirect to={this.props.redirect}/>)
}
return (
<div id="navbar">
<div id="createedit" onClick={this.handleDisplay} onMouseLeave={this.handleNormal}>
{!this.state.mouseOn && <p>Créer</p>}
{this.state.mouseOn && <div id="choice"><p onClick={this.props.handleNewArticle}>Article</p><p>|</p><p onClick={this.props.handleNewCategory}>Catégorie</p></div>}
{this.props.leftLeft ?
<>
{!this.state.mouseOn && <p>{this.props.left}</p>}
{this.state.mouseOn && <div id="choice"><p onClick={this.props.handleNewArticle}>{this.props.leftLeft}</p><p>{this.props.leftMiddle}</p><p onClick={this.props.handleNewCategory}>{this.props.leftRight}</p></div>}
</>
: <p>{this.props.left}</p>
}
</div>
<div id="blank">
OK
</div>
<div id="update" onClick={this.navToTicket}>
<p>Le Ticket de Caisse</p>
<p>{this.props.right}</p>
</div>
</div>
)

12
src/js/Components/SearchBar.js
View file

@ -1,3 +1,4 @@
import axios from 'axios';
import React from 'react';
import '../../css/Components/searchbar.css';
@ -5,17 +6,18 @@ class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state ={
}
}
render() {
return (
<div>
<form method="POST" onSubmit={this.props.onSubmit}>
<input onChange={this.props.onChange} id="searchInput" type='search' placeholder='Rechercher'/>
</form>
<div id="searchBarBlock">
<div>
<form method="POST" onSubmit={this.props.handleSubmit}>
<input onChange={this.props.handleSearchChange} id="searchInput" type='search' placeholder='Rechercher'/>
</form>
</div>
</div>
);
}

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

@ -28,7 +28,6 @@ export default class Stock extends React.Component {
onEditCategory:false,
article:{},
imageFile:{},
search:'',
articles:[],
categoryToModify:''
}
@ -79,34 +78,6 @@ export default class Stock extends React.Component {
this.setState({onNewCategory:false})
}
handleSearchChange = event => {
this.setState({search : event.target.value},()=>
{
console.log(this.state.search);
this.searchArticles();
})
}
handleSubmit = event => {
event.preventDefault()
this.searchArticles();
}
searchArticles = () => {
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}, () => {
console.log(this.state)
})
})
.catch(error => {
console.log(error.response)
})
}
handleCategories = category => {
this.setState({currentCategory:category})
this.setState({onCategories:true})
@ -139,6 +110,34 @@ export default class Stock extends React.Component {
})
}
searchArticles = () => {
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}, () => {
console.log(this.state.articles)
})
})
.catch(error => {
console.log(error.response)
})
}
handleSearchChange = event => {
this.setState({search : event.target.value},()=>
{
this.searchArticles();
})
}
handleSubmit = event => {
event.preventDefault()
this.searchArticles();
}
render() {
if (!sessionStorage.getItem('token')){
@ -147,13 +146,11 @@ export default class Stock extends React.Component {
return (
<div id="stock">
<Header title='Le Stock'/>
<Navbar handleNewArticle={this.handleNewArticle} handleNewCategory={this.handleNewCategory}/>
<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}
<div id="searchBarBlock">
<SearchBar onSubmit={this.handleSubmit} onChange={this.handleSearchChange}/>
</div>
<SearchBar handleSubmit={this.handleSubmit} handleSearchChange={this.handleSearchChange}/>
<div id="sortBlock">
<Sort handleChangeSortType={this.handleChangeSortType}/>
</div>

4
src/js/Views/Ticket.js
View file

@ -5,6 +5,7 @@ import Navbar from '../Components/Navbar';
import 'react-perfect-scrollbar/dist/css/styles.css';
import Footer from '../Components/Footer';
import { Link } from 'react-router-dom';
import SearchBar from '../Components/SearchBar';
export default class Stock extends React.Component {
@ -24,7 +25,8 @@ export default class Stock extends React.Component {
return (
<div id="stock">
<Header title='Le Ticket de Caisse'/>
<Navbar/>
<Navbar redirect="/stock" left="Monnaie" right="Le Stock"/>
<SearchBar/>
<Footer/>
</div>
)}