Feature/add card deletion

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

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

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 });

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 {
               <a className="close" href="#" onClick={::this._closeModal}>
                 <i className="fa fa-close"/>
               </a>
+              <a className="delete" href="#" onClick={::this._deleteCard}>
+                <i className="fa fa-trash-o"/>
+              </a>
               <div className="info">
                 {::this._renderHeader()}
                 {::this._renderCommentForm()}

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',