Fix confirmation dialog

phac-nml · Jun 6, 2024 · 7b57e6d · 7b57e6d
1 parent 946f63f
commit 7b57e6d
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 14 deletions.
diff --git a/app/javascript/controllers/projects/samples/multiple_delete_listing_controller.js b/app/javascript/controllers/projects/samples/multiple_delete_listing_controller.js
@@ -2,9 +2,23 @@ import { Controller } from "@hotwired/stimulus";
 
 // creates a table listing all selected metadata for deletion
 export default class extends Controller {
-  static targets = ["tableBody"];
+  static targets = ["tableBody", "description"];
+
+  static values = {
+    storageKey: {
+      type: String,
+      default: location.protocol + "//" + location.host + location.pathname,
+    },
+    singular: {
+      type: String
+    },
+    plural: {
+      type: String
+    }
+  }
 
   connect() {
+    console.log(this.singularValue)
     const body = document.getElementById("samples-table");
 
     for (let row of body.rows) {
@@ -26,5 +40,15 @@ export default class extends Controller {
         }
       }
     }
+    const storageValues = JSON.parse(
+      sessionStorage.getItem(this.storageKeyValue)
+    )
+    if (storageValues) {
+      if (storageValues.length == 1) {
+        this.descriptionTarget.innerHTML = this.singularValue
+      } else {
+        this.descriptionTarget.innerHTML = this.pluralValue.replace("COUNT_PLACEHOLDER", storageValues.length)
+      }
+    }
   }
 }
diff --git a/app/views/projects/samples/_delete_multiple_samples_dialog.html.erb b/app/views/projects/samples/_delete_multiple_samples_dialog.html.erb
@@ -4,32 +4,40 @@
 
     <%= turbo_frame_tag("deletion-alert") %>
 
-    <div class="mb-4 font-normal text-slate-500 dark:text-slate-400 overflow-x-visible">
-      <p class="mb-4"><%= t(".description") %></p>
+    <div
+      data-controller="projects--samples--multiple-delete-listing"
+      data-projects--samples--multiple-delete-listing-singular-value="<%= t(".description.singular") %>"
+      data-projects--samples--multiple-delete-listing-plural-value="<%= t(".description.plural") %>"
+      class="mb-4 font-normal text-slate-500 dark:text-slate-400 overflow-x-visible">
+      <p
+      class="mb-4"
+      data-projects--samples--multiple-delete-listing-target="description">
+        <%= t(".description.zero") %>
+      </p>
       <%= form_for(:deletion, url: destroy_multiple_namespace_project_samples_path, method: :delete) do |form| %>
         <div
           data-controller="sessionstorage-amend-form"
           data-sessionstorage-amend-form-storage-key-value=<%=namespace_project_samples_url%>
           data-sessionstorage-amend-form-target="field"
           data-sessionstorage-amend-form-field-name-value="multiple_deletion[sample_ids][]"
         />
-        <div data-controller="projects--samples--multiple-delete-listing">
+        <div class="overflow-y-auto max-h-80 mb-4">
           <table class="w-full text-sm text-left text-slate-500 dark:text-slate-400 mb-4">
-            <thead class="text-slate-700 bg-slate-50 dark:bg-slate-700 dark:text-slate-400">
+            <thead class="text-slate-700 bg-slate-50 dark:bg-slate-700 dark:text-slate-400 sticky top-0 z-10">
               <tr>
                 <th class="px-6 py-4"><%= t(".id") %></th>
                 <th class="px-6 py-4"><%= t(".name") %></th>
               </tr>
             </thead>
             <tbody data-projects--samples--multiple-delete-listing-target="tableBody"></tbody>
           </table>
-          <div>
-            <%= form.submit t(".submit_button"),
-                        class: "button button--size-default button--state-destructive",
-                        data: {
-                          action: "click->sessionstorage-amend-form#clear"
-                        } %>
-          </div>
+        </div>
+        <div>
+          <%= form.submit t(".submit_button"),
+                      class: "button button--size-default button--state-destructive",
+                      data: {
+                        action: "click->sessionstorage-amend-form#clear"
+                      } %>
         </div>
       <% end %>
     </div>

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -1299,7 +1299,10 @@ en:
         apply: Apply filter
         remove_tag: Remove
       delete_multiple_samples_dialog:
-          description: "Samples selected for deletion:"
+          description:
+            zero: No samples have been selected for deletion
+            singular: 1 sample has been selected for deletion
+            plural: COUNT_PLACEHOLDER samples have been selected for deletion
           id: ID
           name: Name
           submit_button: Confirm

diff --git a/test/system/projects/samples_test.rb b/test/system/projects/samples_test.rb
@@ -2040,7 +2040,9 @@ def retrieve_puids
       click_link I18n.t('projects.samples.index.delete_samples_button'), match: :first
       within('span[data-controller-connected="true"] dialog') do
         assert_text I18n.t('projects.samples.delete_multiple_samples_dialog.title')
-        assert_text I18n.t('projects.samples.delete_multiple_samples_dialog.description')
+        assert_text I18n.t(
+          'projects.samples.delete_multiple_samples_dialog.description.plural'
+        ).gsub! 'COUNT_PLACEHOLDER', '3'
         assert_text @sample1.name
         assert_text @sample2.name
         assert_text @sample3.name