Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Damien Armillon
API Toucan
Commits
409f049f
Commit
409f049f
authored
Nov 18, 2019
by
Damien Armillon
Browse files
Refactor front
parent
cef6fe15
Changes
10
Hide whitespace changes
Inline
Side-by-side
front/src/App.js
View file @
409f049f
...
...
@@ -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
>
);
}
...
...
front/src/
view
/LogoutButton.js
→
front/src/
utils
/LogoutButton.js
View file @
409f049f
File moved
front/src/
view/AdminPage/showToucan
/ModalSuppression.js
→
front/src/
utils
/ModalSuppression.js
View file @
409f049f
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
:
''
};
...
...
front/src/utils/yearSelector.js
View file @
409f049f
...
...
@@ -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
>
)
}
...
...
front/src/view/AdminPage/AdminPage.js
View file @
409f049f
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
>
);
}
...
...
front/src/view/AdminPage/showToucan/ToucanLine.js
deleted
100644 → 0
View file @
cef6fe15
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
front/src/view/AdminPage/showToucan/ToucanTable.js
deleted
100644 → 0
View file @
cef6fe15
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
front/src/view/AllToucanPage/AllToucanPage.js
View file @
409f049f
...
...
@@ -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
}
/
>
...
...
front/src/view/AllToucanPage/ToucanCard.js
View file @
409f049f
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
>
)
}
...
...
front/src/view/PageHeader.js
View file @
409f049f
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
"
}}
>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment