Le tableau existe

b6e0560e · Damien · 48127150 · b6e0560e · b6e0560e · b6e0560e
Commit b6e0560e authored 6 years ago by Damien
--- a/front/package.json
+++ b/front/package.json
@@ -2,10 +2,12 @@
  "name": "front",
  "version": "0.1.0",
  "private": true,
+  "proxy": "http://localhost:8000/",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
-    "react-scripts": "3.0.0"
+    "react-scripts": "3.0.0",
+    "semantic-ui-react": "^0.86.0"
  },
  "scripts": {
    "start": "react-scripts start",

--- a/front/public/index.html
+++ b/front/public/index.html
@@ -3,6 +3,10 @@
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link
+  rel="stylesheet"
+  href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
+/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--

--- a/front/src/App.css
+++ b/front/src/App.css
@@ -9,14 +9,12 @@
 }

 .App-header {
-  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
-  color: white;
 }

 .App-link {

--- a/front/src/App.js
+++ b/front/src/App.js
 import React from 'react';
-import logo from './logo.svg';
+import ToucanTable from './ToucanTable'
 import './App.css';

 function App() {
  return (
    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <ToucanTable></ToucanTable>
    </div>
  );
 }

--- a/front/src/ToucanLine.js
+++ b/front/src/ToucanLine.js
+import React, {Component} from 'react'
+import {Table, Image, Button} from 'semantic-ui-react'
+
+class ToucanLine extends Component {
+    mois = ["janvier", "février", "mars", "avril", "mai", "juin","juillet","août","septembre","octobre","novembre","décembre"]
+    date(time){
+        const dateObject = new Date(time)
+        const year = dateObject.getFullYear();
+        const month = dateObject.getMonth();
+        const day = dateObject.getDay();
+        return (`${day+1}/${month+1}/${year}`)
+    }
+
+    render(){
+        return (
+            <Table.Row>
+                <Table.Cell >
+                    {console.log(this.props.toucan["_id"])}
+                    <a href={`http://localhost:8000/toucan/pdf/${this.props.toucan["_id"]}`}>
+                    <img
+                    src={`/toucan/img/${this.props.toucan["_id"]}`}
+                    style={{width: "50px"}}
+                    alt="cover"
+                    />
+                    </a>
+                </Table.Cell>
+                <Table.Cell  >
+                    {this.props.toucan.title}
+                </Table.Cell>
+                <Table.Cell  >
+                    {this.date(this.props.toucan.date)}
+                </Table.Cell>
+                <Table.Cell style={{width:"fit-content"}}>
+                    <Button negative icon="cancel"/>
+                </Table.Cell>
+            </Table.Row>
+        )
+    }
+}
+
+export default ToucanLine
\ No newline at end of file
--- a/front/src/ToucanTable.js
+++ b/front/src/ToucanTable.js
+import React, {Component} from 'react'
+import {Table} from 'semantic-ui-react'
+import ToucanLine from './ToucanLine'
+
+class ToucanTable extends Component{
+    constructor(){
+        super();
+        this.state = {
+            toucans: [],
+        }
+    }
+
+    componentDidMount(){
+        fetch('/toucan/toucans')
+        .then(result => {
+            result.json()
+            .then(toucans => {
+                this.setState({toucans})
+            })
+        })
+    }
+
+    render() {
+        return(
+            <Table 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
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -782,7 +782,7 @@
  dependencies:
    regenerator-runtime "^0.13.2"

-"@babel/runtime@^7.4.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2":
  version "7.4.4"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
  integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
@@ -1021,6 +1021,14 @@
  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==

+"@semantic-ui-react/event-stack@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@semantic-ui-react/event-stack/-/event-stack-3.1.0.tgz#aadbe4a28b0dd7703c5f451640d0fefe66dd9208"
+  integrity sha512-WHtU9wutZByZtFZxzj4BVEk+rvWldZpZhRcyv6d84+XLSolm83zLHYJLTACGuSl6Xa/xpgVXquvm9GyMudkJYg==
+  dependencies:
+    exenv "^1.2.2"
+    prop-types "^15.6.2"
+
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
@@ -2345,6 +2353,11 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -3650,6 +3663,11 @@ execa@^1.0.0:
    signal-exit "^3.0.0"
    strip-eof "^1.0.0"

+exenv@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exit@^0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -5663,6 +5681,11 @@ jsx-ast-utils@^2.0.1:
  dependencies:
    array-includes "^3.0.3"

+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==
+
 killable@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -7832,7 +7855,7 @@ react-dev-utils@^9.0.0:
    strip-ansi "5.2.0"
    text-table "0.2.0"

-react-dom@16.8.6:
+react-dom@^16.8.6:
  version "16.8.6"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
  integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -7847,7 +7870,7 @@ react-error-overlay@^5.1.5:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.5.tgz#884530fd055476c764eaa8ab13b8ecf1f57bbf2c"
  integrity sha512-O9JRum1Zq/qCPFH5qVEvDDrVun8Jv9vbHtZXCR1EuRj9sKg1xJTlHxBzU6AkCzpvxRLuiY4OKImy3cDLQ+UTdg==

-react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
  version "16.8.6"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
@@ -7910,7 +7933,7 @@ react-scripts@3.0.0:
  optionalDependencies:
    fsevents "2.0.6"

-react@16.8.6:
+react@^16.8.6:
  version "16.8.6"
  resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
  integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -8370,6 +8393,20 @@ selfsigned@^1.9.1:
  dependencies:
    node-forge "0.7.5"

+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"
+  integrity sha512-t/psK15zX9bEaezpRDwoXAZovp+I083SgsicAnMig/mxqaRI2FHZpr/G+lfzizrTpmYjgi4/Th6/QAol8pa7JQ==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    "@semantic-ui-react/event-stack" "^3.1.0"
+    classnames "^2.2.6"
+    keyboard-key "^1.0.4"
+    lodash "^4.17.11"
+    prop-types "^15.6.2"
+    react-is "^16.7.0"
+    shallowequal "^1.1.0"
+
 "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
  version "5.7.0"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
@@ -8494,6 +8531,11 @@ shallow-clone@^1.0.0:
    kind-of "^5.0.0"
    mixin-object "^2.0.1"

+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"