DT-457: Add ability to select all stories in a project

app/assets/javascripts/project.js

@@ -1,29 +1,25 @@
 document.addEventListener("turbolinks:load", function () {
   $("input[name='stories[]']").click(() => {
-    const selected = $("input[name='stories[]']:checked");
-    const is_unlocked = $("#stories").data("unlocked");
-    if (!is_unlocked) {
-      return;
-    }
-
-    if (selected.length > 0) {
-      const ending = selected.length == 1 ? "y" : "ies";
-      $("#bulk_delete")
-        .text(`Bulk Delete (${selected.length} Stor${ending})`)
-        .attr("aria-disabled", "false")
-        .prop("disabled", false);
-    } else {
-      $("#bulk_delete")
-        .text("Bulk Delete")
-        .attr("aria-disabled", "true")
-        .prop("disabled", true);
-    }
+    updateBulkDeleteStatus();
+    updateSelectAllStatus();
   });
 
+
   $(".import-export-header").click(function () {
     $(this).children(".rotate").toggleClass("left");
   });
 
+
+  $("#select_all").click((event) => {
+    let checked = event.target.checked;
+
+    $("input[name='stories[]']").each((_, checkbox) => {
+      checkbox.checked = checked;
+    })
+
+    updateBulkDeleteStatus();
+  })
+
   $("#bulk_delete").click((event) => {
     let stories_ids = [];
     $("input[name='stories[]']:checked").each((_, checkbox) => {
@@ -118,3 +114,40 @@ function toggleCloneSubProjects(value) {
     .querySelectorAll("#sub-projects-to-clone input[type='checkbox']")
     .forEach((el) => (el.checked = value));
 }
+
+function updateBulkDeleteStatus() {
+  const selected = $("input[name='stories[]']:checked");
+    const is_unlocked = $("#stories").data("unlocked");
+    if (!is_unlocked) {
+      return;
+    }
+
+    if (selected.length > 0) {
+      const ending = selected.length == 1 ? "y" : "ies";
+      $("#bulk_delete")
+        .text(`Bulk Delete (${selected.length} Stor${ending})`)
+        .attr("aria-disabled", "false")
+        .prop("disabled", false);
+    } else {
+      $("#bulk_delete")
+        .text("Bulk Delete")
+        .attr("aria-disabled", "true")
+        .prop("disabled", true);
+    }
+}
+
+function updateSelectAllStatus() {
+  const selected = $("input[name='stories[]']:checked");
+  const checkboxes = $("input[name='stories[]']");
+
+  if (selected.length == 0) {
+    $("#select_all")[0].checked = false;
+    $("#select_all")[0].indeterminate = false;
+  } else if (selected.length == checkboxes.length) {
+    $("#select_all")[0].checked = true;
+    $("#select_all")[0].indeterminate = false;
+  } else {
+    $("#select_all")[0].checked = false;
+    $("#select_all")[0].indeterminate = true;
+  }
+}

app/views/projects/show.html.erb

@@ -18,6 +18,10 @@
             <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">
+              <div>
+                <input type="checkbox" name="select_all" id="select_all">
+                <label for="select_all">Select All</label>
+              </div>
               <%= link_unless_archived(@project, "Add a Story", new_project_story_path(@project), classes: "green") if is_unlocked?(@project) %>
               <button id="bulk_delete" class="button magenta" aria-disabled="true" disabled>Bulk Delete</button>
             </th>

spec/features/stories_manage_spec.rb

@@ -68,6 +68,21 @@
     expect(page).to have_content "Story updated!"
   end
 
+  it "allows me to select all stories" do
+    visit project_path(id: project.id)
+    check("Select All")
+
+    expect(page).to have_checked_field(name: "stories[]")
+  end
+
+  it "allows me to unselect all stories" do
+    visit project_path(id: project.id)
+    check("Select All")
+    uncheck("Select All")
+
+    expect(page).to have_unchecked_field(name: "stories[]")
+  end
+
   it "allows me to delete a story" do
     visit project_path(id: project.id)