feature/GH-130: Add action item life duration status

app/controllers/api/action_items_controller.rb

@@ -3,9 +3,11 @@
 module API
   class ActionItemsController < API::ApplicationController
     before_action :set_board, :set_action_item
+    before_action do
+      authorize! @action_item, context: { board: @board }
+    end
 
     def update
-      authorize! @action_item
       if @action_item.update(body: params.permit(:edited_body)[:edited_body])
         render json: { updated_body: @action_item.body }, status: :ok
       else
@@ -14,14 +16,45 @@ def update
     end
 
     def destroy
-      authorize! @action_item
       if @action_item.destroy
         head :no_content
       else
         render json: { error: @action_item.errors.full_messages.join(',') }, status: :bad_request
       end
     end
 
+    def move
+      if @action_item.move!(@board)
+        head :ok
+      else
+        render json: { error: @action_item.errors.full_messages.join(',') }, status: :bad_request
+      end
+    end
+
+    def close
+      if @action_item.close!
+        head :ok
+      else
+        render json: { error: @action_item.errors.full_messages.join(',') }, status: :bad_request
+      end
+    end
+
+    def complete
+      if @action_item.complete!
+        head :ok
+      else
+        render json: { error: @action_item.errors.full_messages.join(',') }, status: :bad_request
+      end
+    end
+
+    def reopen
+      if @action_item.reopen!
+        head :ok
+      else
+        render json: { error: @action_item.errors.full_messages.join(',') }, status: :bad_request
+      end
+    end
+
     private
 
     def set_board

app/controllers/boards/action_items_controller.rb

@@ -2,11 +2,7 @@
 
 module Boards
   class ActionItemsController < Boards::ApplicationController
-    before_action :set_action_item, except: :create
     authorize :board, through: :current_board
-    before_action except: :create do
-      authorize! @action_item
-    end
 
     def create
       action_item = @board.action_items.build(action_item_params)
@@ -18,38 +14,6 @@ def create
       end
     end
 
-    def move
-      if @action_item.move!(@board)
-        redirect_to @board, notice: 'Action Item was successfully moved'
-      else
-        redirect_to @board, alert: @action_item.errors.full_messages.join(', ')
-      end
-    end
-
-    def close
-      if @action_item.close!
-        redirect_to @board, notice: 'Action Item was successfully closed'
-      else
-        redirect_to @board, alert: @action_item.errors.full_messages.join(', ')
-      end
-    end
-
-    def complete
-      if @action_item.complete!
-        redirect_to @board, notice: 'Action Item was successfully completed'
-      else
-        redirect_to @board, alert: @action_item.errors.full_messages.join(', ')
-      end
-    end
-
-    def reopen
-      if @action_item.reopen!
-        redirect_to @board, notice: 'Action Item was successfully reopend'
-      else
-        redirect_to @board, alert: @action_item.errors.full_messages.join(', ')
-      end
-    end
-
     private
 
     def current_board
@@ -59,9 +23,5 @@ def current_board
     def action_item_params
       params.require(:action_item).permit(:status, :body)
     end
-
-    def set_action_item
-      @action_item = ActionItem.find(params[:id])
-    end
   end
 end

app/javascript/components/ActionItem/ActionItem.css

@@ -1,2 +1,9 @@
 .box { margin-bottom: 1.5rem; }
 
+.green_font {color: hsl(141, 71%, 48%)}
+.yellow_font {color: hsl(48, 100%, 67%)}
+.red_font {color: hsl(348, 100%, 61%)}
+
+.green_bg {background-color: hsl(141, 71%, 48%)}
+.yellow_bg {background-color: hsl(48, 100%, 67%)}
+.red_bg {background-color: hsl(348, 100%, 61%)}

app/javascript/components/ActionItem/ActionItemBody/ActionItemBody.css

@@ -1,11 +1,11 @@
-textarea { 
-           overflow: hidden;
-           resize: none;
-           width: 100%;
-           font-size: 1rem;
-           font-weight: 400;
-           line-height: 1.5;           
-           color: hsl(0, 0%, 29%);
-         }
+textarea {
+  overflow: hidden;
+  resize: none;
+  width: 100%;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;           
+  color: hsl(0, 0%, 29%);
+}
 
 .text { overflow-wrap: break-word; }

app/javascript/components/ActionItem/ActionItemFooter/ActionItemFooter.css

@@ -0,0 +1,7 @@
+.fa-chevron-right { 
+  margin-right: -2px;
+  margin-left: -2px;
+  font-size: 16px;
+  stroke: white;
+  stroke-width: 10;
+}

app/javascript/components/ActionItem/ActionItemFooter/index.js

@@ -1,11 +1,14 @@
 import React from "react"
 
+import TransitionButton from "../TransitionButton"
+import "./ActionItemFooter.css"
+
 class ActionItemFooter extends React.Component {
   constructor(props) {
     super(props);
   }
 
-  handleClick = () => {    
+  handleDeleteClick = () => {    
     fetch(`/api/${window.location.pathname}/action_items/${this.props.id}`, {
       method: 'DELETE',
       headers: {
@@ -25,18 +28,67 @@ class ActionItemFooter extends React.Component {
     });
   }
 
+  handleMoveClick = () => {    
+    fetch(`/api/${window.location.pathname}/action_items/${this.props.id}/move`, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector("meta[name='csrf-token']").getAttribute('content')
+      }
+    }).then((result) => {
+      if (result.status == 200) {
+        window.location.reload();
+      }
+      else { throw result }
+    }).catch((error) => {
+      error.json().then( errorHash => {
+        console.log(errorHash.error)
+      })
+    });
+  }
+
+  pickColor(num) {
+    switch(true) {
+      case [1,2].includes(num):
+        return 'green'; 
+      case [3].includes(num):
+        return 'yellow';
+      default:
+        return 'red';
+    }
+  }
+
+  generateChevrons = () => {
+    const times_moved = this.props.times_moved;
+    const icon = <i className={`fas fa-chevron-right ${this.pickColor(times_moved)}_font`}></i>;
+    const chevrons = Array.from({ length: times_moved }, () => icon)
+    return chevrons
+  };
+
   render () {
-    const { deletable } = this.props;
-    const confirmMessage = 'Are you sure you want to delete this ActionItem?';
+    const { id, deletable, movable, transitionable } = this.props;
+    const confirmDeleteMessage = 'Are you sure you want to delete this ActionItem?';
+    const confirmMoveMessage = 'Are you sure you want to move this ActionItem?';
 
     return (
       <div>
         <hr style={{margin: '0.5rem'}}/>
+        <div className='chevrons'>{this.generateChevrons()}</div>
+
+        {transitionable && transitionable.can_close && <TransitionButton id={id} action='close'/>}
+        {transitionable && transitionable.can_complete && <TransitionButton id={id} action='complete'/>}
+        {transitionable && transitionable.can_reopen && <TransitionButton id={id} action='reopen'/>}
+        {movable && <button onClick={() => {window.confirm(confirmMoveMessage) && this.handleMoveClick()}}>
+          move
+        </button>}
+
         <div>
-          <a onClick={() => {window.confirm(confirmMessage) && this.handleClick()}}>
+          {deletable && <a onClick={() => {window.confirm(confirmDeleteMessage) && this.handleDeleteClick()}}>
             delete
-          </a>
+          </a>}
         </div>
+
       </div>
     );
   }

app/javascript/components/ActionItem/TransitionButton/index.js

@@ -0,0 +1,38 @@
+import React from "react"
+
+class TransitionButton extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  handleClick = () => {    
+    fetch(`/api/${window.location.pathname}/action_items/${this.props.id}/${this.props.action}`, {
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'X-CSRF-Token': document.querySelector("meta[name='csrf-token']").getAttribute('content')
+      }
+    }).then((result) => {
+      if (result.status == 200) {
+        window.location.reload();
+      }
+      else { throw result }
+    }).catch((error) => {
+      error.json().then( errorHash => {
+        console.log(errorHash.error)
+      })
+    });
+  }
+
+  render () {
+    return (
+      <button onClick={() => {this.handleClick()}}>
+        {this.props.action}
+      </button>
+    );
+  }
+}
+
+export default TransitionButton

app/javascript/components/ActionItem/index.js

@@ -13,16 +13,34 @@ class ActionItem extends React.Component {
   hideActionItem = () => {
     this.setState({ActionItemStyle: {display: 'none'}});
   }
+
+  pickColor = () => {
+    switch(this.props.status) {
+      case 'done':
+        return 'green'; 
+      case 'closed':
+        return 'red';
+      default:
+        return null;
+    }
+  }
 
   render () {
-    const { id, body, deletable, editable } = this.props;
+    const { id, body, times_moved, deletable, editable, movable, transitionable } = this.props;
+    const footerNotEmpty = deletable || movable || transitionable || (times_moved != 0);
 
     return (
-      <div className='box' style={this.state.ActionItemStyle}>
+      <div className={`box ${this.pickColor()}_bg`} style={this.state.ActionItemStyle}>
         <ActionItemBody id={id} 
-                  editable={editable}
-                  body={body}/>
-        {deletable && <ActionItemFooter id={id} hideActionItem={this.hideActionItem}/>}
+                        editable={editable}
+                        body={body}/>
+        {footerNotEmpty && <ActionItemFooter id={id} 
+                                             deletable={deletable}
+                                             times_moved={times_moved} 
+                                             movable={movable}
+                                             transitionable={transitionable}
+                                             hideActionItem={this.hideActionItem}
+                                             paintActionItem={this.paintActionItem}/>}
       </div>
     );
   }

app/javascript/components/Card/Card.css

@@ -4,4 +4,3 @@
   width: 1.5rem;
   border-radius: 1rem;
 }
-

app/javascript/components/Card/CardBody/CardBody.css

@@ -1,11 +1,11 @@
 textarea { 
-           overflow: hidden;
-           resize: none;
-           width: 100%;
-           font-size: 1rem;
-           font-weight: 400;
-           line-height: 1.5;           
-           color: hsl(0, 0%, 29%);
-         }
+  overflow: hidden;
+  resize: none;
+  width: 100%;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;           
+  color: hsl(0, 0%, 29%);
+}
 
 .text { overflow-wrap: break-word; }

app/models/action_item.rb

@@ -28,6 +28,7 @@ class ActionItem < ApplicationRecord
 
   def move!(board)
     self.board_id = board.id
+    increment(:times_moved)
     save
   end
 end

app/policies/api/action_item_policy.rb

@@ -2,6 +2,8 @@
 
 module API
   class ActionItemPolicy < ApplicationPolicy
+    authorize :board, allow_nil: true
+
     def update?
       check?(:user_is_creator?)
     end
@@ -10,8 +12,24 @@ def destroy?
       check?(:user_is_creator?)
     end
 
+    def move?
+      check?(:user_is_creator?) && record.pending?
+    end
+
+    def close?
+      check?(:user_is_creator?) && record.may_close?
+    end
+
+    def complete?
+      check?(:user_is_creator?) && record.may_complete?
+    end
+
+    def reopen?
+      check?(:user_is_creator?) && record.may_reopen?
+    end
+
     def user_is_creator?
-      record.board.creator?(user)
+      board ? board.creator?(user) : record.board.creator?(user)
     end
   end
 end