diff --git a/web/channels/board_channel.ex b/web/channels/board_channel.ex index d149005b..829f2dfd 100644 --- a/web/channels/board_channel.ex +++ b/web/channels/board_channel.ex @@ -206,6 +206,24 @@ defmodule PhoenixTrello.BoardChannel do end end + def handle_in("card:delete", %{"card" => card_params }, socket) do + card = socket.assigns.board + |> assoc(:cards) + |> Repo.get!(card_params["id"]) + + case Repo.delete(card) do + {:ok, _} -> + card = Card + |> Card.preload_all + |> Repo.get(card.id) + + broadcast! socket, "list:updated", %{board: get_current_board(socket)} + {:noreply, socket} + {:error, _changeset} -> + {:reply, {:error, %{error: "Error deleting card"}}, socket} + end + end + def terminate(_reason, socket) do board_id = Board.slug_id(socket.assigns.board) user_id = socket.assigns.current_user.id diff --git a/web/static/css/modules/_modals.sass b/web/static/css/modules/_modals.sass index 61a0c41c..5a812016 100644 --- a/web/static/css/modules/_modals.sass +++ b/web/static/css/modules/_modals.sass @@ -58,6 +58,21 @@ &:hover color: $dark-gray + > .delete + position: absolute + margin-top: 1em + bottom: $base-spacing/2 + line-height: 1em + color: tint($dark-gray, 30) + + &:hover + color: $red + &:after + content: "Delete Card" + padding-left: .5em + animation-duration: .3s + animation-name: fadeIn + .info +span-columns(9) @@ -114,6 +129,7 @@ .form-controls +span-columns(11) + margin-bottom: .5em .comment +clearfix diff --git a/web/static/js/actions/current_board.js b/web/static/js/actions/current_board.js index b8733e77..0176f814 100644 --- a/web/static/js/actions/current_board.js +++ b/web/static/js/actions/current_board.js @@ -70,6 +70,19 @@ const Actions = { }); }); + channel.on('card:delete', (msg) => { + dispatch({ + type: Constants.BOARDS_SET_CURRENT_BOARD, + board: msg.board, + }); + + dispatch({ + type: Constants.CURRENT_CARD_DELETE, + card: msg.card, + }); + + }); + channel.on('list:updated', (msg) => { dispatch({ type: Constants.BOARDS_SET_CURRENT_BOARD, @@ -124,6 +137,12 @@ const Actions = { }; }, + deleteCard: (channel, card) => { + return dispatch => { + channel.push('card:delete', { card: card }); + }; + }, + updateList: (channel, list) => { return dispatch => { channel.push('list:update', { list: list }); diff --git a/web/static/js/components/cards/modal.js b/web/static/js/components/cards/modal.js index 762b08ac..bed56ef0 100644 --- a/web/static/js/components/cards/modal.js +++ b/web/static/js/components/cards/modal.js @@ -24,6 +24,18 @@ export default class CardModal extends React.Component { dispatch(push(`/boards/${boardId}`)); } + _deleteCard(e) { + e.preventDefault(); + const { card, channel, dispatch, boardId } = this.props; + + if (confirm('Are you sure?')) { + dispatch(BoardActions.deleteCard(channel, card)); + dispatch(push(`/boards/${boardId}`)); + } else { + return; + } + } + _renderCommentForm() { const { currentUser } = this.props; @@ -270,6 +282,9 @@ export default class CardModal extends React.Component { + + +
{::this._renderHeader()} {::this._renderCommentForm()} diff --git a/web/static/js/constants/index.js b/web/static/js/constants/index.js index 45ab87d5..e238a6c1 100644 --- a/web/static/js/constants/index.js +++ b/web/static/js/constants/index.js @@ -37,6 +37,7 @@ const Constants = { CURRENT_CARD_RESET: 'CURRENT_CARD_RESET', CURRENT_CARD_SET: 'CURRENT_CARD_SET', CURRENT_CARD_EDIT: 'CURRENT_CARD_EDIT', + CURRENT_CARD_DELETE: 'CURRENT_CARD_DELETE', CURRENT_CARD_SHOW_MEMBERS_SELECTOR: 'CURRENT_CARD_SHOW_MEMBERS_SELECTOR', CURRENT_CARD_SHOW_TAGS_SELECTOR: 'CURRENT_CARD_SHOW_TAGS_SELECTOR',