wpetit/gengitkan
1
0
Fork 0
Code Issues 17 Pull Requests 1 Releases Wiki Activity

Allow board delete via UI

Browse Source 
ref #16
This commit is contained in:
wpetit
2019-12-13 13:28:59 +01:00
parent 1dedda7d50
commit 860ee438fc
12 changed files with 117 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/App.jsx
View File

@ -16,7 +16,6 @@ export class App extends React.Component {
<Route path="/boards/new" exact component={EditBoardPage} />
<Route path="/boards/:id" exact component={BoardPage} />
<Route path="/boards/:id/edit" exact component={EditBoardPage} />
<Route path="/boards/:id/delete" exact component={BoardPage} />
<Route path="/logout" exact component={() => {
window.location = "/logout";
return null;

46
client/src/components/BoardPage/EditBoardPage.jsx
View File

@ -2,16 +2,17 @@ import React from 'react';
import { Page } from '../Page';
import { connect } from 'react-redux';
import { selectFlagsIsLoading } from '../../store/selectors/flags';
import { fetchBoards, saveBoard } from '../../store/actions/boards';
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: uuidv4(),
id: "",
title: "",
description: "",
projects: [],
@ -42,6 +43,7 @@ export class EditBoardPage extends React.Component {
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() {
@ -50,7 +52,9 @@ export class EditBoardPage extends React.Component {
if (isLoading) {
return (
<p>Loading...</p>
<Page>
<Loader></Loader>
</Page>
)
};
@ -59,11 +63,27 @@ export class EditBoardPage extends React.Component {
<div className="container is-fluid has-margin-top-normal">
<div className="columns">
<div className="column is-6 is-offset-3">
{
board.id ?
<h3 className="is-size-3">Éditer le tableau</h3> :
<h3 className="is-size-3">Nouveau tableau</h3>
}
<div className="level is-mobile">
<div className="level-left">
{
board.id ?
<h3 className="is-size-3 level-item">Éditer le tableau</h3> :
<h3 className="is-size-3 level-item">Nouveau tableau</h3>
}
</div>
<div className="level-right">
{
board.id ?
<button onClick={this.onDeleteBoardClick} className="level-item button is-danger">
<span className="icon">
<i className="fas fa-trash"></i>
</span>
<span>Supprimer</span>
</button> :
null
}
</div>
</div>
<div className="field">
<label className="label">Titre</label>
<div className="control">
@ -366,8 +386,16 @@ export class EditBoardPage extends React.Component {
}
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(saveBoard(board));
this.props.dispatch(deleteBoard(board.id));
this.props.history.push('/');
}

5
client/src/components/HomePage/BoardCard.jsx
View File

@ -26,11 +26,6 @@ export class BoardCard extends React.PureComponent {
<i className="fas fa-edit" aria-hidden="true"></i>
</span>
</a>
<a className="level-item" aria-label="delete" href={`#/boards/${board.id}/delete`}>
<span className="icon is-small has-text-danger">
<i className="fas fa-trash-alt" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>

8
client/src/store/actions/boards.js
View File

@ -12,4 +12,12 @@ export const SAVE_BOARD_FAILURE = "SAVE_BOARD_FAILURE";
export function saveBoard(board) {
return { type: SAVE_BOARD_REQUEST, board };
};
export const DELETE_BOARD_REQUEST = "DELETE_BOARD_REQUEST";
export const DELETE_BOARD_SUCCESS = "DELETE_BOARD_SUCCESS";
export const DELETE_BOARD_FAILURE = "DELETE_BOARD_FAILURE";
export function deleteBoard(id) {
return { type: DELETE_BOARD_REQUEST, id };
};

5
client/src/store/reducers/boards.js
View File

@ -16,12 +16,13 @@ export function boardsReducer(state = defaultState, action) {
}
function handleSaveBoardSuccess(state, action) {
const { board } = action;
return {
...state,
byID: {
...state.byID,
[action.board.id.toString()]: {
...action.board,
[board.id]: {
...board,
}
}
};

16
client/src/store/sagas/boards.js
View File

@ -1,5 +1,5 @@
import { put, call } from 'redux-saga/effects';
import { FETCH_BOARDS_SUCCESS, SAVE_BOARD_SUCCESS, SAVE_BOARD_FAILURE, FETCH_BOARDS_FAILURE } from '../actions/boards';
import { FETCH_BOARDS_SUCCESS, SAVE_BOARD_SUCCESS, SAVE_BOARD_FAILURE, FETCH_BOARDS_FAILURE, DELETE_BOARD_FAILURE, DELETE_BOARD_SUCCESS } from '../actions/boards';
import { api } from '../../util/api';
export function* fetchBoardsSaga() {
@ -27,3 +27,17 @@ export function* saveBoardSaga(action) {
yield put({ type: SAVE_BOARD_SUCCESS, board });
}
export function* deleteBoardSaga(action) {
let { id } = action;
try {
board = yield call(api.deleteBoard, id)
} catch(error) {
yield put({ type: DELETE_BOARD_FAILURE, error });
return
}
yield put({ type: DELETE_BOARD_SUCCESS, id });
}

5
client/src/store/sagas/root.js
View File

@ -1,7 +1,7 @@
import { all, takeEvery, takeLatest } from 'redux-saga/effects';
import { failuresSaga } from './failure';
import { FETCH_BOARDS_REQUEST, SAVE_BOARD_REQUEST } from '../actions/boards';
import { fetchBoardsSaga, saveBoardSaga } from './boards';
import { FETCH_BOARDS_REQUEST, SAVE_BOARD_REQUEST, DELETE_BOARD_REQUEST } from '../actions/boards';
import { fetchBoardsSaga, saveBoardSaga, deleteBoardSaga } from './boards';
import { FETCH_ISSUES_REQUEST, ADD_LABEL_REQUEST, REMOVE_LABEL_REQUEST, CREATE_ISSUE_REQUEST, CREATE_ISSUE_SUCCESS } from '../actions/issues';
import { fetchIssuesSaga, addLabelSaga, removeLabelSaga, createIssueSaga } from './issues';
import { FETCH_PROJECTS_REQUEST } from '../actions/projects';
@ -17,6 +17,7 @@ export function* rootSaga() {
takeLatest(FETCH_BOARDS_REQUEST, fetchBoardsSaga),
takeLatest(BUILD_KANBOARD_REQUEST, buildKanboardSaga),
takeLatest(SAVE_BOARD_REQUEST, saveBoardSaga),
takeLatest(DELETE_BOARD_REQUEST, deleteBoardSaga),
takeLatest(FETCH_ISSUES_REQUEST, fetchIssuesSaga),
takeLatest(FETCH_PROJECTS_REQUEST, fetchProjectsSaga),
takeEvery(MOVE_CARD, moveCardSaga),

6
client/src/util/api.js
View File

@ -13,6 +13,12 @@ export class APIClient {
;
}
deleteBoard(id) {
return fetch(`/api/boards/${id}`, {
method: 'DELETE'
});
}
fetchBoards() {
return fetch(`/api/boards`)
.then(res => res.json())