Disable table action links if no samples are seleceted (#305)

* chore: Disable action links if no samples are seleceted * chore: Fixed undefined issue * chore: Made the number of required samples optional for each link * chore: Removed logging statement * chore: Fixed typo and update comments * chore: Updated css class to handle linking action-links * chore: Updated to work with primary buttons * chore: Fixed empty storage value issue * chore: Fixed typo
phac-nml · Nov 15, 2023 · f4fb4b7 · f4fb4b7
1 parent cb280e1
commit f4fb4b7
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 11 deletions.
diff --git a/app/javascript/controllers/action_link_controller.js b/app/javascript/controllers/action_link_controller.js
@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static values = { required: { type: Number, default: 0 } };
+
+  // # indicates private attribute or method
+  // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties
+  #event_classes = ["pointer-events-none", "cursor-not-allowed"];
+
+  #default_colours = ["bg-slate-200", "text-slate-400"];
+
+  #primary_colours = ["bg-primary-200", "text-slate-400", "border-primary-200"];
+
+  setDisabled(count = 0) {
+    if (this.requiredValue > count) {
+      this.element.classList.add(...this.#event_classes);
+      if (this.element.classList.contains("button--state-primary")) {
+        this.element.classList.add(...this.#primary_colours);
+      } else {
+        this.element.classList.add(...this.#default_colours);
+      }
+    } else {
+      this.element.classList.remove(...this.#event_classes);
+      if (this.element.classList.contains("button--state-primary")) {
+        this.element.classList.remove(...this.#primary_colours);
+      } else {
+        this.element.classList.remove(...this.#default_colours);
+      }
+    }
+  }
+}
diff --git a/app/javascript/controllers/selection_controller.js b/app/javascript/controllers/selection_controller.js
@@ -1,20 +1,22 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
+  // # indicates private attribute or method
+  // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties
+
   static targets = ["rowSelection"];
   static values = {
     storageKey: {
       type: String,
-      default: location.protocol + "//" + location.host + location.pathname,
+      default: `${location.protocol}//${location.host}${location.pathname}`,
     },
   };
+  static outlets = ["action-link"];
 
   connect() {
     this.element.setAttribute("data-controller-connected", "true");
 
-    const storageValue = JSON.parse(
-      sessionStorage.getItem(this.storageKeyValue)
-    );
+    const storageValue = this.#getStoredSamples();
 
     if (storageValue) {
       this.rowSelectionTargets.map((row) => {
@@ -27,10 +29,13 @@ export default class extends Controller {
     }
   }
 
+  actionLinkOutletConnected(outlet) {
+    const storageValue = this.#getStoredSamples();
+    outlet.setDisabled(storageValue.length);
+  }
+
   toggle(event) {
-    const newStorageValue = JSON.parse(
-      sessionStorage.getItem(this.storageKeyValue)
-    );
+    const newStorageValue = this.#getStoredSamples();
 
     if (event.target.checked) {
       newStorageValue.push(event.target.value);
@@ -41,6 +46,8 @@ export default class extends Controller {
       }
     }
     this.save(newStorageValue);
+
+    this.#updateActionLinks(newStorageValue.length);
   }
 
   save(storageValue) {
@@ -49,4 +56,14 @@ export default class extends Controller {
       JSON.stringify([...storageValue])
     );
   }
+
+  #getStoredSamples() {
+    return JSON.parse(sessionStorage.getItem(this.storageKeyValue)) || [];
+  }
+
+  #updateActionLinks(count) {
+    this.actionLinkOutlets.forEach((outlet) => {
+      outlet.setDisabled(count);
+    });
+  }
 }
diff --git a/app/views/projects/samples/_table.html.erb b/app/views/projects/samples/_table.html.erb
@@ -2,6 +2,7 @@
   id="samples-table"
   class="min-w-full table-fixed dark:divide-slate-600"
   data-controller="selection"
+  data-selection-action-link-outlet=".action-link"
 >
   <tbody
     class="

diff --git a/app/views/projects/samples/index.html.erb b/app/views/projects/samples/index.html.erb
@@ -6,8 +6,8 @@
   <%= component.with_icon(name: "beaker", classes: "h-14 w-14 text-primary-700") %>
   <%= component.with_buttons do %>
     <div class="flex items-center space-x-2">
-      <%= link_to pipeline_selection_workflow_executions_submissions_path, data: { turbo_frame: "workflow_modal", turbo_stream: true },
-        class: "button button--size-default button--state-default" do %>
+      <%= link_to pipeline_selection_workflow_executions_submissions_path, data: { turbo_frame: "workflow_modal", turbo_stream: true, controller: "action-link", action_link_required_value: 1 },
+        class: "button button--size-default button--state-default action-link" do %>
         <%= viral_icon(name: :rocket_launch, classes: "w-4 h-4 inline-block") %>
         <span class="sr-only"><%= t(:".workflows.button_sr") %></span>
       <% end %>
@@ -16,9 +16,11 @@
         new_namespace_project_samples_transfer_path,
         data: {
           turbo_frame: "transfer_modal",
-          turbo_stream: true
+          turbo_stream: true,
+          controller: "action-link",
+          action_link_required_value: 1
         },
-        class: "button button--size-default button--state-default" %>
+        class: "button button--size-default button--state-default action-link" %>
       <% end %>
       <% if allowed_to?(:create_sample?, @project) %>
         <%= link_to t("projects.samples.index.new_button"),