[ROAD 534] Add state to stories (#309)

* Add nokogiri for apple silicon * Add `approved` field to the stories table * Add `pending` method with specs * Add `update_story` controller action * Add frontend * Use path helper instead of url * Change button color with approval status * Use enums for story status * Use remote: true for status button and refactor routes * Add appropriate specs and modify existing ones to the new changes * Move story related css to appropriate file * Change back to headless firefox * Refactor routes * Apply suggestions from code review Co-authored-by: Juan Vásquez <[email protected]> * Add status grid-area in scss * Refactor label update logic * Move status field to last position * Remove Rejected as an option on story creation * Add specs to test status selection on story creation * Replace `row` for query selector --------- Co-authored-by: Ariel Juodziukynas <[email protected]> Co-authored-by: Juan Vásquez <[email protected]>
fastruby · Oct 12, 2023 · 76d3e74 · 76d3e74
1 parent eaecfb4
commit 76d3e74
Show file tree

Hide file tree

Showing 20 changed files with 261 additions and 27 deletions.
diff --git a/app/assets/javascripts/stories.js b/app/assets/javascripts/stories.js
@@ -26,3 +26,20 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
+
+function updateStatusButton(color, status) {
+  const button = document.querySelector(".story-title .dropdown-wrapper > button");
+  button.className = `button ${color}`;
+
+  const span = button.querySelector("span");
+  span.textContent = status;
+
+  document.querySelector(":focus").blur();
+}
+
+function updateStatusLabel(status, storyId) {
+  let row = document.getElementById(`story_${storyId}`)
+  status_label = row.querySelector(".status > .story-status-badge")
+  status_label.textContent = status
+  status_label.classList.value = `story-status-badge ${status}`
+}
diff --git a/app/assets/stylesheets/3-atoms/_badges.scss b/app/assets/stylesheets/3-atoms/_badges.scss
@@ -23,3 +23,29 @@
     background-color: #57ce81;
   }
 }
+
+.story-status-badge {
+  display: inline-block;
+  padding: 7px 15px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 20px;
+  font-size: 11px;
+  background-color: $orange;
+
+  &.approved {
+    background-color: $green;
+    border-color: #1d4ed8;
+    color: $white;
+  }
+
+  &.rejected {
+    background-color: $magenta;
+    border-color: #d77e72;
+    color: $white;
+  }
+
+}
diff --git a/app/assets/stylesheets/4-molecules/_tables.scss b/app/assets/stylesheets/4-molecules/_tables.scss
@@ -11,7 +11,7 @@
   }
   .project-table__row {
     display: grid;
-    grid-template-columns: 1fr 70px 70px 260px;
+    grid-template-columns: 1fr 100px 70px 70px 260px;
     align-items: center;
     padding: 10px 0;
     &.project-table__row--reports {

diff --git a/app/assets/stylesheets/stories.scss b/app/assets/stylesheets/stories.scss
@@ -10,10 +10,12 @@
   word-break: break-all;
 }
 
-.story-description, .extra-info, .story_preview {
+.story-description,
+.extra-info,
+.story_preview {
   margin-bottom: 25px;
   font-size: 15px;
-  p{
+  p {
     margin-top: 1em;
   }
   em {
@@ -55,7 +57,6 @@
   margin-bottom: 1.5em;
 }
 
-
 .modal p {
   padding-bottom: 1.3em;
 }
@@ -72,6 +73,7 @@
     "title preview"
     "description preview"
     "extra extra-preview"
+    "status ."
     "submit .";
   grid-template-columns: repeat(2, minmax(50%, 1fr));
   grid-column-gap: 10px;
@@ -94,6 +96,10 @@
     &.story_extra_info {
       grid-area: extra;
     }
+
+    &.story_status {
+      grid-area: status;
+    }
   }
 
   .story_preview {
@@ -104,7 +110,8 @@
     grid-area: extra-preview;
   }
 
-  .extra_info_preview .content, .story_preview .content {
+  .extra_info_preview .content,
+  .story_preview .content {
     overflow: auto;
     max-height: min(50vh, 700px);
     // prevent long links from overflowing
@@ -131,6 +138,12 @@
   padding: 5px;
 }
 
+.story-title {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .comments-section {
   margin: 16px 0;
 

diff --git a/app/controllers/stories_controller.rb b/app/controllers/stories_controller.rb
@@ -1,8 +1,8 @@
 require "csv"
 class StoriesController < ApplicationController
   before_action :authenticate_user!
-  before_action :find_project, except: [:bulk_destroy, :render_markdown, :edit, :update, :destroy, :show, :move]
-  before_action :find_story, only: [:edit, :update, :destroy, :show, :move]
+  before_action :find_project, except: [:bulk_destroy, :render_markdown, :edit, :update, :destroy, :show, :move, :approve, :reject, :pending]
+  before_action :find_story, only: [:edit, :update, :destroy, :show, :move, :approve, :reject, :pending]
   before_action :validate_url_product_id, only: [:edit, :update, :destroy, :show, :move]
   before_action :ensure_unarchived!, except: [:show, :bulk_destroy, :render_markdown, :move]
 
@@ -127,6 +127,27 @@ def move
     redirect_to @project
   end
 
+  def approve
+    @story.approved!
+    respond_to do |format|
+      format.js { render "shared/update_status" }
+    end
+  end
+
+  def reject
+    @story.rejected!
+    respond_to do |format|
+      format.js { render "shared/update_status" }
+    end
+  end
+
+  def pending
+    @story.pending!
+    respond_to do |format|
+      format.js { render "shared/update_status" }
+    end
+  end
+
   private
 
   def find_project
@@ -143,7 +164,7 @@ def validate_url_product_id
   end
 
   def stories_params
-    params.require(:story).permit(:title, :description, :extra_info, :project_id)
+    params.require(:story).permit(:title, :description, :extra_info, :project_id, :status)
   end
 
   def expected_csv_headers?(file)

diff --git a/app/helpers/stories_helper.rb b/app/helpers/stories_helper.rb
@@ -1,2 +1,18 @@
 module StoriesHelper
+  def status_label(story)
+    "<span class='story-status-badge #{story.status}'>#{story.status}</span>".html_safe
+  end
+
+  def status_color(story)
+    return "green" if @story.approved?
+    return "magenta" if @story.rejected?
+
+    "orange"
+  end
+
+  def options_for_status_select(story, action)
+    return options_for_select({"Pending" => "pending", "Approved" => "approved"}, selected: story.status) if action == "new"
+
+    options_for_select({"Pending" => "pending", "Approved" => "approved", "Rejected" => "rejected"}, selected: story.status)
+  end
 end
diff --git a/app/models/story.rb b/app/models/story.rb
@@ -8,6 +8,8 @@ class Story < ApplicationRecord
 
   before_create :add_position
 
+  enum :status, [:pending, :approved, :rejected]
+
   scope :by_position, -> { order("stories.position ASC NULLS FIRST, stories.created_at ASC") }
 
   def best_estimate_average

diff --git a/app/views/estimates/_update_row.js.erb b/app/views/estimates/_update_row.js.erb
@@ -1,7 +1,7 @@
-let row = document.getElementById("story_<%= estimate.story_id %>")
-row.children[1].innerText = "<%= j(estimate.best_case_points.to_s) %>"
-row.children[2].innerText = "<%= j(estimate.worst_case_points.to_s) %>"
+updateStatusLabel("<%= estimate.story.status %>", "<%= estimate.story_id %>")
 
-let totals_row = document.querySelector('.project-table tfoot tr')
-totals_row.children[1].innerText = "<%= j @project.best_estimate_sum_per_user(current_user) %>"
-totals_row.children[2].innerText = "<%= j @project.worst_estimate_sum_per_user(current_user) %>"
+document.getElementById("best_estimate_<%= estimate.story_id %>").innerText = "<%= j(estimate.best_case_points.to_s) %>"
+document.getElementById("worst_estimate_<%= estimate.story_id %>").innerText = "<%= j(estimate.worst_case_points.to_s) %>"
+
+document.querySelector('.project-table tfoot tr > .best_estimates_total').innerText = "<%= j @project.best_estimate_sum_per_user(current_user) %>"
+document.querySelector('.project-table tfoot tr > .worst_estimates_total').innerText = "<%= j @project.worst_estimate_sum_per_user(current_user) %>"
diff --git a/app/views/estimates/create.js.erb b/app/views/estimates/create.js.erb
@@ -1,11 +1,11 @@
 (function(){
   <% if @estimate.persisted? %>
     <%= render partial: 'update_row', locals: {estimate: @estimate} %>
-    const addEstimate = row.querySelector('.add-estimate')
+    const addEstimate = document.getElementById("story_<%= @estimate.story_id %>").querySelector('.add-estimate')
     addEstimate.insertAdjacentHTML('afterend', "<%= j(link_to 'Edit Estimate', edit_project_story_estimate_path(@project.id, @estimate.story, @estimate.id), class: "button edit-estimate", remote: true) %>")
     addEstimate.remove()
     closeModal()
   <% else %>
     updateModal("New estimate", "<%= j(render partial: 'modal_body') %>")
   <% end %>
-})()
+})()
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
@@ -14,6 +14,7 @@
         <thead class="table-header fixed-header">
           <tr class="project-table__row project-table__row--header">
             <th class="project-table__cell">Story Title</th>
+            <th class="project-table__cell">Status</th>
             <th class="project-table__cell">Best<br />Estimate</th>
             <th class="project-table__cell">Worst<br />Estimate</th>
             <th class="project-table__cell story_actions">
@@ -25,14 +26,15 @@
         <tbody id="stories" data-url="<%= sort_stories_project_path(@project.id) %>" data-unlocked="<%= is_unlocked?(@project) %>">
           <% if @stories.present? %>
             <% @stories.each do | story | %>
-              <tr class="project-table__row project-table__row--story" id="<%= dom_id(story)%>" >
+              <tr class="project-table__row project-table__row--story" id="<%= dom_id(story)%>" data-status="<%= story.status %>">
                 <td class="project-table__cell">
                   <span class="popup">Copied to clipboard</span>
                   <input type="checkbox" name="stories[]" value="<%= story.id %>">
                   <%= link_to "#{story.id} - #{story.title}", [story.project, story] %>
                 </td>
-                <td class="project-table__cell"><%= story.estimate_for(current_user)&.best_case_points %></td>
-                <td class="project-table__cell"><%= story.estimate_for(current_user)&.worst_case_points %></td>
+                <td class="project-table__cell status"><%= status_label(story) %></td>
+                <td class="project-table__cell" id="best_estimate_<%= story.id %>"><%= story.estimate_for(current_user)&.best_case_points %></td>
+                <td class="project-table__cell" id="worst_estimate_<%= story.id %>"><%= story.estimate_for(current_user)&.worst_case_points %></td>
                 <td class="project-table__cell story_actions">
                 <% if is_unlocked?(@project) %>
                   <% if estimated(story) %>
@@ -81,8 +83,9 @@
         <tfoot>
           <tr class="project-table__row project-table__row--footer">
             <td class="project-table__cell">Total estimates</td>
-            <td class="project-table__cell"><%= @project.best_estimate_sum_per_user(current_user) %></td>
-            <td class="project-table__cell"><%= @project.worst_estimate_sum_per_user(current_user) %></td>
+            <td class="project-table__cell"></td>
+            <td class="project-table__cell best_estimates_total"><%= @project.best_estimate_sum_per_user(current_user) %></td>
+            <td class="project-table__cell worst_estimates_total"><%= @project.worst_estimate_sum_per_user(current_user) %></td>
             <td class="project-table__cell"></td>
           </tr>
         </tfoot>

diff --git a/app/views/shared/_story.html.erb b/app/views/shared/_story.html.erb
@@ -1,4 +1,17 @@
-<h4 class="word-break">Story #<%= story.id %>: <%= story.title %></h4>
+<div class="story-title">
+  <h4 class="word-break">Story #<%= story.id %>: <%= story.title %></h4>
+  <div class="dropdown-wrapper">
+    <button class="button <%= status_color(story) %>">
+      <span><%= story.status %></span>
+      <i class="fa fa-solid fa-caret-down"></i>
+    </button>
+    <div class="dropdown">
+      <%= button_to "Approve", approve_story_path(@story), class: "status-selector", method: :patch, remote: true %>
+      <%= button_to "Reject", reject_story_path(@story), class: "status-selector", method: :patch, remote: true %>
+      <%= button_to "Pending", pending_story_path(@story), class: "status-selector", method: :patch, remote: true %>
+    </div>
+  </div>
+</div>
 
 <div class="story-description">
   <%= markdown(story.description) %>

diff --git a/app/views/shared/update_status.js.erb b/app/views/shared/update_status.js.erb
@@ -0,0 +1,2 @@
+updateStatusButton("<%= status_color(@story) %>", "<%= @story.status %>");
+updateStatusLabel("<%= @story.status %>", "<%= @story.id %>")
diff --git a/app/views/stories/_form.html.erb b/app/views/stories/_form.html.erb
@@ -38,6 +38,11 @@
     <div class="content"><%= markdown(@story.extra_info) %></div>
   </div>
 
+  <div class="field story_status">
+    <%= f.label :status, "Status" %>
+    <%= f.select :status, options_for_status_select(@story, action_name), class: "project-story-approved" %>
+  </div>
+
 
   <div class="btn-group">
     <%= f.submit yield(:button_text), class: "button green", id: "edit" %>

diff --git a/config/routes.rb b/config/routes.rb
@@ -11,9 +11,17 @@
   get "home/index"
   get "reports/index"
 
-  resource :stories do
-    post :bulk_destroy, to: "stories#bulk_destroy"
-    post :render_markdown
+  resources :stories do
+    member do
+      patch :approve
+      patch :reject
+      patch :pending
+    end
+
+    collection do
+      post :bulk_destroy, to: "stories#bulk_destroy"
+      post :render_markdown
+    end
   end
 
   resources :projects do

diff --git a/db/migrate/20230829001347_add_status_to_stories.rb b/db/migrate/20230829001347_add_status_to_stories.rb
@@ -0,0 +1,5 @@
+class AddStatusToStories < ActiveRecord::Migration[7.0]
+  def change
+    add_column :stories, :status, :integer, default: 0
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
@@ -52,6 +52,7 @@
     t.integer "position"
     t.integer "real_score"
     t.string "extra_info"
+    t.integer "status", default: 0
   end
 
   create_table "users", force: :cascade do |t|

diff --git a/spec/controllers/stories_controller_spec.rb b/spec/controllers/stories_controller_spec.rb
@@ -145,6 +145,33 @@
       end
     end
 
+    describe "#approve" do
+      it "updates the story status to approved" do
+        patch :approve, params: {id: story.id}, format: :js
+
+        expect(story.reload.status).to eq("approved")
+        expect(response).to render_template("shared/update_status")
+      end
+    end
+
+    describe "#reject" do
+      it "updates the story status to rejected" do
+        patch :reject, params: {id: story.id}, format: :js
+
+        expect(story.reload.status).to eq("rejected")
+        expect(response).to render_template("shared/update_status")
+      end
+    end
+
+    describe "#pending" do
+      it "updates the story status to pending" do
+        patch :pending, params: {id: story.id}, format: :js
+
+        expect(story.reload.status).to eq("pending")
+        expect(response).to render_template("shared/update_status")
+      end
+    end
+
     describe "#export" do
       it "exports a CSV file" do
         get :export, params: {project_id: project.id}