List projet + list request

frontend/src/components/ProjectList.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import ProjectTile from './ProjectTile'
+
+export default ({ projects, withRequest }) => (
+    <div className="tile is-parent is-vertical">
+        {
+            projects.map(project => (
+                <ProjectTile key={project.id} project={project} withRequest={withRequest} />
+            ))
+        }
+    </div>
+)

frontend/src/components/ProjectTile.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import RequestList from './RequestList'
+
+export default ({ project, withRequest }) => (
+    <article className="tile is-child notification is-primary">
+          <p className="title">{project.name}</p>
+          {
+              withRequest && <RequestList requests={project.requests || []} />
+          }
+    </article>
+)

frontend/src/components/RequestList.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import RequestTile from './RequestTile'
+
+export default ({ requests }) => (
+    <div className="tile is-parent is-vertical">
+        {
+            requests.map(request => (
+                <RequestTile key={request.id} request={request} />
+            ))
+        }
+    </div>
+)

frontend/src/components/RequestTile.css

@@ -0,0 +1,19 @@
+.request-status-en-attente {
+    background-color: orange !important;
+}
+
+.request-status-pris-en-compte {
+    background-color: palevioletred !important;
+}
+
+.request-status-en-cours-de-traitement {
+    background-color: greenyellow !important;
+}
+
+.request-status-traite {
+    background-color: green !important;
+}
+
+.request-status-clos {
+    background-color: black !important;
+}

frontend/src/components/RequestTile.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import styles from './RequestTile.css'
+import { Link } from 'react-router-dom'
+
+export default ({ request }) => (
+    <Link to={`dashboard-client/detail-demande/${request.id}`}>
+        <article className={`tile is-child notification request-status-${request.status.slug}`}>
+            <p className="title">{request.title}</p>
+            <div className="content">
+                <span>{request.author}</span> || <span>{request.createdAt}</span>
+            </div>
+        </article>
+    </Link>
+)