diff --git a/front/package.json b/front/package.json
index cbf87b5b0cf12a4ab5860a1ae078de5655da21ac..308235de5ff023f36cf39d49fbf9e4c9b92807e1 100644
--- a/front/package.json
+++ b/front/package.json
@@ -7,6 +7,7 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0",
+ "semantic-ui-calendar-react": "^0.15.0",
"semantic-ui-react": "^0.86.0"
},
"scripts": {
diff --git a/front/src/App.js b/front/src/App.js
index 0869940ce0b8d384f954f7fd2878bec8b0fc7bea..0a672274513386d8cac48c18679308bcc402a7e8 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -1,11 +1,18 @@
import React from 'react';
-import ToucanTable from './ToucanTable'
+import {Segment} from 'semantic-ui-react';
+import ToucanTable from './ToucanTable';
+import FormToucan from './FormToucan'
import './App.css';
function App() {
return (
- <div className="App">
- <ToucanTable></ToucanTable>
+ <div>
+ <Segment padded style={{margin:"3%"}}>
+ <FormToucan />
+ </Segment>
+ <Segment textAlign="center" padded style={{margin:"3%"}}>
+ <ToucanTable/>
+ </Segment>
</div>
);
}
diff --git a/front/src/FormToucan.js b/front/src/FormToucan.js
new file mode 100644
index 0000000000000000000000000000000000000000..65edda6796aac9cf26d31f0335f071d4ca5e553b
--- /dev/null
+++ b/front/src/FormToucan.js
@@ -0,0 +1,108 @@
+import React, {Component} from 'react'
+import {Form, Message} from 'semantic-ui-react'
+import {DateInput} from 'semantic-ui-calendar-react'
+
+
+class FormToucan extends Component {
+
+ constructor(props) {
+ super(props)
+ this.state = {
+ title: null,
+ titleError: false,
+
+ toucan: null,
+
+ cover: null,
+
+ date: null,
+ }
+ }
+
+ onTitleChange = (e,{value}) => {
+ if(/^[a-zA-Z0-9áàâäãåçéèêëíìîïñóòôöõúùûüýÿæœÁÀÂÄÃÅÇÉÈÊËÍÌÎÏÑÓÒÔÖÕÚÙÛÜÝŸÆŒ._\s'-]{1,60}$/.test(value)) {
+ //Si le nom passe la regex du back
+ this.setState({title: value, titleError: false})
+ } else {
+ this.setState({title: value, titleError: true})
+ }
+ }
+
+ onToucanChange = (e) => {
+ console.log(e.target);
+ const file = e.target.files[0];
+
+ if (file.type === 'application/pdf') { // Si on a bien un pdf
+ this.setState({toucan: file, toucanError: false})
+ } else {
+ this.setState({toucan: file, toucanError: true})
+ }
+
+ }
+
+ onFileChange = (e) =>{
+ const file = e.target.files[0]
+ const name = e.target.name
+ this.setState({[name]: file})
+ }
+
+ onSubmit = () => {
+ console.log(this.state)
+ }
+
+ render() {
+
+ const errorMessage = [];
+ if (this.state.titleError) {
+ errorMessage.push("Le thème doit faire entre 1 et 60 caractères, les caractères spéciaux ($ € { } [ ] ... ) ne sont pas autorisés")
+ }
+ const formError= errorMessage.length !== 0; //Le formulaire a une erreur si errorMessage a au moins 1 erreure
+
+ return (
+ <Form error={formError} onSubmit={this.onSubmit}>
+ <Form.Input
+ type="text"
+ label="Thème Toucan"
+ placeholder="Thème"
+ name="title"
+ onChange={this.onTitleChange}
+ value={this.state.title}
+ error={this.state.titleError}
+ //required
+ />
+
+ <Form.Input
+ label="PDF du Toucan"
+ onChange={this.onFileChange}
+ name="toucan"
+ accept="application/pdf"
+ type="file"
+ //required
+ />
+
+ <Form.Input
+ label="Cover du Toucan"
+ onChange={this.onFileChange}
+ name="cover"
+ type="file"
+ accept="image/png, image/jpeg"
+ //required
+ />
+ <DateInput
+ label="Date"
+ //required
+ />
+
+ <Message error header="Formulaire incomplet" content={
+ <ul>
+ {errorMessage.map((err) => {return <li>{err}</li>})}
+ </ul>
+ } />
+
+ <Form.Button disabled={formError} content="C'est parti !" />
+ </Form>
+ )
+ }
+
+}
+export default FormToucan
\ No newline at end of file
diff --git a/front/yarn.lock b/front/yarn.lock
index 0ebf7493ffb4414c03d0e2603edcd6f466f440a2..0509569010bea2cb3602d40835f38c25289ac4f6 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -5681,7 +5681,7 @@ jsx-ast-utils@^2.0.1:
dependencies:
array-includes "^3.0.3"
-keyboard-key@^1.0.4:
+keyboard-key@^1.0.2, keyboard-key@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/keyboard-key/-/keyboard-key-1.0.4.tgz#52d8fa07b7e17757072aa22a67fb4ae85e4c46b0"
integrity sha512-my04dE6BCwPpwoe4KYKfPxWiwgDYQOHrVmtzn1CfzmoEsGG/ef4oZGaXCzi1+iFhG7CN5JkOuxmei5OABY8/ag==
@@ -6162,6 +6162,11 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@
dependencies:
minimist "0.0.8"
+moment@^2.22.2:
+ version "2.24.0"
+ resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+ integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -8393,6 +8398,16 @@ selfsigned@^1.9.1:
dependencies:
node-forge "0.7.5"
+semantic-ui-calendar-react@^0.15.0:
+ version "0.15.0"
+ resolved "https://registry.yarnpkg.com/semantic-ui-calendar-react/-/semantic-ui-calendar-react-0.15.0.tgz#1294eed17304e3428b4c39fa5a3deb85db85c22c"
+ integrity sha512-AG+XrUrpPFwc1/dYgtVnoGZgaOw5ijJiegZuhBnYsyiWux4FITvJXnUsuHyZz4qyjcrVt0tMzNAMutJesVeG1Q==
+ dependencies:
+ keyboard-key "^1.0.2"
+ lodash "^4.17.10"
+ moment "^2.22.2"
+ prop-types "^15.6.2"
+
semantic-ui-react@^0.86.0:
version "0.86.0"
resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.86.0.tgz#f3c6a27250f2e9e07a975d0a3399ffd3a48861b5"