import React from 'react';
import { Page } from '../Page';
import { connect } from 'react-redux';
import { selectFlagsIsLoading } from '../../store/selectors/flags';
import { fetchBoards, saveBoard, deleteBoard } from '../../store/actions/boards';
import { fetchProjects } from '../../store/actions/projects';
import uuidv4 from 'uuid/v4';
import { Loader } from '../Loader';
export class EditBoardPage extends React.Component {
state = {
edited: false,
board: {
id: "",
title: "",
description: "",
projects: [],
lanes: []
},
}
static getDerivedStateFromProps(props, state) {
const { board, isLoading } = props;
if (isLoading || !board || state.edited) return state;
return {
edited: false,
board: {
id: board.id,
title: board.title,
description: board.description,
projects: [ ...board.projects ],
lanes: [ ...board.lanes.map(l => ({ ...l })) ]
}
};
}
constructor(props) {
super(props);
this.onBoardTitleChange = this.onBoardAttrChange.bind(this, 'title');
this.onBoardDescriptionChange = this.onBoardAttrChange.bind(this, 'description');
this.onBoardLaneTitleChange = this.onBoardLaneAttrChange.bind(this, 'title');
this.onBoardLaneIssueLabelChange = this.onBoardLaneAttrChange.bind(this, 'issueLabel');
this.onDeleteBoardClick = this.onDeleteBoardClick.bind(this);
}
render() {
const { isLoading } = this.props;
const { board } = this.state;
if (isLoading) {
return (
)
};
return (
{
board.id ?
Éditer le tableau
:
Nouveau tableau
}
{
board.id ?
:
null
}
{ this.renderProjectSelect() }
{ this.renderLanesSection() }
);
}
renderProjectSelect() {
const { projects } = this.props;
const { board } = this.state;
const projectSelectField = (projectIndex, value, withDeleteAddon) => {
return (
{
withDeleteAddon ?
:
null
}
);
}
return (
{
board.projects.map((p, i) => {
return projectSelectField(i, p, true);
})
}
{ projectSelectField(board.projects.length, '', false) }
)
}
renderLanesSection() {
const { board } = this.state;
const laneSection = (laneIndex, lane) => {
return (
);
};
const lanes = board.lanes.map((l, i) => laneSection(i, l))
return (
{ lanes }
)
}
onBoardLaneAdd() {
this.setState(state => {
const lanes = [
...state.board.lanes,
{ id: uuidv4(), title: "", issueLabel: "" }
];
return {
...state,
edited: true,
board: {
...state.board,
lanes
}
}
});
}
onBoardProjectDelete(projectIndex) {
this.setState(state => {
const projects = [ ...state.board.projects ]
projects.splice(projectIndex, 1);
return {
...state,
edited: true,
board: {
...state.board,
projects
}
}
});
}
onBoardLaneMove(laneIndex, direction) {
this.setState(state => {
const lanes = [ ...state.board.lanes ];
const nextLaneIndex = laneIndex+direction;
if (nextLaneIndex < 0 || nextLaneIndex >= lanes.length) {
return state;
}
const l = lanes[laneIndex];
lanes.splice(laneIndex, 1);
lanes.splice(nextLaneIndex, 0, l);
return {
...state,
edited: true,
board: {
...state.board,
lanes
}
}
});
}
onBoardLaneDelete(laneIndex) {
this.setState(state => {
const lanes = [ ...state.board.lanes ]
lanes.splice(laneIndex, 1);
return {
...state,
edited: true,
board: {
...state.board,
lanes
}
}
});
}
onBoardProjectChange(projectIndex, evt) {
const value = evt.target.value;
this.setState(state => {
const projects = [ ...state.board.projects ];
projects[projectIndex] = value;
return {
...state,
edited: true,
board: {
...state.board,
projects
}
}
});
}
onBoardAttrChange(attrName, evt) {
const value = evt.target.value;
this.setState(state => {
return {
...state,
edited: true,
board: {
...state.board,
[attrName]: value,
}
}
});
}
onBoardLaneAttrChange(attrName, laneIndex, evt) {
const value = evt.target.value;
this.setState(state => {
const lanes = [ ...state.board.lanes ];
lanes[laneIndex] = {
...state.board.lanes[laneIndex],
[attrName]: value
};
return {
...state,
edited: true,
board: {
...state.board,
lanes
}
}
});
}
onSaveBoardClick() {
let { board } = this.state;
board = { ...board };
if (!board.id) board.id = uuidv4();
this.props.dispatch(saveBoard({...board}));
this.props.history.push('/');
}
onDeleteBoardClick() {
const { board } = this.state;
this.props.dispatch(deleteBoard(board.id));
this.props.history.push('/');
}
componentDidMount() {
this.props.dispatch(fetchBoards());
this.props.dispatch(fetchProjects());
}
}
export const ConnectedEditBoardPage = connect(function(state, props) {
const boardID = props.match.params.id;
const board = boardID ? state.boards.byID[boardID] : null;
const projects = Object.keys(state.projects.byName).sort();
const isLoading = selectFlagsIsLoading(state, 'FETCH_BOARDS', 'FETCH_PROJECTS');
return { board, isLoading, projects };
})(EditBoardPage);