Base générale d'UI

client/src/components/BoardPage/BoardPage.jsx

@@ -1,12 +1,103 @@
 import React from 'react';
 import { Page } from '../Page';
+import { connect } from 'react-redux';
+import Board from '@lourenci/react-kanban';
+import { fetchIssues } from '../../store/actions/issues';
+import { fetchBoards } from '../../store/actions/boards';
+import { buildKanboard, moveCard } from '../../store/actions/kanboards';
 
 export class BoardPage extends React.Component {
+
   render() {
     return (
       <Page>
-
+        <div className="container is-fluid">
+          <div className="kanboard-container is-fullheight">
+            {this.renderBoard()}
+          </div>
+        </div>
       </Page>
     );
   }
-}
+
+  renderBoard() {
+    const { kanboard } = this.props;
+    if (!kanboard) {
+      return <p>Loading</p>
+    }
+    return (
+      <Board disableLaneDrag={true}
+        renderCard={this.renderCard}
+        renderLaneHeader={this.renderLaneHeader}
+        onCardDragEnd={this.onCardDragEnd.bind(this)}>
+        {kanboard}
+      </Board>
+    );
+  }
+
+  renderCard(card) {
+    return (
+      <div className="kanboard-card">
+        <div className="box">
+          <div className="media">
+            <div className="media-content">
+              <div className="content">
+                <h5 className="is-size-5 is-marginless">{card.title}</h5>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderLaneHeader(lane) {
+    return (
+      <h3 className="kanboard-lane-title is-size-3">{lane.title}</h3>
+    )
+  }
+
+  onCardDragEnd(source, dest) {
+    const { board } = this.props;
+    this.props.dispatch(moveCard(
+      board.id,
+      source.fromLaneId,
+      source.fromPosition,
+      dest.toLaneId,
+      dest.toPosition
+    ));
+  }
+
+  componentDidMount() {
+    const { board } = this.props;
+    if (!board) {
+      this.requestBoardsUpdate();
+      return
+    }
+
+    this.requestBuildKanboard();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.board !== this.props.board) this.requestBuildKanboard();
+  }
+
+  requestBoardsUpdate() {
+    this.props.dispatch(fetchBoards());
+  }
+
+  requestBuildKanboard() {
+    const { board } = this.props;
+    if (!board) return;
+    this.props.dispatch(buildKanboard(board));
+  }
+
+}
+
+export const ConnectedBoardPage = connect(function(state, props) {
+  const boardID = props.match.params.id;
+  return {
+    board: state.boards.byID[boardID],
+    kanboard: state.kanboards.byID[boardID]
+  };
+})(BoardPage);