diff --git a/front/src/App.js b/front/src/App.js
index 080821a19cd4d21ae382470d0a0eb0cdbc31feb2..6e9e209bb191e222287d54b469fb620cc4892275 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -9,12 +9,13 @@ import env from './.env';
import isLogged from './utils/Oauth';
function App() {
- return (
+ const logged = isLogged();
+ return (
<Router >
- <PageHeader />
- <Route exact path='/' component={AllToucanPage} />
- <Route exact path='/admin' render={()=>isLogged() ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
+ <PageHeader isLogged={logged} />
+ <Route exact path='/admin' render={()=>logged ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
<Route exact path='/login/:token' component={Login} />
+ <AllToucanPage isAdmin={logged}/>
</Router>
);
}
diff --git a/front/src/view/LogoutButton.js b/front/src/utils/LogoutButton.js
similarity index 100%
rename from front/src/view/LogoutButton.js
rename to front/src/utils/LogoutButton.js
diff --git a/front/src/view/AdminPage/showToucan/ModalSuppression.js b/front/src/utils/ModalSuppression.js
similarity index 97%
rename from front/src/view/AdminPage/showToucan/ModalSuppression.js
rename to front/src/utils/ModalSuppression.js
index 95ae2b8a2cae5b97fa102449b92e10430329fbf6..6a225cbb0e685916bcdbc644692f93109432b803 100644
--- a/front/src/view/AdminPage/showToucan/ModalSuppression.js
+++ b/front/src/utils/ModalSuppression.js
@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import {Modal, Button, Image,Message} from 'semantic-ui-react'
-import env from '../../../.env'
+import env from '../.env'
class ModalSupression extends Component {
state = {error:''};
diff --git a/front/src/utils/yearSelector.js b/front/src/utils/yearSelector.js
index 368117eb9f11da170fcb55b1ada2775709242030..11754b82a15e5695e5c2a04f4399d11d5f7eb1d6 100644
--- a/front/src/utils/yearSelector.js
+++ b/front/src/utils/yearSelector.js
@@ -16,13 +16,16 @@ function SelectYear(props) {
});
}
return(
- <Dropdown
- selection
- placeholder="value"
- options = {years}
- defaultValue = {props.beginYear}
- onChange = {(_,dropdown) => props.updateFrame(dropdown.value)}
- />
+ <div style={props.style}>
+ <span style={{marginRight:'1em'}}>Année de parution :</span>
+ <Dropdown
+ selection
+ placeholder="value"
+ options = {years}
+ defaultValue = {props.beginYear}
+ onChange = {(_,dropdown) => props.updateFrame(dropdown.value)}
+ />
+ </div>
)
}
diff --git a/front/src/view/AdminPage/AdminPage.js b/front/src/view/AdminPage/AdminPage.js
index 744bc65a15a6e69ec3943d2033b07eba1d79598b..87e4cfc9094e80e5884dedaff77cd5ce017f0fef 100644
--- a/front/src/view/AdminPage/AdminPage.js
+++ b/front/src/view/AdminPage/AdminPage.js
@@ -1,29 +1,18 @@
import React, {Component} from 'react';
import {Segment} from 'semantic-ui-react';
-import ToucanTable from './showToucan/ToucanTable';
+//import ToucanTable from './showToucan/ToucanTable';
import FormToucan from './FormToucan';
-import LogoutButton from '../LogoutButton';
+//import LogoutButton from '../LogoutButton';
class MainPage extends Component {
render(){
return (
- <Segment.Group >
- <Segment padded style={{margin:"3%"}}>
- <div style={{textAlign:"right"}}>
- <LogoutButton />
- </div>
- <div>
+ <Segment style={{margin:"3em",padding:"2em"}}>
<h2 style={{textAlign:"center"}}>Rajout de Toucan</h2>
<FormToucan />
- </div>
</Segment>
- <Segment textAlign="center" padded style={{margin:"3%"}} >
- <h2>Les Toucans</h2>
- <ToucanTable style={{margin:"50px"}}/>
- </Segment>
- </Segment.Group>
);
}
diff --git a/front/src/view/AdminPage/showToucan/ToucanLine.js b/front/src/view/AdminPage/showToucan/ToucanLine.js
deleted file mode 100644
index 6e6d038c06ffb74245fbf341f76deba527c12bbe..0000000000000000000000000000000000000000
--- a/front/src/view/AdminPage/showToucan/ToucanLine.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, {Component} from 'react'
-import {Table, Image, Button} from 'semantic-ui-react'
-import ModalSuppression from './ModalSuppression'
-import env from '../../../.env'
-
-class ToucanLine extends Component {
- constructor(props) {
- super(props)
- this.state = {isModalOpen: false}
- this.closeModal = this.closeModal.bind(this)
- }
-
- closeModal() {
- this.setState({ isModalOpen: false })
- }
-
- render(){
- return (
- <Table.Row>
- <Table.Cell >
- <a href={`${env.backURL}/toucan/pdf/${this.props.toucan["_id"]}.pdf`}>
- <Image
- src={`${env.backURL}/toucan/img/${this.props.toucan["_id"]}`}
- size="small"
- />
- </a>
- </Table.Cell>
- <Table.Cell >
- {this.props.toucan.title}
- </Table.Cell>
- <Table.Cell >
- {(new Date(this.props.toucan.date).toLocaleDateString())}
- </Table.Cell>
- <Table.Cell style={{width:"fit-content"}}>
- <Button negative icon="cancel" onClick={() => this.setState({isModalOpen: true})}/>
- <ModalSuppression
- open={this.state.isModalOpen}
- toucanId={this.props.toucan["_id"]}
- closeModal={this.closeModal}
- />
- </Table.Cell>
- </Table.Row>
- )
- }
-}
-
-export default ToucanLine
\ No newline at end of file
diff --git a/front/src/view/AdminPage/showToucan/ToucanTable.js b/front/src/view/AdminPage/showToucan/ToucanTable.js
deleted file mode 100644
index 24ff85addcc84a6c74f767e2ffa73af621324806..0000000000000000000000000000000000000000
--- a/front/src/view/AdminPage/showToucan/ToucanTable.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, {Component} from 'react'
-import {Table} from 'semantic-ui-react'
-import ToucanLine from './ToucanLine'
-import env from '../../../.env'
-
-class ToucanTable extends Component{
- constructor(){
- super();
- this.state = {
- toucans: [],
- }
- }
-
- componentDidMount(){
- fetch(`${env.backURL}/toucan/toucans`)
- .then(result => {
- return result.json()
- })
- .then(toucans => {
- this.setState({toucans})
- })
- .catch(err => console.log(err))
- }
-
- render() {
- return(
- <Table style={{margin:"auto"}} celled padded collapsing size="small" textAlign="center">
- <Table.Header>
- <Table.Row>
- <Table.HeaderCell>Cover</Table.HeaderCell>
- <Table.HeaderCell>Thème</Table.HeaderCell>
- <Table.HeaderCell>Date</Table.HeaderCell>
- <Table.HeaderCell>Supprimer</Table.HeaderCell>
- </Table.Row>
- </Table.Header>
- {this.state.toucans.map(toucan => {
- return <ToucanLine key={toucan["_id"]} toucan={toucan}/>
- })}
- </Table>
- )
- }
-}
-
-export default ToucanTable
\ No newline at end of file
diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
index 0fd0ba5d1689985967308e908f57c4ee3b83a3b4..3f3de7f564fa07c9d82eee9f8a103292e0b1c270 100644
--- a/front/src/view/AllToucanPage/AllToucanPage.js
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -41,26 +41,20 @@ class AllToucan extends Component {
render(){
return (
<Segment style={{textAlign:"center", margin:"3em",padding:"2em"}} >
+
<SelectYear
+ style={{marginBottom:"2em"}}
beginYear={beginYear}
updateFrame = {this.updateFrame.bind(this)}
/>
- {/* <Dropdown
- selection
- placeholder="value"
- options = {years}
- defaultValue = {beginYear}
- onChange = {(_,props) => this.setState({
- before : (new Date(props.value+1,7,31)).getTime(),
- after : (new Date(props.value,8,1)).getTime()
- }, () => this.updateToucan())}
- /> */}
<Card.Group centered >
{this.state.toucans.map( toucan => {
return <ToucanCard
image={`${env.backURL}/toucan/img/${toucan["_id"]}`}
link={`${env.backURL}/toucan/pdf/${toucan["_id"]}.pdf`}
header={toucan.title}
+ toucanId={toucan._id}
+ isAdmin={this.props.isAdmin}
date={(new Date(toucan.date).toLocaleDateString())}
key={toucan._id}
/>
diff --git a/front/src/view/AllToucanPage/ToucanCard.js b/front/src/view/AllToucanPage/ToucanCard.js
index d13d80e3bcb322d01b519593f5cb1d041deda52c..a4422c33ee75ae76286b2bb50a16d2a0331153e8 100644
--- a/front/src/view/AllToucanPage/ToucanCard.js
+++ b/front/src/view/AllToucanPage/ToucanCard.js
@@ -1,18 +1,38 @@
-import React from 'react'
-import {Card, Image} from 'semantic-ui-react'
+import React, {useState} from 'react'
+import {Card, Image, Button} from 'semantic-ui-react'
+import ModalSuppression from './../../utils//ModalSuppression'
const ToucanCard = ({...props}) => {
+ const [isModalOpen, setIsModalOpen] = useState(false)
+ let supressModal,suppressButton = undefined
+
+ if (props.isAdmin){
+ supressModal = <ModalSuppression
+ open= {isModalOpen}
+ toucanId={props.toucanId}
+ closeModal={()=> {setIsModalOpen(!isModalOpen); console.log(props.toucanId)}} />
+
+ suppressButton = <Button
+ style={{position:"absolute",left:"5px",top:"5px"}}
+ negative
+ icon="cancel"
+ onClick={(e) => {e.preventDefault(); setIsModalOpen(!isModalOpen)}}/>
+ }
+
return (
<Card
- href={props.link}
link
style={{margin:"1em"}}
>
- <Card.Content>
- <Card.Header content={props.header}/>
+ <Card.Content href={props.link} >
+ <Card.Header>
+ {suppressButton}
+ {props.header}
+ </Card.Header>
<Card.Meta content={props.date} textAlign="right"/>
</Card.Content>
- <Image src={props.image}/>
+ <Image href={props.link} src={props.image}/>
+ {supressModal}
</Card>
)
}
diff --git a/front/src/view/PageHeader.js b/front/src/view/PageHeader.js
index 6e5c4d0705cbf0174750f7ec4ba5bee9c57576e1..fdb525e258974be30998e646bdd8de31d56685eb 100644
--- a/front/src/view/PageHeader.js
+++ b/front/src/view/PageHeader.js
@@ -1,19 +1,23 @@
import React from 'react';
import {Image, Button} from 'semantic-ui-react'
+import LogoutButton from '../utils/LogoutButton'
import {Link} from 'react-router-dom'
import logo from '../image/logo.png'
-const PageHeader = () => {
+const PageHeader = (props) => {
return (
[
// Si le format est celui d'un Pc
- <div class="desktopItem" style={{textAlign:"center"}}>
+ <div class="desktopItem" style={{textAlign:"center"}}> {console.log(props.isLogged)}
<Image src={logo} alt="Logo" href="/" style={{ width:'40%'}} />
- <Link to="/admin" style={{position:"absolute",top:'2em' ,right:"2em"}} >
- <Button icon="male" content="Espace admin"/>
- </Link>
+ {props.isLogged ? <LogoutButton style={{position:"absolute",top:'2em' ,right:"2em"}}/>:
+ <Link to="/admin" style={{position:"absolute",top:'2em' ,right:"2em"}} >
+ <Button icon="male" content="Espace admin"/>
+ </Link>
+
+ }
</div>,
// Si le format est celui d'un téléphone
<div class="phoneItem" style={{textAlign:"center"}}>