fix: Add multi-select toggle also in activities page. Make JS controller compatible also in this view.

This commit is contained in:
Alessio Cappa
2025-12-13 13:43:21 +01:00
parent 4a39f65987
commit 2cfd431554
6 changed files with 31 additions and 13 deletions

View File

@@ -4,9 +4,12 @@
<div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-secondary">
<div class="flex pl-0.5 items-center gap-4">
<%= check_box_tag "#{date}_entries_selection",
class: ["checkbox checkbox--light", "hidden": entries.size == 0],
class: ["checkbox checkbox--light hidden lg:block", "lg:hidden": entries.size == 0],
id: "selection_entry_#{date}",
data: { action: "bulk-select#toggleGroupSelection" } %>
data: {
action: "bulk-select#toggleGroupSelection",
checkbox_toggle_target: "selectionEntry"
} %>
<p class="uppercase space-x-1.5">
<%= tag.span I18n.l(date, format: :long) %>

View File

@@ -1,5 +1,5 @@
<%= turbo_frame_tag dom_id(account, "entries") do %>
<div class="bg-container p-5 shadow-border-xs rounded-xl">
<div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="checkbox-toggle">
<div class="flex items-center justify-between mb-4" data-testid="activity-menu">
<%= tag.h2 t("accounts.show.activity.title"), class: "font-medium text-lg" %>
@@ -46,8 +46,17 @@
"data-auto-submit-form-target": "auto" %>
</div>
</div>
</div>
<% end %>
<%= button_tag type: "button",
id: "toggle-checkboxes-button",
class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover",
data: {
action: "click->checkbox-toggle#toggle",
checkbox_toggle_target: "toggleButton"
} do %>
<%= helpers.icon("list-todo") %>
<% end %>
</div>
</div>
<% if activity_dates.empty? %>
@@ -66,8 +75,11 @@
<div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
<div class="pl-0.5 col-span-8 flex items-center gap-4">
<%= check_box_tag "selection_entry",
class: "checkbox checkbox--light",
data: { action: "bulk-select#togglePageSelection" } %>
class: "checkbox checkbox--light hidden lg:block",
data: {
action: "bulk-select#togglePageSelection",
checkbox_toggle_target: "selectionEntry"
} %>
<%= tag.p t("accounts.show.activity.date") %>
</div>

View File

@@ -15,7 +15,7 @@ export default class extends Controller {
})
if (!shouldShow) {
const bulkSelectElement = this.element.closest("[data-controller~='bulk-select']");
const bulkSelectElement = document.querySelector("[data-controller~='bulk-select']");
if (bulkSelectElement) {
const bulkSelectController = this.application.getControllerForElementAndIdentifier(
bulkSelectElement,

View File

@@ -55,7 +55,7 @@
<% else %>
<%= tag.div id: dom_id(@account, "entries_bulk_select"),
data: {
controller: "bulk-select",
controller: "bulk-select checkbox-toggle",
bulk_select_singular_label_value: t(".entry"),
bulk_select_plural_label_value: t(".entries")
} do %>
@@ -66,8 +66,11 @@
<div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
<div class="pl-0.5 col-span-8 flex items-center gap-4">
<%= check_box_tag "selection_entry",
class: "checkbox checkbox--light",
data: { action: "bulk-select#togglePageSelection" } %>
class: "checkbox checkbox--light checkbox checkbox--light hidden lg:block",
data: {
action: "bulk-select#togglePageSelection",
checkbox_toggle_target: "selectionEntry"
} %>
<p><%= t(".date") %></p>
</div>
<%= tag.p t(".amount"), class: "col-span-2 justify-self-end" %>

View File

@@ -1,4 +1,4 @@
<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-container-inset border-primary shadow-border-xs px-4 text-sm text-primary w-[420px] py-1.5">
<div class="fixed bottom-30 md:bottom-6 z-10 flex items-center justify-between rounded-xl bg-container-inset border-primary shadow-border-xs px-4 text-sm text-primary md:w-[420px] w-[90%] py-1.5">
<div class="flex items-center gap-2">
<%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--light", data: { action: "bulk-select#deselectAll" } %>

View File

@@ -10,8 +10,8 @@
<div class="p-4 grid grid-cols-12 items-center text-primary text-sm font-medium">
<div class="col-span-8 flex items-center gap-4">
<%= check_box_tag dom_id(entry, "selection"),
class: "checkbox checkbox--light",
data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
class: "checkbox checkbox--light hidden lg:block",
data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection", checkbox_toggle_target: "selectionEntry" } %>
<div class="flex items-center gap-3">
<%= render DS::FilledIcon.new(icon: icon, size: "sm", hex_color: color, rounded: true) %>