import React from 'react';
import { Page } from '../Page';
import { connect } from 'react-redux';
import Board from '@lourenci/react-kanban';
import { fetchBoards } from '../../store/actions/boards';
import { createIssue } from '../../store/actions/issues';
import { buildKanboard, moveCard } from '../../store/actions/kanboards';
import { Loader } from '../Loader';
import { IssueCard } from './IssueCard';
import { Modal } from '../Modal';
export class BoardPage extends React.Component {
state = {
newCardModalActive: false,
newCardLaneID: 0,
newCard: {
title: "",
body: "",
project: ""
}
}
constructor(props) {
super(props);
this.renderLaneHeader = this.renderLaneHeader.bind(this);
this.onNewCardClick = this.onNewCardClick.bind(this);
this.onNewCardCloseClick = this.onNewCardCloseClick.bind(this);
this.onNewCardTitleChange = this.onNewCardAttrChange.bind(this, 'title');
this.onNewCardBodyChange = this.onNewCardAttrChange.bind(this, 'body');
this.onNewCardProjectChange = this.onNewCardAttrChange.bind(this, 'project');
this.onNewCardSaveClick = this.onNewCardSaveClick.bind(this);
}
render() {
const { board } = this.props;
return (
{this.renderBoard()}
);
}
renderBoard() {
const { kanboard } = this.props;
if (!kanboard) {
return
}
return (
{kanboard}
{ this.renderNewCardModal() }
);
}
renderNewCardModal() {
const { newCardModalActive, newCardLaneID } = this.state;
const { board } = this.props;
if (!board || !newCardLaneID) return null;
return (
"{board.lanes[newCardLaneID].title}" - Nouveau ticket
)
}
renderCard(card) {
return ;
}
renderLaneHeader(lane) {
return (
)
}
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();
}
onNewCardClick(laneID) {
const { board } = this.props;
this.setState({
newCardModalActive: true,
newCardLaneID: laneID,
newCard: {
title: "",
body: "",
project: board.projects[0],
}
});
}
onNewCardCloseClick() {
this.setState({ newCardModalActive: false });
}
onNewCardAttrChange(attrName, evt) {
const value = evt.target.value;
this.setState(state => {
return {
...state,
newCard: {
...state.newCard,
[attrName]: value,
}
}
})
}
onNewCardSaveClick() {
const { newCard, newCardLaneID } = this.state;
const { board } = this.props;
this.setState({ newCardModalActive: false });
this.props.dispatch(createIssue(
newCard.project,
newCard.title,
newCard.body,
board.lanes[newCardLaneID].issueLabel
));
}
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);