Adds Select All checkbox and functionality

Author: torresga

app/assets/javascripts/project.js

@@ -1,29 +1,24 @@
 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();
   });
 
+
   $(".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 +113,24 @@ 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);
+    }
+}

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>